CSS 盒子模型
2018-03-12 23:34
274 查看
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
不同部分的说明:
Margin(外边距) - 清除边框区域。Margin没有背景颜色,它是完全透明
Border(边框) - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding(内边距) - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content(内容) - 盒子的内容,显示文本和图像
提示:在盒模型中,外边距可以是负值,而且在很多情况下都要使用负值的外边距。
CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间。CSS Margin属性接受任何长度单位、百分数值甚至负值。
margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的
margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。
可能的值:
值 | 说明 |
---|---|
auto | 设置浏览器边距。这样做的结果会依赖于浏览器 |
length | 定义一个固定的margin(使用像素,pt,em等) |
% | 定义一个使用百分比的边距 |
CSS Border(边框)
Remark border-style属性用来定义边框的样式border-style 值:
none: 默认无边框 dotted: 定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。 两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。 效果取决于边界的颜色值
边框的属性:
属性 | 描述 |
---|---|
border | 简写属性,用于把针对四个边的属性设置在一个声明。 |
border-style | 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
border-width | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
border-bottom | 简写属性,用于把下边框的所有属性设置到一个声明中。 |
border-bottom-color | 设置元素的下边框的颜色。 |
border-bottom-style | 设置元素的下边框的样式。 |
border-bottom-width | 设置元素的下边框的宽度。 |
border-left | 简写属性,用于把左边框的所有属性设置到一个声明中。 |
border-left-color | 设置元素的左边框的颜色。 |
border-left-style | 设置元素的左边框的样式。 |
border-left-width | 设置元素的左边框的宽度。 |
border-right | 简写属性,用于把右边框的所有属性设置到一个声明中。 |
border-right-color | 设置元素的右边框的颜色。 |
border-right-style | 设置元素的右边框的样式。 |
border-right-width | 设置元素的右边框的宽度。 |
border-top | 简写属性,用于把上边框的所有属性设置到一个声明中。 |
border-top-color | 设置元素的上边框的颜色。 |
border-top-style | 设置元素的上边框的样式。 |
border-top-width | 设置元素的上边框的宽度。 |
CSS Padding(填充)
值 | 说明 |
---|---|
length | 定义一个固定的填充(像素, pt, em,等) |
% | 使用百分比值定义一个填充 |
内边距的百分比数值
CSS padding 属性的百分比数值是相对于其父元素的 width 计算的,如果改变了父元素的 width,则它们也会改变。
以下是将段落的内边距设置为父元素 width 的 20% 的示例:
p {padding: 20%;}
假设一个段落的父元素是 div 元素,那么它的 padding 的 width 计算是根据 div 进行的:
<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>
注意:上下内边距与左右内边距一致,即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。
相关文章推荐
- css-4.边框和盒子模型
- css核心-盒子模型(Box Model)整理
- DIV + CSS 盒子模型
- css(二)盒子模型和不同元素类型
- CSS知识点:盒子模型的计算方法
- css的核心内容:标准流、盒子模型、浮动、定位
- CSS-盒子模型
- CSS属性之盒子模型(Box Model)
- Css3盒子模型-css学习之旅(5)
- CSS的盒子模型(Box Model)
- [HTML/CSS]盒子模型,块级元素和行内元素
- 使用HTML语言和CSS开发商业站点_盒子模型
- 关于css的标准盒子模型
- [html+css]HTML+CSS基础课程:元素分类 和 盒子模型 笔记
- CSS-14.盒子模型的宽高问题和box-sizing属性
- 理解DIV+CSS盒子模型
- 使用css弹性盒子模型
- CSS 盒子模型(下)(20160820-0020)
- <div+css页面布局课堂笔记>3---页面布局的盒子模型(IE与其他浏览器区别)
- CSS之选择符、链接、盒子模型、显示隐藏元素