CSS基础

作者: HelloJames | 来源:发表于2018-06-16 17:42 被阅读89次

前言

CSS定义

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

CSS基础

选择器

常用选择器

这里只列出了一些常用选择器

id 选择器, e.g: #id {color: red;}
元素选择器, e.g: span {color: red;}
类选择器, e.g: .class {color: red;}
子选择器, e.g: ul > li {color: red;}
后代选择器, e.g: ul li {color: red;}
伪类选择器, e.g: a:hover{color: red;}
分组选择器 , e.g: h2, h3 {color: red;}
属性选择器, e.g: input[type='text'] {color: red;}
相邻选择器，e.g: p + span {color: red;}
兄弟选择器，e.g: p ~ span {color:red;}

CSS的一些特性

1. 继承性

CSS的某些样式是具有继承性的，什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p{color:red;}

<p>六年级的时候，我还是一个<span>漂亮的</span>小帅哥。</p>

但需要注意的是, 有些CSS样式是不具有继承性的, 如border: 1px solid #fff;

注意:
不具体继承性的CSS样式, 也可以实现继承, 如: border: inherit;

2. 特殊性

有时在写CSS样式代码时, 给某一个元素写了多个样式, 那么哪个样式会生效呢? 相信这个问题是很多CSS样式初学者易困惑的.
比如,

p{color:red;}
.six{color:green;}
<p class='six'>六年级的时候，我还是一个<span>漂亮的</span>小帅哥。</p>

p和.six都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

权值规则如下:

元素的权值为1，类选择符的权值为10，ID选择符的权值最高为100

注意：
还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

计算权重

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.

body #content .data img:hover
// body: 1    
// #content: 100
// .data:10
// img:1
// :hover: 10

最终的权重值是122

权重计算公式

*{}                         ====》0
 li{}                       ====》1(一个元素)
 li:first-line{}            ====》2(一个元素，一个伪元素)
ul li {}                    ====》2（两个元素）
ul ol+li{}                  ====》3（三个元素）
h1+ *[rel=up] {}            ====》11（一个属性选择器，一个元素）
ul ol li.red{}              ====》13（一个类，三个元素）
li.red.level{}              ====》21（两个类，一个元素）
style=""                    ====》1000(一个行内样式)
p {}                        ====》1（一个元素）
div p {}                    ====》2（两个元素）
sith {}                     ====》10（一个类）
div p.sith{}                ====》12（一个类，两个元素）
#sith{}                     ====》100（一个ID选择器）
body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

权重基本规则

相同的权重：以后面出现的选择器为最后规则
不同的权重，权重值高则生效

4. 层叠性

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
如下面代码:

p{color:red;}
p{color:green;}
<p class='six'>六年级的时候，我还是一个<span>漂亮的</span>小帅哥。</p>

最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
所以前面的css样式优先级就不难理解了：

层叠规则如下

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

5. 重要性

在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

p {color:red !important;}
p {color:green;}

<p class='six'>六年级的时候，我还是一个<span>漂亮的</span>小帅哥。</p>

这时 p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面

!important 优先级样式是个例外，权值高于用户自己设置的样式

盒子模型

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、行内元素和行内块元素。

元素分类

1. 块元素(display: block;)

常见的块元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块元素的特点：

每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

2. 行内元素(display: inline;)

常见的行内元素:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

行内元素的特点：

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距均不可设置；
元素的宽度即它所包含的文字或图片的宽度，不可改变。

3. 行内块元素(display: inline-block;)

行内块元素同时具备块元素和行内元素的特点(css2.1新增)
常见的行内块元素:

<img>、<input>

inline-block 元素特点：

和其他元素都在一行上。
元素的高度、宽度、行高以及顶和底边距都可设置。

盒子模型

一个盒子中主要的属性有5个:

widtht：内容的宽度不是盒子的宽度)
height: 内容的高度(不是盒子的高度)
padding：内边距。
border：边框。
margin：外边距。

盒子模型的示意图：

image.png

标准盒子模型和IE盒子模型

