CSSDay01选择器，关于选择器的权重计算，常见样式属性，定位，两栏自适应，水平居中和垂直居中实现方式_假如水平对齐的的属性的数值是0x01,全部居中(同时水平居中和竖直居中)属性的数值-CSDN博客

本文链接：https://blog.csdn.net/weixin_43415644/article/details/87900361

0x00样式写入的常见方式

0x06 常见两栏自适应布局（重点，面试常问）

0x00样式写入的常见方式

CSS：层叠样式表 Cascading Style Sheets

html+css 负责页面内容 javascript 负责了页面的行为

html：负责页面的结构。

css：负责页面的样子。

<xiao 颜色=“红色” 大小=“大” 种类=“黄” 形状=“好”>苹果</xiao>

内联样式的标签的属性越来越多

1.浏览器麻烦

2.对开发人员来说：代码很复杂，很难维护

为了解决以上问题：W3C制定了CSS标准,将众多属性合并为一个属性（内部样式），从而解决了第一个问题

<xiao style="
  颜色：红色；
  大小：大；
  种类：黄;
  形状：好；
">苹果</xiao>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>样式1</title>
    <!--选择器-->
    <style>
        div{
            color:crimson;
            width: 100px;
            height:100px;
            background:orange;
        }
    </style>
</head>
<body>
    <div>苹果1</div>
    
</body>
</html>

进一步，可以用选择器的方式，将样式属性和标签之间建立联系，从而将样式属性都提到外面去，解决第二个问题

xiao"
   颜色：红色；
   大小：大；
   种类：黄；
   形状：好；
"
<xiao>苹果</xiao>

为了提升代码的可复用性，将html和css直接分开成两个文件（外部样式）

1.css文件

div{
    color:rgb(255,0,0);/*红色最深，绿色和蓝色没有*/
    color:rgb(100%,0%,10%);/*10%表示255*10%=25.5*/
    color：#ff0000；
    color：#f00;/*有重复的可以简写*/
    width: 100px;
    height:100px;
    background:orange;
}
/*
选择器 {
   

     声明
}
*/

html文件用link标签链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>样式1</title>
    <!--选择器-->
<link rel="stylesheet" href="1.css"> //rel="stylesheet"死记硬背下就可以
</head>
<body>
    <div>苹果1</div>
    
</body>
</html>

颜色：rgb色彩模式：r红色 g绿色 b蓝色由0到255调节深浅.

16进制的颜色写法 255=#FF=2^8-1 #FF0000=rgb(255,0,0)

0x01选择器：

作用：通过选择器可以找到html中对应的元素，并且把选择器后面的样式传递给元素。

4个大类：

基本选择器
组合选择器
属性选择器
伪元素选择器

基本选择器：

*通配符选择器
标签选择器div
id选择器
calss类型选择器

0x02 关于css选择器的权重计算艺术

1.谁优先级高用谁的样式

第一优先级：无条件的属性只需要在属性后面使用!important,它会覆盖页面内任何位置定义的元素样式

第二优先级：在html中给元素标签加style，即内联样式例如<p style="background:blue"></p>。该方法会造成css难以管理，尽量少用

第三优先级:由一个或多个id选择器来定义。例如：

#id{margin:0;}会覆盖.classname{margin:0;}

第四优先级:由一个或多个类选择器、属性选择器、伪类选择器定义

例如：.classname{margin:3px;}会覆盖div{margin:6px;}

第五优先级:由一个或多个类型选择器定义，例如：

div{margin:6px}覆盖*{margin:10px;}

第六优先级：统配选择器，例如：*{margin:6px;}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		/*通配符选择器，优先级最低*/
		*{
			width: 100px;
			height:100px;
			background: red;
		}
		/*标签选择器，优先级比通配符选择器高*/
		body,html{
			background: white;
		}
		/*!important优先级最高*/
		div{
			background: black!important;
		}
		p{
			color:green;
		}
		/*类选择器，优先级比标签选择器高*/
		.tim{
			background: yellow;
		}
		/*id选择器，优先级比类选择器高*/
		#xiaod{
			background:#00FF00;
		}
	</style>
</head>
<body>
<!-- 内联样式，优先级比id选择器高 -->
<div class='tim' id='xiaod' style="background:blue"></div>
<p>hello world</p>
</body>
</html>

2.权重计算值分级：

第一等级:代表内联样式，如style="",权值为1000

第二等级:代表id选择器,如#content,权值为100；

第三等级:代表类,伪类和属性选择器，如.content,权值为10

