CSS 笔记——盒子模型
2. 盒子模型
在CSS眼中，任何HTML标签对象都是一个矩形，有长度，宽度以及各角的定位坐标，俗称CSS 盒子模型理论。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
（1）margin（外边距）
基本语法
margin : auto | length
语法取值
auto : 取计算机值
length : 由浮点数字和单位标识符组成的长度值 | 百分数。
百分数是基于父对象的高度。除了内联对象的上下外边距外，支持使用负数值。
属性列表
| margin-top | margin-right | margin-bottom | margin-left |
|---|---|---|---|
使用说明
检索或设置对象四边的外边距。默认值为 0 0。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
在IE4.0+中你可以使用 em 和 ex 单位。在IE4.0+中此属性不支持用于 td 和 th 对象。要设置单元格内的外补丁，请使用单元格内的如 div 、 p 等类型对象的此属性。在IE5.5+中此属性支持内联对象使用。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。对于内联对象来说，上下外补丁如果被设置了，将是用于计算环绕内联对象的边框区域的。它们的值不会影响内联对象所在行的高度( height )。外补丁总是透明( transparent )的。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 margin 。
代码示例
margin: 20px; /* 上下左右都是一个值 */
margin: 10px 20px; /* 上下、左右依次设置 */
margin: 10px 10px 20px; /* 上、左右、下依次设置 */
margin: 10px 20px 30px 40px; /* 上、右、下、左依次设置 */
margin-top: 20px; /* 单独设置上外边距 */
margin-bottom: 20px; /* 单独设置下外边距 */
margin-left: 20px; /* 单独设置左外边距 */
margin-right: 20px; /* 单独设置右外边距 */
（2）border（边框）
基本语法
border : border-width || border-style || border-color
语法取值
该属性是复合属性。请参阅各参数对应的属性。
属性列表
| border | border-color | border-style | border-width |
|---|---|---|---|
| border-top | border-top-color | border-top-style | border-top-width |
| border-right | border-right-color | border-right-style | border-right-width |
| border-bottom | border-bottom-color | border-bottom-style | border-bottom-width |
| border-left | border-left-color | border-left-style | border-left-width |
（2.1）border-color
基本语法
border-color : color
使用说明
设置对象边框的颜色。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
在 IE5.5+ 中，边框属性可以直接应用于内联要素。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
如果 border-style 设置为 none ，本属性将失去作用。
（2.2）border-style
基本语法
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
语法取值
none : 默认值。无边框。不受任何指定的 border-width 值影响
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove : 根据 border-color 的值画3D凹槽
ridge : 根据 border-color 的值画3D凸槽
inset : 根据 border-color 的值画3D凹边
outset : 根据 border-color 的值画3D凸边
使用说明
设置对象边框的样式。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
在 IE5.5+ 中，边框属性可以直接应用于内联要素。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
（2.3）border-width
基本语法
border-width : medium | thin | thick | length
语法取值
medium : 默认值。默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。
使用说明
设置对象边框的宽度。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
在 IE5.5+ 中，边框属性可以直接应用于内联要素。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
代码示例
border: 2px solid red;
/* 缩写边框属性设置在一个声明中所有的边框属性。可以设置的属性分别（按顺序）：border-width, border-style, 和border-color。*/
border-width: thin; /* 所有4个边框都是细边框 */
border-width: thin medium; /* 上下边框是细边框，左右边框是中等边框 */
border-width: thin medium thick; /* 上边框是细边框，左右边框是中等边框，下边框是粗边框 */
border-width: thin medium thick 10px; /* 上边框是细边框，右边框是中等边框，下边框是粗边框，左边框是 10px 宽的边框 */
border-style: solid; /* 设置元素所有边框的样式 */
border-style: dotted solid; /* 上下边框是点状，左右边框是实线 */
border-style: dotted solid double; /* 上边框是点状，左右边框是实线，下边框是双线 */
border-style: dotted solid double dashed; /* 上边框是点状，右边框是实线，下边框是双线，左边框是虚线 */
border-color: red; /* 所有四个边框是红色 */
border-color: red green; /* 上下边框是红色, 左右边框是绿色 */
border-color: red green blue; /* 上边框是红色, 左右边框是绿色, 下边框是蓝色 */
border-color: red green blue pink; /* 上边框是红色, 右边框是绿色, 下边框是蓝色, 下边框是粉红色 */
border-top: thick double #ff0000; /* 把上边框的所有属性设置到一个声明中。 */
border-top-color: red; /* 设置元素的上边框的颜色。 */
border-top-style: dotted; /* 设置元素的上边框的样式。 */
border-top-width: thin; /* 设置元素的上边框的宽度。 */
border-right: thick double #ff0000; /* 把右边框的所有属性设置到一个声明中。 */
border-right-color: red; /* 设置元素的右边框的颜色。 */
border-right-style: dotted; /* 设置元素的右边框的样式。 */
border-right-width: thin; /* 设置元素的右边框的宽度。 */
border-bottom: thick double #ff0000; /* 把下边框的所有属性设置到一个声明中。 */
border-bottom-color: red; /* 设置元素的下边框的颜色。 */
border-bottom-style: dotted; /* 设置元素的下边框的样式。 */
border-bottom-width: thin; /* 设置元素的下边框的宽度。 */
border-left: thick double #ff0000; /* 把左边框的所有属性设置到一个声明中。 */
border-left-color: red; /* 设置元素的左边框的颜色。 */
border-left-style: dotted; /* 设置元素的左边框的样式。 */
border-left-width: thin; /* 设置元素的左边框的宽度。 */
（3）padding（内边距）
基本语法
padding : length
语法取值
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。
百分数是基于父对象的宽度。不允许负值。
属性列表
| padding-top | padding-right | padding-bottom | padding-left |
|---|---|---|---|
使用说明
检索或设置对象四边的内边距。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
在IE5.5+中此属性支持内联对象使用。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
代码示例
padding: 20px; /* 上下左右都是一个值 */
padding: 10px 20px; /* 上下、左右依次设置 */
padding: 10px 10px 20px; /* 上、左右、下依次设置 */
padding: 10px 20px 30px 40px; /* 上、右、下、左依次设置 */
padding-top: 20px; /* 单独设置上内边距 */
padding-bottom: 20px; /* 单独设置下内边距 */
padding-left: 20px; /* 单独设置左内边距 */
padding-right: 20px; /* 单独设置右内边距 */
（4）注意
默认的 margin 和 padding 的存在，而且不同的浏览器该值还不同。为了达到一致，我们一般在样式表的头部，需要一条初始化操作语句：
body, div, span {
margin: 0px;
padding: 0px;
}
CSS 笔记——盒子模型的更多相关文章
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
- 前端学习笔记--CSS布局--盒子模型
1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:
- css 大话盒子模型
什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
- CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
随机推荐
- UOJ#204 【APIO2016】Boat
Time Limit: 70 Sec Memory Limit: 256 MBSubmit: 559 Solved: 248 Description 在首尔城中,汉江横贯东西.在汉江的北岸,从西向 ...
- 汕头市队赛SRM 20 T2不净的圣杯
不净的圣杯 SRM 20 背景 作为一张BUG级别的卡,官方打算把它修改得人畜无害一些…… 虽然名字还没想好,但是能力大概是对敌方所有单位造成d点伤害,d为自己牌组中所有卡的编号的最大公约数.这无疑是 ...
- 【shell】shell中各种括号的作用()、(())、[]、[[]]、{}
一.小括号,圆括号() 1.单小括号 () ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有 ...
- Part2-HttpClient官方教程-Chapter1-基础
前言 超文本传输协议(HTTP)可能是当今Internet上使用的最重要的协议.Web服务.网络支持的设备和网络计算的增长继续扩展了HTTP协议在用户驱动的Web浏览器之外的作用,同时增加了需要HTT ...
- arch中yaourt的安装和使用
yaourt-Yet AnOther User Repository Tool Yaourt是archlinux方便使用的关键部件之一,但没有被整合到系统安装中的工具.建议在装完系统重启之后,更新完p ...
- 【Android开发日记】之基础篇（二）——Android的动画效果
什么是动画,动画的本质是通过连续不断地显示若干图像来产生“动”起来的效果.比如说一个移动的动画,就是在一定的时间段内,以恰当的速率(起码要12帧/秒以上,才会让人产生动起来的错觉)每隔若干 ...
- POJ 3308
http://poj.org/problem?id=3308 考虑答案不是乘积而是和的做法, 因为对于每一个伞兵我们要么在这行内安装大炮消灭它 要么在这列中安装大炮消灭它,所以容易看出这是一个最小边覆 ...
- 小程序 image跟view标签上下会有空隙
解决方案 就是可以在image那里设置vertical-align:top/bottom/text-top/text-bottom 原因:图片文字等inline元素默许是跟父级元素的baseline对 ...
- matlab基本指令
基本命令 close all //关闭所有figure 命令打开的窗口,在命令窗口输入 clear all //清除之前运行程序所存下的所有变量 size(mat) a = [1 2 3 ; 4 5 ...
- WP评论系统更换小结（转）
第三方评论插件 多说 多说是一款追求极致体验的社会化评论框,可以用微博.QQ.人人.豆瓣等帐号登录并评论. 多说具备优质用户体验.速度和稳定性.社会化推荐.建站程序审核整合.垃圾评论过滤等特性. 自定 ...