CSS样式详解

最新推荐文章于 2023-05-06 06:30:00 发布

前端神棍

最新推荐文章于 2023-05-06 06:30:00 发布

阅读量2.2k

点赞数 2

分类专栏： css 文章标签： css html 前端 css3

本文链接：https://blog.csdn.net/m0_46412825/article/details/107281572

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

css样式详解

一、初始CSS

1.CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)。
作用：实现网页布局，美化网页
版本：有CSS2和CSS3
CSS3是当前最流行的，基于CSS2的基础。

2.表格布局 vs CSS布局

我们先来体验一下CSS的小小魅力：

使用CSS完成圣杯布局

如下使用CSS布局：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./圣杯.css">
     <style>
       .warpe {
            width: 800px;
            height: 500px;
            background-color: bisque;
            margin: 10px auto;
            border: 1px solid red;
        }
        
        .header {
            width: 800px;
            height: 100px;
            background-color: skyblue;
        }
        
        .main {
            width: 800px;
            height: 300px;
        }
        
        .main .left {
            width: 150px;
            height: 300px;
            background-color: purple;
            float: left;
        }
        
        .main .center {
            width: 500px;
            height: 300px;
            background-color: seagreen;
            float: left;
        }
        
        .main .right {
            width: 150px;
            height: 300px;
            background-color: tomato;
            float: left;
        }
        
        .footer {
            width: 800px;
            height: 100px;
            background-color: pink;
        } 
    </style> 
</head>

<body>
    <div class="warpe">
        <div class="header"></div>
        <div class="main">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>

</html>

相信我们在刚刚已经对CSS产生了很大的兴趣，下面就让我们看看CSS有什么优点吧！

3.css布局的优点

早期：2008年之前，还有很多使用table来进行布局的
表格的特性：
将表现层和结构层混合在一起，不符合web标准
不利于页面的维护、更新。
代码冗余，性能低下
CSS的特性：
表现层和结构层完全分离，符合web标准
便于团队开发（视觉设计师和内容编辑分离）
便于网站的更新升级，维护性好
用户体验好，网站性能高
能够适应不同的显示设备

二、CSS基本语法

1.引入css的三种方式

行内样式：就是直接在标签的开始标签中，使用style属性。
内部样式：直接使用style标签来完成，注意，style标签要写在head部分，不要写到body里面了。
外部样式：
a.将css作为一个独立的文件来保存，一般后缀.css
b.使用link标签引入(link标签其实还有一个属性，告诉浏览器我们的引入的文件类型是css文件。 type=“text/css”)

说明：
在实际开发的时候，通常使用外部方式
在学习的时候，我们通常使用内部的方式

注意：还有一种方式，是@import ，但一般不建议使用，因为它会牺牲页面性能。内联对应的是行内。

2.css基本语法

CSS样式(或规则)都必须由两部分组成：
选择器(selector)
声明块(declaration)，包括属性(property)和属性值(value)

注意：
声明块是由{}来构成的
声明之间必须有一个分号，所以在写单个声明的时候，尽量加上最后的分号
声明的属性和属性值之间使用冒号隔开，
在写这些符号的时候，要注意必须是英文的。

CSS有一个特性，如果写错了，它不会报错，只是不起作用而言。
其中selector，翻译为选择器或选择符。

3.css选择器

通过前面的一个分析，我们发现在一条css规则中，真正重要的有三个东西：
选择器、属性、属性值

CSS非常强大，其中的一个表现就是他提供了灵活好用的选择器。
作用：用于选中我们需要处理的标签或内容。

1.基本选择器

a.类型选择器：也叫标签选择器，或叫元素选择器。
元素是什么意思？
元素 = 标签 + 属性 + 内容

b.id选择器
要使用id选择器，需要分成两个步骤：
第一步，需要在对应的标签中增加一个id属性
第二步，需要在css中，使用#+id属性值

