盒子模型——盒子组成部分&内外边距

盒子的组成部分

边框：边框粗细、边框样式、边框颜色，三者缺一不可

border-color/width/style:如果只有一个值时，则top上right右bottom下（顺时针）left左都是这个值，也可以设置四个值；

border-style：solid实线 dashed虚线dotted点状 double双实线

也可单边框设置：border-top-style/width/color:

三角形设置：

盒子宽高均为0

div{width:0;

height:0;

border:10px solid transparent;

border-top-color:red;

}

margin:外边距

margin:40px;只有一个值时，上右下左都是40px;

margin:40px 20px;两个值时，上下40px,左右20px;

margin:40px 20px 0;三个值时，上40px,左右20px，下0px;

margin:40px 20px 10px 5px ;上右下左；

单独设置：margin-top/right/bottom/left

margin:0px  auto;网页居中对齐

网页居中对齐的必要条件：块元素，设置宽度

outline:none去除点击的外边线

padding:内边距，把盒子撑大

padding:40px;只有一个值时，上右下左都是40px;

padding:40px 20px;两个值时，上下40px,左右20px;

padding:40px 20px 0;三个值时，上40px,左右20px，下0px;

padding:40px 20px 10px 5px ;上右下左；

单独设置：padding-top/right/bottom/left

注：div:hover img{

只要点击div ,img都会直接显示设置的效果
}