css常见问题总结

彩色之外

已于 2022-11-24 14:36:07 修改

阅读量728

点赞数

分类专栏： css相关文章标签： css 前端 css3

于 2022-01-05 17:21:02 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/122326251

版权

css相关专栏收录该内容

9 篇文章 0 订阅

订阅专栏

①什么是回流？

页面中元素的尺寸，布局，改变而需要重新构建页面，就会引起回流。

什么是重绘？

页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘，而重绘不一定会引起回流(重新构建页面肯定重绘外观)

②为什么要清除浮动？四种

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

父盒子没有高度内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子,给内部两个盒子加上float属性的时候,它们会脱离文档流,下面的标准流会顶上来,然后父盒子因为没设置高度，变成一条线，big和small已经浮动了

一、额外标签法：

给谁清除浮动，就在其后额外添加一个空白标签。
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>

.clear{
        clear:both;
    }

二父级添加overflow方法

三使用after伪元素清除浮动

四使用before和after双伪元素清除浮动(常用)给父元素加类名

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


<body>
//父元素调用clearfix清除浮动类名,最简单的清除浮动是overflow:hidden;
    <div class="father clearfix">//父元素没设高度
        <div class="big">big</div>//子元素浮动
        <div class="small">small</div>//子元素浮动
        <!--<div class="clear">额外标签法</div>伪元素就相当于与增加标签-->
    </div>
    <div class="footer"></div>//会顶上去
</body>

③ 什么是盒模型

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区、内边距、边框、外边距四部分组成。

盒子模型有两种

标准模式下:宽度是内容+内外边距+边框的和

怪异模式下: 宽度包含内容+内外边距+边框,此时行高等于高，文字不会居中,行高等于内容高才会居中

标准和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

JS盒模型

怎么获取和设置box的内容宽高

IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height


var obj = document.getElementById("box");

var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);

④BFC和高度塌陷和垂直兄弟塌陷

父子关系的边距重叠

如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

典型:子元素设置了上外边距父元素不是bfc也会随之子元素下来

解决:给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距

同级兄弟关系的重叠：

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

典型:a元素设置下外边距,b元素设置上外边距

解决

bfc概念

BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

如何触发BFC？

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

适用场景

1.布局

利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响

2.可以清除浮动

更新中...

彩色之外

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
css常见问题总结

①什么是回流？页面中元素的尺寸，布局，改变而需要重新构建页面，就会引起回流。什么是重绘？页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。回流必将引起重绘，而重绘不一定会引起回流(重新构建页面肯定重绘外观)②为什么要清除浮动？四种清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题父盒子没有高度内部放两个盒子一个big 一个small，未给big和small设置浮动，
复制链接

扫一扫