需要注意的细节：
id是一个通用属性，所有的标签都可以设置id属性
id通常是唯一的，所以不要在同一个页面中设置相同的id属性（尽管浏览器可以去解析）。
c.class选择器
class是班级的意思，在计算机领域中还可以理解为类、类别。

叫类选择器，使用也是分为两步：
第一步，需要在对应的标签中设置class属性，并设置对应值
第二步，在css的规则中，使用 .+class属性值

注意：对于class的使用
所有的标签都可以添加class属性
对于不同的标签，他们需要有相同的样式，此时使用class比较合适
对于相同的标签，但是在页面中，特别的多，我只需要某一部分标签有额外的样式，也应该使用class。
Class属性的值，可以有多个，如果有多个，使用空格隔开，

2.选择器用法

a.通配选择器
使用通配符，*，表示所有的标签（元素）。

实际上，统配选择器在开发时很少使用。
使用*来去掉所有标签的margin和padding。
b.分组选择器
在书写css的时候，有可能对两个不同的标签、class、id，设置相同的css。

在css中，使用逗号来实现分组。两个选择器之间使用逗号进行分隔。

再进一步：在实际开发时，有些元素有相同的样式，也有不同的样式，可以利用分组设置相同样式部分，然后再针对各个元素设置不同的样式，

c.后代选择器
肯定会涉及到标签的一个嵌套（包含）。

[友情提示]：不要把逗号和空格混淆。有逗号的表示是分组，有空格的才表示后代。

注意：后代的层次是没有限制的

d.伪类选择器
目前我们就掌握一个，最常用的，就是a标签的hover伪类。

hover，表示将鼠标放到a上面的这个状态。
a:hover

注意：
并不存在一个class=”hover”这么一个属性，所以才叫伪类。
对于hover，目前只需要掌握在a标签的用法就可以了

补充一个用法----组合
在使用class选择器的时候，可以将标签和class组合到一起，从而缩小范围。

如何理解：将二者拆分，一分为二，分为类型选择器p，和class选择器.red二者之间是并且的关系，及满足是p标签，同时又满足具class=‘red’这么一个条件,而且要注意，p.red不能写成.redp 或者.red p，它们都表示不同的含义。

4.css属性

CSS属性本身是挺多的，但真正常用的，核心的也就20多个,后面我们会详细介绍。

常见的块标签，行标签，行内块标签

一、块级标签

1.独占一行，不和其他元素待在同一行
2.能设置宽高
常见的块级标签：div, p, h1-h6, ul, li, dl, dt, dd

二、行级标签

1.能和其他元素待在同一行
2.不能设置宽高
常见的行级标签：a， span, strong, u, em

三、行内块标签

1.能和其他元素待在一行
2.能设置宽高
常见的行内块标签：img, input, textarea

标签归属

字体：font-style;font-wight;font-size;font-family;color;font;

文本：text-decoration;text-indent;tixt-align;line-height;

表格：border-collapse;caption-side;border-spacing;table;tr;td;th;caption;thead;tbody;tfoot;

列表：ul;ol;li;dl;dt;dd;form;label;input;select+option;textarea;list-style;

定位：position;float;

布局：display;float;clear;overflow;

盒子模型：width;height;border;padding;margin;background;

5.css属性值

不同的属性，有不同的值。首先需要找出这些属性值的共性。

1.颜色值

a.颜色名，就是英文名字，如red，green，blue等
b.使用rgb函数，使用不多
c.使用十六进制

rgb:三原色，三基色，分别就是红绿蓝，red，green，blue三种颜色，的取值范围都是0~255
使用十六进制：十进制：0,1,2,3,4,5,6,7,8,9，10个符号构成，10个数字，如9999十六进制：0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F，十六个符号构成的，其中数字有10个，字母有6个。
如：#000000表示黑色
#FFFFFF 表示白色
#FF0000 表示红色
#00FF00表示绿色
#0000FF表示蓝色