第四等级:代表标签选择器和伪元素选择器,如div p 权值为1

如果遇到样式冲突了，你想设置的样式不起作用时可以利用上述知识提高优先级，增加其权重。

0x03 css常见样式属性

height 设置content的高度

width 设置content的宽度

padding:设置内边距。可以设置一到四个值，建议如下：

padding:10px;
- 所有四个填充都是10px
padding:10px 5px
- 上和下的填充是10px
- 右和左的填充是5px
padding:10px 5px 15px
- 上填充10px
- 右和左填充是5px
- 下填充是15px
padding:10px 5px 15px 20px（顺时针的顺序，面试可能问，要记住）
- 上填充是10px
- 右填充是5px
- 下填充是15px
- 左填充是20px

margin 设置外边距，同上

border 设置边框,有三个参数：粗细线型颜色例如：border：5px solid green;

color:设置字体颜色

background:设置背景颜色(padding+content的颜色)全称 background-color

font-size:设置字体大小

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.tim{
			width:200px;
			height: 200px;
			background: black;
			color:green;
			font-size:24px;
			/*700是一个临界值，到700就加粗*/
			font-weight: 700;
			border:5px solid green;
			margin: 10px 20px 30px 40px;
			/*等同于*/
			/*
			margin-top:10px;
			margin-right:20px;
			margin-bottom: 30px;
			margin-left: 40px; 
			*/
			padding:10px 20px 30px 40px;
			
		}

	</style>
</head>
<body>
<div class = 'tim'>我是tim</div>

</body>
</html>

0x04 浮动布局与清除浮动

块级元素比较霸道，总要占据一行。那么如何让块级元素在同一个行显示呢？

只要设置块级元素向左浮动即可

设置浮动布局，float的属性有：

left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，并会显示其在文本中出现的位置
inherit 规定应该从父元素继承float属性的值（这种情况一般可以忽略）

<!DOCTYPE html>
<html>
<head>
	<title>
		<meta charset="utf-8">
	</title>
	<style type="text/css">
		ul li{
			/*取掉li前面的小圆点*/
			list-style: none;
			/*元素向左浮动*/
			float:left;
			margin-right: 10px;

		}
	</style>
</head>
<body>
	<ul>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		<div>我是块级元素，我并没有设置浮动，我要自己占一行</div>
		<!-- 然而，div之前的元素设置的浮动会影响到紧跟的块级元素，让div与他们同一行，这时就需要清除浮动了 -->
	</ul>
</body>
</html>

清除浮动(溢出)的方法

在父元素上设置overflow:hidden;
在父元素上设置伪类，属性设置为content:"";display:block;clear:both;
使用空标签设置clear:both

<!DOCTYPE html>
<html>
<head>
	<title>
		<meta charset="utf-8">
	</title>
	<style type="text/css">
		/*第一种清除浮动溢出的方法，父元素上设置overflow:hidden
		ul{
			overflow: hidden;
		}*/
		/*第二中清除浮动溢出的方法，父元素上设置伪类(推荐)*/
		ul:after{
			/*after标签的内容为空*/
			content:"";
			/*设置after标签为块级元素*/
			display:block;
			/*清除浮动*/
			clear:both;
		}
		ul li{
			/*取掉li前面的小圆点*/
			list-style: none;
			/*元素向左浮动*/
			float:left;
			margin-right: 10px;

		}
		/*第三种清除浮动的方法，在浮动溢出的边界设置一个空元素，设置其属性为clear:both
		.null{
			clear:both;
		}*/
	</style>
</head>
<body>
	<ul>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	<!-- 	<div class='null'></div> -->
	</ul>
	<div>我是块级元素，我并没有设置浮动，我要自己占一行</div>
		<!-- 然而，div之前的元素设置的浮动会影响到紧跟的块级元素，让div与他们同一行，这时就需要清除浮动了 -->
</body>
</html>

0x05 css定位position

为什么浮动布局会影响到之后的元素，因为浮动布局是脱离文档流的，即标签浮动了起来，之后的元素也能和它同行。

但是浮动布局并没有脱离文本流，浮动标签其后的标签的内容并不能占据浮动标签的内容的位置。

1.static:默认值。没有定位。元素出现在正常流中

2.absolute:元素直接脱离文档流（相当于浮动在文档流的上一层）并且也脱离了文本流（即其上的文字也浮动了起来），然后相对于"除static定位以外的第一个父元素"进行定位,即相对于最近的已经设置了定位的父元素进行定位。

