9.盒子模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
例子:
padding:内边距,改变padding值观察变化:
border:边框,改变border的值观察变化:
margin:外边距,改变margin的值观察变化:
1.padding内边距
- padding:属性1,属性2,属性3,属性4(上->右->下->左)
- padding:属性1,属性2,属性3(上->左右->下)
- padding:属性1,属性2(上下->左右)
- padding:属性1
2.border边框
border:2px solid red;
- 边框的粗细:border-width,可以使用指定长度,比如2px或0.1em,或者使用thick、medium(默认值)、thin
- 边框的样式:border-style
-
- border-style: 属性1,属性2,属性3,属性4(上->右->下->左)
- boder-style:属性1,属性2,属性3(上->左右->下)
- border-style:属性1,属性2(上下->左右)
- border-style:属性1(上下左右属性相同)
- 边框的颜色:可以直接指定颜色名称(green)、指定RGB值(rgb(255,0,0))、16进制值(#ff0000)
3.margin外边距
- margin:属性1,属性2,属性3,属性4(上->右->下->左)
- margin:属性1,属性2,属性3(上->左右->下)
- margin:属性1,属性2(上下->左右)
- margin:属性1
特别:
1.body总有一个默认的外边距margin:8px
2.外边距的妙用:居中元素
margin: 0 auto
有使用要求:外层元素为块元素,且块元素有固定的宽度
4.圆角边框
- border-radius:属性1,属性2,属性3,属性4(左上,右上,右下,左下)
- border-radius:属性1,属性2,属性3(左上,右上和左下,右下)
- border-radius:属性1,属性2(主对角线,副对角线)
- border-radius:属性
例:
border-radius: 2px 20px 10px 5px;
border-radius: 10px 20px 5px;
border-radius: 10px 25px;
border-radius: 25px;
半圆:
5.阴影
box-shadow: h-shadow v-shadow blur spread color inset(水平阴影位置、垂直阴影位置、模糊距离、阴影的尺寸、阴影的颜色、将外部阴影改为内部阴影)