注意事项：
在css2中，很好使用rgb函数。
对于颜色名，它的值是有限的，在使用的时候要小心，不要想着什么就是什么，具体可以参考：http://www.cnblogs.com/markli/p/3883534.html
对于十六进制的写法，大小写都可以。而且一般必须是6位。只有一种情况下，位数可以减半，如果表示三基色的三个部分，其值分别相等，可以使用3位表示。如#FFFF00可以简写为#ff0.

2.长度单位
在css中，主要有如下两个：
px，表示像素，大部分都是使用px
em，表示字体的高度，一般在设置text-indent时会用到

3.URL
统一资源定位，uniform resource location
绝对url：在线的某个资源，是以http打头的一个完整的路径，如http://www.baidu.com/image/logo.jpg
相对：使用比较多，相对当前文件的路径，如./images/bg.jpg

4.百分比
使用n%这种形式来设置的，在css中，一般有如下两处：
表示长度（包括宽和高），
表示位置的，如背景定位以及层定位的时候会用到

使用百分比的时候，一般都有参考的对象，这个对象通常就是父元素。

在css中，还有很多的属性值，在讲到具体属性的时候，再来解释说明。

三.CSS排版初步

1.字体设置

和字体相关的有如下几个属性：font-style;font-wight;font-size;font-family;font;color;

font-style：表示字体是否倾斜

font-style:italic|inherit|normal|oblique;
font-wight:表示字体是否加粗
font-wight:100-900|bold|bolder|lighter|normal;

font-size:表示字体大小
font-size:16px;：表示设置字体大小为16px

注意：字体最小显示为12px 最常使用14px和16px

font-family:表示字体类型
默认一般为宋体

font:使用了font-style、font-weight、font-size、font-family，它们都是和font有关的，所以在css中，提供了一种简写的方式，使用font来实现。

font：font-style、font-weight、font-size、font-family。

在上述写法中，font-style和font-weight可以省略，也可以交换位置，但是font-size和font-family不能省略，也不能交换位置。
Font-style和font-weight默认就是normal，所以一般会省略各个属性之间使用空格隔开即可

color:用来设置字体的颜色
同样有三种方法，上面介绍过了，这里就不在做介绍。

2.文本设置

文本具有以下属性：text-decoration;text-indent;tixt-align;line-height;

1.text-decoration
decoration:修饰
作用：用来设置文本的修饰线，有如下几种：
underline
overline
line-through
none

经典用法：
对超链接的样式化，大部分网页的a标签，默认去掉下划线，在hover的时候添加下划线
在很多的电商网站，通常有两种价格，对于市场价，使用line-through来修饰，

2.text-indent
Indent是缩进
作用：用来缩进文本的。

text-indent:2em;：表示缩进两个文字大小

注意：
在实现段落缩进的时候，我们用到的em这个单位，em表示字体的高度，对于中文而言，文字是正方形的，所以宽度和高度是相等的。

3.text-align
align：对齐
作用：设置文本对齐的水平方式，通常有如下几种对齐方式：
left，是默认值
center
right
Justify，表示两端对齐，但是只对英文有效。

和word段落的对齐方式进行对比就可以了

注意点：
justify只对英文起作用，中文无效
justify是两端对齐，不是分散对齐，一定要和word进行对比来理解。

4.line-height
作用：设置行高的。

line-height:1.5;:表示行高为字高的1.5倍
line-height:20px;:表示行高为20px

常情况下，我们可以使用line-height来实现垂直居中。(当行高等于盒子高度时，则该行在盒子中垂直居中)

1.关于CSS的继承性

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。换句话说，就是特定的CSS属性向下传递到子孙元素。

注意：
并不是所有的css属性都可以继承
可以继承的常见属性有：
font-family,font-size,font-style,font-weight,font, line-height,text-align,text-indent,color

关于CSS的层叠性

问题：当一个元素的样式被声明多次时，以哪个为准？
这就涉及到css的层叠性。
首先有一条，css规则有一个就近原则，是针对引入css方式的一种规则