（1）如果父级元素都没有定位,就相对最外层的祖先元素进行定位,不论该祖先元素有没有定位(即相对于body标签进行定位)。这种情况下absolute的效果与fixed效果相同。
（2）如果有祖上元素设置了position:relative/absolute/fixed 就相对此祖上元素定位。

absolute的好处：将两个标签的位置捆绑在一起。这样当外层标签位置改变的时候，内层标签的位置会跟随改变。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			/*不同浏览器有默认的margin和padding值，我们可以通过通配符来取消默认*/
			margin:0px;
			padding:0px;
		}
		.o1{
			width:100px;
			height: 100px;
			border:5px solid green;
		}
		.o2{
			position:relative;
			left:10px;
			width:50px;
			height: 50px;
			border:5px solid blue;
		}
		.o3{
			position:absolute;
			/*该标签盒子最外层（因为没有外边距，所以是border）距离 上级已定位标签的盒子的最里层(即内容)的距离是25px*/
			bottom:0px;
			right:0px;
			width:25px;
			height:25px;
			border:5px solid red;

		}

	</style>
</head>
<body>
<div class='o1'>
	<div class='o2'>
		<div class='o3'>
			
		</div>
	</div>
</div>
</body>
</html>

3.fixed:生成固定定位的元素，相对于浏览器窗口进行定位.和绝对定位类似，也会脱离文档流，可能会覆盖住其他元素；

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			/*不同浏览器有默认的margin和padding值，我们可以通过通配符来取消默认*/
			margin:0px;
			padding:0px;
		}
		.ad{
			position:fixed;
			bottom:0px;
			right:0px;
			width:50px;
			height:50px;
			border:5px solid green;

		}

	</style>
</head>
<body>
<div class='ad'>
	我是弹窗广告
</div>
</body>
</html>

4.relative:生成相对定位的元素，即相对于自身正常位置（即正常应该出现在流中的位置）进行定位

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.parent{
			width:500px;
			height: 500px;
			border:1px solid green;
		}
		.child{
			width:500px;
			height:500px;
			border:1px solid blue;
			/*定位方式:相对定位，即相对于自身正常出现在文件流中的位置;*/
			position:relative;
			/*相对定位距离左边50px*/
			left:50px;
			/*相对定位距离上面50px*/
			top:50px;
		}
	</style>
</head>
<body>
<div class='parent'>
	<div class='child'></div>
</div>
</body>
</html>

inherit:规定应该从父元素继承position属性的值

每种浏览器可能会默认设置不同的margin和padding，我们可以先用一个通配符来将margin和padding都归0

0x06 常见两栏自适应布局（重点，面试常问）

所谓自适应，即标签自己可以适应浏览器窗口大小的变化。

1.利用浮动布局实现两栏自适应

左侧固定，右侧自适应

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>自适应布局</title>
	<style type="text/css">
		.parent{
			/*清除浮动*/
			overflow: hidden;
		}
		.leftchild{
			float: left;
			background: blue;
			height:100px;
			width:100px;
		}
		.rightchild{
			height:100px;
			margin-left: 100px;
			background: green;
		}
	</style>
</head>
<body>
<div class="parent">
	<div class='leftchild'>2222</div>
	<div class='rightchild'>我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的</div>
</div>
</body>
</html>

分析：

因为左侧和右侧我们要捆绑在一起，所以用一个div将他们包起来。

因为左侧我们设置宽度。右侧我们没有设置宽度。所以左侧的宽度是固定的，右侧块级元素的宽度跟随浏览器窗口大小的变化而变化。

注意：左侧设置浮动，只是让标签飘了起来，脱离了文档流，并没有脱离文本流

2.利用定位布局实现两栏自适应

解释：首先用div将两者捆绑在一起。

父标签设置position:relative，但是没有设置top和left，说明父标签正常出现在文档流中，这样做只是为了能让子元素相对它定位

leftchild设置position:absolute后，它就会从文档流中删除。然后以给定的top和left（如果没有给定两者默认为0）重新定位。并且重新定位后，不占据文档流的空间。

这样一来rightchild就能占据leftchild的哪一行，让两个块级元素看起来在同一行。

因为rightchild没有设置宽度，而它又是块级元素，所以他的宽度可以自适应页面的宽度。

为什么要设置margin-left:100px?因为leftchild不仅脱离了文档流，也脱离了文本流。所以leftchild上面的文字会覆盖其下层的文字。所以需要设置margin-left:100px.让rightchild和leftchild错开。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>自适应布局</title>
	<style type="text/css">
		.parent{
			position:relative;
		}
		.leftchild{
			position:absolute;
			top:0;
			left:0;
			background: blue;
			height:100px;
			width:100px;
		}
		.rightchild{
			height:100px;
			margin-left: 100px;
			background: green;
		}
	</style>
