块元素:
1、可设置宽高
2、默认占用整行
行内元素:
1、设置宽高不起作用
2、元素大小和内容大小相同
3、宽高度由内容撑开
4、水平放置,如果放置不下自动换行
display:
- 设置元素的框类型
可选值:
inline:将元素设置为内联元素;
-行内元素的默认状态
如果将inline使用在块元素中,则宽高消失,独占一行也消失,大小由内容撑开
block:可以将元素设置为块状元素
-块级元素的默认值
-如果将block使用在行内元素中,则可以设置宽高
-如果不设置宽高,默认独占一行
inline-block:可将元素设置为行内块
- 水平放置,而且可以设置宽高
- 行内元素设置为inline-block,则可以设置宽高
- 块元素设置 inline-block,则水平放置
- 水平放置元素后默认存在间距,解决方法
1、设置元素margain 为负值
2、设置html字体大小为0,但后续元素需要设置字体大小
display:none
-隐藏元素,并位置不保留
visibility: hidden
-隐藏元素,位置保留
知识点:
- 浮动
描述:
- 元素默认在页面中的最底层,称为文档流
- 文档流特点:
1、块元素
默认占整行,垂直排列
可设置宽高
2、行内元素
元素大小和内容大小相同
水平放置,放置不下自动换行
- 如果想让元素水平排列,则可以让元素脱离文档流
- 使用float属性设置为非none,则元素脱离文档流
float属性:
可选值:left:元素左浮动
right:元素右浮动
none:不浮动(默认值,元素在文档流中)
-浮动特性
1、设置元素的float属性值为非none,则元素脱离文档流
2、当元素脱离文档流紧跟着的下面的兄弟元素会自动上移。(影响布局)
3、元素浮动后,会向左上或右上移动,直到遇到父元素或浮动的兄弟元素的边框,停靠在该位置
4、如果浮动元素上面右未浮动的块元素,则浮动元素不会超出块元素
5、块状元素浮动后,默认宽度消失(不设置宽度时),默认占整行消失,宽度为设置的值
6、行内元素浮动后,可设置宽高
7、浮动元素如果一行放置不下,会自动换行
8、浮动元素不会超过它上面的兄弟元素,最多并排
9、浮动元素不会覆盖文本和图片,文本会环绕显示
清除浮动
描述:
- - 清除浮动元素对当前元素的影响,本身能够继续设置浮动
- 属性:
clear:
可选值: left:左浮动对当前元素影响
right:左浮动对当前元素影响
both: 清除两侧浮动对当前元素的影响,以影响最大的为主
both:清楚两侧浮动的影响,以影响大的为准
描述:
- 在文档流中,如果没有设置高度,则父元素的宽度为auto,高度由子元素撑开
- 当子元素设置浮动,则子元素会脱离文档流,此时子元素则无法撑开父元素,导致父元素高度塌陷
- 如果父元素塌陷,则父元素下的兄弟元素会上移,导致布局混乱
解决方法:
- 空div+清除浮动防止塌陷
- 父元素设置高度防止塌陷
- 父级添加overflow属性
overflow:hidden
- 使用自定义伪类
/*
同时解决塌陷和传递问题
*/
.clearfix::after,.clearfix::before{
content: "";
display: table;
clear: both;}
知识点:
- overflow
描述:
- 当子元素的大小超过父元素,则可通过overflow属性设置显示方式
overflow:visiable:超出部分显示(默认值)
hidden:超出部分隐藏
auto:隐藏部分出现水平或垂直滚动条
scoll:呈现水平和垂直滚动条
inline block 和float 区别
相同点:
都可以让元素水平放置,解决页面布局问题
不同点:
inline-block:
-位置方向不可控制,会出现默认空格
-IE 6、IE 7上不支持