<style>
div{
display: inline; /* 转化为行内元素 加宽高没有作用,只受内容影响*/
display: inline-block; /*行内块元素 可以调整宽高*/
background-color: red;
}
span{
display: block; /*转化为块元素*/
display: inline-block; /*转化为行内块元素 可以设置宽高*/
}
img{
display: block; /*转化为块元素,可以独占一行*/
}
</style>
</head>
<body>
<div>hello div</div>
<span>hello span</span>
<img src="mn1.jpg" alt="" width="200">
<!-- 块元素 display:block
行内(内联)元素
行内元素块元素 -->
<!-- 1.display:none 隐藏后位置不见 visibility:hidden 隐藏后位置可见
2.display:none 不能被子元素继承,但visibility 子元素可继承
3.display:none css3的transition无法过度display,但visibility可以通过css3过渡
4.visibility: hidden不会影响计数器的计数,如图所示,visibility: hidden虽然让一个元素不见了,但是其计数器仍在运行。这和display: none完全不一样
5.visibility:hidden 不会引起回流,只会引起重绘 -->
<!--回流与重绘-->
<!--重绘:当页面元素祥式改变不影响元素在文档流中的位置时,如background-color. border-color. visibility等, 浏览器只会将新的样式赋予元素并进行重新绘制操作。
<!--回流:当渲染树(render tree) 中的一部分或全部因为元素的尺丈 布局、隐藏等改变时,浏览 器重新渲染部分DOM或者全部DOM的过程-->
<!--页面至少进行次回流-->
<!-- ps:回流必将引起重绘,而重绘不一定会引起回流-->
</body>
标签的两种常见”display”属性
CSS使用display设置的标签的显示方式
block“块”元素
inline“行内”元素
inline-block 行内块元素
none 隐藏<div>主要用于HTML文档中独立的“大块”内容
<span>主要用于HTML文档中需要特别定义的内容
display:table-cell属性简介
display:table-cell;会使元素表现的类似一个表格中的单元格td,利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性,使用table-cell时最好不要与float以及position: absolute一起使用,设置了table-cell的元素对高度和宽度高度敏感,对margin值无反应,可以响应padding的设置,表现几乎类似一个td元素。
1. 不要与float:left; position:absolute; 一起使用
2. 可以实现大小不固定元素的垂直居中
3. margin设置无效,响应padding设置
4. 对高度和宽度高度敏感
5. 不要对display:table-cell使用百分比设置宽度和高度
重新渲染页面需要重新计算元素的几何大小和位置,这个计算的过程称之为回流。
回流的原因
- 初始化的时候,第一次回流
- 窗口大小变化
- 字体改变
- 增加或者移除样式表
- 内容变化
- 操作
class
属性- 操作
Dom
- html设置行内样式
- offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算
避免/减少回流的方式
- 添加
class
样式- 修改样式直接更换
class
名称,不是改变某一个特定的属性- 操作块级元素时,可使其脱离文档流,设置
position: fixed
position: absolute
- 操作块级元素时,可先隐藏元素,设置
display: none
- 避免循环操作元素
- 避免使用
table
布局
重绘
元素更新属性,属性只影响元素的外观、风格而不影响布局的称之为重绘。
如color
属性回流一定会引起重绘,但是重绘不一定引起回流。