CSS_3

CSS的三大特性

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

层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则

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

继承性

现实中的继承:我们继承了父亲的姓。

CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。

  • 恰当地使用继承可以简化代码,降低CSS样式的复杂性
  • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
  • 继承性口诀:龙生龙,凤生凤,老鼠生的孩子会打洞

行高的继承性

1
2
3
body{
font : 12px/1.5 Microsoft YaHei;
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高为1.5
  • 此时子元素的行高是:当前子元素的文字大小*1.5
  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级

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

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

优先级注意点

  • 权重是有4组数字组成,但是不会有进位。
  • 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器以此类推。
  • 等级判断从左向右,如果某位数值相同,则判断下一位数值。
  • 可以简单记忆法:通配符和继承权重为0,标签选择器为1类(伪类选择器为10,id选择器100,行内样式表为1000,!important无穷大。
  • 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css权重注意点</title>
<style>
/* 父亲的权重是 100 */
#father {
color: red!important;
}
/* p继承的权重为 0 */
/* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */
p {
color: pink;
}
body {
color: red;
}
/* a链接浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue;}*/
a {
color: green;
}
</style>
</head>
<body>
<div id="father">
<p>你还是很好看</p>
</div>
<a href="#">我是单独的样式</a>
</body>
</html>

权重叠加:如果是复合选择器,则会有权重尋加,需要计算权重。

  • div ul i → 0,0,0,3
  • nav ul li → 0,0,1,2
  • a:hover → 0,0,1,1(伪类选择器是10)
  • .nav a → 0,0,1,1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
/* 复合选择器会有权重叠加的问题 */
/* 权重虽然会叠加,但是永远不会有进位 */
/* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */
ul li {
color: green;
}
/* li 的权重是 0,0,0,1 1 */
li {
color: red;
}
/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */
.nav li {
color: pink;
}
</style>

盒子模型

看透网页布局的本质

网页布局过程

  • 先准备好相关的网页元素,网页元素基本都是盒子 Box 。
  • 利用 CSS 设置好盒子样式,然后摆放到相应位置。
  • 往盒子里面装内容.
    网页布局的核心本质: 就是利用 CSS 摆盒子。

盒子模型(Box Model)组成


所谓 盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

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

边框(border)


border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色。
语法:

1
border : border-width || border-style || border-color

边框样式 border-style 可以设置如下值:

  • none:没有边框即忽略所有边框的宽度(默认值)
  • solid:边框为单实线(最为常用的)
  • dashed:边框为虚线
  • dotted:边框为点线

CSS 边框属性允许你指定一个元素边框的样式和颜色。
边框简写:

1
border: 1px solid red; 没有顺序

边框分开写法:

1
border-top: 1px solid red; /* 只设定上边框, 其余同理 */

课堂要求:请给一个 200*200 的盒子,设置上边框为红色,其余边框为蓝色(提示:一定注意边框的层叠性)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
/* 请给一个 200*200 的盒子,设置上边框为红色,其余边框为蓝色 */
div {
width: 200px;
height: 200px;
/* border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue; */
/* border包含四条边 */
border: 1px solid blue;
/* 层叠性 只是层叠了 上边框啊 */
border-top: 1px solid red;
}
</style>
<body>
<div></div>
</body>

表格的细线边框

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

1
border-collapse:collapse;
  • collapse 单词是合并的意思
  • border-collapse: collapse; 表示相邻边框合并在一起

边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:
1.测量盒子大小的时候,不量边框.
2.如果测量的时候包含了边框,则需要 width/height 减去边框宽度

内边距(padding)

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

padding 属性(简写属性)可以有一到四个值。

以上 4 种情况,我们实际开发都会遇到。

当我们给盒子指定 padding 值之后,发生了 2 件事情:

  1. 内容和边框有了距离,添加了内边距。
  2. padding影响了盒子实际大小。
    也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。

解决方案:
如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可。

案例:新浪导航案例-padding影响盒子好处
padding内边距可以撑开盒子,我们可以做非常巧妙的运用.
因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.nav{
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
}

.nav a{
/* a属于行内元素 此时必须要转换 行内块元素 */
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
line-height: 41px;
text-decoration: none;
}

.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
</html>

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

外边距(margin)

margin 属性用于设置外边距,即控制盒子和盒子之间的距离。

margin 简写方式代表的意义跟 padding 完全一致。

外边距典型应用

外边距可以让块级盒子水平居中,但是必须满足两个条件:
① 盒子必须指定了宽度(width)。
② 盒子左右的外边距都设置为 auto 。

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

常见的写法,以下三种都可以:

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

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

外边距合并

使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。
主要有两种情况:
1.相邻块元素垂直外边距的合并
2.嵌套块元素垂直外边距的塌陷

1. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有
上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案:
尽量只给一个盒子添加 margin 值。

2. 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

解决方案:
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题,后面咱们再总结。

清除内外边距

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

1
2
3
4
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}

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

PS 基本操作

因为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是在 PS 里面完成。

  • 文件→打开 :可以打开我们要测量的图片
  • Ctrl+R:可以打开标尺,或者视图→标尺
  • 右击标尺,把里面的单位改为像素
  • Ctrl+加号(+) 可以放大视图, Ctrl+减号(-) 可以缩小视图
  • 按住空格键,鼠标可以变成小手,拖动 PS 视图
  • 用选区拖动 可以测量大小
  • Ctrl+ D 可以取消选区,或者在旁边空白处点击一下也可以取消选区

综合案例

案例1:产品模块


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>综合案例-产品模块</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
a {
color: #333;
text-decoration: none;
}
.box {
width: 298px;
height: 415px;
background-color:#fff;
/* 让块级的盒子水平居中对齐 */
margin: 100px auto;
}
.box img {
/* 图片的宽度和父亲一样宽 */
width: 100%;
}
.review {
height: 70px;
font-size: 14px;
/* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */
padding: 0 28px;
margin-top: 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info {
font-size: 14px;
margin-top: 15px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
font-weight: 400;

}
.info span {
color: #ff6700;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/img.jpg" alt="">
<p class="review">快递牛,整体不错蓝牙可以说秒连。红米给力</p>
<div class="appraise">来自于 117384232 的评价</div>
<div class="info">
<h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
<em>|</em>
<span> 99.9元</span>
</div>
</div>
</body>
</html>

到底用 margin 还是 padding?
盒子与盒子的距离一般用margin

案例2:快报模块


新知识点: 去掉 li 前面的 项目符号(小圆点)

语法:

1
list-style: none;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新闻快报模块</title>
<style>
* {
margin: 0;
padding: 0;
}

li {
/* 去掉li前面的小圆点 */
list-style: none;
}

.box {
width: 248px;
height: 163px;
border: 1px solid #ccc;
margin: 100px auto;
}
/*设置高,再设置行高就可以居中*/
.box h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left: 15px;
}

.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}

.box ul li a:hover {
text-decoration: underline;
}

.box ul li {
height: 23px;
line-height: 23px;
padding-left: 20px;
}

.box ul {
margin-top: 7px;
}
</style>
</head>

<body>
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】母亲节,健康好礼低至5折!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】9.9元洗100张照片!</a></li>
<li><a href="#">【特惠】长虹智能空调立省1000</a></li>
</ul>

</div>
</body>

</html>

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!