在实际开发中，我们很少会同时使用内部样式和外部样式。在真实项目中，一般都会使用外部样式表，然后再在某些特殊的地方，加一点行内样式表的。

注意，接下来的规则是基于都是内部或者都是外部样式表，不是二者混合在一起的。

在三种基本选择器中，优先级是这样的

id选择器 > class选择器 > 标签选择器

在实际开发中，经常会使用分组、后代选择器这些用法。

选择器的特殊性
id选择器： 0 1 0 0 100块
class选择器： 0 0 1 0 10块
类型选择器： 0 0 0 1 1块
如果在选择器中出现了多个选择器的时候，我们只要将它们的这些特殊性求和，然后看结果。

还有一个，行内样式，它的特殊性是1 0 0 0 ，钻石

如果选择器的优先级（特殊性）完全相同，然后有重复的时候，怎么办？

还有一个就是！important，可以改变优先级（暂时放一下，实际上应用比较少）

3.表格设计

表格常用属性如下：border-collapse;caption-side;border-spacing;table;tr;td;th;caption;thead;tbody;tfoot;

1.创建语义化的表格结构

我们在HTML中，讲到和表格相关的标签有如下几个：table、tr、td/th

实际上，除了这几个之外，还有一些相应的标签。
caption：表格标题，实际上使用并不是很多
thead：表头部分
tbody：表主体部分
tfoot：表尾部分

在行的方向上，我们可以将这些行分成不同的组，有三种：thead、tbody、tfoot
如果没有增加上述中的任意一个，默认所有的tr都会在tbody中。
我们可以人为的对tr进行分组：
有了这些标签，可以给我们带来两大好处：
我们的html更加具备语义化
我们在写CSS的时候，可以节省很多的class属性。直接使用元素选择器即可。

一般而言，thead和tbody使用比较多，而tfoot使用相对较少。

2.表格相关css属性

和表格有关的新的属性：

border-collapse：重点掌握
caption-side
border-spacing

默认情况下，表格的边框构建方式是分隔式（分离式），其特点如下：
table本身有一个独立的边框每一个单元格（td/th）也都具备自己独立的边框
实际上，在所有的网站中，都需要去更改表格边框的构建方式。
我们希望单元格之间能够共用其中的某一个边框。

在css中，我们可以使用border-collapse，来设置。
它有两个属性值：
separate：分隔，默认值
collapse：消融，融合

caption-side：表示标题的所处的位置，一般可以设置如下两个值：
top：在表格的上方
bottom：在表示的下方
它既可以在table中设置，也可以在caption中设置。
border-spacing
设置单元格边框的之间的距离，类似于border-spacing属性的作用。

但是，它有前提，必须是分离式的边框，如果是collapse，则无效。

实际上，由于表格都是基于collapse的，所以根本就用不着它。了解即可。
有了这些，结合其他的一些css属性，就可以很好的完成表格的美化。

关于表格，需要注意的一些地方：
表格是块级元素。
不是严格意义上的块级元素，它并不会占据一整行，默认情况下，它是能够容纳表中的内容就可以了。
我们可以通过width和height去修改它的大小，但是这个大小是指最小的那个值，实际上有可能比设置的值要大

使用css来设置边框的时候，我们可以分别对table，tr，td/th单独来设置边框，遵循盒模型的边框规则
在我们使用background设置table、tr、td的时候，table在最底层，tr是在中间，td是最上面，默认的背景颜色都是transparent，也就是透明的。

关于设置thead或者tr的背景图片的时候，在firefox/chrome都会显示有些异常，但是在ie下去认识正确的解析效果。

针对这种情况，我们需要换一种方式，针对每个单元格独立设置。然后使用背景定位实现。

4.列表

列表相关属性：list-style;form;label;ul;ol;li;dl;dt;dd;select+option;input;textarea;

1.列表布局

1.list-style属性
和列表有关的属性有如下三个：

list-style-type：列表项符号/数字类型
list-style-position：列表项符号/数字的位置
list-style-image：给列表项使用图片作为符号/数字

