css学习（二）

一、css的三大特性

css具有三个非常重要的特性：层叠性、继承性、优先级

1.1 层叠性

1.2 继承性

• 子标签会继承父标签的某些样式：（text-、font-、line-、这些元素开头的可以集成，以及color属性。）
• 恰当地使用可以简化代码，降低css的复杂性。

特殊情况：行高的继承

 1.3 优先级

(1) 优先级的基本特性

（2）优先级要注意的点：

 其中a元素比较特殊，不能继承父元素的字体颜色。因此应当单独设置。

（3）权重叠加：！！！！很重要

如果是复合选择器，则会有权重叠加，需要计算权重

比如.nav li{}   与li{}。.nav li{}的权重为0010+0001=0011  li{}的权重为0001  所以会执行.nav li{}的样式

 权重虽然会叠加，但是永远不会出现进位的情况！！！

a:hover{}  0001（元素选择器）+0011(伪类选择器)=0012

二、盒子模型

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

2.1 盒子模型

2.1.1 看透网页布局的本质

 2.1.2 盒子模型组成

 

 2.1.3 边框（border）：

 包括 边框宽度（粗细）、边框样式、边框颜色

 边框粗细：一般用px

border-style：none，solid（实线）、dashed（虚线）、dotted（点线）

 边框的复合写法：border：5px solid red;没有顺序。

边框可以分开写：border-top:5px solid red;    boder-bottom\border-left\border-right,注意层级性。

边框会影响盒子实际大小：border的粗细不属于盒子的大小。（做实际工作时，要注意）

表格的细线边框：

合并相邻的边框：boder-collapse：collapse；

2.1.4 盒子模型内边距padding

边框与实际内容之间的距离。

（1）padding-  top/bottom/left/right

（2）padding的简写：

padding也会影响盒子的实际大小：

也就是说border和padding不属于盒子的实际高宽

 重新调整width和height

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

2.1.5 margin外边距

（1）margin-   left/top/bottom/right

复合写：和padding一模一样。上右下左

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

• 盒子必须制定了宽度（width）
• 盒子左右的外边距设置为auto

常见的一下写法，三种都可以：

• margin-left：auto；margin-right:auto;
• margin:auto;
• margin:0 auto;

（3）注意：以上方法是让块级元素水平居中，行内元素或则行内块元素水平居中给父元素添加text-align：center即可。

（4）使用margin定义块级元素的垂直外边距时，可能会出现外边距的合并。

1⃣️：相邻块元素垂直外边距的合并

2⃣️：嵌套块元素垂直外边距的塌陷
两个盒子嵌套时，父元素和子元素都有margin-top，则会出现父元素的塌陷问题，父元素和子元素的谁的margin-top值大，那么父元素就会塌陷相应的值。

解决方案：

• 可以为父元素定义上边框：border:1px solid transparent;
• 可以为父元素定义上内边距padding：1px
• 可以为父元素添加overflow：hidden
• 还有其他方法：比如浮动、固定、绝对定位的盒子不会有塌陷问题，后面再总结。

3⃣️：清除内外边距：

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

/* 这句话也是css的第一句话*/

*{

        padding:0;

        margin:0;

}

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

三、ps的基本操作：

综合案例：产品模块布局分析。

四、圆角边框、盒子阴影、文字阴影

以上三个元素，都是css3新增的。

4.1 圆角边框

border-radius：length；

原理：圆与边框的交集形成圆角效果。

• 参数值可以为像素或者百分比（宽度或高度的百分之多少，如果给正方形盒子设为50%，则得到一个圆形。）
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。也可以跟两个值（对角线是相同的），三个值。
• 分开写：boder-top-left-radius、border-top-right-radius、border-bottom-right-radius和boder-bottom-left-radius（先写上下，再写左右。）

4.2 盒子阴影

box-shadow：h-shadow（水平阴影的位置，允许负值） v-shadow（垂直阴影的位置，允许负值） blur（阴影的距离、虚实） spread（阴影大小） color inset（将外部阴影outset改为内部阴影）

注意：

• 默认的是外部阴影（outset），但是不可以写这个单词，否则导致阴影无效。
• 盒子阴影不占空间，不会影响其他盒子排列。

案例：原先盒子没有影子，当鼠标经过盒子就添加阴影效果。

div：hover{  里面写阴影的部分。

}

4.3 文字阴影

text-shadow

五、css浮动

5.1 浮动

网页布局的本质——用css来摆放盒子。把盒子放到相应的位置。

css的三种布局方式（简单来说，就是盒子如何进行排列顺序）

• 普通流（标准流）
• 浮动
• 定位

（1）标准流

实际开发中，需要三种方式共同来布局。

（2）浮动

浮动会改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

float：none/left/right

5.2 浮动元素的特性：（重难点）

• 脱离标准普通流的控制（浮）移动到制定位置（动），俗称脱标
• 浮动的盒子不再保留原先的位置。
• 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
• 浮动的元素是互相贴在一起的，中间不会有缝隙，如果父级宽度装不下这些浮动元素，多出的盒子会另起一行对齐。
• 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度了。如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。行内元素同理

为了约束浮动元素位置，网页布局一般采取的策略是：

        先用标准流的父元素排列赏析位置，之后内部子元素采取浮动排列排列左右位置，复合网页布局第一准则。

案例：

可以用ul和 li标签来做。

5.3 常见的网页布局

5.3.1 浮动布局的注意点

一般来说，一个孩子设置了浮动，其余的孩子也设置成浮动。

 5.4 为什么要清除浮动。

在很多情况下，父盒子不方便给高度。然而带有浮动的子元素不占有位置，因此不会撑开父盒子，就会导致，父元素不占有高度。后面的盒子元素会覆盖当前父元素。因此要清除浮动。

5.4.1 清除浮动的本质

 5.4.2 清除浮动方法

（1）额外标签法：

在浮动元素后面额外添加一个元素：并且加上clear属性。元素必须是块级元素，行内元素不起作用。

总结：

 （2）给父元素添加overflow

使用auto、hidden、scroll属性都可以。

 (3)清除浮动——after 伪元素

 在父元素的class中添加一个clearfix即可。本质在盒子后面添加一个元素，但是没有写到结构上。

直接复制上述代码，加到css中即可。

（4）清除浮动——双伪元素

本质上是在盒子的前后都添加一个元素，进行闭合。但是也没有写到结构上。同样也可以直接复制用。

5.4.3 清除浮动总结