HTML display 属性和浮动布局

参考文献
本文均参考上述博客，并在此基础上总结添加。

块元素

块元素，也可以称为行元素，布局中常用的标签如：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;}

属性总结

	是否可以设置宽和高	是否支持样式	排列方式
块元素	√	√	纵向排列
内联元素	由内容决定	×	横向排列
内联块元素	√	√	横向排列，有间距

一般把内联元素转化为内联块元素

相应技巧

1. 技巧一:让内联块模块没有间隙：父系style设置（font-size: 0;），但是子模块必须设定font-size。
   也可以在子模块的样式中设定display: inline-block; float: left;
2. 技巧二：让块中文字上下居中：line-height: 48px;
   让文字的高度等于盒子的高度，上面的例子就是如果盒子高度等于48的时候就这样设置。
3. 技巧三：让重叠边缘只显示一个：margin-left: -1px;
4. 技巧四：将鼠标移到标题上显示出相应的块

<div class="con">
		<h3>文章标题</h3>
		<div class="con1"></div>

style里面这样设置：

.con:hover .con1{
			background-color: blue;
			font-size: 30px;
			width: 300px;
			height: 500px;
		}