CSS盒模型

最新推荐文章于 2024-08-03 09:43:52 发布

小新我是小白

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量406

点赞数

分类专栏： css 文章标签： html css 盒模型

本文链接：https://blog.csdn.net/lxkll/article/details/88191961

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文是学习慕课网上课程前端跳槽面试必备技巧的学习笔记，便于之后复习。

从以下方面理解盒模型

基本概念：标准模型和IE模型
css如何设置这两种模型
js如何获取盒模型对应的宽和高
边距重叠

1.基本概念

由里向外content,padding,border,margin.两种标准分别是标准模型和IE模型。

标准模型和IE模型的区别？

计算宽和高的方式不同，标准模型的宽高是内容区的宽高，IE模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高

2.css如何设置这两种模型？ 默认的是什么？

使用CSS3 的属性box-sizing

/*标准模型 浏览器默认方式*/
box-sizing:content-box;

/* IE模型  若设置width=200其border=2px无padding内容区实际大小为 196px */
box-sizing:border-box;

3.js如何设置和获取盒模型对应的宽和高？

dom是getElementById拿到dom节点

1）这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在<style></style>标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

dom.style.width/height

2)这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式都能获取到。但这种方式只有IE浏览器支持。

dom.currentStyle.width/height

3)这种方式的原理和2)是一样的，这个可以兼容更多的浏览器，通用性好一些。

window.getComputedStyle(dom).width/height

4)这种方式是根据元素在视窗中的绝对位置来获取宽高的

dom.getBoundingClientRect().width/height

5)这个是最常用的，也是兼容最好的。

dom.offsetWidth/offsetHeight

4.边距重叠

1）什么是边距重叠

当两个垂直外边距相遇时，它们将形成一个外边距。例如：给两个相邻的div分别设置margin-bottom:20px和margin-top25px，然后你会发现两个div之间的间距不是45px，而是20px和25px中的较大值25px 这就是重叠了。

如下图，当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生合并：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的顶和底边界也发生合并：

2）边距重叠解决方案(BFC-- Block Formatting Context )

BFC原理：

①.内部的box会在垂直方向，一个接一个的放置

②.每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）

③.box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠

④.bfc的区域不会与浮动区域的box重叠

⑤.bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的

⑥.计算bfc高度的时候，浮动元素也会参与计算

3）如何创建BFC？

①.float属性不为none（脱离文档流）

②.position为absolute或fixed

③.display为inline-block,table-cell,table-caption,flex,inine-flex

④.overflow不为visible即overflow为hidden或auto

⑤根元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            height:100px;
            margin-bottom:30px;
            background: #0ff;
        }
        .middle{
            height:100px;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        .bottom{
            height:100px;
            margin-top:30px;
            background: #ddd;
        }
    </style>
</head>
<body>

    <section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>
    <!-- 没有使用bfc,上下边距重叠 -->
    <section class="middle">
        <h1>中</h1>
        margin-top:30px;
        margin-bottom:30px;
    </section>
    <!-- 给下面这个块添加一个父元素，在父元素上使用overflow:hidden创建bfc -->
    <div style="overflow:hidden">
        <section class="bottom">
            <h1>下</h1>
            margin-top:30px;
        </section>
    </div>

</body>
</html>

小新我是小白

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型

本文是学习慕课网上课程前端跳槽面试必备技巧的学习笔记，便于之后复习。从以下方面理解盒模型基本概念：标准模型和IE模型 css如何设置这两种模型 js如何获取盒模型对应的宽和高边距重叠1.基本概念由里向外content,padding,border,margin.两种标准分别是标准模型和IE模型。标准模型和IE模型的区别？计算宽和高的方式不同，标准模型的宽高是内容区的宽...
复制链接

扫一扫

专栏目录