B 站黑马程序员 pink 老师前端课程学习笔记_04 CSS3

1. CSS 的三大特性

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

1.1 层叠性

相同选择器设置相同的样式，此时一个样式就会==覆盖（层叠）==另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

• 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突不会重叠

<style>
	div {
        color: blue;
        font-style: 14px;
    }

    div {
        color: #000;
    }
</style>

1.2 继承性

子标签会继承父标签的某些样式（跟文字相关的样式），如文本颜色和字号

• 恰当地使用集成可以简化代码，降低 CSS 样式的复杂性
• 子元素可以继承父元素的样式（text-，font-、line-这些元素的开头可以继承，一级 color 属性）

行高的继承

div {
	font:12px/1.5 MIcrosoft YaHei;
}
p {
    font: 14px;
}

• 行高可以跟单位也可以不跟

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

  此时子元素的行高为当前子元素的文字大小*1.5

• 父元素行高1.5倍的写法最大的优势是里面的子元素可以根据自己文字大小自动调整行高

1.3 优先级

当同一个元素指定多个选择器，就会有优先级产生

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

优先级注意：

1. 权重是由4组数据组成，但不会有进位
2. 类选择器永远大于元素选择器，id 选择器永远大于类选择器
3. 等级判断从左到右，如果某一为数值相同，则判断下一位数值
4. 继承的权重是 0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0

权重叠加：

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

• div ul li → 0,0,0,3
• .nav ul li → 0,0,1,2
• a:hover → 0,0,1,1
• .nav a → 0,0,1,1

2. 盒子模型

2.1 看透网页布局的本质

网页布局过程：

1. 先准备好相关网页元素

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

3. 往盒子里面装内容

   网页布局的核心本质：利用 CSS 摆盒子

2.2 盒子模型（Box Model）组成

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

2.3边框（border）

border 可以设置元素的边框，边框由 宽度、样式、颜色 三部分组成

语法：border-width
border-style
border-color

div {
		border-width: 5px;
    	border-style: solid;
    	border-color: black;
	}

边框简写：没有顺序要求

border: 5px solid black;

div {
     	/* 画一个200px × 200px的盒子 */
      	width: 200px;
      	height: 200px;
      	border: 2px solid blue;
      	/* 利用层叠性，下边框改为为绿色 */
      	border-bottom: solid green;
        }

2.4 表格的细线边框（合并相邻边框）

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

border-collapse:collapse; 相邻的边框合并在一起

 /* 画盒子 */
        table {
            width: 500px;
            height: 249px;
        }

        table,
        th,
        td {
            /* 画表格 */
            border: 1px solid black;
            /* 合并相邻边框 */
            border-collapse: collapse;
            /* 居中 */
            text-align: center;
        }

边框会影响盒子实际大小

• 盒子模型大小包括盒子+边框
• 如果测量的时候包含了边框，则需要 width/heigth 减去边框宽度

2.5 内边距（padding）

padding 属性用于设置盒子的内边距，即边框与内容之间的距离

复合写法：

内边距会影响盒子实际大小

• 盒子模型大小包括盒子+内边距
• 如果测量的时候包含了边框，则需要 width/heigth 减去内边距宽度

案例

• 新浪导航页

• 小米导航页

盒子未指定 width/heigth 属性，padding 不会影响盒子大小

2.6 外边距（margin）

margin 属性用于设置外边距，及控制盒子和盒子之间的距离

margin 的复合写法与 padding 完全一致

2.7.1 水平居中

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

1. 盒子必须指定了宽度（width）

2. 盒子的左右外边距都设置为0

   .header{ width: 960px; margin: 0 auto;}
   

常见写法：

1. margin-lift: auto; margin-right:auto;
2. margin: auto;
3. margin: 0 auto;

**注意：**以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可

2.7.2 外边距合并

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

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外百年据同时子元素也有上外边距，此时父元素会他先较大的外边距值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fxjRNVWO-1613636589958)(D:%5CDesktop%5C%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%5CCSS%5C03-CSS.assets%5Cimage-20210202160346602.png)]

解决方案：

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

2.7.3 清除内外边距

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

CSS 第一行代码：

* {
	padding:0
	margin:0
}

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

3.综合案例

3.1 PS 基本操作

网页美工大部分效果图都是利用 PS 来做的，以后大部分切图工作都是用 PS 来完成

• 文件 → 打开：打开测量图片
• Ctrl + R：打开标尺
• 右击标尺，把单位改成像素
• Ctrl + 加号放大图片，Ctrl + 减号缩小图片
• 按住空格鼠标拖动视图
• 用选区拖动，可以测量大小
• Ctrl + D：取消选区

3.2 小米商城

3.3 快报模块

虚线边框

border-bottom: dotted;

去掉 li 前面的项目符号（无序列表小圆点）

list-style: none;

4. 圆角边框

border-radius属性用于设置元素的外边框圆角

border-radius: length;

• 设置圆形，length 为等边盒子长度的一半或 50%

• 设置圆角矩形，length 为高度的一半

• 该属性是一个简写属性，可以跟四个值，分别以顺时针代表左上角、右上角、右下角、左下角

• 也可以分开写：

  • border-top-left-radius

  • border-top-right-radius

  • border-bottom-right-radius

  • border-bottom-left-radius

5.盒子阴影

box-shadow 属性用于为盒子添加阴影

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

注意：

1. 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效；

2. 盒子阴影不占空间，不会影响其他盒子排列

6. 文字阴影

text-shadow 属性将阴影应用于文本

text-shadow: h-shadow v-shadow blur color;

阴影的位置。允许负值 |
| v-shadow | 必须。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸 |
| color | 可选。阴影的颜色 rgba() |
| inset | 可选。将外部阴影改为内部阴影 |

注意：

1. 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效；

2. 盒子阴影不占空间，不会影响其他盒子排列

6. 文字阴影

text-shadow 属性将阴影应用于文本

text-shadow: h-shadow v-shadow blur color;