CSS学习笔记（九）--CSS 框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

ct_boxmodel.gif

内边距、边框和外边距都是可选的，默认值是零。

width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

1. 内边距padding

padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
四个单独的属性，分别设置上、右、下、左内边距：

padding-top
padding-right
padding-bottom
padding-left

2. 边框

3 个方面：宽度、样式，以及颜色

一个边框定义多个样式：

p.aside {border-style: solid dotted dashed double;}
定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
定义单边样式

border-top-style
border-right-style
border-bottom-style
border-left-style

p.dotted {border-style: dotted}     ##点
p.dashed {border-style: dashed}  ##短线
p.solid {border-style: solid}     ##实线
p.double {border-style: double}   ##双线
p.groove {border-style: groove}   ##灰色
p.ridge {border-style: ridge}     ##灰白框
p.inset {border-style: inset}    ##左上现
p.outset {border-style: outset}    ##右下现

边框的宽度

p {border-style: solid; border-width: 5px;}
定义单边宽度

border-top-width
border-right-width
border-bottom-width
border-left-width

p {border-style: none; border-width: 50px;}即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。

边框的颜色

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

透明边框

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

3. 外边距margin 属性

类似于内边距

4. 外边距合并

一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

ct_css_margin_collapsing_example_1.gif

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

ct_css_margin_collapsing_example_2.gif

最后编辑于：2017.12.08 23:32:48

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

CSS学习笔记（九）--CSS 框模型