前端开发学习笔记（八）- Css 盒模型

一.盒模型边框-border

盒子模型的边框就是围绕着内容及补白的线，这条线可以设置它的粗细，样式和颜色

语法举例:div{border:2px solid red;}=div{border-width:2px;border-style:solid;border-color:red;}

边框属性

1.border-style(边框样式)：dashed(虚线) dotted(点线) solid(实线)

2.border-color(边框颜色)中的颜色可设置为十六进制颜色.

3.border-width(边框宽度)中的宽度也可以设置为thin|medium|thick，常用像素单位px

4.border-bottom(top|right|left)可以为标签设置单边框 div{border-bottom:1px solid red;}

二.宽度和高度-width height

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，CSS内定义的宽和高，指的是填充以里的内容范围.因此一个元素的实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界,元素的高度也是同理

三.填充-padding

元素内容与边框之间是可以设置距离的，称之为“填充”.填充也可分为，上，右，下，左(顺时针).

语法举例:div{padding:20px 10px 15px 30px};

相当于div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px}

如果上，右，下，左都为10px，可以这么写div{padding:10px};

如果上下填充一样为10px，左右一样为20px 可以这么写div{padding:10px 20px};

四.边界-margin

元素与其他元素之间 距离可以使用边界(margin)来设置。边界也是可分为上，右，下，左。

语法举例：div{margin:20px 10px 15px 30px};内容结构和padding一致

padding和margin的区别:padding在边框里面，margin在边框外面