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;
      }
    

CSS 自学之路(二)_第1张图片
demo01.png

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

上面我们提到了,设置了 float 之后,图片就会脱离文档流,所以它的父元素也就看不到它了,这样就会出现一个问题,比如当父元素包裹不住图片的时候,父元素的紧邻兄弟节点会自动让出左边的空间,比如下面这样。


picture


Section


    
This is footer
CSS 自学之路(二)_第2张图片
demo02.png

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

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

    CSS 自学之路(二)_第3张图片
    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, 常用的两个值是 visiblehidden。 把 visibility 的值设置为 hidden 后,元素会不可见,但是它仍会占有其原本的空间,不会被回收。

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

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

CSS 自学之路(二)_第4张图片
demo04.png

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

    background-position: center;

CSS 自学之路(二)_第5张图片
demo05.png

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

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

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

CSS 自学之路(二)_第6张图片
demo06.png

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

    background: linear-gradient(red,green);
  }
CSS 自学之路(二)_第7张图片
demo07.png

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


CSS 自学之路(二)_第8张图片
demo08.png

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


CSS 自学之路(二)_第9张图片
demo09.png

不仅可以使用上述方式创建渐变,还有更灵活的方式,那就是设置渐变点,下面来看看渐变点的设置规则。
background: linear-gradient(red, white 50%, green);
CSS 自学之路(二)_第10张图片
demo10.png

在 50% 有一个渐变点,图形从 0%-50%,由红色逐渐向白色转变, 50%-100% 由白色到绿色转变。

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


CSS 自学之路(二)_第11张图片
demo11.png

在 20% 和 80% 处有渐变点,意思是在 0% - 20% 一直保持红色,在 20% - 50% 从红色到白色渐变, 在50% - 80%,从白色到绿色渐变,在 80% - 100% 一致保持绿色。
background: linear-gradient(red,white 20%, green 50%, blue 80%, red);
CSS 自学之路(二)_第12张图片
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);
CSS 自学之路(二)_第13张图片
demo13.png

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

  background: radial-gradient(circle, white, red, green);
CSS 自学之路(二)_第14张图片
demo14.png

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

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

CSS 自学之路(二)_第15张图片
demo15.png

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

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

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

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

CSS 自学之路(二)_第16张图片
demo16.png

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


grid_18px.png

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


CSS 自学之路(二)_第17张图片
demo17.png

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

你可能感兴趣的:(CSS 自学之路(二))