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

打赏

发表评论

邮箱地址不会被公开。 必填项已用*标注