上述三个属性，可以使用list-style来简化，没有固定顺序。
但是：在实际开发的时候，我们很少使用list-style-type和list-style-image来设置列表的符号/数字。一般都使用背景图片搞定。

最后，针对list-style，经典代码如下：
list-style：none;

注意事项：
list-style是简写方式，list-style-image || list-style-position || list-style-type
list-style有继承性，可以对ul/ol进行设置，也可以对li进行设置，但效果略有区别
一般来说，设置list-style为none，再通过背景图片实现各种效果

2.表单美化

form:创建表单

label：是一个行内元素，能够为用户提供更好的体验。

label标签：用于绑定一个表单元素，当点击lable标签的时候，被绑定的表单元素就会获得输入焦点。
for属性规定label与哪个表单元素绑定

<label for=“male”>male
<input type=“radio” name=“sex” id=“male” value=“male”></label>

注意：label中的for和id名字要一样，才能有效。

ul：创建一个无序列表

ol：创建一个有序列表

li：创建一行列表

dl;dt;dd：html标签中
是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，故名我们也叫dl表格为：常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。

select+option:

select元素可创建单选或者多选菜单，当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在select表单数据提交给服务器时包name 属性。

select元素是一种表单控件，可用于在表单中接受用户输入。可选的属性、值、描述

disabled disabled 规定禁用该下拉列表
multiple multiple 规定可选择多个选项
name name 规定下拉列表的名称

input:input 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

可以给他设置宽高；他是一个行内块标签

type值有button、checkbox、date、datetime、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、submit、text、time、urlweek、textarea;

5.定位

定位常用属性：position;float;

层布局模型

1.定位类型

在css中，有三种布局模型：
流动布局，默认的
浮动布局，使用float来实现
层布局，使用position来实现的

什么时候会用到层布局？
以京东、淘宝、hao123为例进行分离，有很多具体的层布局应用
层布局有哪些好处？
能够实现更为丰富的布局方式，为用户提供更好的用户体验。

在css中，层布局有如下三种定位方式：

相对定位
绝对定位
固定定位

它们是通过position属性来实现的
有如下几个值：

relative，相对定位
absolute，绝对定位
fixed，固定定位
static，不定位，默认的流动布局，一般不会写

2.相对定位

特点：

相对于其正常位置应该出现在哪里
保持其未定位前的形状
原本所占的空间仍保留

语法：

需要设置position：relative，
使用top/right/bottom/left设置偏移距离（使用其中的两个即可）

left、right、top和bottom也可以为负值。

注意：
相对定位，一定是相对于自己而言，在找参考点的时候，一定要当前元素自己的某一个边为依据。设置left，以左边界为参考，设置的right，以右边界为参考点.

对于相对定位的元素而言，它原来的空间仍然是保留着的。

3.绝对定位

在实现页面的时候，使用非常的普通。

特点：
相对于其父定位元素
元素会从文档流中完全删除，就好像该元素不存在一样
元素会生成一个块级框

语法：
父元素设置position为relative/absolute/fixed
postion：absolute
使用top/right/bottom/left设置位置
使用z-index来确定其顺序

基本用法：

子绝父相：子元素要绝对定位，那么设置父元素为相对定位即可。

当我们有多个层重叠的时候, 后面的元素覆盖在前面的元素上。能否更改它们的先后顺序呢？
我们可以利用z-index来更改其顺序，值越大，就越靠上。
z-index的取值就是一个整数。

细节：
对于一个定位元素而言，它必须有一个父定位元素，父定位元素通常设置position：relative，当然设置为absolute和fixed也是可以的。如果在它的祖先元素中，没有定位元素，最后以body作为其定位参考点。

正常情况下：将box作为定位的参考点。
如果祖先元素中，有多个具备定位属性的元素，以最近的为准。
如果在祖先元素中，根本不存在所谓的父定位元素，最终以body作为参考点进行定位。

4.固定定位

