开发

CSS在开发中的基本操作小结

文章目录
  1. 1. CSS写法
  2. 2. CSS文本设置
  3. 3. CSS选择器
    1. 3.1. id选择器
    2. 3.2. 类选择器
    3. 3.3. 层级选择器
    4. 3.4. 组选择器
    5. 3.5. 伪类选择器
  4. 4. CSS盒子模型
    1. 4.1. 盒子模型示例
  5. 5. margin操作
    1. 5.1. 边框合并
    2. 5.2. 外边距合并
    3. 5.3. margin-top塌陷
  6. 6. CSS元素溢出
  7. 7. 块元素，内联元素，内联块元素
    1. 7.1. 块元素
    2. 7.2. 内联元素
    3. 7.3. 内联块元素
  8. 8. 浮动布局
  9. 9. 定位布局
  10. 10. background

本篇主要基于CSS在开发中的常用操作进行小结。

CSS写法

1、外联式：通过link标签，链接到外部样式表。
在外部的css文件中根据class或是id定位到元素然后设置样式。

1
<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。
注意：这个是放在head标签下的。

1
2
3
4
<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3、内联式：通过标签的style属性，在标签内直接写样式。

1
<div style="width:100px; height:100px; color:red ">......</div>

CSS文本设置

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:’微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:’normal’; 设置不倾斜，font-style:’italic’;设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

CSS选择器

id选择器

通过给标签设置id，再在css中通过id值设定。
注意：这个id是不重复的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            color: dodgerblue;
        }
    </style>
</head>
<body>
    <div id="div1">这是第一个div</div>
</body>
</html>

类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            color: dodgerblue;
        }

        .green{
            color: green;
        }

        .big{
            font-size: 40px;
        }

    </style>
</head>
<body>
    <div id="div1" class="green big">这是第一个div</div>
</body>
</html>

层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可以和标签元素结合使用。
通过层级选择器，防止命名冲突。
注意：层级选择器最好不要超过四层。

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css层级选择器</title>
    <style type="text/css">
        .box{
            font-size: 20px;
            line-height: 40px;
        }
        .box span{
            color: green;
            font-weight: bold;
        }
        .box .span02{
            color: dodgerblue;
        }

    </style>
</head>
<body>
	<div class="box">主要应用在选择父元素下的<span>子元素</span>，或者子元素下面的子元素，
		可与标签元素结合使用，<span class="span02">减少命名</span>，同时也可以通过层级，防止命名冲突。
	</div>
	<div class="box2">主要应用在选择父元素下的子元素，或者<span>子元素</span>下面的子元素，
		可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
	</div>
</body>
</html>

组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box01,.box02,.box03{
            font-size: 20px;
            text-indent: 40px;
        }
        .box01{

            color: red;
        }
        .box02{

            color: pink;
        }
        .box03{
            color: gold;
        }

    </style>
</head>
<body>
    <div class="box01">这是第一个div</div>
    <div class="box02">这是第二个div</div>
    <div class="box03">这是第三个div</div>
</body>
</html>

伪类选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类和伪元素选择器</title>
    <style type="text/css">
        .link{
            font-size: 30px;
            text-decoration: none;
            color: dodgerblue;
        }
        .link:hover{
            color: gold;
            font-weight: bold;
            font-style: italic;
        }
        .box01,.box01{
            font-size: 20px;
        }
        .box01:before{
            content: "· ";
            color: red;
        }
        .box02:after{
            content: ".";
            color: red;
        }

    </style>
</head>
<body>
    <a href="https://www.baidu.com" class="link">百度一下，你就晓得</a>
    <div class="box01">这是第一个div</div>
    <div class="box02">这是第二个div</div>
</body>
</html>

CSS盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，用来设置元素对应的样式。

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="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子的真实尺寸</title>
    <style type="text/css">
        .box01,.box02,.box03{
            width: 50px;
            height: 50px;
            background-color: gold;
        }
        .box02,.box03{
            border:50px solid black;

        }
        .box03{
            padding: 50px;
        }

    </style>
</head>
<body>
    <!-- 盒子的真实尺寸等于 width+左右border+左右padding
         盒子的真实高度等于 height+上下border+上下padding
    -->
    <div class="box01">1</div>
    <br/>
    <div class="box02">2</div>
    <br/>
    <div class="box03">3</div>
</body>
</html>

盒子模型示例

只设置某一边的border，可以使用border-top或者border-bottom。

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新闻标题</title>
    <style type="text/css">
        .news_title{
            width: 400px;
            height: 37px;
            border-top: 1px solid #f00;
            border-bottom: 1px solid #666;
            font-size: 20px;
            color: #333;
            font-family: "Microsoft YaHei UI";
            font-weight: normal;
            padding-top: 17px;
            line-height: 20px;
            text-indent: 20px;
        }

        .news_title2{
            width: 400px;
            height: 54px;
            border-top: 1px solid #f00;
            border-bottom: 1px solid #666;
            border-left: 1px solid blue;
            font-size: 20px;
            color: #333;
            font-family: "Microsoft YaHei UI";
            font-weight: normal;
            line-height: 50px;
            text-indent: 20px;
        }

    </style>
</head>
<body>
    <h3 class="news_title">新闻列表</h3>
    <br/>
    <h3 class="news_title2">新闻列表</h3>
</body>
</html>

margin操作

边框合并

