目录
一、css属性书写顺序
二、页面布局整体思路：
三、单行文字垂直居中小技巧：
让文字的行高等于盒子的高度 line-height=盒子的height
四、背景图片：【容易调位置】
引入：background-image：url（）
（1）背景平铺background-repeat ： 默认的情况下是平铺的 repeat
（2）设置背景方位：
（3）精确定位： （x坐标，y坐标） 若只指定一个数，那另一个是垂直居中
background-position： xx px xx px
（4）背景图像固定：（默认的是滚动的）
（5）背景透明度：
（6）背景总结：
五、css的三大特性
1.层叠性
后面把前面的覆盖
2.继承性
子标签可以继承父标签的某些样式【text-、font-、line-开头的，还有color属性】
行高的继承：
3.优先级
!important > id > 类 > 元素
继承的权重为 0
权重叠加：（永远不会进位，从左到右一次比较）
六、页面布局（盒子模型/标准流，浮动，定位）
一、盒子模型组成：
margin（外边距）、padding（内边距）、content（内容）、border（边框）
（1）边框border
边框复合写法：border-width、border- style、border-color
合并相邻边框（表格细线边框）
边框会影响盒子的实际大小
盒子变大了，200->220px
解决：注意（减width/height需要减双倍 ）
（2）内边距padding
复合写法：
内边距会影响盒子的大小
1.若盒子本身有宽度和高度，则使用padding会撑大盒子
假设本来盒子宽度是200px，设置padding：0px 20px 则盒子宽度变成240px
父亲与孩子宽度一样，没必要再写width了，否则孩子盒子会被撑大
解决：让width/height减去多出来的内边距大小
运用：遇到导航栏文字字数不一样，给padding撑大盒子，让他们看起来一样
2.若盒子本身没有指定width/height，则padding不会撑大盒子
（3）外边距margin
典型应用：可以让块级盒子水平居中对齐
1. margin的左右外边距都为auto 2. 指定了宽度
外边距合并： （浮动的盒子不会有外边距合并问题）
嵌套（父子关系）块元素垂直外边距的塌陷，父元素有上外边距，子元素也有上外边距，此时父元素会塌陷较大的外边距（跟着子元素变化）
解决：
补充：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，因为有可能不起作用。
二、圆角边框
圆形：length为50%
圆角矩形：设置为高度的一半
三、盒子阴影
四、浮动
（1）为什么需要浮动？
有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式
典型应用：让多个块级元素一行排列显示，每个块级元素之间没有空隙，使用line-block会有空隙
网页布局第一准则：多个块级元素纵向排序找标准1流，多个块级元素横向排列找浮动
（2）什么是浮动？
左浮或右浮
（3）浮动特性
1.浮动元素会脱离标准流（脱标）
不再保留原先的位置：类似排队，你离开了别人就会排你的位置
具体体现在网页布局，两个盒子层叠
2.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
3.浮动元素具有行内块元素特性
（4）浮动元素经常和标准流父级搭配使用
网页布局第二准则：先设置盒子大小，再设置盒子位置
（5）浮动注意事项
（6）为什么要清除浮动
思考：所有的父盒子都必须有高度吗？ 不是 （因为子元素大小多少不定）
所以理想的情况是，让子盒子撑开父盒子，有多少子盒子父盒子就有多大
但这会出现一个问题：
当给子盒子指定高度，加浮动之后，父元素的高度很大情况会改变，这会导致父盒子后面的盒子（标准流）位置出现改变。因为子盒子加浮动后不占有位置，父盒子高度极可能变小甚至变为0。
（7）清除浮动的本质
1.清除浮动元素造成的影响
2.如果父盒子本身有高度，则不需要清除浮动
3.清除浮动之后，父级会根据浮动的子盒子自动检测高度，父级就相当于有了高度，就不会影响下面的标准流
（8）清除浮动 闭合浮动（限制只能在父级中）
1.额外标签法：缺点：增加无意义的标签，结构化差，且添加的标签必须是块级元素
2. 父元素添加overflow 缺点：无法显示溢出的部分
3. ：after伪元素 父元素复制调用
4.双伪元素 复制调用
七、导航栏注意点：
八、定位
（1）为什么要定位？
（2）定位组成
2.1 定位模式
2.2边偏移
2.3静态定位（了解） 默认（无定位）
2.4 相对定位 relative （不脱标！） 给绝对定位当爹的
以自己原来的位置为准，移动
2.5绝对定位 absolute 拼爹型
3解释：移动位置之后不占有位置
子绝父相
意思就是： 子级绝对定位的话，父级要用相对定位
总结就是：父级需要占有位置，而子盒子不需要占有位置
2.5固定定位fixed
典型应用：可以在浏览器滚动时元素位置不会改变（侧边栏）
也可以固定在版心右侧：
2.6 粘性定位 sticky （了解） 兼容性较差
上述定位总结：
（3）定位叠放次序z-index
谁能压着谁
（4）定位的拓展
4.1 绝对定位的盒子水平居中
4.2 定位特殊特性
理解：因为绝对或者固定定位，不占有位置，类似浮动。行内元素加了，相当于变成块级元素；块级元素加了，相当于变成行内元素，若不给高度/宽度，默认大小是内容的大小。
4.2.1 绝对定位会压着标准流所有内容，但浮动的元素不会压住标准流盒子里面的文字（图片）
因为浮动一开始是为了让文字围绕在周围
4.3 元素显示隐藏
4.3.1display 隐藏后不占有位置
4.3.2 visibility 可见 隐藏后继续占有位置
4.3.3 overflow 溢出
6044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
