首页 > 其他分享> 文章详细

CSS

2021-04-18 09:06:08 阅读：138 来源： 互联网

标签：color 元素 height background font 选择器 CSS

系列文章目录

文章目录

系列文章目录
CSS

CSS

一、基础内容

1.基础选择器

1.1 标签选择器

定义：指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一得CSS样式
作用：把某一类标签全部选择出来

    div {
        color: pink;
    }

1.2 类选择器

语法

	.类名{
		属性1:属性值1;
}	
 <style>
        .red {
            color:  red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
 <div class="red font35">刘德华</div>

1.3 id选择器

语法

id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用

   /*  */
      #pink {
          color: pink;
      }

1.4 通配符选择器

语法

  <style>
     * {
         color: red;
     }
     /* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    </style>

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同得标签；	不能差异化选择	较多	p{color:red}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav{color:red}
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和JS搭配	#nav{color:red}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color:red}

2.字体操作

2.1 字体

定义

    <style>
     h2 {
         font-family: '微软雅黑';
     }
     p {
        /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
        font-family: 'Times New Roman', Times, serif;
     }
    </style>

2.2 字体大小

定义

    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
    </style>

2.3 字体粗细

定义
属性值

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal,而700等同于bold 注意这个数字后面不跟单位

    <style>
       .bold {
           /* font-weight: bold; */
           /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
           /* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
           font-weight: 700;    
       }
       h2 {
           font-weight: 400;   
           /* font-weight: normal;    */
       }
    </style>

2.4 文字样式

定义

    <style>
      p {
          font-style: italic;
      }
      em {
          /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
          font-style: normal;
      }
    </style>

属性

属性值	作用
normal	默认值，游览器会显示标准的字体样式font-style:normal;
italic	游览器会显示斜体的字体样式

2.5 字符符合属性

定义：

    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>

1.使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

2.不需要设置的属性可以省略（表示默认值），但必须保留fon-size 和 font-family ，否则font属性将不起作用

字体属性总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是700或者`blod`；不加粗是`normal`或者400 ；记住数字不要跟单位
font-style	字体样式	记住倾斜是`italic`;不倾斜是 `normal`；工作中我们最常用normal

3.文本外观属性

3.1 文本颜色

定义

    <style>
	div {
           /* color: deeppink; */
           /* color: #cc00ff; */
           color: rgb(255, 0, 255);
       }
    </style>

属性说明

表示	属性值
预定义的颜色值	red,green…
十六进制	#FF0000,…
RGB代码	rgb(255,0,0)/rgb(100%,0%,0%)

3.2 对齐文本

text-align

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: center; */
            text-align: right;
        }
    </style>

3.3 装饰文本

text-decoration

定义：可以给文本添加下划线、删除线、上划线等
属性说明

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

<style>
   div {
       /* 下划线 */
       /* text-decoration: underline;   */
     /* 删除线 */
       text-decoration: line-through;
       /* 上划线 */
       text-decoration: overline;

   }
   a {
       /* 取消a默认的下划线 */
       text-decoration: none;
       color: aqua;
   }
</style>

3.4 文本缩进

text-indent

定义：用来指定文本的第一行的缩进

    <style>
        p {
            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;  
        }
    </style>

3.5 行间距

line-height

定义：属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

    <style>
       div {
           line-height: 26px;
       }
       p {
           line-height: 25px;
       }
    </style>
</head>
<body>
    <div>中国人</div>
       <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
        
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>

文本属性总结

属性	表示	注意点
color	文本颜色	我们通常用十六进制比如而且是简写形式 #fff
text-aligh	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进2个字的距离(text-indent:2em)
text-decoration	文本修饰	记住添加下划线 underline取消下划线none
line-height	行高	控制行与行之间的距离

4.CSS引入方式

4.1 内部样式表

    <title>内部样式表</title>
    <style>
            div {
                color: pink;
            }
     </style>
</head>
<body>
    <div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
</body>

4.2 行内样式表

<body>
        <p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
</body>

4.3 外部样式表

   <link rel="stylesheet" href="style.css">

引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多，推荐	控制多个页面

二、进阶

1.Emmet语法

1.1 Emmet语法-生成标签

生成标签：div+tab
生成多个相同标签：div*3+tab
生成有父子级关系的标签：(eg)ul>li+tab
生成有兄弟关系的标签：(eg)div+p+tab
生成带有类名或者id名字的：.demo/#demo+tab
生成div带有类名有顺序的多个标签：.demo$*3+tab
生成标签且标签中间相同内容：div{jerry}+tab

div{$}*3+tab
<div>1</div>
<div>2</div>
<div>3</div>

