字体样式
文字属性
font-weight
其中 400 等价于 normal，700 等价于 bold
font-style
设置文字是否斜体显示。果习惯使用italic属性值
line-height
行高=高度 垂直居中
font综合属性
注意
- 必须有字号和字体参与
- 对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字 号和行高之间必须用/进行分隔
- 设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互 换位置。后面的字号、行高、字体不能更改位置
文本属性
text-align（水平对齐）
设置文本水平方向的对齐。
text-decoration（文本修饰）
设置文本整体是否有线条的修饰效果
text-indent（文本缩进）
设置段落首行是否进行缩进
盒模型
常见盒模型区域
- 书写元素内容区域：width+height
- 盒子可以实体化的区域：width+height+padding+border
- 盒子实际占位的位置：width+height+padding+border+margin
属性应用
宽度 width
可不设宽度，内部元素内容会自动撑开宽度。
高度 height
不设高度，元素的高度自适应内部内容的高度
- overflow 属性（解决溢出） **
内边距 padding
- 四个属性值，分配方向上、右、下、左
- 三个值分配给上、左右、下。
- 两个值，分配给上下、左右。
外边距 margin
同上
边框 border
- 单一属性写法：border-方向-类型。
- 由三个值组成，分为线的宽度、线的形状、线的颜色
拓展
清除默认样式
设置公共样式
父子盒模型
- 父元素的width ≥ 所有子元素width + padding + border + margin
- 不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。
- 如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进 行内减，子元素的 width 会自动收缩尺寸
margin 塌陷现象
在垂直方向如果有两个元素的外边距有相遇的，真正的外边距不是两个间距的加和，而是两个边距中值较大的。
- 解决方法
- 同级元素：只需要设置给一个元素
- 父子元素：给父设border 或 padding，不设置子的margin
标准文档流
微观现象
- 空白折叠
- 高低不齐，底边对齐
- 自动换行
元素等级
- 块级元素：容器级标签
<p>
- 可设宽高 独占一行
- 行内元素：文本级标签
<span>
- 可多行并排显示
- 行内块元素：
<img> <input>-前两者之和
标签元素脱离标准流的方法
包括：浮动、绝对定位、固定定位
显示模式（display）
display 属性更改的显示模式并没有改变标准流本质性质
浮动(float)
浮动的性质
- 让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。
- 浮动的元素依次贴边
- 浮动的元素没有margin塌陷
- 浮动的元素让出标准流位置(字围现象)
浮动的问题
- 不设置高度的情况下,浮动的子元素是撑不高标准流父亲的
- 父元素没有高度，会影响后面元素的标准流位置
- 解决方法
- 设高度
- clear:both
- 伪类（主要） 一般给需要清除浮动的父盒子设置一 个clearfix的类名。
--
- 溢出隐藏
总结
- 如果父元素高度是固定的，建议使用 height 属性解决。
- 如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性
<a> 的四个伪类选择器
书写顺序必须是：访问前link、访问后visited、 鼠标移上hover、鼠标点击active。
实际使用
背景属性
背景附着 background-attachment
设置的是背景图片是否要随着页面或者盒子的滚动而滚动
- scroll 滚动的
- fixed 固定的
综合写法 background
注意：
- 如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载
- 使用单一属性写法进行层叠
应用
背景半透明（alpha）
rgba 模式
背景缩放 background-size
属性
多背景
background-image 的属性值书写时，以逗号分隔多背景的 URL路径地址
定位
定位属性 position
属性值
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
相对定位
- 属性值：relative，相对的意思。
- 参考元素：标签加载的原始位置。
- 必须搭配偏移量属性才能发生位置移动。
- 元素不脱离标签的原始状态,不会让出原来占 有的位置
- left=-ringht
绝对定位
- 属性值：absolute，绝对的意思。
- 参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考
<body>。 - 必须搭配偏移量属性才会发生位置移动。
- left 不等于 -ringht
- 脱离标准流
固定定位
- 属性值：fixed，固定的意思。
- 参考元素：浏览器窗口。
- 参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关
- 脱离标准流
压盖顺序
- 设定位的>标准，浮动
- 都设了定位，比书写顺序
- 自定义(z-index) 只有设定位的元素可以用
- 父子模型：先比父再比子