标准盒子模型

image.png
标准盒子模型包含: margin, padding, border, content, 注意: content不包含border, padding

IE盒子模型

image.png

IE盒子模型包含: margin, padding, border, content, 注意: content包含border, padding

由此, 可以看出,标准盒子模型和IE盒子模型的主要区别在于: content是否包含border, padding

两种模型间切换

  box-sizing: content-box;  // 标准盒子模型
   box-sizing: border-box;  // IE盒子模型

CSS布局模型

布局模型与盒模型一样都是 CSS 最基本、最核心的概念。

CSS包含3种基本的布局模型:

流动布局模型(flow)
浮动布局模型(float)
层布局模型(layer)

流动布局模型(flow)

流动布局模型（Flow）是默认的网页布局模式, 即网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有两个特点：

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
行内元素都会在所处的包含元素内从左到右水平分布显示。

因此, 在块元素的默认position值为static

image.png

浮动布局模型(float)

任何元素在默认情况下是不浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

div{ width:200px; height:200px; border:2px red solid; float:left;}

<div id="box1"></div>
<div id="box2"></div>

效果图:

image.png

注意:
浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式

清除浮动

为什么要清除浮动?

当包含浮动元素的块元素的高度小于浮动元素的时候，此时就会出现“高度塌陷”。此时即需要清除浮动。下面的例子即展示何为塌陷。

以下是最初的图片样式，未设置浮动。蓝框是写了一个.container类作为包含框。包含三张图片。

<div class="pic-box">  
    <div class="container">  
        <img class="pic-1" src="images/system_correct.jpg">  
        <img class="pic-2" src="images/system_practice.jpg">  
        <img class="pic-3" src="images/system_learn.jpg">  
    </div>  
</div>

image.png

要看到塌陷效果很简单。如上面所说，img3的宽高都大于前两张图。因此, 假如把img3设为 float：left；那么此时img3就会脱离原来的文档流。现在来看看给img3设左浮动后的效果

image.png

可以看到<img3>成功脱离了 .container 类，即脱离了文档流, 产生了"塌陷"。

清除浮动

清除浮动的方法常用的有3种:
1. 使用overflow属性来清除浮动

.ovh{　　　　　　
    overflow:hidden;
  }

<div class="pic-box">  
    <div class="container ovh">  
        <img class="pic-1" src="images/system_correct.jpg">  
        <img class="pic-2" src="images/system_practice.jpg">  
        <img class="pic-3" src="images/system_learn.jpg">  
    </div>  
</div>

缺点:
会将超出部分隐藏, 在某些时候我们想清除浮动并且保留超出部分

2. 额外标签法

.clear{
  clear:both;
}

<div class="pic-box">  
    <div class="container">  
        <img class="pic-1" src="images/system_correct.jpg">  
        <img class="pic-2" src="images/system_practice.jpg">  
        <img class="pic-3" src="images/system_learn.jpg">  
        <div class='clear'></div>
    </div>  
</div>

缺点:
会增加许多不必要的标签,

3. 伪元素来清除浮动

我常用也是目前最主流的方法。即用 after伪元素清除浮动。

.clearfix:after{  
            display: block;  
            content:'';  
            clear: both;  
            height:0;  
        }

修改之前的代码如下:

<div class="pic-box">  
    <div class="container clearfix">  
        <img class="pic-1" src="images/system_correct.jpg">  
        <img class="pic-2" src="images/system_practice.jpg">  
        <img class="pic-3" src="images/system_learn.jpg">  
    </div>  
</div>

效果如下:

image.png

此时, 我们已经将<img3>放回文档流。且不会影响后续块级元素的布局。

层布局模型(layer)

什么是层布局模型？层布局模型PhotoShop中的图层编辑功能一样，每个图层能够精确定位操作.。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有3种形式：

相对定位(position: relative)
绝对定位(position: absolute)
固定定位(position: fixed)

1. 相对定位(position: relative)

如果想为元素设置层模型中的相对定位，需要设置position:relative（相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

