css 基础介绍

上一篇博客web 前端入门介绍了基本的 html 内容，但是网页如果只有内容的堆积，是没有人愿意去看的。这篇博客将介绍 css 的基本知识，让你的网页更加好看。

CSS - 层叠样式表 (Cascading Style Sheets)

CSS 是用来控制网页的布局和外观，比如 间距，颜色，行高，字体，边框，圆角，甚至动画。。。

语法：

selector {
    property1: value1;
    property2: value2;
}

举例：

div {
    font-size: 14px;
    color: #ccc;
    padding: 10px;
}

如何使用

如何使用样式对文档进行格式化，通常有以下几种方法：
嵌入式

Just do it

内联式

    
    
    


    
 Just do it 

外联式

index.html

    
    
    


    
 Just do it 

style.css

div {
    font-size: 14px;
    color: #ccc;
    padding: 10px;
    text-align: center;
}

层叠次序

1. 浏览器缺省设置
2. 外联式 （推荐使用）
3. 内联式（位于 标签内部）
4. 嵌入式（在 HTML 元素内部） （优先级最高）

继承

如下代码：

    hello 
    
 world 

body {
    color: red;
}

p 标签中的内容也会是红色，p 标签的 color 属性继承自 body

如果想要摆脱继承，可以写如下 css

p {
    color: yellow;
}

则 p 标签中的内容就会变为黄色，而不是红色。

选择器

先看这段 HTML

    

        

            
This is a title
            
 Hello 
        
        
 World 
    
    
 
 Let it go 
 

标签选择器 h1 选择标签名为 h1 的节点
ID 选择器 #text 选择 id 属性为 text 的节点
class 选择器 .section 选择 class 属性有 section 的节点

选择的组合：

div.section 是 div 标签，同时 class 属性有 section

div .section 是 div 标签的后代，且 class 属性有 section

div > .section 是 div 标签的子节点，且 class 属性有 section

盒模型

一切可见的 html 元素，在浏览器的布局里都可以理解为一个框。这个 html 元素会占用多大的视觉空间功，会通过盒模型来计算。如图：

盒模型

内边距总是跟元素的背景色一样。
外边距总是透明的。

如何用 css 控制：

div {
    margin: 10px;
    padding: 12px;
    border: 1px solid #ccc
}

内边距的设置

示例如下：

div {padding: 10px 0.25em 2px 20%;} 
div {padding: 10px 6px 8px;}
div {padding: 10px 8px;}
div {padding: 10px;}
div {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
}

单位不同，其中百分数值是相对于其父元素的 width 计算的。

设置边距顺序，是上、右、下、左的顺序（顺时针），如果某个方向的边距没有，会使用相对的方向的边距。如果只有一个值 div {padding: 10px;},自然是四个方向边距都为这个值。

可以通过 padding-top, padding-right, padding-bottom, padding-left 单独设置。

外边距的设置

示例如下：

div {margin: 10px 0.25em 2px 20%;} 
div {margin: 10px 6px 8px;}
div {margin: 10px 8px;}
div {margin: 10px;}
div {
  margin-top: 10px;
  margin-right: 0.25em;
  margin-bottom: 2ex;
  margin-left: 20%;
}

外边距的设置规则与内边距类似，此外，当两个垂直外边距相遇时，它们将形成一个外边距，发生外边距合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、 浮动框或绝对定位框之间的外边距不会叠加。

边框的设置

示例如下：

div {border: 1px solid #ccc;} 
div {border-top: 4px solid #7c7;}
div {border-style: solid dotted dashed double;}
div {border-top-width: 15px;}

border 设置的属性有宽度、样式，以及颜色

可通过 border-width, border-style, border-color 单独设置某一种属性

也有四个方向（上，右，下，左）border-witdh: 1px 2px; 规则类似外边距和内边距，或者单独指定方向，如 border-top: 1px solid #abc; 或者既指定方向又指定属性， 如 border-top-witdh: 1px

css3 新属性： border-radius。可以使边框变为圆角形状，甚至是一个圆形，椭圆形，如 border-radius: 20px; ， border-radius: 50%; 使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。效果如下：

圆角效果图

定位和布局

display 属性

div、h1 或 p 元素的 display 属性默认为 block， 常常被称为“块级元素”， span 和 strong 等元素的 display 属性默认为 inline，称为“行内元素”。

常见的 display 属性值有如下几种：

block： 宽高可以自行设置，默认宽度由父容器决定，默认高度由内容决定。自己独占一行。
inline：宽度和高度都有内容决定，与其他元素共占一行。
inline-block： 宽高可以自行设置，类似block，但是与其他元素共占一行，类似inline。
none： 常用于隐藏 DOM 节点

position 属性

元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为static。它其实是未被设置定位的。

元素如果被定位了，那么它的top left bottom right 等属性就会生效，能设置定位的属性是 relative, absolute和fixed。

需要注意的另一点是被定位的元素层次( z-index)会得到提高。

relative（相对定位）

设置方法： position: relative
然后通过设置 top left bottom right 中任意一个属性，元素就会在自身文档流所在位置上被移动，移动的距离是相对于该元素开始的起点（未使用相对定位之前）。

看下 w3school 上的例子，代码：

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

效果如下：

相对定位示意图

可以看到，其他元素不会调整位置来弥补它偏离后剩下的空隙。

absolute（绝对定位）

设置方法： position: absolute
设置了绝对定位之后，元素会脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。

偏移距离也是通过设置 top left bottom right 中的属性，不同的是偏移的参考位置和之前元素的位置没有关系，而是它最近的设置了定位属性（position值不为static）的祖先元素。

如果元素为块级元素（display 属性值为 block)，那么它的宽度也会由内容撑开。（在默认文档流中块级元素如果没有设置宽度属性，会自动填满整行）

看下 w3school 上的例子，代码：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

效果如下：

绝对定位示意图

fixed (固定定位)

设置方法： position: fixed
固定定位有些类似绝对定位，设置后也会脱离文档流。不同的地方在于固定定位的参考点是可视窗口，
即使页面滚动，元素仍然会在固定位置。

float 属性

设置 float 属性，可以使元素变为浮动定位，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
语法： float: left 或 float: right

看下 w3school 上的例子：

浮动

浮动

以上两个例子可以看出，浮动框会脱离文档流。第一个例子浮动框碰到容器的右边缘停止了移动，第二个例子浮动框碰到容器的左边缘或者另一个浮动框边缘停止了移动。

文字环绕

浮动的清除

第一个例子行框被缩短。第二个例子展示了浮动元素不占空间，可以通过创建一个空的 div，然后设置 clear 属性，如 clear: both，清除浮动。