CSS基础学习04
display
属性值
none
可隐藏盒子模型,并且不占用页面空间
block
将内联元素显示效果更改为块级元素显示效果
inline
将块级元素显示效果更改为内联元素显示效果
inline-block
将块级元素垂直显示效果更改为水平显示
对内联元素添加此属性值可让内联元素更改高宽值
语法–display:属性值;
visibility
指定一个元素是否可见
属性值
visible
默认值,元素可见
hidden
元素不可见,可隐藏盒子模型会占用页面空间
语法—visibility:hidden;
内容溢出
问题描述:文本超出容器范围
解决方案
overflow
属性值
visible
默认值
Hidden–将超出容器部分自动隐藏
Auto–根据文本内容自动显示或隐藏滚动条
Scroll–始终显示滚动条
语法
overflow:属性值;
浮动
会使元素脱离文档流,向左或者向右移动
float
属性值
none
默认值,元素不浮动
left
元素向左浮动
right
元素向右浮动
语法
float:属性值;
注意事项
1.当浮动元素为父子关系时,浮动元素的浮动范围不会超出父级元素的范围
2.当浮动元素为兄弟关系时,兄弟同时设置同方向浮动两个元素会水平排列
3.当前一兄弟元素未设置浮动时,后兄弟元素浮动不会超过前一个兄弟元素
4.如果浮动元素周围有文字显示的话,则不会被覆盖而是环绕在浮动元素周围
5.块级元素设置浮动时不会独占一行,多个块级元素会在同行显示,块级元素的高度和宽度等于所有后代元素的总和
6.内联元素设置浮动时会从文档流中脱离并且呈现块级元素效果,特点和快级元素相同
BFC块级格式化环境
默认BFC是关闭的,开启BFC会具有以下特性
1.文档流中的元素不会被设置浮动的元素所覆盖
2.子元素的垂直方向的外边距不会传递给父级
3.元素可以包含浮动的子元素
开启方法
1.设置元素为浮动(float)
2.设置元素display的值为inline-block
3.将元素overflow的值设置为hidden(非visible的值)
高度塌陷
问题描述
当div为父子关系时,父元素的div未设置高度,父级div的高度和子级div的高度相等,但当子级div设置浮动效果时,导致父级div没有了高度
解决方案
1.display:inline-block
2.overflow:hidden