多的不说,少的不唠
看完不会你揍我
接下来上知识点
(1).display 显示
(2).block 块
(3).inline 行内
(4).inline-block 行内块
(5).float 浮动块
(6).Left 左
(7).right 右
(8).clear 消除
(9).both 两者
(10).overflow 溢出
(11).hidden 隐藏
浮动的特征:
1.浮动的元素会脱离标准文档流后面的元素会占据它原有的位置
2.浮动的元素会变为行内元素,但是有尺寸当剩余宽度不够的时候会自动换行
3.浮动的元素不会遮盖其他元素,会形成文字环绕的效果
4.浮动的元素会引起“父”边框塌陷
什么时标准文档流?
标准文档流:指元素根据块元素或行内元素得特征按从上到下、从左到右得方式自然排序
注意:块元素可以包含行内元素,行内元素不可以包含块元素。
Display属性:
Block 块元素的默认值 行内元素可以转换为块元素
Inline 行内元素的默认值 块元素可以转换为行内元素
Block-inline 行内块元素,元素既具有内联元素的特性、也具有块元素的特性
None 元素不会被显示
注意:内联元素不能设置高和宽
浮动(float):
Left 元素向左浮动
Right 元素向右浮动
None 默认值,元素不浮动。
清除浮动(clear):
注意:在父元素清除
Left 在左侧不允许浮动
Right 在右侧不允许浮动
Both 在左右二侧不允许浮动
None 默认值,允许浮动出现两侧
解决父级边框塌陷的方法:
- 浮动元素后面加空div
- 设置父元素的高度
- 父级添加overflow属性
Overflow属性常用值:
Visible 默认值。内容不会被修剪,会呈现在盒子之外
Hidden 内容会被修剪,并且其余内容是不可见的
Scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
Auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容
清除父级边框塌陷的四种方法:
浮动元素后面加空div:很简单,空div会造成HTML代码冗余
设置父元素的高度:很简单,元素元素固定高度会降低元素可扩展性
父级添加overflow属性:很简单,但是有下拉框的场景不能用
父级添加伪类after:写法比上面复杂,推荐使用
语法:h1::after{ after表示前面 before表示后面
Content:“”;
Display:block;
Clear:both;
}(推荐使用这个)
inline-block和浮动的区别
Display:inline-block可以让元素排在一行,并且支持宽度和高度,代码实现起来方便,添加该属性的元素在标准文档流中,不需要清除浮动
Float可以让元素排在一行并且支持宽度和高度,可以决定排列方向
缺点如下:
Display:inline-block位置方向不可控制,会解析空格。
Display:inline-block兼容问题
Float浮动以后元素会脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式。
二者结合应用
希望对你们有所帮助!