CSS三大特性+CSS盒子模型

CSS三大特性

层叠性：对同一标签设置了同一属性时，采取就近原则

继承性：子标签会继承父标签的属性和属性值//只继承文字属性

优先级：选择器不同时根据选择器权重执行

行高的继承

行高可以跟单位也可以不跟单位，不跟单位时表示当前标签元素的字号的倍数

如果子元素没有设置行高，则会继承父元素的行高

注意：

权重会叠加，但是永远不会有进位

无论父元素权重多高，子元素得到的权重都是0

页面布局要学习的三大核心：盒子模型、浮动和定位

页面布局步骤

1.先准备好相关的网页元素，网页元素基本都是盒子Box

2.利用CSS设置好盒子样式，然后摆放到相应位置

3.往盒子里面装内容

CSS盒子模型

所谓盒子模型，就是把html页面中的布局元素看作是矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框、外边距、内边距和实际内容。

盒子模型(Box Model)的四个组成部分：

border边框： 

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式，实线solid，虚线dashed，点线dotted
border-color	边框颜色
border-collapse: collapse	合并相邻的边框//chrome90后版本bug会有一两条边不一样粗

复合写法：border： 1px solid red；//没有顺序

边框的分开写法：

border-top、border-bottom、border-left、border-right

content内容：

可以装文字、图片或者另外的盒子等

padding内边距：

内容和边框的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合写法

值的个数	意义
padding:5px	1个值，表示上下左右都是5px内边距
padding:5px 10px	2个值，表示上下内边距是5px，左右内边距是10px
padding:5px 10px 20px	3个值，代表上内边距5px，左右内边距10px，下内边距20px
padding:5px 10px 20px 30px	4个值，表示上5px，右10px，下20px，左30px（顺时针）

padding不会撑开盒子的情况：

1. 如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小
2. 如果子标签继承了父标签的高度和宽度，再给子标签设置padding也不会撑开盒子大小

margin外边距：

盒子与盒子间的距离

margin-left、margin-right、margin-top、margin-bottom；

复合写法：同padding的复合写法

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度（width）
2. 盒子左右的外边距都设置为auto

行内元素或者行内块元素水平居中给其父元素添加text-align：center即可

外边距塌陷问题：

对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

1. 为父元素定义上边框
2. 为父元素定义上内边距
3. 为父元素添加overflow:hidden

浮动、固定、绝对定位的盒子不会有塌陷问题。

清除内外边距（CSS的第一行代码）

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外边距。

/*星号*为通配符选择器*/
*{
padding:0; /*清除内边距*/ 
margin:0; /*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

PS的基础操作