CSS 自学之路（二）

2016-11-07 本文已影响526人 ghwaphon

其实 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

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

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

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

 section {
    float: left;

    width: 100%;
 }

 footer {
    clear: left;
 }
```

添加非浮动的清除元素。

 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 属性。这个属性的取值如下

50% ：缩放图片，使其填充背景区的一半。
100px 50px ：把图片调整到 100 像素宽， 50 像素高。
cover : 拉大图片，使其完全填满背景区，保持宽高比。
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

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

CSS 自学之路（二）

demo15.png

猜你喜欢

热点阅读