CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的。每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline、inline-block、block、table、absolute position、float。
浏览器把每个元素看做一个盒模型,每个盒模型是由以下几个属性组合所决定的:display、position、float、width、height、margin、paddinghe border等,不同类型的盒模型会产生不同的布局

什么是盒模型?
页面中的每一个元素都是一个盒模型,包括HTML和body。如下图,每一个盒模型都是由多种属性组成的

重置盒模型解析模式
在W3C的传统CSS2.1盒模型中,通过声明width和height值来控制内容区域的宽度和高度,然后附加上内边距和边框等,称为内容盒模型
在CSS中盒模型被分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,它们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width、height、padding和border以及元素实际尺寸的计算关系,不同之处是两者的计算方法不一致
1)W3C的标准盒模型
外盒尺寸计算(元素空间尺寸)
element空间高度 = 内容高度+内距+边框+外距
element空间宽度 = 内容宽度+内距+边框+外距
内盒尺寸计算(元素大小)
element高度 = 内容高度+内距+边框(height为内容高度)
element宽度 = 内容宽度+内距+边框(width为内容宽度)
2)IE传统下盒模型(IE6以下,不包含IE6版本或QuirksMode下IE5.5+)
外盒尺寸计算(元素空间尺寸)
element空间高度 = 内容高度+外距(height包含了元素内容宽度、边框、内距)
element空间宽度 = 内容宽度+外距(包含了元素内容宽度、边框、内距)
内盒尺寸计算(元素大小)
element高度 = 内容高度(height包含了元素内容宽度、边距、内距)
element宽度 = 内容宽度(width包含了元素的内容宽度、边距、内距)
做个小总结:我个人的理解就是,IE下的盒模型,直接设置了box-sizing:border-box;

1.CSS3盒模型属性
语法及参数:box-sizing:content-box | border-box | inherit
三个属性值说明:
content-box:默认值,让元素维持W3C的标准盒模型。元素的宽度和高度(width/height)= 元素边框宽度(border)+ 元素内距(padding)+ 元素内容宽度和高度(content width/height),也就是element width/height=border+padding+content width/height
border-box:此值会重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和6 ~ 7怪异模式)。元素的宽度或高度 = 元素内容的宽度或高度。从盒模型介绍可知,这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度 = 盒子的宽度或高度-边框-内距)
inherit:此值是元素继承父元素的盒模型模式

box-sizing属性主要用来控制元素的盒模型的解析模式,其主要目的是控制元素的总宽度。box-sizing:border-box;这种设置使页面布局更加方便,只要对元素就行width设置,总宽度就固定不变
注:在Firefox浏览器中,box-sizing还可以设置一个padding-box属性值,用来指定元素的宽度或高度包括内容的宽度或高度和内距,但不包括边框宽度

浏览器兼容性

2.CSS3内容溢出属性
盒模型,也就是一个容器,容器就有空间有大小,当某些内容在盒子中容不下时,就会超出盒子,此时就可以使用overflow(CSS2.1)属性来指定如何显示盒中容纳不下的内容。在CSS3中增加了overflow-x和overflow-y属性
语法及参数:
overflow-x:visible | hidden | scroll | auto | no-display | no-content
overflow-y:visible | hidden | scroll | auto | no-display | no-content
和overflow属性参数一样,overflow-x和overflow-y属性值去不同的值所起的作用不一样
visible:默认值,表示不剪切容器中的任何内容、不添加滚动条,元素将被剪切为包含对象的窗口大小,而且是clip属性设置将失效
hidden:内容溢出容器时,所有内容都将隐藏,而且不显示滚动条
scroll:不管内容有没有溢出容器,overflow-x都会显示横向的滚动条,而overflow-y会显示纵向的滚动条
auto:在需要时剪切内容并添加滚动条。也就是说当内容超过容器的宽度或者高度时,溢出的内容将会隐藏在容器中,并且会添加滚动条,用户可以拖动滚动条查看隐藏在容器中的内容
no-display:当内容溢出容器时不显示元素,此时类似于元素添加了display:none声明一样
no-content:当内容溢出容器时不显示内容,此时类似于添加了visibility:hidden声明一样

浏览器兼容性

3.CSS3自由缩放属性
为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,也是一个非常实用的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。
语法及参数:
resize:none | both | horizontal | vertical | inherit
属性值说明:
none:用户不能拖动元素修改尺寸大小
both:用户可以拖动元素,同时修改元素的宽度和高度
horizontal:用户可以拖动元素,仅可以修改元素的宽度,但不能修改元素的高度
vertical:用户可以拖动元素,仅可以修改元素的高度,但不能修改元素的宽度
inherit:继承父元素的resize属性值