特点：
相对于视窗（页面窗口）进行定位

用法
position：fixed
使用top/right/bottom/left设置位置

注意：
固定定位的参考点是当前窗口
使用百分比进行定位的时候，不是相对于body 的值，而是当前窗口的值
兼容性有问题，IE6/IE7不支持，使用时请注意
针对ie6和ie7，我们需要额外处理，比如js。
还有一种，使用绝对定位去实现固定定位的做法。(有兴趣的同学可以研究一下)

6.布局

布局常用属性：display;float;clear;overflow;

1.溢出处理

在实践中，我们经常会遇见盒子装不下内容的情况，比如：

div中的内容以及超出了其高度，在边框之外显示了
如果div后续还有内容，则会和超出的内容发生重叠

为了解决内容溢出的问题，css提供了一个overflow 的属性

overflow：溢出
作用：用于处理内容溢出的情况
有如下四种属性值

visible：表示可见，它是默认值
hidden：表示隐藏
scroll：生成一个滚动条
auto：自动

注意：
产生滚动条之后，width不变，而内容区域随之减少。

在实际开发中，在使用overflow的时候，最常用的一个设置如下：
overflow：hidden;:超出隐藏

2.浮动布局（重难点）

(1).浮动的基本使用

作用：图文环绕，实现网页布局。
使用：float：属性值
其中，常用的属性值有如下两个个:left、right。

(2).浮动的特点

浮动有如下三大特征：

包裹性
破坏性
块级框

a.包裹性

如果一个块级元素，在没有设置width的情况下（前提条件），一旦使用了float，那么他的width就会发生变化，尽量最小，能够完全包裹其中内容即可。
如果我对一个块级元素已经设置了width，则不会具备包裹性

b.破坏性

在一个块级容器中（如div），如果它的子元素，都有浮动（比如float），并且没有清除这个浮动，那么块级容器将会塌陷。这就是浮动的破坏性。

如何解决由于破坏性导致的塌陷问题呢？
技巧，有如下几种方式：
1.在块级容器中，使用overflow:hidden。
2.在块级容器结束之前，添加一个空的div标签，然后设置clear：both的属性.
3.显式的给块级元素指定一个height值
针对第三种解决方案，并不适用，因为对于大部分页面来说，一个容器其高度最好设置为自适应的，不推荐使用。

c.块级框
如果一个行内元素，设置了浮动（left或right）之后，它就会变成块级框，就可以设置其盒模型的所有属性，如width

(3).浮动的具体表现

基本规则有如下三条： (为了尽可能都介绍一点减少篇幅，这里就不详细解释了)

第一小条：浮动元素的左（右）外边界不能超出其包含块的左（右）边界
第二小条：一个浮动元素的顶端不能比父元素的内顶端更高。
第三小条：元素不能一直浮动到其父元素的顶端

(4).浮动的本质（难点）

在css中，所有的内容都是一个元素。纯文本也是。
在块级元素中，包含的一定是行内元素，行内元素才是描述内容的标签。

行内元素的特点：
首先自左至右进行排列，
如果内容超出一行，会重起一行

如果一个行内元素不止一行，则会形成多个行内框。每一行就是一个框。（是矩形的）

前面提到css中有三大布局模型：
流动布局
浮动布局
层布局

流动布局是默认的，遵循的盒模型中块级元素和行内元素的各自特点。
有一个概念，就是正常文档流，

只要是流动布局，所有的内容都是属于正常文档流的。

如果使用了浮动布局，使用了float之后，那就不一样了。

浮动之后，它会脱离正常的文档流，但是不是完全脱离，还是会影响内容的。

如果对图片进行浮动，那么图片就会脱离正常的文档流，所以后面的段落就会占据图片的空间。

由于浮动并不是完全脱离文档流的，所以浮动的元素还是需要占据空间，这个空间是不会被其它内容占据。

关于浮动的清除，使用clear既可以了。

