html-盒模型

##元素的盒子模型
1标签内容栏
属性width长 height 高

2边框 border
border:solid 2px red;
solid实线
dotted点线
dashed虚线
double双线

border-radius:指定圆角半径(左上 右上 右下 左下)

 

3内边距 内容栏到边框距离 padding

4外边距 边框到标签最外围(透明) margin
margin:0;取消默认外边距
margin:0 auto;本标签在父标签内居中

设置:
border/padding/margin:10px; 上下右左10px
border/padding/margin:10px 20px; 上下10px 右左20px
border/padding/margin:10px 20px 30px; 上10px 右左20px 下30px

或者(border/padding/margin)
border-left:
border-right:
border-top:
border-botton:

 

轮廓线:
outline:none

三角/半圆:
border-right-color: transparent;

盒阴影:
box-shadow: 5px 5px 0px red;

###背景色

background-color: red; #选择背景色(不需要考虑平铺/大小/位置)
background-image : url("路径");背景图片
background-repeat:repeat/repeat-x/repeat-y/no-repeat;#选择平铺不需要考虑position
background-position:x y;
background-size:width height;
简写:
background:color/url("") repeat/no-repeat position;
background-size:width height;