CSS基础五（盒模型）

目录

盒子模型

      1 什么是盒模型

     2 内容区(content)

     3 盒子边框（border）

               边框大小 border-width

              边框样式 border-style

              边框颜色 border-color

              表格的细线边框 border-collapse:collapse

              圆角边框(CSS3)

4 内边距/内填充（padding）     

 padding值的设置

 padding值的特点

5 外边距（margin）   

  margin取值

 margin值的特点

外边距实现盒子居中

margin的bug

      margin的传递

      margin的重叠/外边距合并

6 盒子阴影

---

盒子模型

      1 什么是盒模型

               所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的                         内容、内边距（padding）、边框（border）和外边距（margin）组成。

     2 内容区(content)

          显示文字/图片/视频等的区域，宽高确定内容区

     3 盒子边框（border）

               边框大小 border-width

                                              数值+px

              边框样式 border-style

                                                实线 solid

                                                虚线 dashed

                                               点状线 dotted

                                               双实线 double

              边框颜色 border-color

                                               默认情况下，边框颜色和字体颜色一样

                                               颜色单词/rgb()/十六进制

                   边框的复合写法 border: 边框大小 边框样式 边框颜色;顺序不固定

                   单方向边框 border-方向(top/right/bottom/left/none(去掉边框)):边框大小 边框样式 边框颜色;

              表格的细线边框 border-collapse:collapse

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse; 表示边框合并在一起。            

              圆角边框(CSS3)

border-radius: 左上角  右上角  右下角  左下角;

 向右的三角
    div {
      height: 0;
      width: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid red;
    }

4 内边距/内填充（padding）     

 padding值的设置

       一个值 padding:10px 四周

       两个值 padding:10px 20px; 上下 左右

       三个值 padding: 10px 20px 30px; 上 左右 下

      四个值 padding: 10px 20px 30px 40px; 上 右 下 左

       单方向 padding-方向(left/right/top/bottom): 数值+px;

 padding值的特点

      会撑大盒子,如果不想被撑大的话，要在原来宽高的基础上，减去对应方向的padding值  

      padding值不能设置负数

       背景图/色可以在padding区域显示

      可以用来调整内容区到盒子边缘的位置

5 外边距（margin）   

  margin取值

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

 margin值的特点

       margin值不会撑大盒子，但是会影响到旁边的元素

      margin可以设置负数

      背景图和背景色不在margin区域显示

      调整自己和别的元素之间的距离

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。

2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中 ，margin:auto; auto: 浏览器会根据当前窗口的宽，减去元素的宽，将剩余的空间进行一个自动的平均分配，实现左右的居中，垂直是不生效的

margin的bug

      margin的传递

       给元素的**第一个子元素**添加**上边距**的时候，边距会错误加在父元素的身上

        1. 使用padding

        2. 给父元素添加边框

        3. 给父元素或者是该元素添加浮动 

        4. 给父元素添加overflow:hidden(溢出隐藏) 

      margin的重叠/外边距合并

   给上面的元素设置下边距，给下面的元素设置了上边距，边距会产生重叠，并且以两个值的最大值显示，左右的间距是不会出现重叠的  

        1. 只给一个盒子添加外边距/避免掉

6 盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

1. 前两个属性是必须写的。其余的可以省略。

2. 外阴影 (outset) 但是不能写 默认 想要内阴影 inset

       

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}