如果是解决父元素塌陷的问题，使用overflow：hidden就可以。
如果是其它情况，就需要使用clear：both。

3.display详解

display：显示的意思
作用：用来设置元素的显示形态
格式：display：属性值
其中，属性值有如下几个：

block，块
inline，行内
none，隐藏
inline-block，行内块
display就像是做变性手术。

注意点：

none，表示不显示当前的元素，当设置为none，完全不占据页面的任何空间。
inline-block
将元素设置为行内块元素。但是，很遗憾的，inline-block在ie7以下支持不好。需要使用兼容的写法。

7.盒子模型（重中之重------毕竟重量级的总是最后出场嘛！ (国之重器绝世无双)）

盒子模型常用属性：width;height;border;padding;margin;background;

盒模型详解

关于盒模型的解析，一直存在两种方式：

IE盒模型
标准盒模型

在HTML文档头部引入文档头，就可以保证使用标准盒模型来进行解析。
在标准盒模型中（以块级元素为例）：

水平方向占据的总宽度：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
垂直方向上占据的总高度：
margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom

1.width和height

对于块元素和行内块元素，表示内+ 区域。
对于行内元素，width和height+ 效。

[注意]：

如果没有doctype头，在ie6以下览器中，规则不太一样。
width属性默认值为auto，块元素贪婪性和行内元素的懒惰性。
实际上，对于行内元素而言，其宽有内容本身决定，而其高度则font-size决定。
width和height可以设置百分比，对于父元素的width和height而言。

2.border特性及设置

border的基本使用：
我们描述一个border有如下三个方面：

边框大小（粗细）border-width
边框的样式 border-style
边框颜色 border-color

border是一个简写的属性，是border-width、border-style、border-color的简写。

三个属性之间没有固定的顺序，怎写都行
属性之间使用空格隔开
针对border-widthborder-style、border-color，分别有四个方向的子属性,border-top-widthborder-top-style，一般很少使子属性来设置边框。

border-width的设置

表示边框的大小（粗细），我们有两种方式设置：

具体的像素值，如5px，推荐使用
使用表示粗细的英文，thin，thick，medium，很少会使用，不同的浏览器解析的大小不一致。

border-style的设置

表示边框的样式，有如下几种：

solid，实线
dotted，点画线
dashed，虚线
none 没有
double：定义边框为双边框线。
groove：定义边框为3D凹槽。
ridge：定义为边框3D凸槽。
inset：定义边框为3D凹边。
outset：定义边框为3D凸边。
hidden：隐蔽边框，IE不支持。
double 及以下的部分，一般使用不多，因为它们在不同的浏览器中有不同的表现。

同理，border-style也分为上右下左四个方向的子属性
border-color的设置

border-color就是边框的颜色，可以使用如下三种方式来设置：

颜色英文名称
rgb函数
十六进制

border-color也分为四个方向的子属性，如border-top-color。

在border中的三个属性中，其实它们都有默认值，

border-width，默认是medium，一般是3px
boder-color，默认是字体的颜色，
border-style，默认是none

3.padding特性及设置

padding，表示内边距，或者叫补白。
所表示的区域是边框到内容之间的那块空间。

padding有四个方向上的子属性：

padding-top
padding-right
padding-bottom
padding-left

具体写法有如下几种：

单独的设置某一个子属性
padding：一个值四边相同
padding：两个值第一个值表示上下的，第二个值表示左右的
padding：三个值第一个值表示上的，第二个值表示左右的，第三个值>+表示下的
padding：四个值分别是上、右、下、左。

注意：

padding可以使用百分比，是相对于父元素的width值，一般在响应式we>+b中使用。
有些标签有默认的padding值，如ul、ol等。
对于行内元素，padding在垂直方向上不影响行高。

在开发页面的时候，为了保证所有的这些标签都有统一的一个padidng值，采取一刀切，
* {padding:0;}

对于padding而言，如果是行内元素，它在垂直方向上不影响行高。

注意对上面代码的理解：