1.2.Emmet语法-生成CSS

比如w200 按tab生成 width:200px;

2.复合选择器

2.1. 后代选择器（重要）

定义:表示选择元素1里面的所有元素2
```
元素1 元素2{ 样式声明 }
```
注意
1. 元素1和元素2中间用空格隔开
2. 元素1是父级，元素2是子级，最终选择的是元素2
3. 元素2可以是儿子，也可以是孙子，只要是元素1的后代
4. 元素1和元素2可以是任意基础选择器

<!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>
        /* 我想要把ol里面的小li选出来改为pink */

        ol li {
            color: pink;
        }

        /* 中国 山东 济南 蓝翔 */
        ol li a {
            color: red;
        }

        .nav li a {
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        变态写法
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
    </ul>

</body>

</html>

2.2. 子选择器（重要）

定义：只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素

元素1 > 元素2{样式声明}
div > p{样式声明}

注意：
1. 元素1和元素2中间用大于号隔开
2. 元素1是父级，元素2是子级，最终选择的是元素2
3. 元素2必须是亲儿子

<!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>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

3.并集选择器（重要）

定义：是各选择器通过英文（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分

元素1,元素2{样式声明} //选择了元素1和元素2
ul,div{样式声明}

注意
1. 元素1和元素2中间用逗号隔开
2. 逗号可以理解为和的意思
3. 并集选择通常用于集体声明

4.伪类选择器

1.链接伪类选择器

为了确保生校，建议按照LVHA的顺序声明：link visited hover active
a:link:选择所有未访问的链接

        a:link {
            color: #333;
            text-decoration: none;
        }

a:visited:选择所有已访问的链接

 		a:visited {
            color: orange;
        }

a:hover:选择鼠标指针位于其上的链接

		a:hover{
			color:skyblue;
		}

a:active:选择活动链接（鼠标按下未弹起的链接）

        a:active {
            color: green;
        }

2.focus伪类选择器

定义：焦点就是光标，用于选取获得焦点的表单元素

        input:focus {
            background-color: pink;
            color: red;
        }

*`nth-child(n)`选择器

n可以是数字，关键字，公式
1. n如果是数字，就是选择第n个子元素，从1开始
2. n如果是关键字：even偶数，odd奇数

<!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>CSS3新增结构伪类选择器</title>
    <style>
        /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }
        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }
         /* 3. 选择ul里面的第2个孩子 小li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>
</html>

选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格.nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus记住这个写法

3.元素的显示模式

分类：块元素/行内元素/行内块元素

3.1 块元素

3.1.1 常见的块元素：h1~h6 p div ul li等

3.1.2 特点：

自己独占一行
高、宽、内外边距都可以控制
宽度默认是容器（父级）的100%
是一个容器及贺子，里面可以放行内或者块级元素

3.1.3 注意

文字类的元素内不能使用块级元素
p和h1~h6标签标签主要用于存放文字，不能放块级元素

3.2 行内元素

3.2.1 常见的行内元素a strong b em i span等

3.2.2 特点：

相邻行内元素在一行上个，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

3.2.3 注意

链接里面不能再放链接
特殊情况链接<a> 里面可以放块级元素，但是给它转换一下块级模式最安全

3.3 行内块元素

3.3.1 例如

img input td

3.3.2 特点：

和相邻行内元素在一行上，但中间有空白缝隙，一行显示多个元素（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高、行高，内外边距都可以控制（块级元素特点）

总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容易的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度、高渡	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

4.元素显示模式转换

4.1 使用场景

想要增加链接<a>的触发范围

4.2转换

转换为块元素： display:block
转换为行内元素：display:inline
转换为行内块：display:inline-block

5.CSS背景

5.1 背景颜色`background-color`

	background-color:颜色值

一般情况下元素背景颜色默认值是transparent

5.2 背景图片`background`

5.2.1 背景属性`background-image:none|url()`

    <style>
        div {
            width: 300px;
            height: 300px;
            /* 不要落下 url()   */
            background-image: url(images/logo.png);
        }
    </style>

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图片

5.2.2 背景样式属性 `background-repeat`

    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认的情况下,背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4. 沿着Y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

5.3 背景图片位置`background-position`

    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
             background-position:  方位名词; 
             background-position: center top; 
             background-position: right center; 
             如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 
             background-position: center right; 
             此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 
             background-position: right; 
             此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 
            background-position: top;
        }
    </style>

参数值	说明
length	百分数\|长度值
position	top\|center\|bottom\|left\|right\|center方位名词

