CSS盒模型

标签： css

CSS盒模型，几点注意

CSS盒模型是什么
CSS盒模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素
标准模型和IE模型的区别
CSS如何设置这两种模型
*box-sizing：content-box;//标准盒子
box-sizing: border-box;*//IE盒子
JS如何设置获取盒模型对应的宽和高
dom.style.width/height 只对设置了内联样式的元素生效
dom.currentStyle.width/height 只对IE起作用
window.getComputedStyle(dom).width/height 通用性好
dom.getBoundingClientRect().width/height 这个方法就是获取元素的绝对位置
dom.offsetWidth/offsetHeight 常用兼容最好
实例题（根据盒模型解释边距重叠）
父子元素，若子元素设置外边距而父元素没有设置，因为边距重叠，父元素也会有外边距、兄弟元素，上面的设置下外边距，下面的设置上外边距，会产生重叠，取最大的那个外边距作为外边距
BFC（边距重叠解决方案）
BFC的原理

内部的box会在垂直方向，一个接一个的放置
每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
bfc的区域不会与浮动区域的box重叠
bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
计算bfc高度的时候，浮动元素也会参与计算

怎么创建bfc

float属性不为none（脱离文档流）
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不为visible
根元素

应用场景

自适应两栏布局
清除内部浮动 
防止垂直margin重叠

本文链接：https://blog.csdn.net/qq_36790381/article/details/82706744

智能推荐

CSS盒模型

盒模型拓展到了一些概念，该篇不只是单纯的对怎样产生一个盒模型来介绍的。首先CSS中元素分为块级元素和行内元素从语义上理解块级元素在网页中霸占一行不与其他元素并列。这是CSS中块级元素与行内元素的分类，那么盒子在CSS中用处很多，我们在未转换的情况下只能对块级元素添加盒子，盒子属性：width（宽）、height（高）、padding（填充）、border（边框）、margin（盒子间距）那...

CSS 盒模型

盒模型的定义：盒模型是页面设计和布局时用到一种思维模型。盒模型由，Margin (外边距), Border (边框) ，Padding(内边距／填充) 和Content（内容）组成。其中外边距margin是透明的，不会遮挡周边的其他元素。标准盒模型里，用CSS对元素设置width 和 height 属性时，设置的其实是content 部分的宽和高，元素实际占位空间，还需要加上Pa...

CSS盒模型详解

CSS盒模型常见问题： 1. 基本概念：标准模型+IE模型 2. 标准模型和IE模型区别 3. CSS如何设置这两种模型 4. JS如何设置获取盒模型对应的宽和高 &nbs...

理解CSS盒模型

CSS盒模型是网页布局中一个很重要的概念，在前端面试题中也会经常出现。本文将从以下几个方面讲解CSS盒模型： CSS盒模型的概念标准盒模型和IE盒模型元素的实际宽高计算更改盒模型模式一、CSS盒模型的概念在网页中，所有的HTML元素都可以看做一个盒子。那么CSS盒模型其本质上就是一个盒子，它封装HTML元素，包括：外边距（margin），边框（border），内边距（padding），和...

CSS盒模型

1.元素的分类：HTML的标签元素大体被分为三种不同的类型：块状元素、内联元素（行内元素）和内联块状元素。常用的块状元素有：<div>、<p>、<h1>……<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote&...

CSS盒模型

CSS盒模型，几点注意

智能推荐

猜你喜欢