font-weight
作用:设置文字是否加粗显示。
属性名:font-weight，属于 font 属性的一个单一属性。
属性值有两种方式:单词类型、数字类型。
单词类型
normal 默认值，定义标准字体
bold 定义粗体字符
bolder 定义更粗的字体
lighter 定义更细的字体
数字类型
100-900 之间的整百数字。 数字越大，文字显示越粗。
其中 400 等价于 normal，700 等价于 bold。
font-style
作用:设置文字是否斜体显示。
属性名:font-style，属于 font 属性的一个单一属性。
属性值: 单词。
normal：设置正规的字体
italic：设置斜体的文字
oblique：设置倾斜的文字
line-height
作用:设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
属性名:line-height，属于 font 属性的一个单一属性。
属性值
px像素值：设置的行高的具体像素值
百分比数值： 设置的本身字号像素值的百分比
font
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。
写法1
font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序。
font: 14px "consolas","arial";
写法2
font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔。
font: 14px/28px "consolas","arial";
写法3
如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互 换位置。后面的字号、行高、字体不能更改位置。
font:italic bold 14px/28px "consolas","arial";
text-align
作用:设置文本水平方向的对齐。
在盒子中，不论文本是单行还是多行，都会对应方向对齐。
属性值:三个方向的单词
left:居左对齐，大部分标签默认值
center：居中对齐
right：居右对齐
text-decoration
作用:设置文本整体是否有线条的修饰效果。
属性值
none：没有修饰，大部分标签的默认值
overline：上划线
line-through：中划线，删除线，<de1>标签的默认值
underline：下划线，<a>标签的默认值
text-indent
作用:设置段落首行是否进行缩进。
属性值
px单位:表示首行缩进多少像素
em单位：首行缩进几个中文字符的位置
百分比：表示缩进文字所在标签的父级标签的width属性值的百分比
实际工作中，最常使用 em 为单位的属性值。 属性值区分正负，正数表示向右缩进，负数表示向左缩进。
width
作用:设置可以添加元素内容的区域的宽度。
属性值
auto：默认值，浏览器可计算出时机的宽度。
px：像素值定义的宽度。
%：定义参考父元素宽度width的百分比宽度。
特殊应用
如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其 特点自动计算出实际宽度，例如 <div> 元素等独占一行的，其 width 属性的值会自 动撑满父元素的 width 区域，如果是 <span> 元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度。
height
作用:设置可以添加元素内容的区域的高度。
属性值
auto：默认值，浏览器可计算出时机的高度。
px：像素值定义的高度。
%：定义参考父元素高度height的百分比高度。
特殊应用
如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际 高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。
padding
作用:设置的是元素的边框内部到宽高区域之间的距离。
特点:可以去加载背景，不能书写嵌套的内容。
属性值:常用px 为单位的数值。
padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性。
单一属性
设置四个属性值，分配方向上、右、下、左。
padding:10px 20px 30px 40px;
边框 border
作用:设置的是内边距外面的边界区域，作为盒子的实体化的最外层。 属性值:由三个值组成，分为线的宽度、线的形状、线的颜色 。
border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。
border:10px solid #f00;
外边距 margin
作用:设置的是盒子与盒子之间的距离。
特点:不能渲染背景。
属性值:常用 px 为单位的数值。 外边距的设置方式与内边距 padding 一模一样的。
margin:10px 20px 30px 40px;
overflow 属性
设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。
可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。
visible:默认值，可见的可视的，溢出部分显示的内容。
hidden：溢出部分直接隐藏，隐藏超过边框范围的内容。
scroll：溢出的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出、水平和垂直方向都会出现滚动条。
auto：自动的，如果没有溢出就正常显示，如果有溢出、溢出的方向自动出现滚动条。
文本水平居中
水平居中:text-align属性。
不论单行或多行都可以设置。
text-align:center;
文本垂直居中
单行文本垂直居中:让文字行高 line-height 等于盒子高度 height。
多行文本垂直居中:让元素高度自适应或者正好等于多行文字的高度，设置元素内 边距上下值相同。
元素垂直居中
一个元素内部嵌套的子元素，在父元素中居中。
垂直居中:与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
.box{
width:300px;
padding:20px 10px;
border:1px solid red;
}
元素水平居中
针对类似<div> 样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可 以设置子盒子的 margin 值，水平方向的值都设置为 auto。
原因:auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自 动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平 方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。
.box{
width:300px;
height:300px;
margin:0 auto;
}
margin 塌陷现象
margin 塌陷现象:在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的 真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到 了边距值大的值内部。
同级元素塌陷
上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。
父子元素塌陷
父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。
本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着 父级一起掉下来。
解决 margin 塌陷问题的方法
1同级元素:如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
2父子元素:让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距 分隔开;更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来， 而是父级的 padding 挤出来。
另外注意:水平方向的 margin 没有塌陷现象。
元素等级
在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别: 块级元素、行内元素、行内块元素等。
块级元素:大部分容器级标签包括p标签都是块级元素，比如 <div> 、<h1> 等。
行内元素:大部分的文本级标签，比如 <span>、<a>、<b> 等。
行内块元素:比如 <img>、<input> 等。
各种等级的元素有自己的加载特点。
块级元素
a、块级元素可以设置宽高，在浏览器中正常加载。
b、块级元素必须独占一行，不能与其他任何标签并排一行。
c、块级元素如果不设置宽度，会自动撑满父级的 width 区域;高度不设置，会被内 容自动撑开高度。
行内元素
a、行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容 易出现加载问题。
b、行内元素可以与其他的行内或行内块元素并排一行显示。
c、行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。
行内块元素
a、行内块元素可以设置宽度和高度。
b、行内块元素可以与其他的行内或行内块并排一行显示。
c、行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
d、行内块依旧具有标准流的微观性质，例如空白折叠现象。
显示模式 display
标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不 变的，后期可以通过 display 属性更改一个标签的显示模式。
属性值:元素根据属性值不同，可以加载对应元素等级的显示模式的特点。
block：表示元素要以块级元素模式加载，具备块级特点
inline：表示元素要以行内元素模式加载，具备行内特点
inline-block：表示标签要以行内块模式加载，具备行内块特点
none：表示标签及内部内容直接隐藏，让出原有标准流的位置
脱离标准流
display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下 加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准 流的限制。
标签元素脱离标准流的方法包括:浮动、绝对定位、固定定位。
浮动元素
1.浮动的元素脱离标准流
标准文档流特点:区分行块。
块级元素:可以设置宽高，必须独占一行。
行内元素:不能设置宽高，可以并排一行。
浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还 可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容 自动撑开。
2.浮动的元素依次贴边
浮动属性值:left、right。
浮动方向设置不同，进行布局时，加载位置方向不同。
以left为例:
父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2← 子元素3←子元素4。
3.浮动的元素没有margin塌陷
margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin 塌陷现象。
4.浮动的元素让出标准流位置
元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。
清除浮动
clear属性
clear，清除。
作用:清除标签元素自身受到的前面的浮动元素的影响。
属性值:
left 清除前面左浮动带来的影响
right 清除前面右浮动带来的影响
both 清除前面所有浮动带来的影响
给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的 位置。
隔墙法
外墙法:在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear: both 属性。
内墙法:在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高 度为 0，添加 clear 属性。
伪类
本质是使用伪类方法利用css代码书写一堵内墙。
伪类选择器:通过选中的标签添加伪类，去选中标签的某个状态或位置。
:after:这个伪类表示选中的是某个标签内部的最后的位置。
书写方法:前面必须加普通的选择器，后面连续书写伪类名称。
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一 个clearfix的类名。
.clearfix:after{
content:"1";
display:block;
height:0;
clear:both;
visibility:hidden;
}
溢出隐藏
小偏方:给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以 解决浮动的所有问题。
元素高度没有设置时，如果元素同时设置了overflow:hidden属性，元素会自适应内容的高度。
高度自适应原因:一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
浮动影响后面的元素:父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。
伪类选择器
伪类和类之间有一定的相似之处，也存在明显的区别。
普通的类:必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器之上。
伪类:不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
伪类选择器的权重与普通的类选择器相同。
伪类选择器写法:前面是普通的选择器，后面紧跟:伪类名。
<a>标签的伪类
<a> 标签可以根据用户行为不同，划分为四种状态，通过<a> 标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。
a:link{
color:gray;
}
a:visited{
color:cyan;
}
a:hover{
color:red;
}
a:active{
color:yellow;
}
<a> 标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进行加载，相同的 属性之间会发生层叠。
伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序 非常重要。
要想让每个伪类的状态正常加载，书写顺序必须是:访问前link、访问后visited、 鼠标移上hover、鼠标点击active。
background
背景颜色 background-color
属性名:background-color
作用:在盒子区域添加背景颜色的修饰。
加载区域:在 border 及以内加载背景颜色。
属性值:颜色名、颜色值。
背景图片 background-image
属性名:background-image 作用:给盒子添加图片的背景修饰。
加载范围:默认的加载到边框及以内部分。后期如果图片不重复加载，加载从border 以内开始。
属性值:url(图片路径)
url:uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。
背景重复 background-repeat
属性名:background-repeat
作用:设置添加的背景图是否要在盒子中重复进行加载。 根据属性值不同，有四种重复加载方式。
repeat：重复，默认属性值，表示会使用背景图片重复加载填满整个盒子背景区域。
no-repeat：不重复，不论背景图是否大于盒子范围，都只加载一次图片。
repeat-x：水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复。
repeat-y：垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复。
背景定位 background-position
属性名:background-position
作用:主要用于设置不重复的图片在背景区域的加载开始位置。
属性值:分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法，
属性值都有两个，值之间用空格分隔。
第一个属性值:表示背景图片在水平方向的位置。
第二个属性值:表示背景图片在垂直方向的位置。
单词表示法
属性值都是使用代表方向的单词进行书写。
水平方向可选单词:left、center、right
垂直方向可选单词:top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐。
background-position: right bottom;
像素表示法
使用像素值作为背景定位的属性值。
第一个属性值:像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方 向位移的距离。
第二个属性值:像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方 向位移的距离。
background-position: 100px 50px;
像素值区分正负，正负代表位移方向不同:
正数:表示图片针对盒子的原点向右、向下移动。
负数:表示图片针对盒子的原点向左、向上移动。
百分比表示法
百分比表示法使用百分比数字作为属性值。
100%代表的数值:
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
background-position: 100% 100%;
背景附着 background-attachment
属性名:background-attachment
作用:设置的是背景图片是否要随着页面或者盒子的滚动而滚动。
属性值:
scroll:滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而走。
fixed:固定的，背景图的定位的参考点从盒子 border 以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走。
综合写法 background
background 属性可以将五个单一属性的值进行合写。
属性值:可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作 一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
background: url(images.bg4.jpg) no-repeat center top fixed #fff;
背景半透明
CSS3 支持背景半透明的写法，颜色值增加了一种 rgba 模式。
rgba 模式:在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。
书写方式:rgba(红色，绿色，蓝色，不透明度)
注意: 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
background-color: rgba(0,255,0,0.4);
半透明其他应用
同样， 可以给文字和边框透明，都是 rgba 的格式来写。
背景缩放 background-size
通过 background-size 设置背景图片的尺寸，就像我们设置 的尺寸一样，在 移动 Web 开发中做屏幕适配应用非常广泛。
px值：1-2个像素值，只设置1个值，垂直方向等比例拉伸;设置2个值，按照设置值加载。
百分比：同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
cover：自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。
contain：自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背景区域。
多背景
CSS3 中规定，一个盒子上，可以添加多个背景图片。
background-image 的属性值书写时，以逗号分隔多背景的 URL路径地址。 注意:背景加载时，先写的背景压盖后写的背景图片。
background-image:url(/i/bg_flower.jpg),url(/i/bg_flower.jpg);
定位属性 position
属性名:position。
属性值:
relative 相对定位
absolute 绝对定位
fixed 固定定位
作用:设置定位的元素，它需要根据某个参考元素发生位置的偏移。
偏移量属性
定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。
水平方向:left、right。
垂直方向:top、bottom。
属性值:常用 px 为单位的数值，或者百分比。
相对定位
属性值:relative，相对的意思。
参考元素:标签加载的原始位置。
必须搭配偏移量属性才能发生位置移动。
position: relative;
left: 100px;
top: 100px;
相对定位的性质
性质:相对定位的元素不脱离标签的原始状态(标准流、浮动)，不会让出原来占
有的位置。
元素显示效果上，原位留坑，形影分离。
实际应用
由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后 期绝对定位的参考元素，就是所说的子绝父相情况。
相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调 整，进行微调设置。或者对文字进行微调。
绝对定位
属性值:absolute，绝对的意思。
参考元素:参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考 <body>。
必须搭配偏移量属性才会发生位置移动。
position: absolute;
left: 50px;
top: 50px;
绝对定位的性质
性质:绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随 时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
注意1:绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合， 会导致绝对定位元素的参考点不同，具体位移效果不同。
注意2:在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。
祖先元素参考点
如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组 合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视 参考元素的 padding 区域。
left、top:参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。
right、top:参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角。
left、bottom:参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角。
right、bottom:参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角。
固定定位
属性值:fixed，固定的意思。
参考元素:浏览器窗口。
参考点:浏览器窗口的四个顶点。跟偏移量组合方向有关。由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置。
.backtop {
position: fixed;
width: 100px;
height: 50px;
right: 50px;
bottom: 50px; background‐color: #ccc; font: bold 20px/50px "Arial"; text‐align: center;
color: #333; text‐decoration: none;
}
固定定位的性质
性质:固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。
默认压盖顺序
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。
如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位。
因此，书写代码时，需要注意压盖效果，必须合理设置 HTML 元素的书写顺序。
自定义压盖顺序
如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性。
属性值:数字。
自定义压盖顺序注意事项
1.属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
2.如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
3.z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
4.父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分:
父级盒子:如果不设置z-index，后写的压盖先写的;如果设置了z-index，值大的压盖值小 的。
子级盒子:如果父级没有设置z-index属性，子级z-index大的会压盖小的;如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效 应”。
