css盒模型
CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边距、边框、填充、和实际内容。(即 装东西的容器)
所有 HTML 标签可以看作盒子,在 CSS 中,"box model" 这一术语是用来设计和布局时使用的。(即网页布局就是利用 CSS 摆盒子)
2、内容 content
概述:CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。
width 设置宽度
auto默认值。浏览器可计算出实际的宽度。px 百分比
height 设置高度
auto默认值。浏览器可计算出实际的宽度。px 百分比
3、边框 border
设置所有边框宽度,或者单独地为各边边框设置宽度。
取值:长度值。不允许指定负值
语法
空格隔开1-4个值
1个值 设置所有边框宽度
2个值 设置上下、左右
3个值 设置上、左右、下
4个值 设置上、右、下、左
border-style边框样式
作用
设置标签所有边框的样式,或者单独地为各边设置边框样式。
取值:none定义无边框
dotted 定义点状线边框
solid 定义实线边框
double 定义双实现边框 双线的 宽度等于 border-width 的值。
dashed 定义虚线边框
其他(了解——掌握以上5个即可)
语法
-
1个值 设置所有边框
-
2个值 设置上下、左右
-
3个值 设置上、左右、下
-
4个值 设置上、右、下、左
注意:只有当这个值不是 none 时,边框才可能出现。如果边框样式是 none,边框宽度实际上会重置为 0。
border-color边框颜色
作用
设置所有边框颜色,或者单独地为各边边框设置颜色。
取值
颜色的名称,如 red
RGB 值, 如 rgb(255,0,0)
16进制值,如 #ff0000
语法
1个值 设置所有边框
2个值 设置上下、左右
3个值 设置上、左右、下
4个值 设置上、右、下、左
简写
定义四个边
语法:border:样式 宽度 颜色;
单个方向定义
说明:每个边框都可以设置样式宽度颜色。 语法:border-方向:宽度 样式 颜色;
拆分语法
border-方向-width
border-方向-color
border-方向-style
注意:
边框会影响盒子实际大小
边框样式、边框宽度、边框颜色无书写顺序要求
内边距 padding
CSSpadding(内边距)属性,定义元素边框与元素内容之间的空间。 padding可以单独改变元素的上、下、左、右边距,也可以一次改变所有的属性。
单个方向设置
padding-bottom 设置标签的下内边距
padding-left 设置标签的左内边距
padding-right 设置标签的右内边距
padding-top 设置标签的上内边距
取值
px
默认值0
百分比
不可使用负值
简写
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
语法:padding:1-4个值 【空格隔开】
规则:
1个值:表示【四个方向】的内边距值
2个值:分别表示【上下,左右】的内边距值
3个值:分别表示【上,左右,下】的内边距值
4个值:分别表示【上,右,下、左】的内边距值
外边距margin
概述:用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
外边距单个方向定义
margin-bottom 设置下内边距
margin-left 设置左内边距
margin-right 设置右内边距
margin-top 设置上内边距
简写
语法:空格隔开
取值:1-4个规则与padding值一致
取值
px auto浏览器自动计算 允许使用负值
外边距应用
外边距实现已知宽度的块级盒子水平居中。