CSS盒子模型
1 盒子的组成包括
margin外边距、border边框、padding内边框和content内容
2 正文框的最内部分是实际的内容,直接包围内容的是内边距,内边距呈现了元素的背景,内边距的边缘是边框,边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素
3 内边距、边框和外边距都是可选的,默认值是零,外边距可以是负值
4 宽度width和高度height指的是内容区域的宽度和高度,增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸
5 CSS盒子模型的内边距
内边距在正文content外,边框border内,控制该区域的最简单的属性是padding属性,padding属性定义元素边框与元素内容之间的空白区域,可以进行统一的内边距设置,也可以进行单边的内边距设置
6 css padding属性定义元素的内边距,padding属性接受长度值或百分比值,但不允许使用负值
可以按照上、下、左、右的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值
7 设置数值时,常用的单位有像素px和厘米cm
8 设置内边距的常用属性
属性 | 描述 |
padding-top | 设置顶部属性 |
padding-right | 设置右侧属性 |
padding-bottom | 设置底部属性 |
padding-left | 设置左侧属性 |
9 CSS盒子模型的边框
元素的边框border是围绕元素内容的内边距的一条或多条线
设置border属性可以规定元素边框的样式、宽度和颜色
10 在html中是使用表格来创建周围的边框
11 在css中是通过边框属性来创建出效果出色的边框,并且可以应用于任何元素
12 使用border-color属性来设置边框属性,它一次可以接受最多四个颜色值,分别是边框的四边,可以使用任何类型的颜色值,可以是命名颜色,也可以是十六进制和RGB值
13 css盒子模型的边框
属性 | 描述 |
border-top-color | 设置顶部颜色属性 |
border-left-color | 设置左侧颜色属性 |
border-bottom-color | 设置底部颜色属性 |
border-right-color | 设置右侧颜色属性 |
14 盒子模型的外边距
外边距就是围绕在内容框的区域,默认为透明的区域
外边距也接受任何长度的单位,百分数与内边距很相似
使用任何一个属性来只设置相应的外边距,不会直接影响所有其他外边距
15 设置外边距的常用属性
属性 | 描述 |
margin-top | 设置顶部的外边距 |
margin-bottom | 设置底部的外边距 |
margin-right | 设置右侧的外边距 |
margin-left | 设置左侧的外边距 |
16 morgin的默认值是零,如果没有为margin声明一个值,就不会出现外边距
17 对称复制
如果缺少左外边距的值,则是用右外边距的值
如果缺少下外边距的值,则使用上外边距的值
如果缺少右外边距的值,则使用上外边距的值
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。