笔记记录：06盒子模型

0、回顾知识

1、对于文本样式text-indent（首行缩进）需要在块元素当中，如div、p、li、h2这种可以是用，span、b、em这种行内标签是不生效的。

2、当浏览器存在历史记录时，我们的a标签如果指向路径在历史记录中，那么他的a：link伪类（未点击）是无法展示出效果的，我们需要使用Ctrl+Shift+Delete键（该快捷键为谷歌浏览器）删除历史记录，并且删除时，记得选择时间长度：

是无法展示出效果的，我们

3、对齐方式

若文本如上图中样式，左侧为居中对齐，右侧为靠左对齐，虽然在页面的中间位置，但是他的对齐方式是左对齐因为他只是包裹他的块元素位置靠近页面中间。

1、生活中的盒子模型

2、盒子模型

菜鸟教程的一个盒子模型

谷歌浏览器的盒子模型

CSDN首页截图

一个页面上的所有元素（标签）都有存在自己的一个盒子模型。

一个盒子模型是由4个部分组成：

具体的内容

content：内容主体

padding：内容主体到边框的距离（内边距）

border：盒子的边框

margin：外边框，到其他标签的距离

2、边框border

修改顺序：

如果你针对某一块修改，使用

xxxxxxx-top/right/bottom/left-xxx修改

如果只修改一个属性，则：

xxxxx-xxxxx

如果只写一个值，则是四个都修改

写俩个值，是修改上下，左右

写三个值，是修改上，下，左右

写四个值，是修改上、右、下、左

颜色：

/* 上边框颜色 */
 border-top-color:blue;
 /* 右边框颜色 */
 border-right-color:yellow;
 /* 下边框颜色 */
 border-bottom-color:green;
 /* 左边框颜色 */
 border-left-color:darkorange;
 /* 同时四个边框颜色 */
 border-color:red;
 /* 第一个改上下边框颜色，第二个改左右边框颜色 */
 border-color:red yellow;
 /* 第一个改上边框颜色，第二个改下边框颜色，第三个改左右边框颜色 */
 border-color:red yellow green;
 /* 顺时针顺序，上边框颜色，右边框颜色，下边框颜色，左边框颜色 */
 border-color:red yellow green blue;

宽度：

/*修改宽度*/
 /*
     thin 细
     medium 中等
     thick 粗
 */

样式：

/*
     修改样式
     none 看不到（值清空）
     hidden 看不到（值清空）
     dotted 圆点虚线
     dashed 虚线
     solid 实线
     double 空心线
 */
 border-style:sold double;

简体写法：

/* 简体写法，三种写法，此时只能同时修改四个边框，顺序不影响，不要加逗号 */
 border:red solid 5px;

3、外边距Margin

设置大小

 /*设置方法跟边框一样，分为四种都分开写，或者写一个，或者只写Margin，此时通过修改通过你写的值的数量来决定，逻辑和border一样*/
 margin:8px;
 /* 当你设置左右位置时，写入auto会自动居中对齐*/
 /*
         若想自动居中，需要满足以下两个条件：
         块元素
         固定宽度
 */
 margin:0px auto;

4、内边距Padding

 /*逻辑和上面一样*/
 padding:5px 0px 5px 15px;

5、计算一个标签具体站页面位置

div{
     background-color:red;
     height:10px;
     width:500px;
     margin:10px;
     border:1px solid red;
     padding:5px
 }
 /* 
 如果你的div设置如上效果，那么你在计算你的div占据页面大小，应该是左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距
 即：
 10px+1px+5px+500px+5px+1px+10px
 */

6、box-sizing

盒子尺寸

inherit：继承父标签，根据父标签对应值来。

 height:100px;
 width:500px;
 margin:10px;
 border:1px solid red;
 padding:5px;
 /*
 如果是
 box-sizing：content-box；
 我们的内容宽度为500px，是我们设置的值（width：500px）
 box-sizing：border-box；
 我们的内容宽度为488px；
 是左边框（1px）+左内边距（5px）+488+右内边距（5px）+右边框（1px）=500px（width：500px；）
 */
 box-sizing：border-box；

7、弧度

 /*
     弧度写一个值，是同时修改四个角度
     弧度写四个值，是修改↖、↗、↘、↙按照顺时针顺序，从左上角开始
     想要做一个圆形，我们需要保证宽度相同
     半圆则根据情况来定，宽为高的一般或者高为宽的一半。
 */
 border-radius:0px 0px 100px 0px;

8、盒子阴影

/*
     第一个参数阴影的类型
     第二个参数阴影x轴扩展距离
     第三个参数阴影y轴扩展距离
     第四个参数阴影模糊距离
     第五个参数阴影的颜色
 */
 box-shadow:inset x-offset y-offset blur-radius clolor;