CSS学习 第三天

1. CSS三大特性

1.1 层叠性

相同选择器哥设置相同的样式，下一个就会 覆盖上一个 冲突 的样式

层叠性原则

• 样式冲突的原则是 就近原则， 哪个样式离结构更近，就执行哪个样式
• 样式不冲突，就不会层叠

1.2 继承性

CSS中子标签会继承父标签的某一些样式，比如在div中有很多p标签，对div标签的样式会同样作用到p标签上

• 继承的主要是文字相关的样式，比如text-，font-，line-开头的元素，以及color属性

行高的继承性

font: 12px/24px 'Microsoft YaHei';

这里的1.5指的是当前元素文字大小 font-size 的1.5倍
font: 12px/1.5  'Microsoft YaHei';

body {
    font: 12px/1.5  'Microsoft YaHei';
}
div{
    这里继承了body里的行高1.5
    因此行高就变成了14*1.5 = 21px
    font-size: 14px;
}

1.3 优先级

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

div {
	color: pink!important;
}
.text{
	color: red;
}
#demo {
	color: green;
}

<div class="test" id="demo" style="color: purple">
    你笑起来真好看
</div>

• 选择器相同（都是标签选择器/id选择器/类选择器），则执行 层叠性
• 选择器不同，则根据选择器权重执行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKJo5JzX-1602809793120)(C:\Users\DAN\AppData\Roaming\Typora\typora-user-images\image-20201014150317679.png)]

选择器	选择器权重
继承 或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important 重要的	无穷大

优先级注意事项

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

#father {
    color: red!important;
}
p {
    color: pink;
}
这里father是继承到p上的，因此它的权重是0
<div id="father">
	<p>你真好看</p> 这句话是粉色的
</div>

存在继承关系的时候，永远看直接选中的哪个标签是如何的

可以解释为什么继承修改a标签的颜色的时候不会生效。这是因为浏览器默认给a标签上蓝色，而继承的颜色修改权重为0，没什么用。

想要修改，只能手动对a进行修改

复合选择器的权重叠加（这里不考虑继承）

ul li的权重是0,0,0,1 + 0,0,0,1 (拆分成了ul和li，两个都是标签选择器，都是0,0,0,1)
ul li{
    color: green;
}
li的权重是0,0,0,1
li{
    color: red;
}
拆分成类选择器 和 标签选择器, 0,0,1,0 + 0,0,0,1
.nav li{
    color: pink;
}
<ul>
    <li>大猪蹄子</li>
    <li>大肘子</li>
    <li>猪尾巴</li>
</ul>

选择器	表达式或示例	说明	权重
ID选择器	#aaa		100
类选择器	.aaa		10
标签选择器	h1	元素的tagName	1
属性选择器	[title]	详见这里	10
相邻选择器	selecter + selecter	拆分为两个选择器再计算
兄长选择器	selecter ~ selecter	拆分为两个选择器再计算
亲子选择器	selecter > selecter	拆分为两个选择器再计算
后代选择器	selecter selecter	拆分为两个选择器再计算
通配符选择器	*		0
各种伪类选择器	如:link， :visited， :hover， :active， :target， :root， :not等	10
各种伪元素	如::first-letter,::first-line,::after,::before,::selection	1

参考https://www.cnblogs.com/rubylouvre/archive/2010/03/17/1687786.html

/*by 司徒正美 All rights reserve*/
* {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
/* 通配符选择器权重为0，在IE中，它无法区分元素节点与注释节点 */
li{}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
/* 标签选择器为1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
/* 标签选择器与伪元素为1 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
/*这里存在后代选择器的概念，但计算权重时像它这样的关系选择器会被进一步肢解，当成两个标签选择器了。*/
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
/* 无视后代选择器与相邻选择器，只看它里面的选择器的成分 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
/* 这个相邻选择器由标签选择器与属性选择器组成，属性选择器为10 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
/*无视后代选择器，3个标签与1个类选择器，类（className）在DOM中的位置比较显赫，
拥有专门的getElementByClassName，等级为c，合计得分13 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
/*两个类选择器与一个标签选择器，合计得分21 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
/*getElementById，在页面上获得元素最快的方式，权重为b，得分100 */
style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
/*行内样式，得分1000，会覆盖内部样式或外部样式的设置*/

• 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. 先准备好相关网页元素，网页元素基本都是盒子Box
2. 利用CSS设置好盒子样式，然后摆放到相应位置（最重要）
3. 往盒子里面装内容

2.2 盒子模型(Box Model)的组成

所谓盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子(html,body,p,div都是盒子)，也就是一个承装内容的容器，CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括了 边框，外边框，内边距和实际内容

• border 边框
• content 内容
• padding 内边距（边框和内容的距离就靠它）
• margin 外边距（盒子与盒子之间的距离）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGXBzVE5-1602809793122)(C:\Users\DAN\AppData\Roaming\Typora\typora-user-images\image-20201014153836057.png)]

2.3 边框（border）

• 颜色
• 粗细
• 线段样式

border: border-width || border-style || border-color  可以没有顺序的写，不用单独一个个的写

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

边框四个边的单独语法

border-top/left/right/bottom

2.4 表格的细线边框

border-collapse:collapse;属性控制浏览器绘制表格边框的方式。他控制相邻单元格的边框。

左右边框都是1px，当这两个堆叠在一起的时候，就会变成2px，就会显得粗一些

• collapse是合并的意思

2.5 边框会影响盒子的实际大小

