CSS盒模型的介绍

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重叠

   

       

  

       

原文地址:https://www.cnblogs.com/menggirl23/p/10068259.html

时间: 2024-10-04 10:49:04

CSS盒模型的介绍的相关文章

&lt;逆战&gt;css盒模型简介

css盒模型是网页布局中不可或缺的部分,以下是对css盒模型简要介绍的思维导图: 注:margin常出现的bug: a:当父元素和子元素都没有设置浮动的情况下,如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上 b:上下相邻两个元素之间的margin值,不会叠加,按照最大值去设置 原文地址:https://www.cnblogs.com/meng-/p/12609618.html

每日分享!介绍Css 盒模型!

如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理解盒模型,我们需要从两个方面去考虑:一.理解一个单独盒子的内部结构,二是理解多个盒子之间的相互关系! 盒子的组成:盒子是由(content(内容) + padding(内边距)+ border(边框) + margin(外边距) ) 四个属性组成.此外,在盒子模型中,还有width(宽度)和 hei

前端之CSS盒模型介绍

css盒模型 css盒模型是css的基石,盒模型由content(主体内容),padding(补白,填充),border(边框),margin(外间距); 1.content: width:数值+单位; 主体内容的宽度 height:数值+单位; 主体内容的高度 2.padding(补白或填充): (a)padding:10px; 设置一个值,代表上,下,左,右均为10px (b)padding:20px 10px; 设置两个值,代表上下为20px,左右为10px (c)padding:20px

尖刀出鞘的display常用属性及css盒模型深入研究

一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-block后的元素具有block元素可以设置宽高特性,同时又具有inline元素默认不换行的特性. 其实display:inline-block这个属性现在浏览器都支持,其实IE从5.5开始就已经支持了,但是IE6,7支持的还不够完善,我们可以先来做demo测试下就可以明白.为了做demo,所以我们现在需要

IE浏览器和CSS盒模型【转】

总结:css盒模型在不同浏览器之间(例如:ie和其他浏览器 如火狐)的差异只存在于ie6之前的版本中,如ie5.在ie6下, Internet Explorer 在标准模式下渲染时使用了 CSS 规范的算法,也就是会显示正确的盒模型,而在 quirks 模式下使用先前的,不规范的算法.即,只有在怪异模式下,css盒模型才会在ie和火狐下存在差异. 但是实际上我们都是使用标准的模式,只要为文档设置一个DOCTYPE,就会使得IE遵循标准兼容模式的方式工作. //以下摘自百度百科"怪异模式"

第七十三节,css盒模型

css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性                       值                                             说明                                CS

html5知识点:CSS盒模型

一. CSS层叠 在前端程序员对CSS编写的过程中,CSS选择器的作用是用来选中某个元素,并对当前的元素进行样式上的渲染,那么每一个选择器都有属于自己的一些解析规则.那我们今天所探讨的CSS层叠就是浏览器对多个样式的来源进行叠加,并最终解析成渲染效果,那这个过程我们就称为CSS层叠. 1) CSS样式的来源 css之所以有"层叠"的概念,是因为有多个样式来源.其实css的样式来源有5个,开发人员只能接触到后面3个. 前三个我们程序员习惯的称为:"内联样式表".&qu

css盒模型

css盒子模型是为了让我们充分理解div+css模型的定位功能,盒子模型在学习div+css布局方式中必须要学习的一个模型. 那什么是css盒模型呢? 网页设计中常听到的属性名:内容(content).填充(padding).边框(border).边界(margin).css盒模型都具备这些属性.这些属性和日常生活中盒子的属性是一样的.内容就是盒子里面装的东西,而填充就是像盒子里装的一些反震的材料,边框就是箱子的本身,边界呢就像盒子之间的空隙. 盒子的模型有2种,分别是IE盒子模型和标准盒子模型

第16章 CSS盒模型下

第 16章 CSS盒模型[下]学习要点:1.元素可见性2.元素盒类型3.元素的浮动 本章主要探讨 HTML5中 CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性使用visibility属性可以实现元素的可见性,这种样式一般可以配合 JavaScript来实现效果.样式表如下:属性 visibility 值 说明 CSS版本visible 默认值,元素在页面上可见 2hidden 元素不可见,但会占据空间. 2collapse 元素不可见,隐藏表格的行与列. 2 如果不