单行文本垂直居中（按钮）方法：
1.容器高度height等于行间距line-height 、
2. 加padding
首行缩进text-indent
text-decoration
cursor
a:hover{鼠标进入目标后执行。。。}
行级元素
特点：内容决定元素所占位置，不可以通过css改变宽高
如：<span><a><strong><em><del>
块级元素
特点：独占一行，可以通过css改变宽高
如：<div><p><ul><li><ol><h1>-<h6><form><address>
行级块元素<img>
display可切换 block、inline、inline-block
margin: -8px;浏览器默认外边距8像素
层模型：
绝对定位元素：脱离原来位置进行定位，脱离原层跑上层，变透明 ；最近的有定位的父级进行定位（子绝父相），如果没有，那么相对于文档进行定位。
相对定位元素：保留原来位置进行定位，跑上层，但是位置不留给其他元素；保留自己原来的位置进行定位
例：
<style> .wrapper{ /*position: relative;*/ margin-left: 100px; width: 200px; height: 200px; background-color: orange; } .content{ /*position: relative;*/ margin-left: 100px; width: 100px; height: 100px; background-color: green; } .box{ position: absolute; left: 50px; width: 50px; height: 50px; background-color: yellow; } . </style> <body> <div class="wrapper"> <div class="content"> <div class="box"> </div> </div> </div> </body>
盒模型:padding margin border content
层模型：绝对定位相对定位固定定位
两栏布局：并排div，用margin-right
※嵌套父子div 垂直方向margin是绑定一起的 取margin最大值进行移动
bfc:block format context块级格式化上下文
如何触发盒子的bfc：
- position:absolute
- display:inline-block;
- float:left/right;
- overflow:hidden;
改变渲染规则，解决塌陷问题
例：
.wrapper{
margin-left: 100px;
margin-top: 100px;
100px;
height: 100px;
background-color: black;
/* float: left;*/
/* position: absolute;*/
/* display: inline-block;*/6662266
/*overflow: hidden;*/
}
.content{
margin-left: 50px;
margin-top: 150px;
50px;
height: 50px;
background-color: green;
}
*凡是position:absolute 或者float:left/right 系统内部自动把元素转换成inline-block;,若无设置宽高，宽高由内容决定。：
<span>123</span> span{ position: absolute;//float: left; 100px; height: 100px; background-color: red; }
清除浮动流
.wrapper::after{ content: "";//加入后伪元素才可生效 clear: both;//清除浮动流 display: block;//必须是块级元素才能清除浮动流 } .wrapper{ border: 1px solid black; } .content{ float: left; 100px; height: 100px; background-color:green; } </style> <body> <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> </div>