css盒子模型（补充）

目录

3、布局

3.1水平布局

 3.2垂直布局

 4、阴影和圆角

4.1阴影

4.2圆角 

5、内联元素盒子 

6、外边距的重叠 

---

3、布局

3.1水平布局

水平方向由七个值组成，分别是 margin-left、border-left、padding-left、width、padding-right、border-right 、margin-right，浏览器规定 ，水平方向的这七个值相加必须要等于父元素内容区的宽度。

浏览器调整规则：

1、如果7个值中没有设置auto，那浏览器就会调整margin-right

2、这7个值中有3个值可以设置auto，分别是margin-left、width、margin-right。

•         1个auto,其他两个值为固定值浏览器就会调整这个auto
•         2个auto，其他1个值为固定值

                        margin-left  width                               调整width

                        width  margin-right                             调整width

                        margin-left  margin-right                    同时margin-left margin-right，各占一半  

•         3个auto

                   margin-left  width  margin-right          调整width

#box{
        width: 500px;
        height: 300px;
        border: 10px solid red;
      }
      .box1{
        width: auto;
        height: 100px;
        background-color: green;
        border: 5px solid orange;
        padding: 50px;
        margin-left:auto;
        margin-right:auto;
        /* margin: 0px auto; */
      }

 3.2垂直布局

垂直布局跟水平布局是相对应的，它由margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom组成，其调整与水平布局规则与水平布局类似。

.box1{
        width: auto;
        height: 100px;
        background-color: green;
        border: 5px solid orange;
        padding: 50px;
        margin-top:auto;
        margin-bottom:auto;
        /* margin: 0px auto; */
      }

 4、阴影和圆角

4.1阴影

box-shadow

       用来设置元素的阴影效果，不会影响到页面布局

       它可以存放四个参数值

                第一个值：水平偏移量  正->左  负->右

                第二个值：垂直偏移量  正->下  负->上

                第三个值：模糊半径  默认值0px

                第四个值：颜色     默认值是盒子的背景色

.box1 {
        width: 200px;
        height: 200px;
        background-color: #f60;
        margin: 50px auto;
        box-shadow:2px 2px 15px rgba(0, 0, 0, 0.5);
      }

4.2圆角 

        border-radius: ;  设置圆角效果

        border-radius:50%;设置圆形

.box2 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
        border-radius: ;  设置圆角效果 
        border-radius:50%;设置圆形
      }

5、内联元素盒子 

行内元素盒模型   

content	不可以直接设置宽高，被内容撑开的
padding	可以内边距，但垂直方向不会挤别人,也就是不会影响页面的布局
border	可以设置边框，但垂直方向不会挤别人，也就是不会影响页面的布局
margin	左右可以设置外边距，垂直方向不可以设置

.box1 {
        width: 100px;
        height: 100px;
        background-color: pink;
        padding-top: 30px;
		border: 20px solid blue;
      }
.box2{
		width: 200px;
		height: 200px;
		background-color: green;
		visibility: hidden;
	  }

visibility 用来设置元素的显示状态

          可选值：

visible	默认值，元素在页面中正常显示
hidden	元素不在页面中显示（隐藏一个元素），位置依然保留
display  none	隐藏一个元素 ，位置不保留

6、外边距的重叠 

解决父子外边距重叠的方案

        方法一：

        border: 1px solid transparent;（边框也有大小，存在偏差）

        方法二：

        margin-top: 100px;

兄弟元素的垂直方向外边距重叠的问题

            1、两者都为正值，则谁大听谁的

            2、若两者为负者，则谁的绝对值大，听谁的

            3、若一正一负，则听两者相加的结果值

  一般情况下，兄弟元素的外边距重叠问题，不需要额外的解决，利于我们开发

.outer{
       width: 300px;
       height: 300px;
       background-color: pink;
       overflow: hidden;
       
     }
     .inner{
       width: 100px;
       height: 100px;
       background-color: blue;
       margin-top: 100px;
     }