![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
月不半
这个作者很懒,什么都没留下…
展开
-
重绘和重排
浏览器的运行机制构建DOM树:渲染引擎解析HTML文档,将所有标签转换为DOM树中的DOM节点生成内容树 构建渲染树:解析对应的CSS样式文件信息,样式树与DOM树结合构建成渲染树 布局渲染树:从根节点递归调用,计算每一个元素的大小、位置等,给出每个节点所应该在屏幕上出现的精确坐标 绘制渲染树:遍历渲染树,使用UI后端层来绘制每一个节点重绘定义:当一个元素的属性确定后,浏览器根据这...原创 2019-11-26 21:16:38 · 279 阅读 · 0 评论 -
两列布局:左边固定右边自适应
实现这样一个两列布局:左边宽度固定(200px),右边自适应。<div class = "block"> <div class = "left">固定宽度</div> <div class = "right">自适应</div></div> 方法一 解析:左边设置了浮动,脱离了正常文档流。右边...原创 2019-11-08 11:59:48 · 733 阅读 · 0 评论 -
详解BFC
一、触发BFC的方式,列举几种常用情况根元素<html> 浮动元素(float不为none) 绝对定位元素(position : fixed / absolute) 非块元素(display:inline-block / table-cell / table-caption / flex / inline-flex) 块元素(overflow不为visible)二、BFC...原创 2019-10-22 17:34:42 · 268 阅读 · 0 评论 -
如何清除浮动
1、首先来康康什么是浮动?浮动有什么特点?浮动的元素会可以向左或向右移动,直到元素的框外边缘碰到另一个框的外边缘为止。浮动元素的特点:脱离文档流,将不再占据空间 可能会覆盖住别的元素。如果覆盖了别的元素,别的元素中的文字将会围绕浮动元素排开 收缩宽度。块级元素设置浮动后,将不再占满一行,而是收缩为内部元素的宽度浮动元素的缺点:父容器的高度会塌陷2、浮动的属性clear ...原创 2019-10-21 19:28:22 · 90 阅读 · 0 评论 -
CSS水平和垂直居中的实现
侵删一、水平居中1、行内元素:主要取决于行内元素的父元素是否是块级元素是块级元素 父元素{ text-align:center;} 不是块级元素 父元素{ display:block; text-align:center;} 2、块级元素:有宽度是否设定之分1)方法一定宽 该元素{ margin:0 auto;} ...原创 2019-10-16 10:09:58 · 112 阅读 · 0 评论 -
圣杯双飞翼
圣杯布局和双飞翼布局:实现三列布局,中间内容宽度自适应,两边内容宽度固定。区别如下:DOM结构不同,相对于圣杯,双飞翼为中间单独添加了一个容器,以便margin为左右留白。 圣杯用padding来为左右留白,双飞翼用margin来为左右留白。 圣杯结合浮动和定位来使左右定位,双飞翼则直接使用浮动来定位。一、圣杯布局HTML出现顺序:main、left、right。先载入主体,再加...原创 2019-09-26 21:11:32 · 183 阅读 · 0 评论