字体属性
font-weight：粗细
- 属性名： font-weight
- 属性值有两种书写方式：
- 单词书写方式： 如normal、bold、bolder等。（属性值语义化。设置文本加粗、变细效果样式）
- 数字书写方式： 取值100-900之间的整百数字。 数字越大文字越粗。 其中400等价于normal，700等价于bold。
font-style：字体风格
属性值定义了文本倾斜样式。
- normal： 正规字体。 默认样式。
- italic： 斜体字体。 定义英文字体倾斜样式显示。
- oblique： 斜体字体。 定义文字斜体。 与字体无关。
line-height：行高
作用： 设置文字所在行的实际高度，文字在行内垂直居中显示。
属性值：
- px像素值： 具体数字像素参数作为行高。
- 百分比数值： 以自身为参照物设置百分比作为行高参数。
font：字体综合
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性可以将五个单一属性值合到一起书写，属性值可以2到多个，中间空格分开。
优点： 简化代码量，提高编码效率。
书写格式：
- 两个属性值： 必须是字号和字体，且顺序不能颠倒。
例： font: 14px "宋体";
- 三个属性值： 对字号、行高、字体合写。 顺序不能颠倒。 书写格式： font: 字号/行高 "字体";
例： font: 14px/28px "宋体";
- 包含字体风格属性值时： 当需要设置字体加粗或者斜体时，两个属性位置可以互换，后面属性值位置不能互换： 字号、行高、字体。
例： font: bold italic 14px/28px "宋体";
文本属性
text-align：定义文本水平对齐
作用： 设置文本水平方向的对齐。
属性值： 三个方向的单词。 大部分标签是left左对齐。
例： text-align: left/center/right;
text-decoration：定义文本线条修饰
作用： 定义文本上划线、删除线、下划线。
属性值：
- none： 默认值。 没有任何修饰。
- overline： 上划线。
- line-through: 删除线、中划线。 <del>标签的默认值。
- underline： 下划线。 <a>标签的默认值。
text-indent：定义文本缩进
作用： 定义段落首行缩进。（属性值区分正负，正数向右缩进，负数向左缩进。 负数属性值不常用。）
属性值：
- px： 以像素为单位缩进。
- me： 以中文字符为单位缩进。就是以中文字体的倍数为单位。 例： text-indent：2em; 表示缩进两个文字。 常用。
- 百分比： 以父级标签宽度的百分比为单位。 不常用。
盒模型属性
属性值包含了5个属性值： 宽度width、高度height、内边距padding、外边距margin、边框border 。
根据不同的属性效果有不同的书写方式：
- 书写元素内容区域： width+height
- 盒子实体化区域： width+height+padding+border
- 盒子实际占位区域： width+height+padding+border+margin
width：宽度
作用： 设置可以添加元素内容的区域的宽度。
属性值：
- 默认值： auto。
如果不设置宽度：
- 块级元素： 浏览器默认父级元素宽度。
- 行内元素： 元素内部内容的宽度。
- px： 像素值。
- %： 以父级元素宽度为单位的百分比值。
height：高度
作用： 设置可以添加元素内容的区域的高度。
属性值：
- 默认值： auto。
如果不设置宽度浏览器默认元素内容的高度。
- px： 像素值。
- %： 以父级元素宽度为单位的百分比值。
padding：内边距
作用： 设置边框到元素内容之间的距离。
特点： 可以加载元素的背景，不能书写嵌套的内容。
属性值： px 。
- 单一属性值书写方式： padding是符合属性值，根据上右下左内边距的不同方向定义不同的单一属性，书写顺序习惯：
- padding-top
- padding-right
- padding-bottom
- padding-left
- 复合属性值书写方式：属性值之间用空格隔开
- 四个属性值： p {padding : 上 右 下 左;}
- 三个属性值： p {padding : 上 左/右 下;}
- 两个属性值： p {padding : 上/下 左/右;}
- 一个属性值： p {padding : 上/右/下/左;}
border：边框
作用： 设置内边距的外面的边界区域，作为盒子的实体化的最外层。
属性值： 边框的宽度、边框的形状、边框的颜色。
盒子实体化复合写法：
border元素复合写法：
div { border： 线宽 线型 颜色 }
例： div { border: 10px solid #fff;}
根据属性值的类型书写：
border-width: 线宽，单位：px。有四个方向值。
- 单一属性值书写方式：
- border-top-width: 1px;
- border-right-width: 2px;
- border-bottom-width: 3px;
- border-left-width: 4px;
- 复合写法：
- border-width: 上 右 下 左;
- border-width: 10px;（定义四个方向）
border-style: 线型
属性值： 单词写法。
默认无边框： none
实线： solid
虚线： dashed
···
- 单一属性值书写方式：
同width单一属性值书写方式。
- 复合写法：
- border-style: 上 右 下 左;
- border-style: solid;（定义四个方向）
border-color: 颜色
属性值： 颜色名或颜色值。
- 单一属性值书写方式：
同width单一属性值书写方式。
- 复合写法：
- border-color: 上 右 下 左;
- border-color: #f00;（定义四个方向）
根据边框的方向书写：
可以对单一边框独立设置，书写格式与border书写方式一致，有三个属性值且顺序一致。
- border-top: solid 1px #666 ;
- border-right: solid 1px #666 ;
- border-bottom: solid 1px #666 ;
- border-left: solid 1px #666 ;
根据方向和类型书写：
方向和类型顺序不能写反。
例： - border-right-color: #666;
- border-right-width: 10px;
- border-right-style: solid;
margin：外边距
作用： 设置盒子与盒子之间的距离。
特点： 不能渲染背景。
属性值： px 。
书写方式：
单一书写方式、复合书写方式。
格式同padding。
盒模型属性 - 扩展应用
清除默认样式
- 背景： 浏览器对大部分标签有默认样式， 这样会对css布局造成影响，所有要清除默认样式。
- 盒模型的默认样式： 大部分容器级标签都有默认边距 。使用标签选择器并集书写清除。
- 列表标签： 通过list-style属性进行默认样式清除 。 清除： ul,ol{list-style: none;}
- a标签默认样式： 颜色、下划线。
- 加粗效果：默认加粗h标签、b标签等。 清除：font-weight: normal;
公共样式：
对body元素初始化设置。 用于页面的公共样式。
height
根据不同的需要对元素进行高度设置。
不设置高度: 高度随着内部元素高度浮动。
设置高度：元素内部内容过多会出现溢出现象。
解决溢出现象：overflow属性。
属性值：
- visible： 默认值。 溢出部分显示无变化。
- hidden： 溢出部分隐藏。 PS： 如果设置有padding属性，出现溢出时，溢出方向的padding区域也会加载内容元素。
- scroll： 设置滚动条。不管有没有溢出水平垂直方向都会有滚动条。
- auto： 自动出现滚动条。 有溢出时出现滚动条。
居中
文本居中：
水平居中：
text-align属性： 属性值：center、left、right。
垂直居中：
单行文本： line-height属性：文本行高等于盒子高度实现居中效果。
多行文本：
- 不设置盒子高度，文本自适应填充。
- 添加上下的padding填充，左右自适应。
元素居中：
标签嵌套时，子元素在父元素内部居中效果。
垂直居中： 与多行文本同理，父元素高自适应，父元素添加padding属性或子元素添加margin属性。
水平居中：子元素宽度小于父元素宽度时，子元素添加margin左右设置auto。
父子盒模型
实际布局应用中，一个父元素内部可以存放一到多个子元素，当子元素并排排列时，不考虑溢出情况下所有子元素的宽度总和不能大于父元素的宽度width。 即：父元素width ≥ 所有子元素width+padding+border+margin 。如果子元素width大于父元素width，会出现溢出或者掉到另一排显示。
特殊情况：当父元素中只有一个子元素时，不设置子元素width属性值，子width会自动加载父width。 如果子元素设置了padding、border、margin属性值，子元素width会自适应，自动缩减width。
margin塌陷现象
margin塌陷问题：
同级元素塌陷：
元素1和元素2上下排列时，元素1属性margin-bottom会和元素2属性margin-top出现垂直方向塌陷现象，上下盒子之间的距离会取值margin-bottom和margin-top数值中较大的值。
父子元素塌陷：
父元素和字元素设置相同的margin-top值，两个属性值之间没有其他内容隔离，会导致两个属性相遇，发生margin塌陷。
子元素设置margin-top值，父元素设置margin-top为0时，会带着父元素塌陷下来。
解决margin塌陷问题：
同级元素： 垂直方向两个元素，只给其中一个元素设置margin值，就不会出现两元素margin相遇问题，可以解决同级元素之间的塌陷问题。
父子元素： 使父子元素边距不相遇，可以用父元素的border或padding将边距隔开；通常用父级padding填充把子元素挤开。
PS： 水平方向不会出现margin塌陷现象 。
标准文档流
HTML是标准的文档流文件。
概念： 标准文档流指的是元素排版过程中，元素会默认从左到右、从上到下流式排列。 前面内容发生变化后面内容的位置也会变化。
HTML中标准文档流特点通过两种方式体现： 微观现象、元素等级。
微观现象：
- 空白折叠现象。
浏览器会把代码中的空格、换行等自动折叠成一个空格显示。
- 文字类元素如果排在一行会出现高低不齐底边对齐效果。
- 自动换行。 元素内一行内容写满元素的width时会自动进行换行。
元素等级：
在标准流文件中大部分元素区分等级。 常见的如： 块级元素、行内元素 、行内块元素。
- 块级元素： 大部分容器级标签都是块级元素。 如：p、div、h···
特点：
- 块级元素可以设置宽高，在浏览器中正常加载。
- 块级元素必须独占一行，不能与其他标签并排一行。
- 块级元素如果不设置宽度，会自动撑满父级width区域；不设置高度会被内部内容自动撑开。
- 行内元素： 大部分文本级标签。 如： span、a、b···
特点：
- 行内元素不能正常加载宽高属性，其他盒模型属性虽然能设置但是会出现加载问题。
- 可以与其他 行内元素或块元素并排显示。
- 不论是否设置宽高，宽高只能被内容自动撑开。
- 行内块元素： 如： img、input···
特点：
- 行内块元素可以设置宽高。
- 可以与其他行内或行内块并排一行显示。
- 行内块元素如果不设置宽高，会原始尺寸加载或被内容自动撑开。
- 行内块元素具有标准流的围观性质，如空白折叠现象。
显示模式 - display
在标准文档流中元素默认的加载模式基础上，可以使用display属性改变标签的显示模式。
属性值：
block： 设置元素以块级元素模式加载，具备块级元素特点。
inline: 设置元素以行内元素模式加载，具备行内元素特点。
inline-block: 行内块模式加载，具备行内块元素的特点。
none： 表示标签及内部内容直接隐藏，让出原始标准流的位置。
浮动
浮动的定义
功能：
浮动效果可以脱离标准流的限制。具备行块二象性，浮动元素可以设置宽高，可以并排一行显示，不会出现空白折叠现象，如果元素不设置宽高可以被元素内容自动撑开。
定义：
是一种布局属性。
属性名：
float。
属性值：
left、right。
作用：
让元素脱离标准流，同一级元素可以并排一排显示。
浮动的性质
>>> 浮动的元素一次贴边显示
根据属性值方向left、right的不同，加载的位置也不同。
当多个子元素左浮动时，且子元素高度不同，父元素宽度不够子元素溢出时，子元素会自动向左满足自身宽度的情况下就近贴边。子元素宽度超过父元素时，贴父元素会出现溢出。 向右浮动同理。
>>> 应用： 平均分布表格效果、导航栏banner、电商局部效果···
>>> 浮动没有margin塌陷现象。
>>> 前元素浮动之后，会把原来标准流位置让给后同级元素。 会造成两 同级元素重叠现象。 不同浏览器版本之间会有兼容问题。
>>> 字围现象。 如同级元素前元素浮动让出原始位置，后同级元素占有原始位置，造成重叠，后同级元素中有文字内容时，文字就会自动围绕浮动元素浮动，形成围字效果。
浮动的问题
浮动的缺点：
- 浮动的子元素不会将不设置高度的父元素撑高。 标准流中父元素不设置高度的情况下回自动被内部子元素撑高，但是子元素浮动之后，父元素就不会自动被内部浮动的子元素撑高。
- 父元素没有高度，会影响后面标准流的位置，如果浮动子元素足够高时可能会影响后面浮动元素的贴边效果。
清除浮动
方法一： 给标准流父元素一个合适的高度。 问题： 父元素高度不是自适应，一旦子元素高度发生变化可能还会出现浮动问题
方法二： clear属性： 清除自身标签受到前面浮动元素的影响。
- 属性值：
left： 清除前元素左浮动的影响
right： 清除前元素右浮动的影响
both： 清除前元素所有浮动的影响
clear属性清除浮动：
解决： 浮动元素影响后面元素标准流位置和贴边。
问题： 父元素不能高度自适应，两父元素之间如果有margin效果不正确。
方法三： 隔墙发。
- 外墙法： 在两个大的父盒子之间添加一个空的div标签，标签带有clear：both属性。
解决： 浮动元素影响后面元素标准流位置和贴边。
问题： 父元素没有高度自适应。
- 内墙法： 在父元素内部所有浮动子元素后面添加一个空的div元素，标签高度为0，添加clear属性。
解决： 父元素高度自适应，浮动影响后面元素位置和贴边。
缺点： 浮动是css样式带来的问题，内墙法是HTML辅助解决问题，如果页面浮动元素很多，需要添加多个没有语义的空标签，造成HTML结构冗余。
方法四： 伪类
本质是使用伪类方法利用css代码书写一堵墙。
伪类选择器： 通过选中的标签添加伪类，去选中标签的某个状态或位置。
:after： 表示选中某个标签内部的最后的位置。
写法：
.clearfix:after{
content: "1"; /*添加文本内容*/
display: block; /*将文本转化为块级元素*/
height: 0px; /*将盒子高度固定为0，避免影响父盒子高度*/
clear: both; /*清除前面浮动的影响*/
visibility: hidden; /*将创建的元素隐藏，会保留元素占有的位置*/
}
通常会给需要清除浮动的父盒子设置一个clearfix的类名。
方法五： 溢出隐藏
给内部浮动子元素的父元素添加溢出隐藏overflow:hidden;属性。 可以解决浮动的所有问题。
高度自适应原因： 元素没有设置高度且设置了溢出隐藏，浏览器加载时遇到溢出隐藏会强制检索子元素的高度，不论子元素时标准流还是浮动，都会将最高子元素高度作为父元素高度加载。
浮动影响后面的元素： 父元素有高度后，可以管理内部所有浮动子元素，不会影响后面元素贴边。
>> 如果父元素高度固定，建议使用伪类解决。
>> 如果父元素高度需要自适应，建议用overflow溢出隐藏解决。
a标签的伪类
伪类和普通 类权重相同。
伪类选择器写法： 普通选择器:伪类名{}
书写顺序：
- link： 访问前状态
- visited： 访问后
- hover： 鼠标移上
- active： 鼠标点击
- 可以设置页面a标签通用模板：
a{
display: block;
width: px;
height: px;
background-color: skyblue;
font: bold 20px/50px "微软雅黑";
text-align: center;
color: #fff;
text-decoration: none;
}
a:hover{
background-color: yellowgreen;
}
CSS背景属性
单一写法：
- 背景颜色： background-color
作用在边框及以内区域。
- 背景图片： background-image
默认作用在边框及以内区域。
- 背景图片重复： background-repeat
属性值：
repeat： 重复加载。 填满盒子整个区域。
no-repeat： 不重复。 只加载一次。
repeat--x： 水平重复。
repeat--y： 垂直重复。
- 背景定位： background-position
背景图定位： 设置背景图在不重复情况下开始加载的位置。
属性值： 单词写法、像素值写法、百分比写法。 每种写法都有x轴和y轴两个属性值定义。
单词写法：
x轴方向属性值： left、center、right
y轴方向属性值： top、center、bottom
像素写法：
两个像素值定位，数字可以是正数也可以是负数，可以灵活定位图片显示位置，实际应用中比较常见，如精灵图的使用。
background-position: ±xpx ±ypx;
百分比写法：
百分比的分母取值定义是盒子border以内的区域减去图片的宽度； 分子是要移动的距离。
- 背景附着： background-attachment
作用： 设置背景图是否随着页面的滚动而滚动。
属性值：
- scroll： 滚动的。随着页面一起滚动变化。
- fixed： 固定的。将背景图定位的参考点由盒子border以内的左上角顶点变为浏览器窗口的左上角顶点，浏览器左上角是固定的，所以背景图不会随着页面的变化而变化。
综合写法：背景属性background可以将以上五种属性值合写在一起。
属性值：可以有1-5个，中间用空格隔开。 各单一属性值之间的位置不固定可以颠倒。
background： url(image/bg.jpg) no-repeat center top fixed #666;
CSS背景应用
应用：h1标签权重比较高，通常放利于seo的关键字和logo图。
- 将logo图用作背景图，权重高的h1标签内部放文字，字号设置为0px。 版本较低的浏览器会出现兼容问题
- 利用溢出隐藏方法。 给h1内的a标签写负数的text-indent缩进属性，当文本内容走出盒子区域范围时，添加overflow：hidden将溢出的文本隐藏掉。这样就既有干净的logo显示也有SEO的关键字存在。
背景图结合padding值应用：
例如美化li无需标签的样式前缀，样式前缀作为背景图，而文本部分使用padding值与border 之间保持距离使背景图样式漏出来。
精灵图：
背景： 用户访问网站时会向服务器发送请求，每张图都会发送一次请求，为了减少对服务器的请求次数提高加载速度，精灵图技术就出现了 。
应用： 使用背景定位background-position的像素值精确定位找到精灵图中需要的小图片。
CSS3新增背景属性：
css3支持半透明写法。 颜色值半透明写法： rgba。
rgba模式： rgb：颜色值。 a：alpha 表示不透明度。取值范围0-1。0完全透明，1完全不透明。
背景图缩放属性： background-size
通过background-size属性设置背景图的尺寸。
属性值：
px： 包含1-2个属性值。 设置一个属性值时，垂直方向等比例拉伸； 设置两个值时按照数值加载。
百分比： 写法同像素值写法。 百分比的数值参照盒子的宽高属性值。
cover： 自动缩放。 背景图完全覆盖在盒子内部区域，背景图溢出部分自动隐藏。
contain： 自动缩放。 背景图完整覆盖在盒子内部。可能会出现盒子没有被背景图覆盖的区域。
css3中也可以放多张背景图，使用background-image属性，背景图的url路径用英文逗号隔开，先写的背景图加载在后写的背景图之上。
定位
以自身为原点进行位置的偏移定位。
属性名：
- position
属性值：
- relative： 相对定位
- absolute： 绝对定位
- fixed： 固定定位
偏移量属性：
- 定位的元素发生位置的移动，必须搭配偏移量属性进行设置。
- 属性：
水平方向： left、right
垂直方向： top、bottom
- 属性值： px或者百分比。 值区分正负数。
三种定位类型
>>> 相对定位：
- 性质： 相对定位的元素不会脱离标签的原始状态（标准流、浮动）。不会让出原来占有的位置。
- 被设置相对定位的标签可以作为绝对定位的参考元素。 子绝父相。
- 相对定位比较稳定，可以在占有原始位置的情况下，对加载的效果区域微调或调整。也可以对文字进行微调比如：上标文字。
>>> 绝对定位：
- 性质： 绝对定位的元素脱离了标准流，设置了绝对定位的元素会把标准流的位置让出来，如果后面有其他元素，会浮动到它的位置。 可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
- 属性值：
absolute
- 参考元素：
定位的参照物是距离最近的有定位的祖先元素。 如果祖先都没有设置定位属性，参考<body>。
定位属性值也必须搭配偏移量属性进行设置。
绝对定位的参考点是不固定的，不同参考元素以及不同的偏移量组合，会导致绝对定位的元素参考点不同，具体的位移效果也不同。
- <body>参考元素：
当以<body>为参考元素时。 参考点的确定与偏移量方向有关。
- 如果有top参与定位，参考点就是<body>左上角和右上角顶点。自身对比点是盒子所有盒模型属性（包括border属性值、margin属性值）最外面的左上角和右上角。
- 如果有bottom参与绝对定位，参考点是<body>首屏左下角顶点或右下角顶点。同理对比盒子自身对比点是盒模型属性最外面的左下角或右下角。
使用<body>作为参考点是，由于浏览器分辨率不同，显示效果也不同，所以建议慎用。
- 祖先标签参考元素：
有绝对定位属性的子元素会自动找就近的设置有任一定位属性的父元素作为参考点。 就近原则。
三种不同的定位组合： 子绝父相、子觉父觉、字觉父固。 由于相对定位的祖先及位置更稳定，大多数时候使用子绝父相的组合。
>>> 固定定位：
性质：
固定定位元素脱离了标准流，让出标准流位置，可设置宽高，根据偏移量的属性可以任意显示在浏览器窗口的位置。 会始终显示在浏览器窗口之上。
属性值：
fixed
参考元素：
浏览器窗口
参考点：
浏览器窗口的四个顶点。 和偏移量组合方向有关。
定位的应用
根据定位position属性的三种属性值不同有三种不同的定位效果。
其中绝对定位和固定定位会脱离标准流，相对定位不会脱离标准流。
根据定位效果不同使用场景也不同。
压盖效果：
所有的定位类型都可以实现压盖效果。
实际应用中常见方法是绝对定位。 因为绝对定位会脱离标准流，让出标准流位置。
居中效果：
子元素在父元素中绝对定位，达到居中显示时，先父盒子设置相对定位，子盒子设置绝对定位，子盒子左偏移父盒子宽度区域的50%（参考点：父盒子内部左上角顶点。 子盒子对比点：左上角外部属性顶点），然后给子盒子自身宽度width一半的margin-left属性值负值（对比点就在自身上边框的中间位置），就达到了左右居中效果。
定位的压盖顺序
含有定位属性的元素会压盖住标准流或浮动的元素。
如果都是定位元素，在HTML中后写的定位压盖先写的定位。
z-index属性可以改变压盖顺序
属性值：数字
1. 属性值大的定位元素会压盖属性值小的或没有设置z-index属性的定位元素。
2. 设置相同的z-index属性值，按书写顺序压盖。
3. z-index属性是能设置给有定位元素的标签。
4. 父子盒子：
1. 父盒子：不设置z-index，后写的压盖先写的；如果设置了z-index就按数值大小压盖。
2. 子盒子：如果父级盒子不设置z-index属性，子级盒子z-index大的压盖小的；如果父级盒子设置了z-index值，无论子级值是多少，父级值大的子级压盖父级值小的子级，俗称 “从父效应”。