浏览器兼容性

4.CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现
语法及参数:
outline:[outline-color] | [outline-style] | [outline-width] | [outline-offset] | inherit
属性值说明:
outline-color:定义了轮廓线的颜色,默认为黑色
outline-style:定义了轮廓线的样式,默认为none
outline-width:定义轮廓线的宽度,属性值可以为一个宽度值,默认值为medium,表示绘制中等宽度的轮廓线
outline-offset:定义轮廓边框的便宜位置的数值,此值可以是负值。为正值时,表示轮廓边框向外偏移多少个像素;当为负值是,表示轮廓边框向内偏移多少个像素
inherit:元素继承父元素的outline效果

浏览器兼容性

outline和border的对比
1)border是盒模型的一部分直接影响其大小,outline不影响文档流,也不破坏网页布局
2)border可以单边设置,outline始终闭合;没有outline-top或outline-left之类
3)outline创建的外轮廓线可能是非矩形的,我的理解是当元素在文档边上的时候,轮廓被隐藏了;而border不会被隐藏掉
4)border只能向外扩展;而outline内外都可以

CSS3盒模型温故的更多相关文章

  1. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  2. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...

  3. css3 盒模型

    0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...

  4. 第94天:CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  5. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

  6. css3盒模型

    css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...

  7. CSS3盒模型之box-sizing

    这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...

  8. CSS3盒模型——box-sizing

    box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...

  9. CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

随机推荐

  1. Python函数参数默认值的陷阱和原理深究"

    本文将介绍使用mutable对象作为Python函数参数默认值潜在的危害,以及其实现原理和设计目的 本博客已经迁移至: http://cenalulu.github.io/ 本篇博文已经迁移,阅读全文 ...

  2. 设置国内的centos 7 yum源

    本人在帝都,觉得首都在线(yun-idc.com)的yum源速度不错,故选它了.具体操作方法是将以下文件保存到 /etc/yum.repos.d/yun-idc.repo 即可. [base] nam ...

  3. golang在Windows下Sublime Text开发调试环境的配置

    一.前言 近期本人有工作调动,进入了一个全新的领域[golang]服务端开发.在此写下本文,希望给那些没接触过golang开发调试环境及还在犹豫选择那家golang IDE而纠结的朋友们一点点帮助,如 ...

  4. H5游戏开发之多边形碰撞检测

    2D多边形碰撞检测介绍这是一篇论证如何在2D动作游戏中执行碰撞检测的文章(Mario,宇宙入侵者等),为了保证它的高效性和精确性,碰撞检测是以多边形为基础的,而不是以sprite为基础.这是两种不同的 ...

  5. html选中图片时,在页面回写图片

    我们经常会遇到这种情况,就是上传一个图片,但是点击一个图片的时候,最好是可以在浏览器预览这个图片,不然用户还以为没有选择图片呢,但是浏览器的安全机制却阻止了这个问题,就是当访问的是网络上的网站的时候, ...

  6. CentOS7 Java安装

    CentOS7 Java安装 CentOS7 Java安装 Download 从Oracle下载jdk-8u31-linux-x64.rpm Install 御载 执行如下命令 java -versi ...

  7. 使用git提交中删除idea

    https://segmentfault.com/q/1010000000720031 http://www.tuicool.com/articles/a6Nf63F 先有项目,然后分享至github ...

  8. 转 Windows+VS2013爆详细Caffe编译安装教程

    1. 安装cuda Cuda是英伟达推出的GPU加速运算平台 我这里安装的是cuda7.5,已经安装过的忽略,还没有安装过的这里有安装教程.windows下面安装还是非常简单的. 点击打开链接    ...

  9. 分享关于Entity Framework 进行CRUD操作实验的结果

    我们在使用Entity Framework框架进行CRUD时,经常会出现各种各样的错误,下面请看我的实验结果. 以下是只用一个上下文对象进行操作: 第一次: BlogDbContext blog = ...

  10. JS魔法堂:彻底理解0.1 + 0.2 === 0.30000000000000004的背后

    Brief 一天有个朋友问我“JS中计算0.7 * 180怎么会等于125.99999999998,坑也太多了吧!”那时我猜测是二进制表示数值时发生round-off error所导致,但并不清楚具体 ...