CSS的易错整理系列

时间：2021-08-30 08:37:25 阅读：7 评论：0 收藏：0 [点我收藏+]

1、（×）css盒子模型？

border-box和content-box

width部分说的很乱

现在我知道了，确实是width，offset只是为了好计算的

2、（×）垂直居中，有几种方法

说了flex、position，vertacal-align，line-height 那如果是就父元素呢。行内块又怎么办

为什么记不住？死知识记不住？css真难缠

（1）行内

父元素水平：text-align ：center

父元素垂直：line-height设置成和height一样

也正是因为行内，所以都要设置在它外层的盒子身上！！（父元素不能设置成100%

2、块级

（1）外position relative

内absolute，top: 50%;left: 50%;

此时是这样，然后平移自身的一半 transform: translate(-50%,-50%);

tranform：改变，使改变

translate：转化，翻译，移动，本来这个就是往哪里移动的

记的话就是me

【或者是知道了具体的宽高，那就写margin-top和left的负值】

（2）flex布局，IE是有些兼容问题的。都在父级

（3）table布局也是实现方法的一种，但不太常用~

水平① display: table-cell;

vertical-align: middle;以上这两种就已经实现了垂直居中

垂直② text-align: center;

行内：直接就ok了【这就是上面的那个方法】

块：这个一定要给块级子元素设置一个 display: inline-block 才能用

垂直③ margin 0 auto

快：如果子元素是div这种这个ok

行内就不行了

3、（×）清除浮动，几种方法

说了flex、position、overflow hidden，设置before伪元素

为什么就还在往后问？？

原因：排版会超出父元素，甚至会影响兄弟元素

【首先解释部分】

eg：父topDiv 浮动floatDiv （左浮）子textDiv / 父的兄弟bottomDIv

首先 textDiv设置clear left

（1）通过上面的样式，.textDiv告诉浏览器，我的左边不允许有浮动的元素存在，请清除掉我左边的浮动元素。然而，因为浮动元素（.floatDiv）位置已经确定，浏览器在计算.textDiv的位置时，为满足其需求，将.textDiv渲染在浮动元素下方，保证了.textDiv左边没有浮动元素。同时可以看出，父元素的高度也被撑起来了，其兄弟元素的渲染也不再受到浮动的影响，这是因为.textDiv仍然在文档流中，它必须在父元素的边界内，父元素只有增加其高度才能达到此目的，可以说是一个意外收获。(clear的值为both也有相同的效果，通俗理解就是，哪边不允许有浮动元素，clear就是对应方向的值，两边都不允许就是both)

（2）如果先孩子，再float元素（不行，因为先确定子元素，浮动另起一行就影响不到了）（所以也有个局限，最好的还是用空的代替）

.textDiv的位置先确定了，于是浮动元素就紧接着.textDiv下方渲染在父元素的左侧。然而，父元素的高度并没有被撑起来，没有将浮动影响“内化”，导致浮动影响到了接下来的元素排版。

实际上，这里主要是为了清除浮动，撑起来父元素是个附属品

（3）根据这个思路，因为不能确定是否父元素的最后一个元素能否做到clearboth 更为通用的是添加一个blank来清除

 <div class="blankDiv"></div>

注意必须是块级元素，否则无法撑起父级元素高度。

（是因为为了满足这个块级的clear要求，父元素额外定位的，行内的话就没有高度了）

（4）同样的原理只是利用伪元素来做都不用加新元素了

原理是，想让after的左边也没有伪元素，这样兄弟就正常了，底部和父元素的边框也正常了，

可以看到before是完了才另起一行的，after才能碰到float，所以就在after身上设置clear both

设置block是必须要有高度才能有能力撑起来，哪怕高度是0，也是有那个能力在的…… 如果是行内的话就直接被忽略了块元素不会！

（5）父元素 overflow: auto;

这里的overflow值，可以是除了"visible"之外的任何有效值

副作用比如，scroll值会导致滚动条始终可见，hidden会使得超出边框部分不可见等

因为bfc：BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。

display inline -block也可以bfc，但是

在各种构建BFC的方式中，overflow方式可能是外部影响更可控的一种所以也是最常用

【其次解决方案】

解决方案：看了半天，一般这三个是最主流的：

（1）比如有三个浮动的元素，再加一个浮动的子元素，并设置clear: both

语义化不太好

（2）父元素overflow：hidden，形成bfc（scroll也可以）

（3）父元素伪元素

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/content:"";display:block;clear:both;}.clearfix{*zoom:1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/}

其他的bfc会有一些问题（子元素它确实没有影响到外部了，这个影响是父元素影响到了外部）

QAQ bfc呢，也是

overflow（不是visible）

display flex 、inline-block

position（ab，fix）

float（right left

（但首先bfc有一些问题，尤其是下面那两个，其次你讲bfc太混乱了人家不懂）

附赠补充：

1、伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪元素

表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::（早期单冒号但是双冒号更规范哦）

比如::first-line可以精准自适应选中第一行

::before 这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。

深拷贝和浅拷贝的区别 √

首先明确，深浅都是对复杂数据类型来说的，简单是无所谓的

浅拷贝：地址是不同的，let userCopy = Object.assign({}, user) 展开运算符同

浅拷贝只是复制了对象里的简单数据类型，浅拷贝 [ 对于对象里的复杂数据类型只是复制了地址。 ]

深拷贝：对于所有的复杂类型，都是新开辟了内存空间

CSS的易错整理系列

原文：https://www.cnblogs.com/lx2331/p/15202387.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)