</head>
<body>
<div class="parent">
	<div class='leftchild'>2222</div>
	<div class='rightchild'>我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的</div>
</div>
</body>
</html>

作业：实现三栏自适应（左右固定尺寸，中间为自适应）

1.定位布局实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>自适应布局</title>
	<style type="text/css">
		.parent{
			position:relative;
		}
		.leftchild{
			position:absolute;
			top:0;
			left:0;
			background: blue;
			height:100px;
			width:100px;
		}
		.rightchild{
			position:absolute;
			top:0;
			right:0;
			height:100px;
			width:100px;
			background: green;
		}
		.midchild{
			height:100px;
			margin-left: 100px;
			margin-right:100px;
			background: red;
		}
	</style>
</head>
<body>
<div class="parent">
	<div class='leftchild'>2222</div>
	<div class='midchild'>我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的</div>
	<div class='rightchild'>1111</div>
</div>
</body>
</html>

2.浮动布局实现

0x07常见水平居中、垂直居中实现方式

1.第一种用text-align:center;height与line-height设置同高

特别注意：line-height的百分比表示的意义例如 line-height:120% 表示当前行高是字体的大小的120% ，line-height的百分比表示形式并不是以上级元素为参照的。所以 height:100% line-height:100%这种设置方法是不能居中的。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>水平居中案例</title>
	<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		.page{
			overflow: hidden;
		}
		.page li{
			float:left;
			width:30px;
			height:30px;
			line-height: 30px;
			text-align: center;
			background: black;
			color:green;
			list-style: none;
			margin-right:5px;

		}
	</style>
</head>
<body>
<ul class='page'>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
</body>
</html>

2.第二种图片的水平垂直居中：

在图片所在容器中设置
- text-align:center;
- height与line-height设置同高，
然后图片设置vertical-align:middle 表示图片处于其所在行的中间。
注:vertical-align:text-bottom 表示图片和文本的底部对齐。

解释：

text-align:center实现了水平居中

line-height与所在容器的height同高，实现了图片所占行的垂直居中

vertical-align:middle 实现了图片在其所占行中的居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>水平居中案例</title>
	<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		.imgbox{
			width:100px;
			height:100px;
			line-height:100px;
			text-align: center;
			border:1px solid red;
		}
		.imgbox img{
			width:20px;
			height:20px;
			border:1px solid red;
			vertical-align:middle;
		}
	</style>
</head>
<body>
<div class='imgbox'>
	<img src="1.jpg">
</div>
</body>
</html>

3.第三种利用position定位，例子如下：

方法一：

原理：给元素设置好宽高，然后将元素定位到父元素大约中间的位置。然后设置负的margin值。将元素水平垂直居中

position:absolute;

width:xxx;

height:xxx;

top:50%;

left:50%;

margin-top:-height/2

margin-left:-width/2

方法二：同方法一原理一样。只不过最后微调的方法不同。因为transform:translateX的百分比表示形式就是以元素的宽度为参照的。所以直接设置为-50%,然后元素向左平移其宽度的一半即可水平居中。

position:absolute;

width:xxx;

height:xxx;

top:50%;

left:50%;

transform:translateY(-50%);

transform:translateX(-50%);

方法三：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>水平居中案例</title>
	<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		.imgbox{
			position:relative;
			width:100px;
			height:100px;
			border:1px solid red;
		}
		.imgbox img{
			position:absolute;
			left:0;
			right:0;
			top:0;
			bottom:0;
			margin: auto;
			width:20px;
			height:20px;
			border:1px solid red;
			vertical-align: middle
		}
	</style>
</head>
<body>
<div class='imgbox'>
	<img src="1.jpg">
</div>
</body>
</html>

4.对于块级元素，可以使用margin:0 auto来实现水平居中

首先，margin:0 auto表示对一行中的剩余空间进行自动分配。因为块级元素独占一行且默认宽度为一行宽度的100%，所以只要为块级元素重新设置了宽度。一行中就有一部分剩余空间，这时，如果将margin-right:auto 且margin-left:auto，那么左右外边距将会平均分配一行的剩余空间，这样就实现了块级元素的水平居中的效果。如果只在一边设置margin为auto，那么这一边将独占所有剩余空间。

https://www.cnblogs.com/sunhang32/p/11826580.html

