html:对于盒子模型的初步认知（2）

目录

一、水平布局

二、垂直布局

三、阴影与圆角

---

一、水平布局

在水平方向上，margin-left border-left padding-left width padding-right border-right  margin-right浏览器规定  水平方向的七个值相加必须要等于父元素内容区的宽度，若七个数相加不等于父元素内容区的宽度的话。如果不等于的话，浏览器它就会自己去调整这7个值，让我们的等式成立，这个过程叫过度约束。

浏览器如何调整的？

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

    0  5px  50px  100px  50px  5px  290px    ==500

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

.box1{
        width: auto;
        height: 100px;
        background-color: green;
        border: 5px solid orange;
        padding: 50px;
        margin-left:auto;
        margin-right:auto;
        margin: 0px auto; 
      }

---

二、垂直布局

块元素 宽度默认是父元素的100%，高度是被内容撑开的

overflow属性可以设置溢处的内容

          可选值

            visible  默认值  内容正常显示

            hidden  裁剪多余的内容

            scroll   出现双侧滚动条

overflow: auto;
overflow: visible;
overflow: scroll;
overflow: hidden;

---

三、阴影与圆角

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);

 2、border-radius: ;  设置圆角效果

      border-radius:50%;设置圆形

 .box2 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;