在布局的时候会遇到这个问题，因为边框的存在会让盒子比原来设计的更大。

两种解决办法

1. 测量盒子的去大小的时候，不测量边框
2. 如果测量的时候包含了边框，则需要手动将里面的盒子width/weight减去边框宽度

2.6 内边距（padding

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

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

可以使用padding属性直接简写上述四个属性

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5像素内边距
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. 内容和边框有了距离，添加了内边距
2. padding影响了盒子的实际大小

解救方法：依然是手动让width/height减去多余出来的内边距大小就行，注意两边都要减少

当遇到盒子内的文字字数不一样多的时候，可以使用padding使得他们都对齐，比如新浪标题。

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

下列代码只会在竖直(height)方向上撑开30px，不会横着撑开，因为没指定的时候是不会超过父亲的。

<style>
h1 {
    // 此时横着默认是网页全屏
    height: 200px;
    background-color: pink;
    padding: 30px;
}
</style>

<body>
    <hq></hq>
</body>

如果改成下面的代码，那么就会横着撑开了，此时浏览器会多一个横向的滚动条

<style>
h1 {
    width: 100%;
    height: 200px;
    background-color: pink;
    padding: 30px;
}
</style>

<body>
    <hq></hq>
</body>

2.7 外边距（margin

margin属性用于设定外边距，也就是控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

有着和padding一样的简写形式

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

1. 盒子必须有宽度
2. 盒子左右外边距都设置成auto

以下三种写法都可以

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

以上是让块级元素水平居中。行内块元素或者行内元素的水平居中，只要给其父元素添加text-align:center就行

2.8 外边距合并

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

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

上下两个相邻的块元素相遇的时候，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。而是取两个值中的较大者，该现象成为相邻块级元素垂直外边距的合并

**解决方案：**尽量只给一个盒子添加margin

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EvP3QWn3-1602809793124)(C:\Users\DAN\AppData\Roaming\Typora\typora-user-images\image-20201015155738125.png)]

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AWGSlWpN-1602809793127)(C:\Users\DAN\AppData\Roaming\Typora\typora-user-images\image-20201015155750658.png)]

没办法避免，解决方案

1. 可以为父元素定义上边框（border: 1px solid transparent;）只要有了一个小小的边框后，孩子就走了
2. 可以为父元素定义上内边距（padding:1px）
3. 可以为父元素添加overflow:hidden（不会让盒子变大1px，推荐）

还有其他方法，比如浮动，固定，绝对定位，让盒子不再有塌陷的问题。

2.9 清除内外边距

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yeefmUIO-1602809793130)(C:\Users\DAN\AppData\Roaming\Typora\typora-user-images\image-20201015160819711.png)]

自带一个黄色的margin

使用下面的方式去除

* {
    padding:0; 清除内边距
    margin:0; 清除外边距
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QumdqpLW-1602809793133)(C:\Users\DAN\AppData\Roaming\Typora\typora-user-images\image-20201015161253197.png)]

这一版是CSS的第一行代码，只有清除过后才能更好的布局

行内元素为了照顾兼容性，尽量只设置左右的内外边距，只有行内块元素才能设置上下的

以下为CSS3之后新增的，I9以上的版本才能用

2.10 圆角边框 border-radius

盒子就能变成圆角的了，border-radius: 10px;

圆的半径，圆和边框的交集形成圆角效果

当半径也是正方形的一半的时候，那就是圆形了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M6ihlgkK-1602809793134)(C:\Users\DAN\AppData\Roaming\Typora\typora-user-images\image-20201015205414457.png)]

• 参数值可以是数值或者百分比
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius
• 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

2.10.1 圆形

.yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50% 就是宽度和高度的一半  等价于 100px */
            border-radius: 50%;
        }


<div class="yuanxing"></div>

2.10.2 圆角矩形

设置为高度的一半

 .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }
<div class="juxing"></div>

2.10.3 设置不同的圆角

 .radius {
            width: 200px;
            height: 200px;
            /* border-radius: 10px 20px 30px 40px; */
            /* border-radius: 10px 40px; */
            border-top-left-radius: 20px;
            background-color: pink;
        }
<div class="radius"></div>

2.11 盒子阴影 box-shadow

CSS3中新增了盒子阴影的效果

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

值	描述
h-shadow	必须。水平阴影的位置。允许负值
v-shadow	必须。垂直阴影的位置。允许负值
blur	可选。模糊的距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色。
inset	可选。将外部阴影(outset)改成内部阴影(inset)。

1. 默认外阴影，但你不能写outset这个单词，否则阴影就无效了。你应该写inset这个单词，就会变成内部阴影了
2. 盒子阴影不会占用空间，不会影响其他盒子的排列

2.12 文字阴影 text-shadow

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

值	描述
h-shadow	必须。水平阴影的位置。允许负值
v-shadow	必须。垂直阴影的位置。允许负值
blur	可选。模糊的距离
color	可选。阴影的颜色。

3 一些常见的小问题

1. 布局为什么用不同盒子，我只想用div？

   标签都是有语义的，合理的地方用合理的标签。比如产品标题用h，大量文字段落就用p

2. 为什么用那么多类名？

   每个盒子一个名字可以更好的去找盒子

3. 什么时候用margin，什么时候用padding

   都可以用，padding可能需要计算减去旁边的框，margin则不用考虑这个问题

4. 没有思路

   布局有很多实现的方式，可以先模仿，再写