CSS之盒子模型及其相关属性、元素的类型与转换

盒子模型

1、认识盒子模型

• 所有HTML元素可以看作盒子
• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
  

不同部分说明：

• Margin 外边距 清除边框外的区域，外边距是透明的
• Border边框 围绕在内边距和内容外的边框
• Padding内边距 清除内容周围的区域，内边距是透明的
• Content内容 盒子的内容，显示文本和图像

盒子模型的总宽度与总高度：

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

2、盒子模型相关属性

2.1 边框(border)属性

边框样式：border-style: 上边[右边 下边 左边]

属性值	含义
none	没有边框
solid	单实线
dashed	虚线
dotted	点线
double	双实线

边框宽度：border-width: 上边[右边 下边 左边]

• 在设置边框宽度时，必须同时设置边框样式，如果未设置样式或者设置为none，则不论宽度设置多少都无效。
• 常用取值单位为像素

边框颜色：border-color: 上边[右边 下边 左边]

border-top-colors
border-right-colors
border-bottom-colors
border-left-colors

综合设置边框：border: 四边宽度 四边样式 四边颜色

圆角边框：border-radius: 水平参数半径/垂直参数半径

图片边框：border-images: 图片路径 裁切方式/边框宽度/边框扩展距离 重复方式

2.2 内边距(padding)属性

padding: 上 右 下 左

padding:  上 右 下 左

padding-top: 上边距

padding-right: 右边距

padding-bottom: 下边距

padding-left: 左边距

2.3 外边距(margin)属性

margin：上 右 下 左

margin：上 右 下 左

margin-top：上边界
			
margin-right：右边界
			
margin-bottom：下边界
			
margin-left: 左边界

• 当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中

• *：通配符，代表所有元素

*{
     
	margin: auto	/*利用margin实现块元素水平居中*/
}

*{
     
	margin: 5px auto	/*利用margin实现块元素水平居中 并且上下拉开5像素边距*/
}

内外边距清除

*{
     
	padding: 0px;/*清除内边距*/
	margin: 0px;/*清除外边距*/
}

2.4 背景属性

设置背景颜色：background-color: 背景颜色属性

*{
     
	background-color: #ccc;
}

设置背景图片：background-image：背景颜色属性

*{
     
	background-image: url('图像');
}

设置背景图像平铺：background-repeat: 图像平铺属性

属性值	含义
repeat	沿水平和竖直两个方向平铺(默认值)
no-repeat	不平铺(图像位于元素左上角，只显示一次)
repeat-x	只沿水平方向平铺
repeat-y	只沿竖直方向平铺

设置背景图像位置：background-position：图像位置属性

设置背景图片固定：background-attachment：图像固定属性

综合设置元素背景：background: 背景色 url('图像') 平铺 定位 固定

*{
     
	background： url(images/wdjl.jpg) no-repeat 50px 80px fixed

3、元素的类型与转换

3.1 元素类型

块元素

• 在页面内以区域块的形式出现
• 每个块元素通常都会独自占据一整行或多整行
• 可以对其设置宽度、高度、对齐等属性

常见块元素：

-

行内元素

• 不占有独立的区域
• 仅仅靠自身的字体大小和图像尺寸来支撑结构
• 一般不可设置宽度、高度、对齐等属性

常见块元素：


3.2 元素类型的转换

display： 属性值

• inline：此元素将显示为行内元素(行内元素默认的display属性)
• block：此元素将显示为块元素(块元素默认的display属性)
• inline-block：此元素将显示为行内块元素，可对其设置宽高和对齐等属性，该元素不会独占一行
• none：此元素被隐藏，不显示，也不占用页面控件