什么叫做“偏移前的位置保留不动”呢？
下面通过做一个实验来说明一下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1{
            position: relative;
            left: 100px;
            top: 300px;
            z-index: 99;
            height: 200px;
            width: 200px;
            background-color: #1ABC9C;
        }
    </style>
</head>
<body>
<div class="demo1">
    <span>六年级的时候，我还是一个漂亮的小帅哥。</span>
    <span>六年级的时候，我还是一个漂亮的小帅哥。</span>
    <span>六年级的时候，我还是一个漂亮的小帅哥。</span>
</div>
<div class='hello-world'>
    <h2>hello world</h2>
</div>
</body>
</html>

效果图下如下:

image.png

从效果图中可以明显的看出，虽然div.demo1元素相对于以前的位置产生了偏移，但是div.demo1元素以前的位置还是保留着，所以后面的div.hello-world元素是显示在了div元素以前位置的后面。

此时可以发现, body的高度等于 div.demo1元素的高度加上 div.hello-world元素的高度之和.

image.png

2. 绝对定位(position: absolute)

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性 相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

修改上例(相对定位的示例代码)中的代码, 将demo1属性position修改为: absolute后,

 <style>
        .demo1{
            position: relative;
            left: 100px;
            top: 300px;
            z-index: 99;
            height: 200px;
            width: 200px;
            background-color: #1ABC9C;
        }
    </style>

效果如下:

image.png

此时发现, body的高度, 即等于div.hello-world元素的高度

image.png

相对定位与绝对定位的区别:
relative 和 absolute的区别就在于, 以前的位置是否保留.

3. 固定定位(position: fixed)

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

思考

(1). 纯CSS如何实现多级折叠菜单

最终实现效果类似于:

image.png

提示:
可以运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，当元素拥有checked这个值的时候就特定的CSS。

(2). 底部固定

如何设置底部固定，就是不管浏览器界面大小总是固定在底部
如百度首页效果:

image.png

媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

image.png

示例代码:

// 如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }
    .gridmain {
        width:100%;
    }
    .gridright {
        width:100%;
    }
}

CSS书写规范

大部分前端都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里参考了国外一些文章以及我的个人经验总结出的CSS书写规范。

CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

image.png

CSS书写规范

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

image.png

去掉小数点前的“0”

image.png

简写命名

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写！

image.png

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，为什么呢？

输入的时候少按一个shift键；
浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）
能良好区分JavaScript变量命名（JS变量命名是用“_”）

image.png

不要随意使用id

id在JavaScript中是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

image.png

为选择器添加状态前缀

image.png

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果把他们分开了，将来只会被大家遗忘。

注意事项:

一律小写;
尽量用英文;
尽量不缩写，除非一看就明白的单词。

后记

做为一个前端开发人员, 编写页面的HTML&CSS代码要符合W3C规范, 最简单的判断标准即: 剥离所有的样式后, 还能够较好的呈现页面内容

CSS基础

前言

CSS定义

CSS基础

选择器

常用选择器

CSS的一些特性

1. 继承性

2. 特殊性

权值规则如下:

计算权重

权重计算公式

权重基本规则

4. 层叠性

层叠规则如下

5. 重要性

盒子模型

元素分类

1. 块元素(display: block;)

块元素的特点：

2. 行内元素(display: inline;)

行内元素的特点：

3. 行内块元素(display: inline-block;)

盒子模型

标准盒子模型和IE盒子模型

两种模型间切换

CSS布局模型

流动布局模型(flow)

浮动布局模型(float)

清除浮动

为什么要清除浮动?

清除浮动

层布局模型(layer)

1. 相对定位(position: relative)

2. 绝对定位(position: absolute)

3. 固定定位(position: fixed)

思考

(1). 纯CSS如何实现多级折叠菜单

(2). 底部固定

媒体查询

CSS书写规范

CSS书写顺序

CSS书写规范

简写命名

连字符CSS选择器命名规范

不要随意使用id

为选择器添加状态前缀

媒体查询（Media query）的位置

注意事项:

后记

相关资料链接:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读