推荐的样式编写顺序：
Positioning：定位
Box model：盒子模型、大小等
Typographic：文字系列、排印等
Visual：可视化、背景等
Misc：其它混杂模式
居中垂直居中，设置line-height
水平方向 text-align
其实就是一个百分比布局，使用这个的时候，子元素的宽高会受限制于弹性盒子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .flex-container { display: -webkit-flex;/*谷歌浏览器内核*/ display: flex; width: 500px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 350px;/*这里其实是无效的，具体的宽度得看父布局，子控件将平分父布局的宽度平分*/ height: 100px; margin: 10px; } </style> </head> <body> <div> <div>flex item 1</div> <div>flex item 2</div> <div>flex item 3</div> </div> </body> </html> 设置背景为图片的一部分 background-image:url() -140px 0px;计算机中，左上角为原点，x正方向是右，y轴正方向是下
图片偏移设置背景 -140 以html底部作为参考物，图片自身向左移动，所以是负的
:hover也是属于css选择器中的一种，鼠标悬浮在元素上，元素的样式，可以使用这个来达到鼠标滑动改变样式的效果
“>” 代表着是只选择子代元素，而空格则代表选中后代元素
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> .nav ul{ display: flex; flex-direction: row; /* 盒子内元素的排列方向 */ padding-left: 100px; list-style: none; } <!-- “>” 代表着是只选择子代元素，而空格则代表选中后代元素 --> .nav ul > li:hover{ border-left: 1px solid #F27B04; border-top: 1px solid #F27B04; border-right: 1px solid #F27B04; border-top-left-radius: 3px; border-top-right-radius: 3px; cursor: pointer; } </style> </head> <body> <div> <ul> <li>首页</li> <li>女人</li> <li>箱包</li> <li>美容</li> <li>男人</li> <li>运动</li> <li>数码</li> <li>热销榜</li> <li>婚庆</li> <li>户外</li> <li>美食</li> </ul> </div> </body> </html> float 浮动与clear使用此样式的元素需要设置宽度，否则，它们会尽可能地窄。
使用float浮动，会影响到其他的元素，所以使用clear属性
clear可以both，left，right
both两边都不能出现浮动元素，left是左边不能出现浮动元素，right是右边不能出现浮动元素
下面的效果链接中的.text_line如果没有clear属性，文字就会挤在尾部，宽度不够大的话，文字还会变成竖排
float效果链接
如果宽度不够的话，会自动换行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ff</title> </head> <body> <style type="text/css"> .left_body{ width: 200px; height: 200px; float: left; } </style> <div> <div></div> <div></div> <div></div> </div> </body> </html>修改外层div的位置，浮动元素的位置也会随之改变
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ff</title> </head> <body> <style type="text/css"> .left_body{ width: 200px; height: 200px; float: left; } #con{ border: 1px solid #0000FF; } .clearfix{ clear: both; } </style> <div> <div></div> <!-- 如果在这里加一个下面的注释的div，可以达到换行的效果 --> <!--<div></div> --> <div></div> <div></div> <div></div> </div> </body> </html>