参考文献
本文均参考上述博客，并在此基础上总结添加。
块元素
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6等等都是块元素，它在布局中的行为：
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度100%
- 盒子占据一行、即使设置了宽度
包含默认样式的块元素
- p标签：含有默认外边距
- ul、ol标签：含有默认外边距和内边距，以及条目符号(小圆点或者编号)
- h1~h6标签：含有默认的外边距和字体大小
- dl、dd标签：含有默认外边距 body标签：含有默认的外边距
/* 清除标签默认的外边和内边距 */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
margin:0px;
padding:0px;
}
/* 清除标签默认条目符号 */
ul,ol{
list-style:none;
}
/* 将h标签的文字大小设置为默认大小 */
h1,h2,h3,h4,h5,h6{
font-size:100%;
/* 根据实际需求来加 */
font-weight:normal;
}
内联元素
- 不支持宽、高、margin上下、padding上下
- 宽高由内容决定
- 盒子并在一行 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
内联块元素
我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距，见技巧一去掉
- 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
5、内联块的margin不会产生合并问题
.box a{
background-color: gold;
width: 100px;
height: 50px;
padding-top: 0 10px;
/* 这个的margin不会产生合并问题 */
margin: 20px;
/* 把内元素变成内联块元素 */
display: inline-block;
}
浮动元素
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
设定黄色图片左浮动，右边文字不用浮动，然后右边文字就会绕着图片浮动。
6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
7、浮动元素之间没有垂直margin的合并
清除浮动
不给父元素的高度问题的时候，为了让子元素能够撑开父元素的高度
解决浮动问题:
- 父级上增加属性overflow：hidden
- 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
- 使用成熟的清浮动样式类，clearfix
只解决浮动问题，在父级元素添加样式：
.clearfix:after{
content: '';
display: table;
clear: both;
}
这个代码一次性解决margin-top塌陷问题和浮动问题
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
属性总结
| 是否可以设置宽和高 | 是否支持样式 | 排列方式 | |
|---|---|---|---|
| 块元素 | √ | √ | 纵向排列 |
| 内联元素 | 由内容决定 | × | 横向排列 |
| 内联块元素 | √ | √ | 横向排列，有间距 |
一般把内联元素转化为内联块元素
相应技巧
- 技巧一:让内联块模块没有间隙：父系style设置（
font-size: 0;），但是子模块必须设定font-size。
也可以在子模块的样式中设定display: inline-block; float: left; - 技巧二：让块中文字上下居中：
line-height: 48px;
让文字的高度等于盒子的高度，上面的例子就是如果盒子高度等于48的时候就这样设置。 - 技巧三：让重叠边缘只显示一个：
margin-left: -1px; - 技巧四：将鼠标移到标题上显示出相应的块
<div class="con">
<h3>文章标题</h3>
<div class="con1"></div>
style里面这样设置：
.con:hover .con1{
background-color: blue;
font-size: 30px;
width: 300px;
height: 500px;
}