注意点：

1.必须是块级元素,例如图片img是行内块级元素，如果直接设置margin:0 auto就不行，必须先将其转化为块级元素。因为行内块级元素意味着一行之中还可能有其他元素，那么既然有其他元素，一个元素怎么能margin:0 auto来平分剩余空间呢？

2.必须为块级元素设置宽度。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#tim{
			width:200px;
			height:200px;
			border:1px solid green;
			margin:0 auto;
		}
	</style>
</head>
<body>
<div id="tim">
	
</div>
</body>
</html>

/*标签选择器*/
div{
    color:crimson;
    color: rgb(255, 0,0);
    width: 100px;
    height:100px;
    background:orange;
}
p{
    border：1px solid black;
}
/*通配符选择器*/
/* *为通配符，表示对应所有的html元素 */

*{
    border: 1px solid black/*给所有元素加上宽度为1px 实线 黑色的外边框*/
    
}

/*id选择器,对应html中id等于该编号的标签*/

#txt{/*也可以写成*#txt 即所有标签中只要id为txt的
    都使用该属性，或者也可以把通配符换成具体的p*/
   font-size: 60px;
}
#txt2{
    color:red
}
/*在编程中一讲到id相关，就把它理解为唯一的，就相当于人的身份证号码
特点：
1.每个人有且仅有一个身份证号码。
2.人和人之间的身份证号码是不一样的。
css:
1.元素只能有一个id
2.元素和元素之间的id可以相同。多个元素可以共用一个id
*/
/*class选择器*/
.txt{/*用点来表示class，对应class属性等于txt的标签*/
    font-size:100px;
}
.txt2{/*不同于一个标签只能有一个id，一个标签可以有多个class属性*/
    color:red;
}/*也可以在之前加上*或者具体的标签*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>样式1</title>
    <!--选择器-->
<link rel="stylesheet" href="1.css">
</head>
<body>
    <div id="txt2">苹果1</div>
    <p id="txt">大鸭梨</p>
    <p class="txt txt2">燃烧我的卡路里</p>
</body>
</html>

css原理：

1.优先原则：后解析的内容，会覆盖掉之前解析的内容。

2.继承原则：嵌套里面的标签会继承外部标签的某些样式。

1.优先原则：对选择器而言

1.同一个选择器：从上往下执行解析。

div{
    color:red;
    color:green;/*绿色会覆盖红色*/
}

2.同一类型的选择器：从上往下执行

div{
    background-color:red;
}
div{
    background-color:green;
}/*绿色会覆盖红色*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="2.css">
    
</head>
<body>
    <div class="bg1 bg2"> div1</div>
</body>
</html>

.bg1{
    background-color:yellow;
}
.bg2{
    background-color:blue;/*blue会覆盖yellow*/
}

3.不同类型的选择器：选择器自己的优先级决定了选择的先后顺序

先解析低优先级的选择器，再解析高优先级的选择器。最终生效的将是高优先级的。

低* <div< class< id 高


.bg1{
   background: green;
}
div{
    background: red;
}

/*绿色会覆盖红色*/

4.外部样式和内部样式合并之后一起解析

合并后外部样式在前面，内部样式在后面。在根据前面的3条规则做解析

5.内敛样式：只有当外部样式和内部样式解析完之后，才解析内敛样式。

6.加了important字段的最后执行

div{
    background: red !important;
    font-size:30px;
}

总结：优先原则

同一个选择器从上而下解析
同一类型的选择器从上而下解析
不同类型的选择器先解析低优先级的，再解析高优先级的
外部样式和内部样式还有内敛样式合并，外部在前，内部在后，内敛最后
加了！important的最后执行

继承原则

1.跟文本相关的样式才是可以被继承的。其他的不能被继承。

2.块级元素宽度如果没有设置，那么会继承父类块级元素的宽，高度由内容决定。

CSSDay01选择器，关于选择器的权重计算，常见样式属性，定位，两栏自适应，水平居中和垂直居中实现方式

0x00样式写入的常见方式

0x01选择器：

0x02 关于css选择器的权重计算艺术

0x03 css常见样式属性

0x04 浮动布局 与清除浮动

0x05 css定位position

0x06 常见两栏自适应布局（重点，面试常问）

1.利用浮动布局实现两栏自适应

2.利用定位布局实现两栏自适应

0x07常见水平居中、垂直居中实现方式

css原理：

1.优先原则：对选择器而言

总结：优先原则

继承原则

0x04 浮动布局与清除浮动