一、初识盒子模型
css层叠样式表
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
内部样式：
行内样式：<div style=“width:;height:;”>
二、简单的css样式
1、
Width宽度 height高度 background背景
2、边框线
border: 1px solid red;
边框三要素： 大小 风格 颜色
单独的定义某条边框线：
border-top:1px solid red; /*上边框*/
border-right:1px solid red; /*右边框*/
border-bottom:1px solid red; /*下边框*/
border-left:1px solid red; /*左边框*/
边框三要素详解
***border-width:1px; 边框大小 / 粗细
***border-color： red; 边框颜色
英文单词：red blue
十六进制：#666
rgb / rgba 颜色/透明颜色
***border-style: solid;
边框风格： ①无边框 none
②实线 solid
③虚线 dashed
④点状线 dotted
⑤双线 double
⑥3d 凹槽 groove
⑦3d 垄状 ridge
⑧3d inset边框 inset
⑨3d outset边框 outset
3外边距
1.CSS margin 围绕在元素边框的空白区域是外边距。
设置外边距会在元素外创建额外的“空白
2.边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的 任何元素
3.margin 属性接受任何长度单位、百分数值甚至负值。
margin-top /*距离顶部的距离*/
margin-right /*距离右边的距离*/
margin-bottom /*距离下边的距离*/
margin-left /*距离左边的距离*/
4.margin复合样式：
margin:50px; /*上下左右*/
margin:50px 50px; /*上下 左右*/
margin:50px 50px 50px; /*上 左右 下*/
margin:50px 50px 50px 50px; /*上右下左*/
auto=居中
4、内边距
1.CSS padding 属性定义元素的内边距（边框和内容区之间）;
2.padding 属性接受长度值或百分比值，但不允许使用负值。
不能使用auto
padding-top:20px / 10%; /*顶部内边距*/
padding-right:20px / 10%; /*右边内边距*/
padding-bottom:20px / 10%; /*下面内边距*/
padding-left:20px / 10%; /*左边内边距*/
3.元素框的最内部分是实际的内容，直接包围内容的是内边距。
4.内边距呈现了元素的背景。
5.内边距的边缘是边框。
- 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，
但是会增加元素框的总尺寸
5、CSs框模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
盒子模型占位宽高计算：
1.盒子模型占位宽：
自身宽（width）+左右内边距(padding)+左右边框(border)+左右外边距(margin)
1.盒子模型占位高：
自身高(height)+上下内边距(padding)+上下边框 (border)+上下外边距(margin)
