一、盒子模型的组成
就是把 HTML 页面中的布局元素(块元素)看作是一个矩形的盒子,也就是一个盛装内容的容器。 由border、content、padding内边距、margin外边距组成
二、边框 border
1、border的属性
属性 | 作用 |
border-width | 定义边框粗细,单位px, 系统默认3px 或:thin(1px) medium(3px) thick(5px) |
border-style | none/solid/dashed虚线/dotted点线 (必须要有这一属性边框才可以显示出来) |
border-color | 边框颜色 |
简写:border:20px dashed pink
2、可以分别设置上下左右边框
Border-top/bottom/left/right:20px dotted blue
注意:边框的层叠性
顺序必须是先设置总体的border样式,后设置单独边框样式,顺序不可颠倒。
3、border的不同属性可以有1-4个值(表格以color属性为例)
值的个数 | 意思 |
border-color:red; | 1个值,表上下左右都为红色 |
border-color:red blue | 2个值,表上下红,左右蓝 |
border-color:red blue pink | 3个值,表上红左右蓝 下粉 |
border-color:red blue pink green | 4个值,表上红右蓝下粉左绿 顺时针 |
4.设置border-width属性会影响盒子的实际大小
三、外边距margin
1.margin属性
margin-left/right/bottom/top
注:设置margin-right/bottom没有明显效果是因为默认盒子靠左上方,而整个body页面较大,才不会有效果,想要看见明显效果可以在它外面设一个盒子给它设置宽度
2.margin简写
margin 简写方式代表的意义跟 padding 完全一致
3.margin让块级盒子水平居中
条件:① 盒子必须指定了宽度(width)
② 盒子左右的外边距都设置为 auto
常见写法:margin:o auto;