元素居中显示方法总结
块级元素居中显示
在body中的某个元素(box1)
.box1 {
margin: 0 auto;
}
通过绝对定位在父容器里居中垂直显示
方法一：
.box1 {
position: absolute;
top: 0;
right: 0;
...[2020/11/16]
标准盒模型和怪异(ie)盒模型的对比
盒模型（英语：box moldel），是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型。
在c 中块级盒子模型也有两种，分别是标准盒模型和IE浏览器的怪异盒模型。默认为标准盒模型（box-sizing:content-box），使用box-...[2020/11/16]
CSS3变形透视动画-3 -cyy
perspective透视规则与函数不同应用体验：
perspective加在父元素和加在子元素的区别：
加在父元素上是整体观察所有子元素，加在子元素上是独立观察子元素；
perspective规则和transform:perspective()函数的区别：
persp...[2020/11/16]
css3 transition过渡效果 -cyy
c 3过渡使用场景分析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>...[2020/11/16]
pc端兼容IE9及以上版本 IE浏览器兼容
最近业务部门反映我们商城的兼容性不是很好，尤其是在IE浏览器上，经过调研，我们决定对IE9及以上版本的IE内核浏览器进行主流程测试，发现有哪些功能在IE9上不兼容
一、CSS兼容性
1.如下图所示使用了Button标签，在IE浏览器或者是IE内核的浏览器按钮文字却没有显示。F12看下...[2020/11/16]
css3 animation动画，你会用了吗？ -cyycss3 animation动画，你会用了吗？ -cyy
animation关键帧使用介绍：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</tit...[2020/11/16]
css3 animation动画，你会用了吗？-2 -cyy
延迟属性与帧延迟效果对比：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title&g...[2020/11/16]
清晰的CSS 3媒体查询响应式布局，bootstrap 框架原理实战
媒体设备类型使用详解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>...[2020/11/16]
div 内元素的垂直居中div 内元素的垂直居中
小主今天偷点懒利用上班时间整理一下 div 内元素的居中（不论垂直还是水平通用）问题的解决方法：
本文的中心是利用 c 中的 display属性；通常的方便的是使用 Flex/Grid 属性，今天就在介绍一种更方便的方法通过使用
display:table-cell;
...[2020/11/16]
未来的CSS3布局方式 ，GRID 栅格系统 -cyy
声明栅格系统的容器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wi...[2020/11/10]
未来的CSS3布局方式 ，GRID 栅格系统-2 -cyy
重复栅格的命名技巧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wi...[2020/11/10]
z-index属性详解
z-index属性详解
目录z-index属性详解一.定义和用法二.代码三.效果图
一.定义和用法
z-index属性指定一个元素的堆叠顺序,也就是z轴
position属性定义的是x轴和y轴
z-index属性必须应用到position: relative|absolute|fix...[2020/11/10]
HTML&CSS课程之图像与链接使用技巧
常用格式：jpeg=jpg png gif
比较大的图片推荐使用jpg格式，ps导出成web格式，建议选择品质80，或者不低于60
PNG无损压缩，图片会较大。多用于透明底的小图标
如果字体库里有图标，优先选择字体图标；如果没有的话，就选择png、
gif 动画特性
...[2020/11/9]
从小变大的照片
<head>
<style>
* {
padding: 0;
margin: 0;
}
ul{
list-style: none...[2020/11/9]
表单与列表在HTML与CSS中是这么玩的 -cyy
表单应用场景实例：
<form action="1.php" method="POST">
<fieldset>
<legend>cyy表单</legend>
&l...[2020/11/9]
多媒体与表格实战 -cyy
表格的基本使用：
<table border="1">
<caption>这是表格</caption>
<thead>
<tr>
...[2020/11/9]
css3引用方式_样式组件设计与导入技巧_vscode添加LESS支持 -cyy
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。
一、行内样式（不建议这种混排的）
使用style属性引入CSS样式。
二、内部样式表（不建议这种混排的） 在style标签中书写CSS代码。style标签写在head标签中。
三、外部样式表 CSS代码保存在扩展名为.c...[2020/11/9]
玩透 CSS 3 选择器，网页元素任意操作 -cyy
标签选择器：（范围比较大）
* 通配符选择器，全部选择器
h1,h2,p,div... 标签选择器
类与ID选择器：
.cla 类选择器
#id ID选择器
注意：ID选择器是唯一的，范围比较小，个人不建议使用id来定义样式，建议使用cla
&n...[2020/11/9]
CSS浮动
浮动定位指：
将元素排除在普通流之外
元素将不再页面中占据空间
将浮动元素放置在包含框的左边或者右边
浮动元素依旧位于包含框之内
浮动的框可以向左或者向右移动直到他的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会重叠
浮动元素...[2020/11/9]
elementUI的现成框架, 缺少样式, el-image样式没有, 已解决 - CN-无忧elementUI的现成框架, 缺少样式, el-image样式没有, 已解决 - CN-无忧
原文链接:https: www.cnblogs.com/zizaiwuyou/p/13936063.html
前端时间要做一个上传并预览图片的功能, 前端用的库是elementUI, 有图片的控件el-image, 但是我预览的时候遇到一个问题
官方的预览效果如下:
...[2020/11/9]
简易双色球dome分享
代码如下：
<style type="text/c ">
div {font-weight: bold;text-align: center;}
.tone{width: 30px;height:30px;border: 2px solid #ff5151;borde...[2020/11/9]
首尾元素伪类选择_伪类选择唯一子元素_根据元素编号灵活选择_元素尾部伪类选择_not排除选择器_通过表单伪类创建个性化表单_文本伪类 -cyy
首尾元素伪类选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="widt...[2020/11/9]
CSS3 盒子模型全面掌握 -cyy
元素居中定义与外边距定义：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=...[2020/11/9]
CSS 3 背景与渐变应用技巧 -cyyCSS 3 背景与渐变应用技巧 -cyy
背景颜色与裁切使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wi...[2020/11/9]
使用 CSS 3 操作数据内容样式 -cyy
使用c 定制表格：
.table{
display:table; /*相当于table*/
section{
&:nth-of-type(1){
display:table-header-group; /*相当于the...[2020/11/9]
CSS 3 浮动布局，深度挖掘 -cyyCSS 3 浮动布局，深度挖掘 -cyy
文档流与浮动空间丢失：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="w...[2020/11/9]
CSS 3 浮动布局，深度挖掘-2 -cyy
环绕距离控制：
<!DOCTYPE html>
<html>
<head>
<title>c </title>
<style type="text/c ">
p{
border:2px s...[2020/11/9]
轻松掌握 CSS 3 定位布局特性 -cyy
通过定位设置尺寸：
当元素没有设置宽度和高度时，定位会影响元素的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta na...[2020/11/9]
CSS3 FLEX 弹性盒模型让布局飞起来 -cyyCSS3 FLEX 弹性盒模型让布局飞起来 -cyy
弹性布局初体验：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="widt...[2020/11/9]
CSS3 FLEX 弹性盒模型让布局飞起来-2 -cyy
布局小米移动端页面结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="...[2020/11/9]
python day 22 CSS拾遗之箭头，目录，图标
目录
day 4 learn html
1. CSS拾遗之图标
2. html文件的目录结构
3. CSS拾遗之a包含标签
4. CSS拾遗之箭头画法
...[2019/11/15]
day 46
目录
CSS样式操作
给字体设置长宽
字体颜色
语义
背景图片
边框
display
盒子模型
浮动(**...[2019/11/15]
前端之css（二）
目录
CSS属性相关
宽和高
字体属性
文本颜色
文本字体
字体大小
字体粗细
文字属性
...[2019/11/15]
CSS定位
定位
将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
定位模式
定位模式决定了元素的定位方式，它通过c 的position属性来设置，其值可以分为四个：
...[2019/11/15]
如何在HTML中设置字体颜色，你知道这几种方式吗？
color设置字体颜色
在color设置字体颜色之前，我们首先了解color在CSS中有几种取值方式，一共有4种方式，若有不全还请在评论区告知谢谢，4种方式如下：
十六进制、十进制、 英文单词、十六进制的缩写。
现在让我们进入字体颜色实践，笔者以嵌入式的形式，将cla 属性值为.box中...[2019/11/15]
CSS设置文本的水平对齐方向
介绍
在CSS中text-align属性有3种值，如下：left左、center中、right右。
由于简单我就不再多的介绍了直接进入text-align属性实践了，如果大家是新手自己一定要去实践哈，运行结果图就不进行展示了，大家自己动动手哈。
左代码块
<!DOCTY...[2019/11/15]
HTML连载50-伪元素选择器、清除浮动方式五 - 心悦君兮君不知-睿
一、伪元素选择器
1.什么是伪元素选择器
伪元素选择器作用给指定标签的内容前面添加一个子元素，或者给指定标签的内容后面添加一个子元素。
2.格式：
标签名称::before{
属性名称：值；
}
给指定标签的内容前...[2019/11/15]
HTML不换行，多余用省略号代替
最主要的c 样式：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
例子：
1 <!DOCTYPE html>
2 <html lang="en">...[2019/11/15]
2D变形CSS3 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform transform 变换 变形的意思 《 transformers ...[2019/11/14]
3D变形 CSS3 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)
2d x y
3d x y z
左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图
CSS3中的3D坐标系与上述的3D坐标...[2019/11/14]
CSS揭秘-半透明边框与多重边框
场景一：
实现半透明边框：
由于CSS样式的默认行为，背景色的渲染范围是 content+padding+border。
半透明边框被主调色影响, 实现的效果为
解决方案：
使用background-clip 属性规定背景的绘制区域,使得绘制区域仅限制...[2019/11/14]
CSS3 新增选择器
CSS3 新增选择器
结构(位置)伪类选择器（CSS3)
:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
:n...[2019/11/14]
day 45
目录
form表单(**************)
参数
action
method
select标签 下拉框
textarea标签
...[2019/11/14]
<深圳千锋学习>day01
2019.11.11 深圳千锋H5前端学习笔记
原文链接：http: www.cnblogs.com/haccer/p/11853065.html[2019/11/14]
JavaWeb第二天--CSS
CSS
CSS简述
CSS是什么？有什么作用？
CSS(Cascading Style Sheets)：层叠样式表。
CSS通常称为CSS样式或层叠样式表。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽度、边框样式、边距等）以及版式的布局等外观显示...[2019/11/14]
前端之css（一）
目录
什么是c
注释
CSS三种引入方式
基本选择器
元素选择器
id选择器
类选择器
通用选择器
...[2019/11/14]
CSS尺寸样式属性
尺寸样式属性介绍
属性
值
含义
height
auto：自动，浏览器会自动计算高度length：使用px定义高度%：基于包含它的块级对象的百分比高度
设置元素高度
width
同上
设置元素的宽度
height属性和width属性
接下来让我们进入height...[2019/11/14]
HTML连载49-清除浮动的第三种方式（内外墙法） - 心悦君兮君不知-睿
一、清除浮动的第三种方式
1.隔墙法有两种?如下：外墙法和内墙法?。?
2.外墙法
（1）在两个盒子中间添加一个额外的块级元素
（2）给这个额外添加的块级元素设置：clear:both;属性
注意点：外墙法可以让第二个盒子使用margin-top属性
但是不能让第一个盒子使用...[2019/11/14]
rem与em的使用和区别详解【转】
目录
最大的问题是
主要区别
?rem 单位如何转换为像素值
?em 单位如何转换为像素值
Em 单位的遗传效果
Em 继承的例子
...[2019/11/13]
css实现流程导航效果(三种方法)_CSS教程_CSS
c 实现流程导航效果，具体内容如下所示：
::tip 使用纯c 线上 流程导航效果。 本文统一采取 flex 布局 ,你也可以采用其他布局实现，核心原理不变 :::
## 方法一 利用裁剪 该方法IE下不支持
利用裁剪 cl...[2019/11/13]
经验首页