学习css第五天——垂直布局、外边距折叠

一、垂直布局

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

一般情况下，不设置高度，让元素被内容撑开。

如果子元素的大小超过了父元素，则子元素会从父元素中溢出

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

可选值：

  visible   默认值 子元素会从父元素中溢出，在父元素外部的位置显示

  hidden   溢出的内容将会被裁剪，不会显示

  scroll    生成两个滚动条，通过滚动条来查看完整的内容

  auto    自动，根据需要生成滚动条

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

overflow-y  对垂直方向溢出的内容进行设置，水平方向根据需要裁掉

  

二、外边距的折叠

垂直外边距的重叠

1、兄弟元素

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

如果两个值是负值，谁小听谁的(绝对值谁大听谁的)

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

2、父子元素

如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素，

导致父元素的位置发生变化，会影响父元素下面的布局

三、内联元素的盒子

1、从这几点分析：

  内容区：不可以设置内容区的大小,它的内容区的大小都是被内容撑开

  内边距：可以设置内边距，而且垂直方向的内边距不会影响其他的元素的位置

  边  框：可以设置边框，而且垂直方向的边框也不会影响其他的元素的位置

  外边距：水平方向的外边距可以设置成功的，且不会重叠

          垂直方向的外边距不可以设置

2、对比块元素盒模型

    <!-- <div class="box1"></div>

    <div class="box2"></div> -->

   行内元素转块元素

    <!-- <a href="##" class="a1">超链接</a>

    <a href="##">超链接2</a> -->

    <p>罪仑娟而于联，说思。</p>

  </body>

</html>

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

可选值：

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

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

四、引入重制样式表

 注意：

   1、引入重制样式表前提是你要有这个reset.css文件

   2、引入重制样式表必须要在你写的样式前面，

      否则会重置你写的样式

1、默认样式：

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

*{

    margin:0;

    padding:0;

}

2、引入重置样式表

  这个表就是网上的大神列举出来的所有的标签的默认样式

   reset.css，normal.css

我们使用的时候，只需要引入到对应的html文件内就可以

面试题：简单说一下box-sizing的使用？

默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

            设置width，height特指内容区的宽高

box-sizing用来设置盒子尺寸的计算方式

用来规定width，height指的谁

 可选值：

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

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

五、阴影和圆角

box-shadow

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

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

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

  第三个值：模糊半径   选写，默认值是0

  第四个值：颜色       选写，默认值是黑色

border-radius 用来设置圆角  

  可以同时设置多个值，规则跟我们之前归纳的border-width一样

单独设置某一角的圆角

   border-top-left-radius:;

   border-top-right-radius:;

   border-bottom-left-radius:;

   border-bottom-right-radius:;

设置圆形

   border-radius: 50%;