padding表示边框和内容之间的空间，所以边框会向四周延展。
但是由于行内元素的paddng在垂直方向是不影响行高的，所以整体的行与行之间的距离并没有拉开

4.margin特性及设置

margin表示边界，外边距。当前元素和另一个元素之间的距离，在border之外的。

margin的使用

margin也是简写的属性，实际上它又分为四个方向上的子属性：

margin-top
margin-right
margin-bottom
margin-left

具体的设置有如下几种：

使用子属性来设置某个具体的外边距
margin：一个值，表示四个外边距都是一样的
margin：两个值，第一个值表示上下的，第二个值表示左右的
margin：三个值，第一个值表示上，第二个值表示表示左右的，第三个值>+表示下
margin：四个值，分别对应上、右、下、左

注意：

margin可以使用百分比，是相对于父元素的width值。
有些标签有默认的margin值，如body、h1~h6、p、ul、ol、dl等。
对于行内元素，margin在垂直方向上无效。
margin的auto设置。块状元素在垂直方向上有重叠现象。
margin可以使用负值。

关于某些标签具备默认的margin，在我们布局的页面，会造成一些不好的影响。为了简单起见，采取一刀切的方式，把凡是有默认margin值的这些元素都置0。使用即可。
*{margin:0;}*

对于行内元素，margin值在垂直方向上无效.
关于margin，有一个auto的值，比较特殊，经典应用之一就是用来实现元素的水平居中效果。

5.块级元素特点

水平方向：

margin-left、border-left、padding-left、width、padding-right、border-right、margin-right。
width、margin-left和margin-right可以设置为auto，其余必须为特定值，或默认为0
如果margin-left/right都设置为auto，它们会设置为相同的长度，因此将元素在其父元素中居中
如果3个属性都设置为auto，则两个外边距都会设置为0，而width尽可能宽，这是默认情况
如果width、margin都是auto的话（这个前提不能少），我们再来设置padding或border，相应的width就会减小，保证整个块级元素的大小不要超过父元素。

垂直方向

margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom
默认高度由其内容决定，它会受内容宽度的影响，内容越窄，相应的就会越高
相邻元素垂直相邻外边距会重叠
父子元素间的重叠（同向margin、父元素没有border或padding、重叠是对外而言）

6.行级元素特点

水平方向

margin-left、border-left、padding-left、padding-right、border-right、margin-right
width无效，由内容本身决定

垂直方向

height无效，有font-size和line-height决定
内边距、边框和外边距对行内元素或其生成的框没有垂直效果，不会影响元素行内框的高度，也不会影响包含该元素的行框的高度

7.background深入（重难点）

在css中，和背景有关的属性，有如下5个：

background-color;background-image;background-repeat;background-position;background-attachment;

background-color
作用，设置当前元素的背景颜色

background-image
作用：用来给当前元素添加背景图片

默认情况下，如果图片小于元素，在水平和垂直方向都会重复该图片。
默认情况下，图片的左上角和元素的左上角对齐。

实际上，上述两个默认值，是可以修改的。

background-repeat
作用：用来控制背景图片在元素中水平和垂直方向上是否重复

取值有如下四个：

repeat，也是默认的值
no-repeat，完全不重复，有仅有一个
repeat-x，水平方向上重复
repeat-y，垂直方向上重>>+ （向下为正）

注意点：
在重复背景图片的时候，有多少空间，就重复多少内容，并不需要说要完整的图片大小空间才行。

background-position
作用：用来设置背景图片的位置。

格式：background-position :position-x position-y

具体在设置的时候，有如下三种设置方式：

使用关键字，top、left、right、bottom
使用百分比，0%、50%、100%
使用像素值，25px、100px

除了像素值，还可以使用关键字

水平方向：left、center、right
垂直方向：top、center、bottom

注意：当我们使用关键字的时候，比如使用top，它的意思是元素的顶端和背景图片的顶端对齐。比如使用center，其含义是元素的中心点和背景图片的中心点是对齐的。