1
导入方式：(优先级：离的越近，优先级越高。导入样式优先级最低)
内部样式，
行内样式，
外部样式，
导入样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div,p,h1{ /*宽度*/ width:100px; /*高度*/ height:100px; /*背景颜色*/ background-color:yellow; } </style> <link href="css.css" rel="stylesheet" type="text/css"> <style> @import "css.css"; </style> </head> <body> <div style=" 100px;height: 100px;background-color: aliceblue">呵呵</div> <p>换行</p> <h1>asd</h1> </body> </html>
2
选择器：
元素选择符：通配符，类选择器，id选择器，类型选择器 （*在IE中不代表通配符，而是代表根元素）
关系选择符：子元素选择器，兄弟元素选择器，相邻选择器，包含选择器。
属性选择符：当前元素[属性=“属性值”]{}
伪类选择符：（给html标签的某种状态设置样式）元素:link{}设置超链接被访问前的样式，元素：visited{}设置超链接地址被访问之后的样式，
hover：设置元素在鼠标悬停时的样式。active：设置元素被用户激活时的样式
注意：a:hover要位于a:link以及a:visited之后，a:active必须位于a:hoverzhihou
较为可靠的顺序是：link visited hover active 利用love hate，即喜欢与讨厌来记忆
选择器的优先级：！important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符
注意：！important要写在属性值的后面，分号的前面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css-1.css" type="text/css"> <style> a[href]{ color:#66ccff; } </style> <style> ul li a:link { color: yellow; } ul li a:visited{ color: blue; } ul li a:hover{ color: #66ccff; } ul li a:active{ color: red; } </style> <style> span{ color: yellow !important; } p span{ color: blue; } p .ha{ color: red; } p #ha{ color: #66ccff; } </style> </head> <body> <a href="www.baidu.com">百度一下</a> <a>百度一下</a> <p>123</p> <p class="hp">456</p> <p id="hs">789</p> <ul> <li> 这是列表 </li> <li> 这是列表 </li> <li> 这是列表 </li> </ul> <ul> <li> <a href="#">伪类选择符</a> </li> </ul> <p> <span class="ha" id="ha"> 14548946123 </span> </p> </body>
元素选择符 *{ background-color: #2cf7ff; padding: 0px; margin: 0px; font-family: '微软雅黑'; } .hp{ width: 100px; height: 100px; } #hs{ color: aquamarine; font-family: '楷体' } li{ color: black; } div>p{ /*只选择子元素*/ } p~h3{ /*只选择p标签后的h3元素*/ } p+h3{ /*只选择与p相邻的h3元素*/ } ul li{ /*不仅选择ul里的li元素，还选择li中的子元素*/ }
3
背景：
backgr-attachment:背景图像是否固定或随着页面的其余部分滚动
background-color:设置背景颜色
background-image:把图片设置为背景
background-position:设置背景的起始位置
background-repeat:设置背景是否以及如何重复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ /*background-color: #66ccff;*/ /*background-image: url("");*/ /*background-repeat: no-repeat;*/ /*background-position: ;*/ /*background-attachment: fixed;*/ background: url("") no-repeat fixed; } div{ } </style> </head> <body> <div></div> </body> </html>
边框：
border-width 边框宽度
border-style 边框样式
border-radius 设置圆角边框
box-shadow 设置对象阴影
border-image 边框背景图片
颜色：
Color Name，HEX，RGB，RGBA，透明色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width: 200px; height: 100px; background-color: #66ccff; border-width: 5px; border-color: yellow; border-style: solid; border-radius:10px; box-shadow: 5px 5px 10px rgba(0,0,0,0.2);/*水平位移，垂直位移，模糊度，颜色*/ } </style> </head> <body> <div class="container"> </div> </body> </html>
4
字体：
font 复合属性
font-style 设置字体样式
font-size 设置字体大小
font-weight 设置字体粗细
font-family 设置文本的字体名称
注意：可以使用本地不存在的字体，利用@font-face加入即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 30px; font-style: italic; font-weight: 700/*bold*/; font-family: Arial; } @font-face { font-family: myfont; src :url(""); } p{ font-family: myfont; } p{ font: italic bold 100px fantasy; } </style> </head> <body> <p>hello world!!</p> </body> </html>
文本：
color 文本颜色
text-align 文本水平对齐方式
vertical-align 垂直对齐方式
line-height 行高（可以使单行文本进行垂直居中）
text-transform 设置文本大小写（一般用来规范英文文本的书写情况）
text-indent 文本缩进（单位 em是指当前文本大小）
文本装饰：
text-decoration 复合属性
text-decoration-line 文本装饰线条的位置
text-decoration-color 文本装饰线条的颜色
text-decoration-style 文本装饰线条的形状
text-shadow 文本阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="text.css" type="text/css"> </head> <body> <p>文字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色字颜色测试</p> <div> 垂直居中 </div> <p class="123">文本装饰线条</p> </body> </html>
body{ color:red; } p{ width:300px; height: 200px; background-color: #66ccff; text-align: left; text-indent: 2em; } #a{ text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; } div{ width: 300px; height: 200px; background-color: aquamarine; font-size: 20px; line-height: 200px; } p{ text-decoration-line: underline; text-decoration-color: #66ccff ; text-decoration-style: wavy; text-shadow: 5px 5px 5px yellow; }
5
列表：
list-style-type：列表类型（列表前为圆点还是方点还是数字）
list-style-image:列表项图像
list-style-position：列表标志位置
list-style：复合属性
表格：
border：表格的边框（参数分别为：宽度，类型，颜色）
border-collapse：合并或使边框独立
td中设置width以及height，padding
text-align：文本对齐
td中设置background-color：设置表格的背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="list.css" type="text/css" /> </head> <body> <ul> <li>列表元素</li> <li>列表元素</li> <li>列表元素</li> </ul> <table border="1px solid blue"> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr><tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr><tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> </table> </body> </html>
ul li{ list-style-type: decimal; list-style-image: url("li.png"); margin-left: 200px ; width: 200px; list-style-position: inside; } table{ border-collapse: collapse; border-color: #66ccff; } td{ width: 200px; height: 200px; /*padding-left: 10px;*/ text-align: center; background-color: #66ccff; }
6
块级元素：
特点： 每个块级元素都从新的一行开始，且其后面的元素也另起一行
元素的高度，宽度，行高以及顶和底边距都可以设置
元素宽度在不设置的情况下，与其父亲容器相同
可以设置display：block可将元素显示为块级元素。
内联元素：
特点：与其他非块级元素在一行
元素的高度，宽度以及顶部和底部边距不可设置
元素的宽度就是它包含的文字或者图片的宽度，不可改变
可以设置display：inline将元素显示为内联元素。
内联块级元素：
常用/*<img> <input>*/
特点：和其他非块级元素在一行
元素的高度，宽度，行高以及顶部和底部的边距可以设置
可以设置display：inline-block将元素设置为内联块级元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="app.css" type="text/css"/> </head> <body> <div class="one">我是div</div> <div class="two">我是div <p>很好</p> </div> <span>我是内联元素</span> <a href="#">我是a</a> </body> </html>
div{ width: 100px; height: 100px; display: inline; } .one{ background-color: #66ccff; } .two{ background-color: antiquewhite; } span{ background-color: #66ccff; display: block; }
7
盒子模型
内容：content，padding,border,margin
分类：
标准盒：正常盒模型。怪异盒模型
伸缩盒：新，旧
内边距：padding
在content之外，边框内
边框：border
border-width 边框宽度
border-style 边框样式
border-radius 设置圆角边框
box-shadow 设置对象阴影
border-image 边框背景图片
外边距：margin
围绕在内容边框的区域就是外边距，外边距默认为透明区域
外边距接受任何长度单位以及百分数值
注意：外边距合并（取相邻元素外边距较大的值）
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 50px; height: 50px; padding: 5px; border: 5px; margin: 5px; } </style> </head> <body> <div> 哈哈哈哈 </div> </body> </html>
怪异盒子模型：将盒子模型的初始padding+margin+content固定为width与height
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 100px; background-color: #66ccff; padding: 20px; border: 1px solid bisque; box-sizing: border-box; } .content{ width: 100px; height:100px; background-color: brown; } </style> </head> <body> <div class="box"> <div class="content"> </div> </div> </body> </html>
伸缩盒（旧）
box-orient：伸缩盒对象子元素的排列方式
box-pack：垂直居中
box-align：水平居中
box-flex：伸缩盒对象子元素如何分配其剩余空间
box-direction：伸缩盒对象的子元素的排列顺序是否进行反转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<link rel="stylesheet" href="flexbox.css" type="text/css">--> <style> .container{ width: 600px; height: 600px; background-color: #66ccff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-direction: reverse; } .one{ width: 100px; height: 100px; background-color: antiquewhite; -webkit-box-flex: 3; } .two{ width: 100px; height: 100px; background-color: pink; -webkit-box-flex: 2; } .three{ width: 100px; height: 100px; background-color: #6fc9fa; -webkit-box-flex: 1; } /*display: -webkit-box; 将元素变成（旧）盒子*/ </style> </head> <body> <div class="container"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> </body> </html>
伸缩盒（新）
display: -webkit-flex; 变成（新）盒子
flex：复合属性
flex-grow 按比例分配
flex-flow复合属性，设置伸缩盒对象的子元素排列方式
flex-direction 伸缩盒对象在父容器中的位置
flex-wrap： 设置伸缩盒对象的子元素超出父容器时是否换行
order：设置伸缩盒对象的子元素出现的顺序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width: 600px; height: 600px; background-color: #66ccff; display: -webkit-flex; /*变成盒子*/ -webkit-flex-direction: row; -webkit-flex-flow: wrap; } .one{ width: 100px; height: 100px; background-color: antiquewhite; -webkit-flex-grow: 1; -webkit-order:3; } .two{ width: 100px; height: 100px; background-color: pink; -webkit-flex-grow: 1; -webkit-order:2; } .three{ width: 100px; height: 100px; background-color: #3ffa72; -webkit-flex-grow: 1; -webkit-order:1; } </style> </head> <body> <div class="container"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> </div> </body> </html>
8
position 把元素放到静态的，相对的，绝对的或者固定的位置中
top 元素向上的偏移量
left 元素向左的偏移量
right 元素向右的偏移量
bottom 元素向下的偏移量
z-index 设置元素的堆叠顺序
CSS position属性：
static:对象遵循常规流。此时四个定位偏移属性不会被应用
relative：对象遵循常规流，并且参照常规流中的位置通过top，right，bottom，left这四个定位偏移属性进行偏移，不影响常规流中的任何元素
absolute：对象脱离常规流，其实偏移属性参照的是离自身最近的定位祖先元素，如果没有定位祖先元素，则一直回溯到body元素，其margin不与其他任何margin折叠
fixed：与absolute一致，但偏移定位是以窗口为参考。出现滚动条时对象不会碎着滚动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0px; margin: 0px; } .one{ width: 100px; height: 100px; background-color: #66ccff; position: relative; z-index: -1; } </style> </head> <body> <div class="one">哈哈哈哈</div> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> <p> 11111111111111111111111111111111111111111111111111111</p> </body> </html>
9
浮动：
float： left
right
none
inherit 从父级继承浮动属性
注意：float在绝对定位和display为none时不生效（此时该元素被去除）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; } .one{ float: left; background-color: #66ccff; } .two{ background-color: #3ffa72; } .three{ background-color: bisque; } .container{ width: 600px; height: 600px; background-color: yellow; } </style> </head> <body> <div class="container"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> </div> </body> </html>
clear属性：
去掉浮动值，包括继承来的属性
属性值与float相同
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .text1{ float: right; background-color: #66ccff; } .text2{ clear: right; background-color: #3ffa72; } </style> </head> <body> <div class="text1">1</div> <div class="text2">2</div> </body> </html>
9
visibility:
设置是否显示对象，此属性是为隐藏的对象保留其所占据的物理空间，与display：none不同
希望对象可视，则其父对象也必须可视
属性值：visibel
hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width: 100px; height: 100px; background-color: #66ccff; visibility: visible; } </style> </head> <body> <div class="one">大家好</div> </body> </html>
overflow
复合属性，设置对象处理溢出内容的方式，效果等同overflow-x+overflow-y
属性值：visible：对溢出的内容不做处理，内容可能会超出容器（默认）
hidden：隐藏溢出的内容
scroll：隐藏溢出的内容，溢出的内容以滚动条的方式出现
auto：按需觉得是否出现滚动条。（此为body对象以及textarea的默认值）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ width: 200px; height: 200px; overflow: scroll; } </style> </head> <body> <div class="content">大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好</div> </body> </html>
10
2D,3D转换
2D：translate，rotate，scale，skew
3D：rotateX，rotateY
浏览器内核：
Chrome/Safari Webkit
Firefox moz
Presto o
IE ms
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; background-color: #66ccff; } .change{ transform: translate(100px,200px); transform: rotate(30deg); transform: scale(2.3); transform: skew(50deg,50deg); transform: rotateX(120deg); transform: rotateY(120deg); } </style> </head> <body> <div > 初始</div> <div class="change"> 变换后</div> </body> </html>
11
过渡：
transition 复合属性
transition-property 应用过渡的css属性的名称
transition-duration 定义过渡效果花费的时间，默认0
transition-timing-function 规定过渡效果的时间曲线。默认为ease
取值： linear 线性过渡
ease 平滑过渡
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 由慢到快再到慢
transition-delay 规定过渡效果的延迟时间，默认0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width: 100px; height: 100px; background-color: #66ccff; transition: background-color 2s linear; } .one:hover{ background-color: yellow; } </style> </head> <body> <div class="one"> 效果</div> </body> </html>
12
动画：
animation 复合属性
animation-name 检索或者设置对象所应用的动画名称
animation-duration 检索或者设置对象动画的持续时间
animation-timing-function 检索或者设置对象动画的过渡类型
animmation-delay 检索或者设置对象动画的延迟时间
animation-iteration-count 检索或者设置对象动画出的循环次数。infinite 无线循环
animation-direction 检索或者设置对象动画在循环中是否反向运动。normal 正常方向 alternate 正反交替
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width: 100px; height: 100px; background-color: #66ccff; animation-name :cartoon; /*animation-duration:5s;*/ /*animation-timing-function: linear;*/ /*animation-delay:2s;*/ /*border-radius: 5px;*/ /*animation-iteration-count: infinite;*/ /*animation-direction: alternate;*/ animation: cartoon 2s linear 2s infinite alternate; } @keyframes cartoon { 0%{ transform: rotate(0deg); background-color: yellow; } 25%{ transform: rotate(90deg); background-color: brown; } 50%{ transform: rotate(180deg); background-color: #3ffa72; } 75%{ transform: rotate(270deg); background-color: bisque; } 100%{ transform: rotate(360deg); background-color: #66ccff; } } </style> </head> <body> <div class="one"> 效果 </div> </body> </html>
13
多列：
columns 复合属性
column-width 每列的宽度
column-count 列数
column-gap 列与列之间的间隙
column-rule 列与列之间的边框 复合属性
column-rule-width 列与列之间的边框厚度
column-rule-style 列与列之间的边框样式
column-rule-color 列与列之间的边框颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ /*-webkit-column-count: 2;*/ /*-webkit-column-500px ;*/ -webkit-columns: 2 500px; /*-webkit-column-rule-style: solid;*/ /*-webkit-column-rule-color: #66ccff;*/ -webkit-column-rule: 5px solid #66ccff ; } </style> </head> <body> <div class="container"> <div class="one"> <img src="1.png"width="300px"> 选项卡管理： 通过执行js命令实现新开选项卡window.open() 不同的选项卡是存在列表里browser.window_handles 通过browser.window_handles[0]就可以操作第一个选项卡 </div> <div class="two"> <img src="1.png"width="300px"> 选项卡管理： 通过执行js命令实现新开选项卡window.open() 不同的选项卡是存在列表里browser.window_handles 通过browser.window_handles[0]就可以操作第一个选项卡 </div> </div> </body> </html>
14
CSS Hack :针对不同的浏览器或者不同版本的浏览器写相应的css代码的过程
实现形式：
css属性前缀法：在css样式属性名前加上一些只有特定浏览器才能识别的hack前缀
- IE6
* IE7
9 IE6`10
IE8`10
9 IE9和IE10
选择器前缀法：在css选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack
*html IE6
*+html IE7
IE条件注释法：（IE10+不再支持条件注释）
<!-- [if IE]>
这段文字只在IE浏览器中显示
<![endif]-->
<!-- [if IE 6]>
这段文字只在IE6浏览器中显示
<![endif]-->
<!-- [if gte IE 6]>
这段文字只在IE6以上版本浏览器中显示
<![endif]-->
<!-- [if ！ IE 8]>
这段文字不在IE8浏览器中显示
<![endif]-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{ width: 100px; height: 100px; background-color: #66ccff; } .two{ width: 200px; height: 200px; background-color: green; } </style> </head> <body> <div class="one">111111</div> <div class="two">111111</div> </body> </html>
15
媒体查询
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ margin: 0; padding: 0; } /*.d1{*/ /* 100%;*/ /*height: 800px;*/ /*background-color: #66ccff;*/ /*}*/ @media screen and(max- 640px){ .d1{ width: 100%; height: 800px; background-color: #66ccff; } } @media screen and(min- 800px) { .d1 { width: 100%; height: 800px; background-color: green; } } @media screen and (min- 640px) and(max- 800px){ .d1{ width: 100%; height: 800px; background-color: red; } } </style> </head> <body> <div class="d1"> </div> </body> </html>
16
居中方式：
margin：0 auto（将一个块级元素居中）
文字居中:line-height;text-align;center（将块级元素之间的文字居中）
由table演变来的居中：
display:table(将外部声明为表格)
display: table-cell;（将文字所在p标签设置为单元格）
text-align: center;
vertical-align: middle;
利用伸缩盒：display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ margin: 0; padding: 0; } .container{ width: 100%; min-width: 996px; height: 70px; background-color: #66ccff; } .header{ width: 80%; min-width: 996px; height: 50px; background-color: #3ffa72; margin: 0px auto; text-align: center; line-height: 50px; } ul li{ display: inline-block; } .two{ display: table; width: 200px; height: 200px; background-color: green; } p{ display: table-cell; text-align: center; vertical-align: middle; } .outer{ display: -webkit-box; width: 200px; height: 200px; background-color: yellow; -webkit-box-align: center; -webkit-box-pack: center; } .inner{ width: 100px; height: 100px; background-color: #3ffa72; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; } </style> </head> <body> <div class="container"> <div class="header"> <ul> <li>列表</li> <li>列表</li> <li>列表</li> </ul> </div> </div> <div class="one"> <div class="two"> <p>哈哈哈</p> </div> </div> <div class="outer"> <div class="inner"> 哈哈哈 </div> </div> </body> </html>