css特性及盒子模型

一.css的三大特性

继承性

层叠性

优先级

1.1 继承性

后代元素会继承祖先元素的某些样式,这就是css的继承性

如果继承了多个祖先的相同的样式,那么采用就近原则,哪个祖先离得近,就用哪个祖先继承过来的样式

哪些能被继承?哪些不能被继承呢?

color font-xxx text-xxx line-xxx能被继承

background 关于布局,定位之类的不能被继承

1.2 层叠性

当有多个选择器用多种不同方式选中同一个元素时,那么谁会生效呢?这就是css的层叠性

那么就要考虑选择器的优先级了!

1.3 优先级

1. 重要性

   在样式后添加一个!important 那么这个样式就是最重要的.

   .box1 .box2{
       color:"red" !important;
   }

   如果每个样式的后都添加了!important,那么就看选择器的优先级了

   注意:继承过来的样式就算加了!important也没有优先级,不会参与比较,

2. 选择器优先级

   行内样式(内联样式)优先级分值1000

   id优先级分值100

   类,伪类,属性选择器优先级分值10

   元素,伪元素优先级分值1

   *通用选择器0

   如果重要性,优先级都一样,name就要考虑源码的顺序了!

   注意: > ~ +不参与比较优先级

3. 源码顺序

   如果重要性和优先级都一样,那么哪个样式写在后面就是应用哪个样式!

二.文档流

2.1 块元素和行内元素

文档流,又被称为标准流(normal flow)

块元素和行内元素就是文档流的特征

块元素(block):

1. 独占一行

2. 能设置宽高

3. 能嵌套其他块元素或行内元素(p元素中不能嵌套块元素)

最常见的有 div p ul li dl dd hr h系列

行内元素(inline):

1. 占自身大小

2. 不能设置宽高

3. 不能嵌套块元素,只能嵌套行内元素

最常见的 span a(特殊,能包含任意元素) img(特殊:能设置宽高) br 表单元素 i

文档流还有一些特征: 文本自动换行,从上往下,有左往右排列元素,空白折叠(多个空格,tab,回车会被折叠成一个空格),以基线对齐.

 

三.块元素的盒子模型

所有的元素都可以看做是一个盒子:

1. 一个盒子由外边距margin,边框border,内边距padding,内容区content.组成

2. 外边距,边框,内边距分别都有4个方向top right bottom left

3. 当设置宽高时,设置的是内容区的宽高

4. 一个块元素水平方向的尺寸一定是等于父元素的宽width

5. 内容和子元素一定是处于父元素的内容区

6. 设置内边距和边框都会改变盒子的大小

7. 而设置外边距不会影响自身盒子的大小,而是会改变其位置

3.1 内边距

padding表示内边距

改变padding的大小会影响盒子的大小

padding的简写方式遵循3.4的简写规则

3.2 边框

border表示边框

改变border的大小也会影响盒子的大小

border的简写方式不太一样

border: 1px  solid  red;

border: 边框大小 边框样式 边框颜色 这样子也是一种简写方式,同时设置四个边的边框

也可以分开写:

border-color:同时设置4边的颜色

border-style同时设置4边的样式

border-width同时设置4边的大小

还可以这样子单独设置:

border-top-color:设置上边框颜色

........

边框的样式:

1. none，默认值，没有边框

2. solid 实线

3. dotted 点状边框

4. dashed 虚线

5. double 双线

小插曲~~~

利用border显示三角形

    div{
            width:0px;
            height:0px;
            border:40px solid black;
            border-color:transparent  yellow  transparent transparent;
            /*border-color:red yellow;*/
        }

 

3.3 外边距

3.3.1 外边距为正值的情况

1. 外边距有四个方向:margin-top margin-right margin-bottom margin-left

2. 设置外边距会改变其盒子的位置,不会影响本身的盒子大小

3. 水平方向的width,margin值都可以为auto,其它的值不能设置auto

4. 当没有设置width时相当于是auto width的auto > margin的auto

5. 当没有设置margin和padding时相当于是0,没写也就相当于写死了,跟写成0px一样,就是说先把写死了的满足,然后再尽最大的努力满足auto,都是auto的时候那么width的auto > margin的auto.意思就是先尽最大的努力去满足width的auto,

6. 当width margin-left margin-right全部都写死了之后,会牺牲margin-right去填充未被填充的区域

7. 只有margin可以设置负值

注意:垂直方向height如果设置为auto,高度会自动包含住内容,其他的auto都是0

3.3.2外边距的负值:

子元素的宽+子元素的外边距+子元素的边框+子元素的内边距==父元素的宽

那么当子元素的外边距设置为负值时,一样也是要满足这个条件

3.4 属性的简写

属性的简写:在简写的时候会进行一个值复制margin:10px;在只设置1个值的时候,设置给的是top,right复制top的值,bottom复制top的值left复制right的值. 顺序为上右下左

1. 设置1个值:top top top top; 全部设置为那1个值

2. 设置2个值:top right top right; 上下 左右

3. 设置3个值:top right bottom right; 上 左右 下

4. 设置4个值:top right bottom left; 上 右 下 左

3.5 高度塌陷

什么时候会高度塌陷呢?

当两个margin接触到了一起就会出现高度塌陷

都有什么情况呢?

1. 当margin值都为正值的时候,出现塌陷,则会取最大值的高度

2. 当margin值有正有负的时候,出现塌陷,则会取正数最大值+绝对值最大的负数

3. 当margin值都是负值时,出现塌陷,会取绝对值最大的负数

塌陷都发生在哪些元素之间呢?

1. 发生在元素与父容器之间(子元素的top与父元素的top)

2. 兄弟元素之间(上面的bottom与下面的top接触)

3. 自身的上下margin也会塌陷(没有高度,没有padding,没有边框)