一、浮动
使用 float 属性，可以轻松地并排浮动内容框
性质1、浮动的元素 脱离文档标准流
<style>
* {
padding: 0;
margin: 0;
}
.box1{
width: 400px;
height: 400px;
}
.box2{
width: 400px;
height: 400px;
background-color: green;
float: left;
}
.box3{
width: 450px;
height: 450px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
性质2 ：浮动的元素互相贴靠
<style>
* {
padding: 0;
margin: 0;
}
.monkey {
float: left;
width: 150px;
height: 250px;
}
.pig {
float: left;
width: 300px;
height: 200px;
background-color: pink;
}
.fish {
float: left;
width: 100px;
height: 400px;
background-color: purple;
}
</style>
</head>
<body>
<div class="monkey">孙猴子</div>
<div class="pig">猪八戒</div>
<div class="fish">沙和尚</div>
性质3：字围效果
<style>
* {
padding: 0;
margin: 0;
}
p {
float: left;
width: 300px;
height: 500px;
background-color: pink;
}
div {
width: 900px;
height: 900px;
background-color: green;
color: #fff;
}
</style>
</head>
<body>
<p></p>
<div>
00000000000000000000000《假如今天是我生命中的最后一天……》 假如今天是我生命中的最后一天。 我要如何利用这最后、最宝贵的一天呢？首先，我要把一天的时间珍藏好，不让一分一秒的时间滴漏。我不为昨日的不幸叹息，过去的已够不幸，不要再陪上今日的运道。
</div>
二、浮动的清除
1、给祖先元素加高度
<style> * { padding: 0; margin: 0; } .box1 { height: 100px; /**/ } ul { /*去掉无序列表前面的点*/ list-style: none; } li { float: left; /*display: inline;*/ width: 100px; height: 50px; background-color:gold; /*控制文本在盒模型中水平居中*/ text-align: center; color: #fff; line-height:50px; } </style> </head> <body> <div class="box1"> <ul> <li>哇哈哈</li> <li>喜之郎</li> <li>可比克</li> <li>卫龙</li> </ul> </div> <div class="box2"> <ul> <li>吃鸡</li> <li>王者</li> <li>阴阳师</li> <li>练练看</li> </ul> </div>
注意点：如果一个元素要浮动 那么他的祖先元素一定要有高度 有高度的盒子才能关住浮动
2、clear：both
清除两边浮动对我盒模型本身的影响
.box2 {
/*清除：两者都*/
clear: both;
margin-top: 3000px;
}
缺点：向上的外边距会失效
3．内隔法 （隔墙法）
<style> * { padding: 0; margin: 0; } .c { clear: both; height: 100px; } /*.box1 {*/ /*margin-bottom:49px;*/ /*}*/ /*.box2 {*/ /*!*清除：两者都*!*/ /*clear: both;*/ /*!*margin-top: 3000px;*!*/ /*}*/ /*.box1 {*/ /*height: 100px;*/ /*!*background-color: green;*!*/ /*}*/ ul { /*去掉无序列表前面的点*/ list-style: none; } li { float: left; /*display: inline;*/ width: 100px; height: 50px; background-color:gold; /*控制文本在盒模型中水平居中*/ text-align: center; color: #fff; line-height:50px; } </style> </head> <body> <div class="box1"> <ul> <li>哇哈哈</li> <li>喜之郎</li> <li>可比克</li> <li>卫龙</li> </ul> </div> <div class="c"></div> <div class="box2"> <ul> <li>吃鸡</li> <li>王者</li> <li>阴阳师</li> <li>练练看</li> </ul> </div>
二、行高
设置单行文本 垂直居中 的方式
只需要将行高设置和盒模型的高度设置一致即可，文本在他的行高永远都是垂直居中的
设置多行文本居中
<title>Title</title> <style> * { margin: 0; padding: 0; } p{ width: 500px; height: 360px; border:1px solid black; margin:100px auto; text-align: center; line-height:20px; padding-top: 240px; } </style> </head> <body> <p>我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀</p> </body>
三．伪类
同一个标签根据用户的不同状态显示不同的样式
<style> /*link 是用户鼠标没有点击这个链接的时候所产生的样式 */ a:link { color: green; font-size: 10px; text-decoration: none; } /*a {*/ /*color: green;*/ /*font-size: 30px;*/ /*background-color: #4131ff;*/ /*}*/ /*visited 表示用户鼠标访问完这个链接之后产生的样式 */ a:visited { color: #a0fffc; /*font-size: 90px;*/ text-decoration: underline; /*background-color: red;*/ } /*hover:表示鼠标经过产生的样式*/ a:hover { color: #fff702; font-size: 90px; text-decoration: underline; background-color: #000000; } /*active:表示用户鼠标点击这个链接不松手时候产生的样式*/ a:active { color: #3bf2ff; font-size: 50px; text-decoration:none; background-color: #ffe77c; text-shadow: 3px 3px 5px blue; } </style> </head> <body> <a href="001.html">我要去001</a> </body>
四、Background属性
<style> body { background-image: url(imgs/pinpu.jpg); } .box { width: 900px; height: 900px; border:1px solid #fff; margin: 0 auto; /**/ /*url:uniform resource locator 统一资源定位符 */ /*背景图片默认的会铺满整个屏幕 是重复的*/ background-image: url(imgs/2.jpg); background-repeat:no-repeat; /*background-repeat:repeat-x;*/ /*background-position: 30px 100px;*/ background-position: center center; background: url(imgs/6.jpg) no-repeat center top ; /*-webkit-background-size:100px 200px;*/ /*background-size:100px 200px;*/ /*background-size:cover;*/ } </style> </head> <body> <div class="box"> 我是一个盒模型 </div> </body>
五、定位 （position）
1、 静态定位 static
2、 相对定位 relative
01、 相对定位的元素仍然在文档标准流当中
02、 移动的参考点是自己原来的位置的四个点
03、 相对定位常用来微调元素
<style> * { padding: 0; margin:0; } .box1 { width: 300px; height: 300px; } .box2 { /*01、设置定位方式：相对定位*/ position: relative; /*02、设置位移值*/ /*top:-30px;*/ /*left:30px;*/ /*right: 30px;*/ /*bottom:30px;*/ /*right: -30px;*/ /*bottom:30px;*/ width: 300px; height: 300px; background-color: green; } .box3 { width: 300px; height: 300px; background-color: blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
3、 绝对定位 absolute
01、 绝对定位的元素脱离文档标准流
02、 绝对定位的盒子的参考点 是 第一个页面的四个点
<style> * { padding: 0; margin:0; } .box1 { width: 300px; height: 300px; } .box2 { /*01、设置定位方式：相对定位*/ position: relative; /*02、设置位移值*/ /*top:-30px;*/ /*left:30px;*/ /*right: 30px;*/ /*bottom:30px;*/ /*right: -30px;*/ /*bottom:30px;*/ width: 300px; height: 300px; background-color: green; } .box3 { /*定位方式：绝对定位*/ position: absolute; left:30px; bottom: 60px; width: 300px; height: 300px; background-color: blue; } .box4 { width: 350px; height: 350px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
子绝父相
设置子元素为绝对定位 父盒子为相对定位
子元素他的参考点是父盒子的四个点
父盒子参考点是浏览器四个点
4、 固定定位 fixed
（注：非原创，源作者：刘祥）