css
文章平均质量分 74
Y or Z
岁岁年年
展开
-
inline-block产生空白间隙的问题 解决方法
当我们在对元素的display属性使用inline-block值时,会在元素间形成一定宽度的空白间距:<ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li></ul>*{ margin: 0; paddi原创 2021-03-01 15:58:46 · 565 阅读 · 0 评论 -
重绘和回流深入浅出
我们首先来回顾一下渲染流水线的流程:回流回流也叫重排。当 Render Tree 中部分或全部, 因元素的尺寸、布局、隐藏等改变而需要重新构建,浏览器重新渲染的过程称为 回流。会导致回流的操作:页面首次渲染。浏览器窗口大小发生改变。元素尺寸或者位置发生改变。元素内容变化(文字数量或者图片大小发生改变)。元素字体大小的改变。添加或者删除可见的 DOM 元素。激活 CSS 伪类 (eg: :hover)。查询某些属性或调用某些方法。一些常用且会导致回流的属性和方法。clientW原创 2021-02-26 14:25:54 · 276 阅读 · 0 评论 -
认识position:fixed/absolute/relative
1.position: relative相对定位,不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。2.position:static正常流(默认值),不能通过z-index进行层次分级。(设置left等无效)3.position:absolute绝对定位,脱离文档流的布局,子元素脱离文档流,可导致父元素无法被撑开,遗留下来的空间由后面的元素填充。通过 top,bottom,left,right 定位,定位的起始原创 2020-12-18 20:05:05 · 464 阅读 · 1 评论 -
一篇彻底理解BFC
什么是BFCW3C对BFC的定义如下: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为"visiable"的块级盒子,都会为他们的内容创建新的BFC(Block Fromatting Context, 即块级格式上下文)。简单来说: BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,BFC 具有普通容器所没有的一些特性。触发BFCf原创 2020-11-24 12:37:46 · 250 阅读 · 0 评论 -
float浮动:浮动的优点?缺点?清楚浮动的几种方式?
浮动:浮动布局简介:当元素浮动以后可以向左或向右移动,直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流,所以文档的普通流中的框就变现的好像浮动元素不存在一样。优点:1.图文混排的时候可以很好的使文字环绕在图片周围。2.当元素浮动了起来之后,它有着块级元素的一些性质例如可以设置宽高等.3.但它与inline-block还是有一些区别的第一个就是关于横向排序的时候,float可以设置方向而inline-block方向是固定的;还有一个就是inlin原创 2020-11-23 23:02:16 · 1198 阅读 · 0 评论 -
css常见基础面试题
1.标准盒子+怪异盒子标准盒子模型: 宽度=内容宽度(content)+border+padding+margin怪异盒子模型: 宽度=内容宽度(content+padding+border)+ margin拓展提问:当width:0;padding:0 100px; border:10px solid red; margin:0 50px;的时候,这个给盒子有内容跟没内容有什么区别?在标准盒子和怪异盒子中有什么区别?css: <style> #father原创 2020-11-19 17:54:02 · 1179 阅读 · 0 评论 -
最全css居中:水平居中+垂直居中+水平/垂直居中总结
一.水平居中1. 行内元素<style> #father { width: 500px; height: 300px; background-color: skyblue; text-align: center; //看父级是否为块级元素,是则父级设置text-align:center //如果不是:父级先设置为块级元素,然后再居中 (即display:block ;text-alig原创 2020-11-18 23:36:12 · 331 阅读 · 1 评论 -
常见几种CSS布局
1.自适应布局方式:单列定宽,单列自适应布局float + margin + (fix)自适应的一列外侧增加一层结构.rightWrap并设置浮动。要实现自适应效果,.rightWrap宽度必须设置为100%。若不设置,float后的元素宽度将由内容撑开。同时再配合盒模型属性的计算(left盒子宽度为x),设置计算后的负margin值(即margin-left: - X px;),使两列元素在同一行显示。同时两列之间的间距由.right的margin值确定。由于右侧元素会层叠在左侧元素之上,原创 2020-11-18 21:28:47 · 261 阅读 · 0 评论