CSS(盒子模型二)

垂直分布

使用overflow属性设置父元素如何处理溢出的子元素

          可选值：

            visible 默认值  文本正常显示

            hidden  裁剪掉多余的内容

            scroll  生成双向的滚动条，可以通过滚动条查看完整的内容

            auto    根据实际的内容出现滚动条

        overflow-x  对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成

         overflow-y  对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成

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

        在垂直布局中，一般情况下，我们是不设置高度的，让元素被内容撑开

<style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /* overflow:auto; */
        overflow-x: hidden;
      }
      p{
        width: 300px;
      }
    </style>

外边距的折叠

   垂直外边距的重叠

    -兄弟元素

      如果两个值都是正值，谁大听谁的

      如果两个值是负值，谁小听谁的（绝对值谁大听谁的）

      如果是一正一负，那最终的值，两者相加  

    -父子元素

    如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,导致父元素的位置发生变化，会影响到父元素下面的布局， 所以这个问题必须要解决

 <style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 50px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: -30px;

      }
      .outer {
        width: 200px;
        height: 200px;
        background-color: yellow;
        /* margin-top: 50px; */
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin-top: 100px;
      }
    </style>

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

可选值：

visible 默认值  元素在页面中正常显示

hidden  元素不在页面中显示（隐藏一个元素），位置依然保留

内联元素的盒子

从这几点分析：内容区、内边距 、边框 、外边距

 <!-- 行内元素盒子例子 -->
    <span class="s1">我是一个span--s1</span>
    <span class="s1">我是一个span--s1</span>

    <!-- 对比块元素盒模型 -->
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->

    <!-- 行内元素转块元素 -->
    <!-- <a href="##" class="a1">超链接</a>
    <a href="##">超链接2</a> -->

默认样式

 默认样式：

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding而它的这些默认样式，正常情况下我们是不需要使用的。 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉  

方式一：

    1:清除浏览器的默认样式

    方式二：

    2:引入重置样式表

<style type="text/css">
.box1 {
        width: 100px;
        height: 100px;
        background-color: #bfa;
      }
      p {
        background-color: yellow;
      }
    </style>

盒子和大小

默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定设置width，height特指内容区的宽高

 box-sizing  用来设置盒子尺寸的计算方式  用来规定width，height指的谁

 可选值：

            content-box  width，height指的是内容区宽高，默认值

            border-box   width，height指的就是内容区，内边距，边框加起来的大小

<style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        border: 10px solid green;
        padding: 10px;
        box-sizing: border-box;
      }
 </style>

阴影和圆角

知识点1:

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

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

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

            第三个值：模糊半径

            第四个值：颜色

 知识点2:

           1、border-radius 用来设置圆角

           2、单独设置某一角的圆角

           3、设置圆形

<style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #f60;
        margin: 0 auto;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
 }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
  }
    </style>