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重叠
-ＴＨＥ ＥＮＤ-
CSS盒模型的介绍的更多相关文章
- 每日分享！介绍Css 盒模型！
如何定义盒模型: 在CSS盒子模型理论中,页面中所有的元素都是看成一个盒子,并且还占据一定的空间. 一个页面是由很多这样的盒子组成的.这些盒子之间都会相会影响,因此我们掌握CSS盒模型相当重要.需要理 ...
- CSS盒模型属性详细介绍
一.概述 CSS盒模型是定义元素周围的间隔.尺寸.外边距.边框以及文本内容和边框之间内边距的一组属性的集合. 示例代码: <!DOCTYPE html> <html lang=&qu ...
- 前端之CSS盒模型介绍
css盒模型 css盒模型是css的基石,盒模型由content(主体内容),padding(补白,填充),border(边框),margin(外间距); 1.content: width:数值+单位 ...
- [k]css盒模型
box-sizing : content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- 第七十三节，css盒模型
css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 CSS盒模型中 ...
- 来谈谈你对CSS盒模型的认识？
任何一个网页的搭建都离不开盒模型的堆砌.应该说css模型是web的一个根基,最后呈现出来的效果不同无非就是在高宽.内容与背景删的区别而已. 那么CSS模型有什么认识的呢? 首先,css盒模型有几种呢? ...
- IE浏览器和CSS盒模型【转】
总结:css盒模型在不同浏览器之间(例如:ie和其他浏览器 如火狐)的差异只存在于ie6之前的版本中,如ie5.在ie6下, Internet Explorer 在标准模式下渲染时使用了 CSS 规范 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
随机推荐
- AJPFX：什么是外汇交易
外汇交易是对货币对的一种买卖,是以一个国家货币与另外一个国家货币进行交换,即您在买入一国货币的同时,您也卖出了另一国的货币.所以在外汇市场上,人们的交易对象就是“货币对“,比如欧元/美元,美元/日元, ...
- 4.html基础标签：表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- API接口设计：防参数篡改+防二次请求
API接口由于需要供第三方服务调用,所以必须暴露到外网,并提供了具体请求地址和请求参数 为了防止被第别有用心之人获取到真实请求参数后再次发起请求获取信息,需要采取很多安全机制 1.首先: 需要采用ht ...
- OO第一单元自白
Homework 1 简单多项式导函数 对于初次接触的OO,第一次作业已经可以体会到其与面向过程的C语言之间的差别. 我的想法是,建立了Multinomial和Monomial 两个类,分别能够实现 ...
- 读取.Properties文件以及Spring注解读取文件内容
public class Main { public static void main(String[] args) throws IOException { //创建Properties对象 Pro ...
- HTTPS到底是个什么鬼？
HTTPS随处可见,那么它到底是个什么鬼?本文我们一起来探讨一下HTTPS为什么是安全的,以及HTTPS连接建立的过程. 一.HTTPS为什么是安全的? HTTP使用明文通信,可能会被第三方窃听.篡改 ...
- Android应用内展示office文件--腾讯浏览服务（TBS）
什么是TBS 依托 X5 内核强大的能力,致力于提供优化移动端浏览体验的整套解决方案(官网介绍).我们可利用其做文件浏览功能,支持多种文件格式,完全可以满足需求.更多介绍请看官网:http://x5 ...
- interface21 - web - DispatcherServlet（DispatcherServlet初始化流程）
前言 最近打算花点时间好好看看spring的源码,然而现在Spring的源码经过迭代的版本太多了,比较庞大,看起来比较累,所以准备从最初的版本(interface21)开始入手,仅用于学习,理解其设计 ...
- SSH, 整合分页功能，连带DAO经典封装
任何一个封装讲究的是,使用,多状态.Action: 任何一个Action继承分页有关参数类PageManage,自然考虑的到分页效果,我们必须定义下几个分页的参数.并根据这个参数进行查值. 然 ...
- 从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...