CSS 盒子模型及相关属性、元素类型转换及CSS3新增盒子属性

盒子模型

认识盒子模型

盒子模型：网页布局的基础

一个盒子可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

盒子的大小：

• 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
• 盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

盒子模型的相关属性

边框属性

border 边框：盒子的边框线

设置内容	样式属性	常用属性值
边框的样式	border-style：[上、右、下、左]	solid（单实线） dashed（虚线） dotted（点线） double（双实线）
边框的宽度	border-width： [上、右、下、左]	像素值px
边框的颜色	border-color ：[上、右、下、左]
边框的综合设置	border：宽度 样式 颜色（顺序任意不分先后）
表格的边框合并	border-collapse：	collapse（表示相邻边框合并在一起）
圆角边框	border-radius：水平半径参数/垂直半径参数(也可设置border-top-left-radius) 左上 或者右上、左下、右下)	像素值px或者百分比
图片边框	border-images：图片路径 裁剪方式、边框宽度、边框扩展距离

注意：

• 设置边框宽度时，必须同时设置边框样式才有效
• 边框会影响盒子的大小

内边距属性

padding 又称填充、内部白：盒子中的内容与盒子边框间的距离

样式属性：

padding：四条边

• 5px 上下左右5
• 5px 10px 上下5 左右10
• 5px 10px 15px 上5 左右10 下15
• 5px 10px 15px 20px 上5 右10 下15 左20

padding-top（right、bottom、left）：上（右、下、左）边距

注意：

• 内边距会影响盒子的大小
• 为了保证盒子和效果图大小保持一致，让width/height减去多出来的内边距大小
• 如果盒子没有width/height属性，则padding不会撑开盒子的大小
• padding不允许使用负值

外边距属性

margin 又称边界：盒子边框与包含该盒子容器间的距离

样式属性：

margin：四条边（同上）
margin-top（right、bottom、left）：上（右、下、左）边

注意：

• 块级元素水平居中，必须设置宽度属性width，将左右外边距都设置为auto 即margin：0 auto
• 行内元素或者行内块元素水平居中，给其父元素添加text-align：center
• margin允许使用负值

外边距合并

1.相邻块元素垂直外边距的合并
当上下相邻两个块元素（兄弟关系），上有margin-bottom，下有margin-top，垂直间距为两个值的较大者

解决： 尽量只给一个盒子添加margin值

2.嵌套块元素垂直外边距的塌陷
两个嵌套关系（父子关系）的块元素，父元素和子元素都有上外边距，父元素会塌陷较大的外边距值

解决：

• 为父元素定义边框
• 为父元素定义内边距
• 为父元素添加 overflow：hidden
• 浮动、固定，绝对定位的盒子不会塌陷

内、外边距的清除：为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距，让值等于0。

*{
	padding：0
	margin：0
}

注意： 行内元素照顾兼容性，不设置上下内外边距，只设置左右内外边距。但是转换为块级和行内块元素即可

背景属性

背景属性	用法	常用属性值
背景颜色	background-color
背景图像	background-image	url（“图像路径”）
背景图像平铺	background-repeat	①repeat (默认):水平垂直均平铺 ② no-repeat：不平铺 ③ repeat-x(y):水平（垂直）平铺
背景图像位置	background-position	①单位数值（px）②方向（top、left、center、right、bottom）③百分比（%）
背景图像固定	background-attachment	①scroll(默认)：图像随页面元素一起滚动②fixed：固定在屏幕上，不随页面元素滚动
背景综合设置	background:背景色 图像url(“ ”) 平铺 定位 固定

元素类型转换

块级元素

• 在页面中以区域块的形式出现。
• 每个块元素通常都会独自占据一整行或多整行。
• 可以对其设置宽度、高度、对齐等属性。
• 是一个容器及盒子，里面可以放行内或者块级元素
• 常见块级元素：div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、th、hr等
  注意： 文字类元素内不能使用块级元素，如<p>标签，不能放<div>标签， 或者<h1>~<h6>标签放内容文字既可

行内元素

• 不占有独立的区域。
• 仅仅靠自身的字体大小和图像尺寸来支撑结构。
• 一般不可以设置宽度、高度、对齐等属性。
• 行内元素只能收纳文本或者其它行内元素
• 常见行内元素：span、ins、a、u、b、label、strong、em等
  注意： 链接里面不能再放链接，特殊情况链接<a>里面可以放块级元素，并且给<a>转换一些块级模式

行内块元素

• 和相邻行内元素在一行上，之间可以显示多个
• 默认宽度就是本身内容宽度
• 行高、高度、外边距、内边距都可以控制
• 常见行内块元素：img、input、td 同时具有块元素和行内元素特点

div和span标签

<div>

• <div>标记是一个块容器标记。
• 可以将网页分割为独立的部分，以实现网页的规划和布局。
• 大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
• 可以替代大多数的块级文本标记。

<span>

• <span>标记是一个行内标记。
• <span>与</span>之间只能包含文本和各种行内标记。
• 标记常用于定义网页中某些特殊显示的文本，配合class属性使用。
• 当其他行内标记都不合适时，就可以使用<span>标记。

元素类型转换

disply:属性值

• inline：显示为行内元素
• block：显示为块元素
• inline-block：显示为行内块元素，可以对其设置宽高、对齐等属性，但是该元素不会独占一行
• none：隐藏，不显示，不占有页面空间

元素的显示与隐藏

1、disply：属性值

• block：显示元素
• none：隐藏元素，不再占有原来位置

2、visibility：属性值

• visible：元素可视
• hidden：元素隐藏，继续占有原来位置

3、overflow溢出：属性值

• visible：溢出部分也显示
• hidden：溢出部分隐藏（有定位盒子时，慎用）
• scroll：溢出部分显示滚动条，不溢出也显示
• auto：溢出显示滚动条，不溢出不显示

CSS3新增盒子模型属性

颜色透明度:

• background-color:（r,g,b,0~1）
• opoacity：0~1

图片边框:

阴影 :box-shadow

属性值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许赋值
blur	可选， 模糊距离，虚实
spread	可选，阴影的尺寸，大小
color	可选，阴影的颜色
inset	可选，默认outset，不可以写，只能写outset改为内阴影
注意：

• outset不可以写，否则阴影无效
• 盒子阴影不占用空间，不会影响其它盒子排列

渐变: background-image

• 线性渐变：linear-gradient(渐变角度 颜色值1,…颜色值n)
• 径向渐变：radial-gradient(渐变形状 圆心位置,颜色值1,…颜色值n)
• 重复渐变：repeat-linear(radient)-gradient(渐变角度(形状) 颜色值1, …颜色值n)

多背景图像: background-image: url() , url()…

修剪背景图像：

background-size：属性值1 …属性值n

background-origin：属性值

• padding-box：背景图像相对于内边距区域来定位
• border-box：背景图像相对于边框来定位
• content-box：背景图像相对于内容框来定位

background-clip：属性值

• border-box：默认值，从边框区域向外裁剪背景
• padding-box：从内边距区域向外裁剪背景
• content-box：从内容区域向外裁剪背景