简单概述盒模型

盒模型

盒子的分类

不同的元素产生的盒子类型可能不同

一个元素，产生什么样的盒子，取决他CSS的display属性

display:none 不生成盒子

display:inline 行盒

display:block 块盒

display:其他属性值

盒子是由四个内容组成：

内容、内边距、边框、外边距

内容： content

内边距：padding

边框：border

外边距：margin

注：盒模型中只有外边距（margin)可以给负值

背景色默认的渲染区域：包含内容、内边距、边框

padding（内边距）取值：

给一个值：表示 上 下 左 右 都是该值

例如：padding:10px 表示 上：10px、下：10px、左：10px、 右：10px

给两个值：表示 上下、 左右

例如：padding:10px 20px 表示 上：10px、 下：10px、 左：20px、 右：20px

给三个值：表示 上、左右、下

例如：padding:10px 20px 30px 表示 上：10px 下：30px 左：20px、右：20px

给四个值：表示 上、右、下、左（顺时针）

列如：padding:10px 20px 30px 40px 表示 上：10px 、下：30px、左：40px、右:20px

margin(外边距)取值：

跟padding（内边距）一样

border(边框)：

border-方向-style（样式）: dashed（虚线）solid（实线）等

border-方向-color(颜色)：red（红色）blue（蓝色）等

border-方向-width(粗细)：

css3新增：border-radius(圆角边框)：10px；
注：

1.边框的默认颜色是当前标签的文本的颜色

2.边框的粗细的默认值是3px（双实线）

用CSS代码利于边框简单呈现成三角形：

div{
    width: 0%;
    color: skyblue;
    border: 10px solid transparent ;
    border-left-color: rgb(17, 224, 86);
}

transparent （透明色）

outline(轮廓)

优点：不占像素

缺点：不可以分别设置四个方向的值（即4个方向样式统一）

例如：outline:5px solid red;