CSS 自学之路（二）

• 其实 CSS 一开始设计 float 属性的主要目的是为了实现文本绕排图片的效果。 然而这个属性居然成了创建多栏布局的最简单方式。 先来看看 float 实现文本绕排的效果。
  img {
  float: left;

        width: 180px;
        height: 120px;
        margin: 0 12px;
    }
  
    p {
        width: 480px;
        margin: 12px;
        padding: 12px;
  
        border: 1px solid #ccc;
    }
  

demo01.png
当使用了 float 属性之后， 浮动的图片会从文本流中被移除，如果有文本跟在它后面，文本会自动绕开图片。

上面我们提到了，设置了 float 之后，图片就会脱离文档流，所以它的父元素也就看不到它了，这样就会出现一个问题，比如当父元素包裹不住图片的时候，父元素的紧邻兄弟节点会自动让出左边的空间，比如下面这样。
<section>
<img alt="picture" src="15.jpg" />
<p>
Section
</p>
</section>

    <footer>
        This is footer</footer>
    </footer>

demo02.png

有没有什么办法能解决上述这种尴尬的情景呢？ 问题的答案是有的，而且有三种，下面来一一介绍。

1. 为父元素添加 overflow:hidden
   section{
   overflow: hidden;
   }
   

   demo03.png

2. 同时浮动父元素。 浮动父元素之后，它就会将它的子元素全部包含在自己内部（无论是浮动元素还是不浮动的元素）， 所以我们还需要将父元素的宽度设置为与浏览器同宽，不然父元素会不断换行以包装不同的子元素。 还有，要在footer 中清除左浮动，不然 footer 会极力挤到 section 的旁边去。
   img {
   float: left;

       width: 180px;
       height: 120px;
    }
   
    section {
       float: left;
   
       width: 100%;
    }
   
    footer {
       clear: left;
    }
   

3. 添加非浮动的清除元素。

    section:after{
       content: "";
       display: block;
       height:0;
       visibility: hidden;
       clear: both;
    }
   

---

• 如果把 display 的值设置为 none， 该元素以及包含在其中的元素都不会在页面中显示，它们占用的空间也会被回收，就好像这些标记根本不存在一样。 于此相对应的属性是 visibility, 常用的两个值是 visible 和 hidden。 把 visibility 的值设置为 hidden 后，元素会不可见，但是它仍会占有其原本的空间，不会被回收。

---

• 下面我们来讲讲背景图片和背景渐变的一些知识。 假如有一个 div ， 为其设置很大的背景图片。

  div {
    width: 480px;
    height: 320px;
  
    background-image: url('15.jpg');
  }
  

demo04.png
显然这不是我要显示图片的全部，背景图片从左上角开始显示，超出容器的那部分不显示，可以手动指定要显示图片从何处开始， 需要借助 background-position 属性，接收两个值，用于指定水平和垂直方向上的起始原点， 可以使用的值为 top, right, bottom, right, center。下面我将两个值都设置为 center， 因为我想看图片的中间部分。

    background-position: center;

demo05.png
这样看上去好像比默认的情况好多了。 还可以设置背景图片的大小，这需要用到 background-size 属性。这个属性的取值如下

1. 50% ： 缩放图片，使其填充背景区的一半。
2. 100px 50px ： 把图片调整到 100 像素宽， 50 像素高。
3. cover : 拉大图片，使其完全填满背景区，保持宽高比。
4. contain ： 缩放图片， 使其恰好适合背景区，保持宽高比。

下面是将 background-size 设置成 cover 的效果。

demo06.png
渐变分为两种，一种是线性渐变，一种是放射性渐变，从线性渐变开始说起。
div {
width: 480px;
height: 320px;

    background: linear-gradient(red,green);
  }

demo07.png

可见，线性渐变默认是从上到下的，当然我们可以根据我们的需要改变这种默认方式，比如我们让其从左到右渐变。
background: linear-gradient(to right,red,green);

demo08.png

甚至可以从左上角到右下角进行渐变。
background: linear-gradient(135deg, red, green);

demo09.png
不仅可以使用上述方式创建渐变，还有更灵活的方式，那就是设置渐变点，下面来看看渐变点的设置规则。
background: linear-gradient(red, white 50%, green);
demo10.png
在 50% 有一个渐变点，图形从 0%-50%，由红色逐渐向白色转变， 50%-100% 由白色到绿色转变。

background: linear-gradient(red 20%, white 50%, green 80%);

demo11.png
在 20% 和 80% 处有渐变点，意思是在 0% - 20% 一直保持红色，在 20% - 50% 从红色到白色渐变， 在50% - 80%，从白色到绿色渐变，在 80% - 100% 一致保持绿色。
background: linear-gradient(red,white 20%, green 50%, blue 80%, red);
demo12.png
在 20%,50%,80% 处有渐变点，在 0- 20% ，从红色到白色渐变， 在 20% - 50%， 从白色到绿色渐变， 在 50%- 80% 从绿色到蓝色渐变，在 80% - 100%， 从蓝色到红色渐变。

由于渐变是 CSS3 新属性，所以别忘了对浏览器进行适配，比如说下面这样。

   background: -webkit-linear-gradient(red, white 20%, green 50%, blue 80%, red);
   background: -o-linear-gradient(red, white 20%, green 50%, blue 80%, red);
   background: linear-gradient(red, white 20%, green 50%, blue 80%, red);

讲完了线性渐变，下面来看看放射性渐变。

  background: radial-gradient(white, red, green);

demo13.png

可见，图形为按照 白红绿 填充满。当然，我们还可以指定渐变形状，比如设置为圆形。

  background: radial-gradient(circle, white, red, green);

demo14.png

还可以设置放射中心的位置，比如下面这样。

  background: -webkit-radial-gradient(100px 100px, circle, white, red, green);

demo15.png

• 关于设置文本的 line-height 属性，我们可以利用其实现文本垂直居中的效果。

  div {
    height: 32px;
  
    background: rgba(123,23,89,.5);
  }
  
  p {
    line-height: 32px;
  
    color: white;
  }
  

其中， div 是 p 的父节点，我们通过设置 line-height 和父元素的高度相等，就可以让文本居中，这是为什么呢？ 假设文本的大小为 16px，而这个时候的行高为 32px, 那么浏览器就会在文本的上下添加 (32-16)/2 px 的空白。

很多情况下，我们会使用第三方字体， Google Web Foots 是个不错的网站，我们只需要选中我们要使用的字体，它就会提供一个 link， 供我们使用字体，比如像下面这样。

demo16.png

在涉及文字排版的时候，最好借助网格线，比如下面这个图片

grid_18px.png

利用这个图片我们将文字与基线对齐，然后再将图片去除，这样我们的排版就会看起来很美观，比如下面这样。

demo17.png

---

本来还想介绍更多的内容，限于篇幅，只能在下一篇文章中再介绍了。