二、div盒子模型

一、初识盒子模型

css层叠样式表

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

内部样式：

image.png

行内样式：

二、简单的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.内边距的边缘是边框。

6. 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
   增加内边距、边框和外边距不会影响内容区域的尺寸，
   但是会增加元素框的总尺寸

5、CSs框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式

image.png

盒子模型占位宽高计算：

1.盒子模型占位宽：
自身宽（width）+左右内边距(padding)+左右边框(border)+左右外边距(margin)

1.盒子模型占位高：
自身高(height)+上下内边距(padding)+上下边框 (border)+上下外边距(margin)