学习——第七天

一 内联元素的盒子

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

可选值：

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

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

二 默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，

  所以为很多的元素都设置了一些默认的margin和padding，

而它的这些默认样式，正常情况下我们是不需要使用的。

  所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

 方式一：

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

*{
margin: 0;
padding: 0;
list-style:none;
}

方式二：

    2:引入重置样式表

三 盒子的大小

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

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

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

可选值：

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

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

四 阴影和圆角

知识点1：

box-shadow

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

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

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

第三个值：模糊半径

第四个值：颜色

.box{
   box-shadow:
    }

知识点2:

     1、border-radius 用来设置圆角

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

     3、设置圆形

五 浮动

1.定义

    浮动是一种布局手段，会使元素脱离文档流

    元素在文档流的时候，会分块元素，行内元素，行内块元素，各自都有一定的特点

    设置元素浮动，可以用float样式

    可选值：

       none  默认值，不浮动

       left  向左浮动

       right 向右浮动

2.设置浮动后的一些特点：

（第一类特点）

      1、设置元素浮动后，元素会脱离文档流，就不会再占据原来在文档流的位置

          浮动元素后面的元素就向上

      2、设置元素浮动后，元素会尽可能向左或者向右浮动

         浮动元素不会超过它前一个兄弟，最多一边齐

      3、如果浮动元素前一个兄弟没有浮动，浮动的元素不会跑上去

      4、浮动的元素不会超出父元素

块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流

使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流

  可选值：

    none，默认值，元素默认在文档流中排列

    left，，向页面的左侧浮动

    right，向页面的右侧浮动

3.浮动的特点

1:浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动

2:元素浮动以后，元素会尽量向页面的左上或页面右上漂浮

3:浮动元素默认不会从父元素中移出

4:浮动的元素不会超过他上边的兄弟元素，最多最多一边齐

5:如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

4.总结

  浮动目前来讲它的主要作用就是让页面中的元素可以水平排列

通过浮动可以制作一些水平方向的布局

（ 浮动的第二类特点）

      当浮动的元素碰到了文字，浮动的元素不会盖住文字，

      文字会环绕在浮动元素的周围，从而做出了文字环绕图片的效果

      这也是浮动最开始的功能

特点1:

      浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，

      所以我们可以通过浮动来设置文字环绕图片的效果

（第三类特点）

    设置元素浮动后，元素脱离文档流，元素原来在文档流中分类，特点就不复存在

    也就是说行内元素可以设置宽高了，块元素也不会独占一行了，行内块元素也没有三像素的问题

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变

5.脱离文档流的特点

      a.块元素：

        1:块元素不再独占页面的一行

        2:块元素的宽高被内容撑开

      b.行内元素：

        1:浮动过后的行内元素更像行内块元素,因问一行可以显示多个，并且默认宽度为内容的宽度

     总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内