CSS-3（三大特性+盒子模型）

目录

1.CSS的三大特性

层叠性

​编辑

继承性

​编辑优先级

​编辑​编辑

2.盒子模型​编辑

​编辑边框

内边距

外边距

​编辑外边距的典型应用——块级元素的水平居中

​编辑外边距合并——相邻块元素垂直、嵌套块元素塌陷

相邻块元素垂直外边距的合并

​编辑嵌套块元素塌陷

​编辑清除内外边距

​编辑PS基本操作

​编辑综合案例1

​编辑综合案例2

​编辑​编辑​编辑圆角边框

盒子阴影

​编辑

文字阴影

---

1.CSS的三大特性

层叠性、继承性、优先级

层叠性

后来者居上

样式冲突，遵循就近原则（后来者居上），对前面的样式进行覆盖

样式不冲突，不会层叠

继承性

小辈继承前辈

子元素可以继承父元素的样式（text- 、font-、line-这些元素开头的可以继承，以及color属性）

第一个精确值是文字的大小，后一个精确值是当前元素文字大小的多少倍（可以不带单位）

优先级

当一个元素指定多个选择器时，根据选择器的权重执行（是样式重叠的一种特殊情况）

选择器权重：

继承、通配符选择器 < 元素选择器 < 类选择器、伪类选择器 < ID选择器 < 行内样式style="" < !important

权重叠加

永远不会出现进位

2.盒子模型

border边框  content内容  padding内边距  margin外边距

边框

border-width 定义边框粗细，单位是px

border-style 定义边框的样式  solid实线边框  dashed虚线边框  dotted点线边框

border-color 定义边框的颜色

边框复合写法

记住层叠性，后来者居上，可以设置上边框的颜色和其他颜色不一样

定义盒子的时候要考虑边框宽度，内容+边框=盒子

内边距

内边距也会影响盒子的大小，内容+内边距=盒子

如下例，内边距为20，宽和高均为160，那么这个盒子的大小就是200*200

如果没有指定明确的height或者width,那么内边距不会影响未被定义的那一方

外边距

margin和内边距padding一样，上下左右

外边距的典型应用——块级元素的水平居中

块级元素水平居中：盒子必须指明高度（width)；盒子的左右外边距设为auto

行内元素和行内块元素水平居中：将其父类元素添加text-align:center

外边距合并——相邻块元素垂直、嵌套块元素塌陷

相邻块元素垂直外边距的合并

当两个块级元素竖直放置时，如果上面的块级元素设有下外边距margin-bottom，下面的块级元素设有上外边距margin-top，那么它们之间的垂直间距就是取两个值中的最大值

所以尽可能只给一个块级元素设置外边距

嵌套块元素塌陷

就是在有父元素块和子元素块时，父元素有上边距同时给子元素也设置上边距，那么子元素块与父元素块之间的隔阂仍没有改变，相反父元素会增加相应的上边距。这种情况称为塌陷。

解决方案：可以给父元素块设置上边框border: 1px solid red;

                  可以给父元素块设置上内边距padding: 1px;

                  还可以为父元素块添加overflow: hidden;

清除内外边距

直接写

*{

        padding:0;     /*清除内边距*/

        margin:0;   /*清除外边距*/

}

行内元素一般只设置左右内外边距，不设置上下内外边距，就算设置了也不会起作用

而行内块元素和块级元素都可以设置

PS基本操作

综合案例1

插入图片时，图片可能过大或者过小，可以把它的样式调整为与父元素一样，即width:100%

在设置文字时，因为不同的场景的文字可能不一样多，在同时呈现时可以为文字部分设置一个高（就相当于为文字部分设置了一个盒子）；因为文字与图片和边框有一定的距离，所以要设置边框，在上面提到了只设置了一个高没有设置宽，所以使用padding内边距不会撑开盒子的宽度，在上下方面可以使用margin-top上外边距

竖线的设置：<em></em>是斜体的标签，在样式设置时font-style:normal，就取消了斜体，用margin来设置与周围盒子的距离（顺时针）

综合案例2

去掉列表前面的小圆点，用list-style:none;

要想让整个盒子在网页居中，margin:100px auto; 右边一定是auto;  点线的边框是dotted

去除小圆点的代码要单独一行写

注意文字的行高和文字距离上边框的差值，因为文字在它的行高中是居中的，所以需要把文字居中再测量文字到上边框的距离

多行写法：ul > li * 5 > a 回车形成多行代码，再写重复的文字时可以用ctrl键+alt键下拉写多行

圆角边框

border-radius:length;

length是一个圆的半径，在设置好一个盒子的长宽后，用圆去截取想要的弧度，圆的半径越大弧度越大

设置圆形：先定义一个正方形，然后定义length值为正方形边长的一半，就可以得到一个圆

设置圆角矩形：先定义一个矩形，然后定义length值为矩形高度的一般，就可以得到一个圆角矩形

设置四角弧度不同的圆角矩形：有一个length值时四个角的弧度相同；有两个length值时按对角线原则，相对的两个角弧度相同；也可以一个一个写出来，但一定是border-top-...-radius或border-bottom-...-radius,在左右前面要先表明top或bottom

在定义时人工计算一个数的一半较为麻烦，所以length值可以直接写50%，即为一半

盒子阴影

box-shadow:h-shadow v-shadow blur spread color inset;

第一个值是规定水平方向的阴影，正值时阴影在右边，为0时没有阴影，负值时阴影在左边

第二个值是规定上下方向的阴影，正值时阴影在下边，为0时没有阴影，负值时阴影在上边

第三个值是规定阴影的模糊程度，数值越大阴影越模糊，为0时阴影是实实在在的颜色，无负值

第四个值是规定阴影的大小

默认的是外阴影(outside)但是不需要写出来，相反内阴影(inside)需要写在颜色的后边

设置鼠标经过盒子时出现阴影，需要先定义好盒子再分开写div:hover{box-shadow...}

文字阴影