注意，这里定义了5个div元素，首先将margin设置为0px来查看效果：

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Margin使用技巧-边框合并</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        .box{
            width: 202px;
            height: 156px;
            background-color: gold;
            margin: 50px auto;/*居中操作*/
            /*margin-left: -50px;*//* 给定负值后会往反方向移动 */
        }
        .box div{
            width: 202px;
            height: 31.2px;
            border: 1px solid green;
            background-color: gold;
            /*border-bottom: 0px;*/
            margin: 0px;
        }
        /*.box .last{*/
            /*border-bottom: 1px solid green;*/
        /*}*/
    </style>

</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="last"></div>
    </div>
</body>
</html>

效果如下：

但是，当把margin的值设置为-1px时，中间重复的边框就能成功合并，效果如下：

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>margin布局训练</title>
    <style type="text/css">
        .box{
            width: 460px;
            /*height: 502px;*/
            border:1px black solid;
            padding-left: 20px;
            padding-right: 20px;
            margin: 50px auto;
        }
        .box1,.box2,.box3,.box4{
            margin-top: 20px;
        }
        .box4{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
            合并后的外边距的高度等于两个发生合并的外边距的高度中的最大者。</div>
        <div class="box2">外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
            合并后的外边距的高度等于两个发生合并的外边距的高度中的最大者。</div>
        <div class="box3">外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
            合并后的外边距的高度等于两个发生合并的外边距的高度中的最大者。</div>
        <div class="box4">外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
            合并后的外边距的高度等于两个发生合并的外边距的高度中的最大者。</div>
    </div>
</body>
</html>

margin-top塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败.
比如这样：

解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>margin-top塌陷</title>
    <style type="text/css">
        /* 第三种方式 */
        .clearfix:before{
            content:'';
            display: table;
        }

        .con{
            width: 300px;
            height: 300px;
            background-color: gold;
            /* 方式一：外部盒子设置一个边框 */
            /*border:1px black solid;*/
            /* 方式二：设置overflow */
            /*overflow: hidden;*/
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: green;
            margin-top: 100px;
            margin-left: 50px;
            margin-right: 50px;
        }
    </style>
</head>
<body>
    <div class="con clearfix">
        <div class="box"></div>
    </div>
</body>
</html>

解决后的效果：

CSS元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素溢出</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 200px;
            border:1px solid black;
            margin: 50px auto;
            background-color: gold;
            line-height: 30px;
            /*overflow: hidden;*/
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
    </div>
</body>
</html>

块元素，内联元素，内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素。

块元素

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：
1、支持全部的样式
2、如果没有设置宽度，默认的宽度为父级宽度100%
3、盒子占据一行、即使设置了宽度

内联元素

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
1、支持部分样式（不支持宽、高、margin上下、padding上下）
2、宽高由内容决定
3、盒子并在一行
4、代码换行，盒子之间会产生间距
5、子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

解决内联元素间隙的方法：
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
1、支持全部样式
2、如果没有设置宽高，宽高由内容决定
3、盒子并在一行
4、代码换行，盒子会产生间距
5、子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

基本操作，使用display设置inline-block即可。

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>块菜单制作练习</title>
    <style type="text/css">
        .menu{
            width: 694px;
            height: 50px;
            /*background-color: dodgerblue;*/
            margin: 50px auto;
            font-size: 0;
        }
        .menu a{
            width: 98px;
            height: 48px;
            background-color: white;
            display: inline-block;
            border: 1px solid gold;
            font-size: 16px;
            margin-left: -1px;
            text-align: center;
            line-height: 48px;/*设置行高保持居中*/
            text-decoration: none;
            color: pink;
            font-family: 'Microsoft YaHei UI';
        }
        .menu a:hover{
            background-color: gold;
            color: white;
        }
    </style>
</head>
<body>
    <div class="menu">
        <a href="#">首页</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
    </div>
</body>
</html>

浮动布局

使用浮动就是定义float样式，参数有：left,right,center。

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 lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Float新闻模块练习</title>
    <style type="text/css">
        .menu{
            width: 400px;
            height: 41px;
            border-bottom:1px #ff8200 solid ;
            margin: 50px auto 0;
            list-style: none;
        }
        .menu .box01{
            height: 41px;
            width: 80px;
            font-size: 16px;
            color:white;
            background-color: #ff8200;
            float: left;
            line-height: 41px;
            text-align: center;
            margin-left:-40px ;
        }
        .menu .box02{
            float: right;
            text-decoration: none;
            line-height: 41px;
        }

    </style>
</head>
<body>
    <ul class="menu">
        <li class="box01">新闻列表</li>
        <a href="#" class="box02">更多></a>
    </ul>
</body>
</html>

定位布局

定位可以使用css的position属性来进行设置，position参数如下：
relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
inherit 从父元素继承 position 属性的值。

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定位练习-1</title>
    <style type="text/css">
        .con{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin:50px auto;
            position: relative;
            border-radius: 14px;/*设置圆角*/
        }
        .box{
            width: 28px;
            height: 28px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 28px;

            position: absolute;
            left:86px;
            top:-14px;

            border-radius: 14px;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box">5</div>
    </div>
</body>
</html>

background

background是css中的一个常用属性，其中主要包括：
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动

同时，可以直接使用background将所有的属性写在一起，例如：

1
background: #00FF00 url(bgimage.gif) no-repeat left center fixed

这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。