盒模型分析

开发工具与关键技术： DW

作者：陈海涛

撰写时间：2021/5/7

1.所有 HTML 元素可以看作盒子，在 CSS 中，"box model"这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

            2.盒模型各部分说明：

1.content（内容）：盒子的内容，显示文本和图像。

2.padding（内边距）：内容区与边框之间的填充部分，内边距是透明的。

3.margin（外边距）：盒子与邻元素的间距，外边距是透明的。

4.border（边框）：盒子的边框，可以设置边框的宽度、样式、颜色。

3.padding属性

padding 属性接受长度值或百分比值（百分数值是相对于其父元素的 width 算的），但不允许使用负值。

内边距相关属性：padding-top(上内边距) 、 padding-right(右内边距) 、padding-bottom(下内边距) 、padding-left(左内边距)

也可以用简写

padding:10px 10px 10px 10px;（对应上，右，下，左）

padding:10px 20px 30px;(上10px)(右,左20px)(下30px)

padding:10px 20px; (上,下10px) (右,左20px)

padding:10px;(上，右，下，左)

 

1. margin属性

围绕在元素边框的空白区域就是外边距，设置外边距最简单的方法就是使用

margin 属性，这个属性接受任何长度单位，百分数值甚至负值。

外边距相关属性：margin-top(上外边距) 、 margin -right(右外边距)、margin -bottom(下外边距) 、margin -left(左外边距)

简写原理跟padding一样

1. border属性

元素的边框就是围绕元素内容和内边距的一条或多条线。我们可以设置元素

边框的样式、宽度和颜色。

 

简写  border：1px solid red;

(上下左右边框1个px  实线 红色背景)

Ø 边框样式 border-st