CSS盒模型的介绍

didikee 发布于2019-04-23 13:08 / 1787人阅读

摘要：盒模型的概念与分类盒模型就是一个盒子，封装周围的元素，它包括内容边框内边距外边距。水平方向边界不会重叠，垂直方向会重叠，垂直方向的实际边界是边界中的最大值。

CSS盒模型的概念与分类

CSS盒模型就是一个盒子，封装周围的HTML元素，它包括内容content、边框border、内边距padding、外边距margin。

CSS盒模型分为标准模型和IE模型；

标准模型和IE模型的区别

标准模型：width = 内容content 的宽度；(默认）

　　　　　　设置方式： box-sizing:content-box;

IE模型：width = 内容content + 边框border + 内边距paddig 的宽度；

　　　　　　设置方式： box-sizing:border-box;

通过js如何获取盒模型的宽高

1.dom.style.width/height

　　　　只能获取到dom的内联样式

2.dom.currentStyle.width/height

　　　　获取到的是dom的实际宽高，但这种方式只在IE中可以使用

3.window.getComputedStyle(dom,null).width/height

　　　　获取到的是dom的实际宽高，但是不支持IE

4.dom.offsetWidth/offerHeight

　　　　最常用的，兼容性最好的

第2，3个组合下就可以兼容ie与其他浏览器了

window.getComputedStyle ? window.getComputedStyle(obj,null).width : obj.currentStyle.width;

边距重叠

边距重叠是指两个或多个盒子相邻边界重合在一起形成一个边界。水平方向边界不会重叠，垂直方向会重叠，垂直方向的实际边界是边界中的最大值。

比如子元素设置了margin-top，父元素没有设置，但是父元素也有了上边距。

DOCTYPE html>
<html>
<head>
    <title>边距重叠title>
    <meta charset="utf-8">
    <style type="text/css">
        html *{
            margin: 0;
            padding: 0;
        }

        .content{
            width: 500px;
            height:100px;
            background: green;
        }
        .parent{
            width: 300px;
            height: 300px;
            background: pink;
        }
        .child{
            width: 150px;
            height: 150px;
            background: yellow;
            margin-top: 50px;
        }
    style>
head>
<body>
    <div class="content">
        占位内容区域
    div>
    <div class="parent">
        <div class="child">
            
        div>
    div>
body>
html>

下图就是代码运行结果：

解决边距重叠-BFC

1、BFC概念：块级格式化上下文

2、BFC的原理：

BFC的区域不会与浮动区域重叠

计算BFC区域高度时，浮动区域也参与计算

BFC区域是独立的一个区域，不与其他区域相互影响

3、如何创建BFC

脱离文档流：float不为none；position为absolutely或fixed

overflow不为visible（如overflow：hidden）

display为“table-cell”, “table-caption”, “inline-block”中的任何一个

4、BFC应用场景

自适应两栏布局

清除浮动

防止垂直margin重叠

-ＴＨＥ　ＥＮＤ-

GPU云服务器云服务器盒模型盒模型html吗简述html盒模型 css介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1467.html

深入css布局 (1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...

ky0ncheng 2019-04-23 13:43 评论0 收藏0
深入css布局(1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...

blankyao 2019-08-29 15:25 评论0 收藏0
CSS盒模型完整介绍

摘要：盒模型的认识基本概念标准模型模型。如图由于盒模型的怪异模式，模型和标准模型的内容计算方式不同。设置为标准模型，它的元素宽度。这里就不介绍，大家可以自行搜索。盒模型的认识基本概念：标准模型+IE模型。包括margin,border,padding,content 标准模型和IE模型的区别 css如何设置获取这两种模型的宽和高 js如何设置获取盒模型对应的宽和高根据盒模型解释边距...

qqlcbb 2019-08-29 14:21 评论0 收藏0
CSS中盒模型的理解

摘要：如图为了方便大家理解和尝试，我写了一个小放上来方便大家尝试显示盒模型盒模型计算规则元素框的总宽度元素的的左边距和右边距的值的左边距和右边距的值的左右宽度元素框的总高度元素的的上下边距的值的上下边距的值的上下宽度。今天突然看到一篇关于CSS中盒模型的文章，忽然觉得自己竟然遗忘了很多小的地方，所以写一篇文章来记忆一下（摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完...

shmily 2019-04-23 11:49 评论0 收藏0
标准盒模型、怪异盒模型对比与应用

摘要：百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度左右左右左右在怪异模式下，一个块的总宽度左右既已经包含了和值然后再介绍一下新属性那么，到底这两个公式里提到的总宽度是什么意思呢两种模式最终效果有什么差别呢话不多说，上代码先看标准百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)在怪异模式下...

keithxiaoy 2019-08-29 12:59 评论0 收藏0