5.4 背景附着`background-attachment`

	background-attachment:scroll|fixed

    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 20px;
        }
    </style>

参数	作用
scroll	背景图像时随对象内容滚动
fixed	背景图像固定

5.5 复合写法

	background:transparent url(image.jpg) repeat-y fixed top;

5.6 背景色半透明`background:rgba(0,0,0,0,3)`

最后一个参数时alpha透明度，取值范围0~1

	background:rgba(0,0,0,0,3)

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标
background-attachment	背景附着	scoll(背景滚动)/fixed(背景固定)
背景简写	书写简单	背景颜色背景图片地址背景平铺背景滚动背景位置
背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3);后面必须时4个值

6.CSS的优先级

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

7.权重的叠加

<!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>
       /* 复合选择器会有权重叠加的问题 */
       /* 权重虽然会叠加,但是永远不会有进位 */
       /* 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>
</head>
<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>
</html>

三、CSS盒子模型

1. 边框`border`

1.1 定义

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

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

    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width 边框的粗细  一般情况下都用 px */
            border-width: 5px;
            /* border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*/
            border-style: solid;
            /* border-style: dashed; */
            /* border-style: dotted; */
            /* border-color 边框的颜色  */
            border-color: pink;
        }
    </style>

1.2 边框简写

	border:1px solid red;没有顺序
	//边框分开写法
	border-top:1px solid red;//只设定上边框

1.3 边框的合并

	border-collapse:collapse// 表示相邻边框合并在一起

collape是合并的意思

2.内边距（Padding）

2.1 定义：

用于设置内边距，边框与内容直接的距离

2.2 特点：

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

2.3 写法

值得个数	表达意思
padding:5px	1个值，代表上瞎左右都有5像素内边距
padding:5px 10px	2个值，代表上瞎内边距是5像素左右内边距是10像素
padding:5px 10px 20px	3个值，代表上内边距5像素左右内边距10像素下内边距20像素
padding:5px 10px 20px 30px	4个值，上是5像素右10像素下20像素左30像素（顺时针）

3.外边距（margin）

3.1 定义

控制盒子和贺子之间得距离

3.2 特点

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

3.3 写法

值得个数	表达意思
margin:5px	1个值，代表上下左右都有5像素外边距
margin:5px 10px	2个值，代表上下外边距是5像素左右外边距是10像素
margin:5px 10px 20px	3个值，代表上外边距5像素左右外边距10像素下外边距20像素
margin:5px 10px 20px 30px	4个值，上是5像素右10像素下20像素左30像素（顺时针）

3.4 典型应用

常见写法

margin:0 auto:

行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

4.清除内外边距

	*{
		padding:0;
		margin:0;
	}

5.圆角边框`border-radius`

	border-radius:length

5.1 特点：

参数值可以为数值或百分比形式
简写属性，可以跟四个值，代表：左上角，右上角，右下角，左下角

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

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

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

<body>
    1. 圆形的做法:
    <div class="yuanxing"></div>
    2. 圆角矩形的做法:
    <div class="juxing"></div>
    3. 可以设置不同的圆角:
    <div class="radius"></div>
</body>

</html>

6.盒子阴影`box-shadow`

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

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

注意

默认得是外阴影（outset），但是不可以写这个单词，否则导致阴影失效
盒子阴影不占用空间，不会影响其他盒子排列

7.文字阴影`text-shadow`

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

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

四、浮动(float)

1.定义：

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框得边缘

	选择器{float：属性值}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右

2.特性

浮动元素会脱离标准流
- 不再保留原先得位置
如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列
浮动元素会具有行内块元素特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它得大小根据内容来决定
- 浮动得盒子中间是没有缝隙得，是紧挨着一起得

3.清除浮动得方法

3.1 额外标签法

<!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>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>
    <div class="footer"></div>

</body>

</html>

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面得其他盒子

3.2 清除浮动 – 父级添加overflow:hidden|auto|scroll

	overflow:hidden

3.3 清除浮动 – :after伪元素法

五、定位(`position`)

1.定位模式

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.边偏移

边偏移	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线得距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线得距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线得距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线得距离

3.相对定位`relative`

	选择器{position:relative}

3.1 特点：

相对于自己原来得位置来移动得

4.绝对定位`absolute`

4.1 定义：相对于祖先元素来说

	选择器{position:absolute}

4.2 特点

如果没有祖先元素或者祖先元素没有定位，则以游览器为准定位
如果祖先元素有定位（相对、绝对、固定），则以最近一级有定位祖先元素为参考点移动位置
绝对定位不再占有原先得位置

5.固定定位`fixed`

	选择器{position:fixed}