Css基础

S妖O风F

已于 2024-04-02 08:48:22 修改

阅读量15

点赞数

文章标签： css css3 html

于 2022-05-16 14:41:08 首次发布

本文链接：https://blog.csdn.net/SOOOOOF/article/details/124799287

版权

1.css 简介

2.响应式

3.基础选择器

4.层次选择器

5.属性选择器

6.伪类选择器

7.伪元素

8.字体大小与颜色

9.加粗与缩进

10.字符间隔与对齐

11.行高与装饰

12.溢出和阴影

13.盒子模型

14.外边距

15.内边距

16.盒子类型

17.内容溢出与阴影

18.浮动

19.定位布局

20.背景图片

21.圆角边框

22.弹性布局

23.弹性盒子的属性

24.弹性元素的属性

CSS (Cascading Style Shee)译作“层叠样式表”，是用于控制或增强网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用 CSS 样式可以控制许多仅使用 HTML 无法控制的属性。当在浏览器中打开一个 HTML 网页时，浏览器将读取该网页中的 HTML 标签，并根据内置的解析规则将网页元素呈现出来。CSS 决定浏览器将如何描述 HTML 元素的表现形式。

1.内联样式
内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果，但是不推荐在整个文档上使用此方法。
在使用此方法时，必须在每一个元素上重复设置各个样式，这样既增加文档大小，又增加文档的更新和维护难度。例如，所有的元素都设置了宽度大小，如果需要修改，就需要反复更改多处样式定义内容。

<nav>
    <ul>
        <li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">首页</li>
    	<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">Web前端开发</li>
    	<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">Linux操作系统</li>
    	<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">计算机网络</li>
    	<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">MySQL数据库管理</li>
    </ul>
</nav>

注意：nav 作用效果和 div 相同，仅表示导航专用标签。
2.嵌入样式
嵌入样式是通过在 HTML 文档头定义样式单部分来实现的。通常不建议使用嵌入样式，因为此方式必须在 HTML 文档内部定义样式，如果此文档的 Css 样式需要被其他 HTML 文档使用，那么就必须重新定义。大量 CSS 嵌套在 HTML 文档中，也会导致 HTML 文档过大，造成网络负担过重。如果需要修改整站风格时，必须对网站的每一个网页进行修改，不利于更新和管理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            float: left;
            padding: 4px 5px 0px 5px;
            list-style: none;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li>首页</li>
        <li>Web前端开发</li>
        <li>Linux操作系统</li>
        <li>计算机网络</li>
        <li>MySQL数据库管理</li>
    </ul>
</nav>
</body>
</html>

3.外部样式
外部样式是将所有样式写在一个外部文件中，在 HTML 文档中使用元素，将文件链接到需要设置样式的文档上。使用这种方法，只需要修改链接的文件，就可以完全改变网页的整体风格。此外，也可以使用这种方法修改或调整文档，使之适应不同环境或设备的显示要求。此种方法是推荐使用的方式。如果使用外部样式，修改样式是刷新浏览器可能看不到修改的效果，因为浏览器为了节省网速，缓存了先前的 css 文件，可以使用 ctrl + f5 强制刷新。

<link rel="stylesheet" href="css/index.css">

2.响应式

页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query 的使用等。无论用户正在使用笔记本还是 iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>响应式</title>
    <style>
        body {
            background-color: white;
        }

        @media screen and (min-width: 768px) {
            /*分辨率宽度为768px以上*/
            body {
                background-color: red;
            }
        }

        @media screen and (min-width: 992px) {
            /*分辨率宽度为992px以上*/
            body {
                background-color: purple;
            }
        }

        @media screen and (min-width: 1200px) {
            /*分辨率宽度为1200px以上*/
            body {
                background-color: yellow;
            }
        }

    </style>
</head>
<body>
<ul>
    <li>浏览器宽度小于768px时，背景颜色为白色。</li>
    <li>浏览器宽度在768px至992px之间时，背景颜色为红色。</li>
    <li>浏览器宽度在992px至1200px之间时，背景颜色为紫色。</li>
    <li>浏览器宽度大于1200px时，背景颜色为黄色。</li>
    <li>此案例仅为演示，实际应用要复杂的多。</li>
</ul>
</body>
</html>

3.基础选择器

基础选择器是 CSS 中最基础、最常用的选择器，从 CSS 诞生开始就一直存在，供 Web 前端开发者快速地进行 DOM 元素的查找与定位。基本语法如下：

选择器名字{
    属性:值;
    属性:值; 
}

一个简单的选择器代码如下

li {
    float: left;
    padding: 4px 5px 0px 5px;
    list-style: none;
}

在该例中，“li”就是选择器(类型选择器)，“float"是属性，“left" 是取值。该 Css 定义表示：对页面标签向左浮动。基础选择器包含通配符选择器、元素选择器、类选择器和 ID 选择器，通过这些基础的选择器可以为 HTML 元素添加很多的附加信息，如指定 div 元素的 widh 属性以实现对 div 元素的宽度控制。如下为几个常用的基础选择器。

*                通用元素选择器，匹配任何元素
E                标签选择器，匹配所有使用E标签的元素
.info和E.info    class选择器，匹配所有class属性中包含info的元素
#info和E#info    ID选择器，匹配所有ID属性等于footer的元素

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            color: yellow;
        }

        div {
            color: aqua;
        }

        .pink {
            color: pink;
        }

        #green {
            color: green;
        }

    </style>
</head>
<body>
<div>我是div里面的文字</div>
<span class="pink">我是span里面带pink类型的文字</span>
<p class="pink">我是p里面带pink类型的文字</p>
<p class="pink">我是p里面带pink类型的文字</p>
<p id="green">我是p里面带green ID的文字</p>
<div>第二个div里面的文字</div>
<p>没有class和 id 的p里面的文字</p>
</body>
</html>

注意：
1.id 相同的元素一般在一个页面不能出现多个。
2.前端在写 css 样式时一般不用 id 多用 class。
3.通用元素的优先级小于其他选择器的优先级。

4.层次选择器

层次选择器分为四个类别：包含选择符、子选择符、相邻选择符、兄弟选择符。

1.包含选择符

比如说 E F，前面 E 为祖先元素，F 为后代元素。所表达的意思就是选择了 E 元素的所有后代 F 元素。请注意祖先元素和后代元素之间使用一个空格隔开。这里 F 不管是 E 元素的子元素或者是孙元素或者是更深层次的关系，都将被选中。也就是说，E F 将递归选中 E 元素中的所有 F 元素。

2.子选择符

比如说 E>F，其中 E 为父元素，而 F 为子元素，其中 E>F 所表示的是选择了 E 元素下的所有子元素 F 和后代选择器(E F)不同，E>F 仅选择了 E 元素下的 F 子元素，更深层次的 F 元素则不会被选择。

3.相邻选择符

比如 E+F，E 和 F 元素具有一个相同的父元素，而且 F 元素在 E 元素后面且紧相邻，这样就可以使用相邻兄弟选择器来选择 F 元素。相邻选择器可以选择紧接在另一元素后的元素，而且两者需具有一个相同的父元素。

4.兄弟选择符

比如 E~F，E 和 F 元素是属于同一父元素之内，并且 F 元素在 E 元素之后，那么 E~F 选择器将选择 E 元素后面的所有 F 元素。通用兄弟选择器和相邻兄弟选择器极其相似，不同的是，相邻兄弟选择器仅选择元素与其相邻的后面元素(选中的仅一个元素)：而通用兄弟选择器选中的是元素后面的所有兄弟元素。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*选择class=myDiv1下的所有span元素*/
        .myDiv span {
            color: aqua;
        }

        /*选择class=myDiv2下的span子元素*/
        .myDiv2 > span {
            color: aqua;
        }

        /*选择p标签后的第一个兄弟span元素*/
        .myDiv3 p + span {
            color: yellow;
        }

        /*选择p标签后的所有兄弟span元素*/
        .myDiv4 p ~ span {
            color: green;
        }
    </style>
</head>
<body>
<div class="myDiv">
    <p>div 里面的p<span>div里面的p里面的span</span></p>
    <span>div里面的span</span>
    <span>div里面的span2</span>
</div>
<div class="myDiv2">
    <p>div 里面的p<span>div里面的p里面的span</span></p>
    <span>div里面的span</span>
    <span>div里面的span2</span>
</div>
<div class="myDiv3">
    <p>div 里面的p<span>div里面的p里面的span</span></p>
    <span>div里面的span1</span>
    <span>div里面的span2</span>
</div>
<div class="myDiv4">
    <p>div 里面的p<span>div里面的p里面的span</span></p>
    <span>div里面的span1</span>
    <span>div里面的span2</span>
</div>
</body>
</html>

5.属性选择器

在HTML中，通过各种各样的属性，可以给元素增加许多附加信息。这样就可以通过属性的不同，指定具有特定属性的元素。

属性选择器在CSS2中就被引入，其主要作用是对带有指定属性的HTML元素设置样式。使用CSS3属性选择器，可以只指定元素的某个属性，也可以同时指定元素的某个属性及其对应的属性值。

其语法如下所示：

元素名字[元素类型="类型名字"]:选择器名字{}

在元素类型匹配时，就可以使用类似正则表达式的匹配方法。

1.E[attr]

E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果希望选择有某个属性的元素，而不管其属性值是什么，就可以使用此属性选择器。E[attr]属性选择器可以指定一个属性，也可以指定多个属性。

如下选择有id的元素

<style>
[id]{
    font-size:12px;
    color:#C00;
}
</style>

2.E[attr="value"]

E[attr="value"]选择器和E[attr]选择器，从字面上就能很清楚地理解出其区别。E[attr="value"]是指定了属性值"value"，而E[attr]只是选择了对应的属性，并没有明确指出其对应的属性值"value"，这也是这两种选择器的最大区别之处。 E[attr="value"]选择器要求属性和属性值必须完全匹配。

如下选择 id 为 Newsl 的属性

[id="Newsl"]{
    font-size:14px;
    color:#000;
}

3.E[attr~="value"]

E[attr~="value"]根据属性值中的词列表的某个词来选择元素。此属性选择器要求属性值是一个或多个词列表，如果是列表时，多个词需要用空格隔开，只要元素的属性值中有一个词和 value 相匹配就可以选中该元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据属性值单词的选择器</title>
<style>

[id~="Content"] {
    color:#090;
}
</style>
</head>

<body>
<header>
    <div id="News1">《再别康桥》-徐志摩</div>
    <div id="News1-c">轻轻的我走了，正如我轻轻的来；我轻轻的招手...</div>
    <div id="News2">《乡愁》-余光中</div>
    <div id="News2-c News2C Content">小时侯，乡愁是一枚小小的邮票，我在这头...</div>
</header>
</body>
</html>

4.E[attr^="value"]

E[attr^="value"]属性选择器，表示的是选择 attr 属性值以"value"开头的所有元素，换句话说，选择的属性其对应的属性值是以"value"开始的。

5.E[attr$="value"]

E[attr$="value"]属性选择器，表示的是选择 attr 属性值以"value"结尾的所有元素，换句话说，选择的属性其对应的属性值是以"value"结尾的。

6.E[attr*="value"]

E[attr*="value"]属性选择器，表示的是选择 attr 属性值中包含子串"value"的所有元素。也就是说，只要所选择属性的值中有这个"value"值都将被选中。

7.E[attr|="value"]

E[attr|="value"]属性选择器，表示的是选择 attr 属性值等于“value”或者是以“value”开头的所有元素。注意，attrt 后面的是竖线“|”。

6.伪类选择器

CSS伪类用于向某些迭择器添加特殊的效果。伪类是以“:”号表示，且不能单独存在。伪类选择器与类选择器的区别是，类选择器可以自由命名，而伪类选择器是CSS中已经定义好的选择器，不能随便命名和定义。其语法如下:

:选择器名字{
    属性:值;
    属性:值;
}

案例：

#nav a:hover {
    color: #F00;
    text-decoration: underline;/*给文本加下划线*/
}

这个例子表示在 id="nav" 的网页元素内，将鼠标放到超链接上(不单击)，其链接的文本颜色为红色，出现下划线(如果原先没下划线的话)。这是一个伪类的典型应用，通过向该样式增加更多样式，可以制作出网站常见的导航条滑动效果。常用的伪类选择器有如下几个。

对于前四个锚点伪类的设置，有一点需要特别注意，那就是它们的先后顺序。其顺序应该为link →visited→hover→active。如果把顺序搞错了，会产生意想不到的错误。

:link           设置a对象未被访问前的样式
:hover          设置a对象在鼠标悬停时的样式
:active         设置a对象在被用户激活(在鼠标单击与释放之间发生的事件)时的样式
:visited        设置a对象在其链接地址已被访问过时的样式
:focus          设置元素获取焦点时的样式（这个经常用在表单元素上）

案例：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta keywords="HTML5 CSS">
    <meta content="超链接的伪类选择器">
    <title>超链接的伪类选择器</title>
    <style type="text/css">
        .demo a:link {
            color: red;
        }

        .demo a:visited {
            color: yellow;
        }

        .demo a:hover {
            color: green;
        }

        .demo a:active {
            color: blue;
        }

        input:focus {
            color: red;
        }
    </style>
</head>

<body>
<nav>
    <ul class="demo">
        <li><a href="http://www.sina.com.cn" target="_blank">新浪网</a></li>
        <li><a href="http://www.sohu.com" target="_blank">搜狐</a></li>
        <li><a href="http://www.163.com" target="_blank">163</a></li>
        <li><a href="http://www.qq.com" target="_blank">QQ</a></li>
        <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
    </ul>
    <input>
</nav>
</body>
</html>

目标伪类选择":target"是众多实用的CSS3新特性中的一个，可以用来匹配HTML的URL中某个标识符的目标元素。具体来说，URL中的标识符通常会包含一个井号(#)，后面带有一个标识符名称。换种说法，在 Web页面中，一些URL拥有片段标识符，它由一个并号(#)后跟一个锚点或元素ID组合而成，可以链接到页面的某个特定元素。":target"伪类选择器选取链接的目标元素，然后供定义样式。该选择：器定义的样式在用户单击页面中的超链接并且跳转后方起作用。
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 CSS">
<meta content="target选择器">
<title>target选择器</title>
<style type="text/css">
div {
    margin:5px;
    width:300px;
    height:300px;
    background-color:#ccc;
    float:left;/*向左浮动*/
}
:target {
    background-color:#f00;/*鼠标悬停的背景色为红色*/
}
</style>
</head>
<body>
<nav>
    <ul>
        <li id="titleInfo">请选择访问的网站：</li>
    	<li><a href="#PartA">区块A</a></li>
    	<li><a href="#PartB">区块B</a></li>
    	<li><a href="#PartC">区块C</a></li>
    </ul>
</nav>
<div id="PartA"></div>
<div id="PartB"></div>
<div id="PartC"></div>
</body>
</html>

7.伪元素

伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器。在CSS中，主要有四个伪元素选择器。

1.first-line

first-line伪元素选择器用于为某个元素中的第一行文字使用样式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first-line选择器</title>
<style>
p:first-line {
    font-size:16px;
    color:#f00;
}
</style>
</head>

<body>
<article>
    <h2>《面朝大海，春暖花开》-海子</h2>
    <p>从明天起，做一个幸福的人。喂马，劈柴，周游世界...</p>
    <h2>《雨巷》-戴望舒</h2>
    <p>撑着油纸伞，独自，彷徨在悠长、悠长，又寂寥的雨...</p>
</article>
</body>
</html>

2.first-letter
first-letter伪元素选择器用于为某个元素中的文字的首字母使用样式。在英文中，首字母是第一个英文字符；在中文或日文中，首字母是第一个汉字。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first-letter选择器</title>
<style>
p:first-letter {
    font-size:40px;
    color:#f00;
}
</style>
</head>
<body>
<article>
    <h2>《面朝大海，春暖花开》-海子</h2>
    <p>从明天起，做一个幸福的人。喂马，劈柴，周游世界...</p>
    <p>从明天起，和每一个亲人通信。告诉他们我的幸福。...</p>
    <p>陌生人，我也为你祝福。愿你有一个灿烂的前程，愿...</p>
</article>
</body>
</html>

3.before

before伪元素选择器用于在某个元素之前插入一些内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>before选择器</title>
<style type="text/css">
li {
    height:20px;
    list-style:none;
    font-size:13.5px;
    vertical-align:middle;
    border-bottom:1px dashed #cccccc;
    padding-top:8px;
}
li:before {
    content: "图书";
    margin-right:10px;
}
</style>
</head>
<body>
<h3>现代诗精选</h3>
<ul>
    <li>中国 | 《沪杭车中》-徐志摩
    <li>日本 | 《初恋》-岛崎藤村
    <li>中国 | 《只要彼此爱过一次》-汪国真
    <li>印度 | 《你一定要走吗？》-泰戈尔
    <li>美国 | 《茶的情诗》-张错
    <li>英国 | 《好吧，我们不再一起漫游》-拜伦
    <li>中国 | 《这也是一切》-舒婷
    <li>印度 | 《假如我今生无缘遇到你》-泰戈尔
</ul>
</body>
</html>

4.after

after伪元素选择器用于在某个元素之后插入一些内容。

8.字体大小与颜色

font-size 属性用来定义文本的大小。属性值可以为绝对值或相对值。绝对值是将文本设置为指定的大小，此时不允许用户在所有浏览器中改变文本大小(不利于可用性)，绝对大小在确定了输出的物理尺寸时很有用。相对值是相对于周围的元素来设置大小，允许用户在浏览器中改变文本大小。
W3C 推荐使用相对值 em 来定义文本大小。1em 等于当前的字体尺寸，如果一个元素的 font-size 为 12 像素，那么对于该元素，1em 就等于12 像素。在设置字体大小时，em 的值会相对于父元素的字体大小的变化而改变。
案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体大小</title>
<style>
body {
    font-size:12px;
}

.p1 {
    font-size:12px;
}
.p2 {
    font-size:14px;
}
.p3 {
    font-size:1.5em;
}
.p4 {
    font-size:180%;
}
</style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

color 属性规定文本的颜色，该属性设置了一个元素的前景色（在HTML表现中，就是元素文本的颜色）。颜色通常有如下的表达方式，背景颜色 background-color 的用法与文本颜色 color 相同。

color_name        规定颜色值 为颜色名称的颜色(比如red)
hex_number        规定颜色值为十六进制值的颜色(比如#000000)
rgb_number        规定颜色值为rgb代码的颜色(比如rgb(255,0,0))
rgb_alpha         规定颜色的值为 rgb和透明度(比如rgba(255,0,0,0.5))
inherit           规定应该从父元素继承颜色（默认）

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>color</title>
    <style>
        .p1 {
            color: red;
        }

        .p2 {
            color: #ff0000;
        }

        .p3 {
            color: rgb(255, 0, 0);
        }

        .p4 {
            color: rgba(255, 0, 0, 0.5);
        }
    </style>
</head>
<body>
<p class="p1">red 红色</p>
<p class="p2">#ff0000 十六进制的红色</p>
<p class="p3">rgb(255,0,0) rgb的红色</p>
<p class="p4">rgb(255,0,0,0.5) rgb的红色且透明度为0.5的颜色</p>
</body>
</html>

注意：像 #ff0000 这种层叠的样式可以简写为 #f00，#e30000 不能简写为 #e300。

9.加粗与缩进

font-weight 属性用来定义字体的粗细。属性值下所示。

nomal        默认值，定义标准的字符
bold         定义粗体字符
lighter      定义更细的字符
100-900      定义由粗到细的字符，400 等同于normal,而700等同于bold
inherit      规定应该从父元素继承字体的粗细

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体加粗</title>
<style>
body {
    font-size:12px;
    font-weight:bold;
}
h3 {
    font-weight:normal;
}
.p1 {
    font-weight:bold;
}
.p2 {
    font-weight:inherit;
}
.p3 {
    font-weight:100;
}
.p4 {
    font-weight:600;
}
</style>
</head>
<body>
<h3>see you again</h3>
<p class="p1">It's been a long day without you my friend</p>
<p class="p2">It's been a long day without you my friend</p>
<p class="p3">It's been a long day without you my friend</p>
<p class="p4">It's been a long day without you my friend</p>
</body>
</html>

text-indent 属性规定文本块中首行文本的缩进。该属性值可以为像素值（px）、百分比或相对值 em，可以为正值或负值，如果使用负值，那么首行会被缩进到左边。

text-indent: 30px;

em 是一个相对的大小，我们可以这样来设置1 em，0.5 em，1.5 em 等，而且 em 还可以指定到小数点后三位，比如“1.365em”。

而其中“相对”的意思是指相对于元素父元素的 font-size。比如：

如果在一个设置字体大小为“16px”，此时这个的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；

使用 em 布局是希望在父节点中修改字体大小时，整个网站的页面字体都跟随变化。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text-indent</title>
    <style>
        body {
            font-size: 20px;
        }

        .p1 {
            text-indent: 10px;
        }

        .p2 {
            text-indent: 10%;
        }

        .p3 {
            text-indent: 2em;
        }

        .p4 {
            text-indent: 40px;
        }
    </style>
</head>
<body>
<p class="p1">text-indent</p>
<p class="p2">text-indent</p>
<p class="p3">text-indent</p>
<p class="p4">text-indent</p>
</body>
</html>

10.字符间隔与对齐

letter-spacing 属性用来定义增加或减少字符间的空白(字符间距)。

normal            默认，规定字符间没有额外的空间
length            定义字符间的固定空间(允许使用负值 10px)
inherit           规定应该从父元素继承letter-spacing属性的值

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔，normal 就相当于值为0。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>letter-spacing</title>
    <style>
        .p1 {
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
<p class="p1">letter-spacing</p>
</body>
</html>

text-align 属性规定元素中文本的水平对齐方式，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。

left        左对齐，把文本排列到左边，默认值:由浏览器决定
right       右对齐，把文本排列到右边
center      居中对齐，把文本排列到中间
justify     实现两端对齐文本效果
inherit     规定应该从父元素继承text-align属性的值

值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后调整单词和字母间的间隔，使各行的长度恰好相等。两端对齐在实际开发中很少使用。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text-align</title>
    <style>
        .p1 {
            text-align: left;
        }
        .p2{
            text-align: right;
        }
        .p3{
            text-align: center;
        }
        .p4{
            text-align: justify;
        }
    </style>
</head>
<body>
<p class="p1">text-align</p>
<p class="p2">text-align</p>
<p class="p3">text-align</p>
<p class="p4">text-align</p>
</body>
</html>

11.行高与装饰

line-height 属性用来设置行间的距离(行高)，该属性会影响行框的布局，在应用到一个块级元素时，其定义了该元素中基线之间的最小距离，属性值下所示。

normal            默认值。设置合理的行间距
number            设置数字，此数字会与当前字体尺寸相乘来设置行间距（line-height:2）
length            设置固定的行间距(如12px)
%                 基于当前字体尺寸的百分比设置行间距
inherit           规定应该从父元素继承line-height属性的值

通常在开发中，经常使用行高大小与父级元素大小相同，达到竖直居中效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>line-height</title>
    <style>
        * {
            margin: 0;
        }

        body {
            font-size: 20px;
        }

        .p1 {
            line-height: 2;
            background-color: aqua;
        }

        .p2 {
            line-height: 40px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<p class="p1">line-height</p>
<div class="p2">line-height</div>

</body>
</html>

注意：* { margin: 0; } 是为了清除 p 和 body 标签默认的外边距 margin。

text-decoration 属性规定添加到文本的修饰。通常在开发中使用 text-decoration 清除或更换 a 标签的默认样式。

none            默认，定义标准的文本
underline       定义文本下的一条线
overline        定义文本上的一条线
line-through    定义穿过文本的一条线

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text-decoration</title>
    <style>
        a {
            text-decoration: none;
        }

        .p1 {
            text-decoration: underline;
        }

        .p2 {
            text-decoration: overline;
        }

        .p3 {
            text-decoration: line-through;
        }

    </style>
</head>
<body>

<a href="#">我是a标签</a>
<p class="p1">我是</p>
<p class="p2">我是</p>
<p class="p3">我是</p>
</body>
</html>

12.溢出和阴影

在网页开发过程中，可能会遇到内容溢出而导致网页变形的问题。通常会通过 JavaScript 截取字符串或网站后台程序截取一定的字符串，将超出宽度的内容以省略号.... 显示，但这两种方法都有其不足之处，如中英文计算字符长度的问题，会导致截取字符串长度无法控制，从而降低程序的通用性。CSS3 新增了 text-overflow 属性，使用该属性可快速地解决上述问题。text-overflow 属性规定当文本溢出包含元素时发生的事情，text-overflow 在使用时父元素必须加 overflow:hidden; 并且强制文本不换行 white-space:nowrap；具体如下所示。

clip          修剪文本（默认）
ellipsis      显示省略符号来代表被修剪的文本
string        使用给定的字符串来代表被修剪的文本（只支持火狐浏览器）

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本溢出</title>
    <style>
        body {
            font-size: 12px;
        }

        p {
            width: 150px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            white-space: nowrap;
        }

        .p2 {
            text-overflow: clip;
        }

        .p3 {
            text-overflow: ellipsis;
        }

        .p4 {
            text-overflow: "~~~";
        }
    </style>
</head>
<body>
<h3>再别康桥</h3>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

text-shadow 属性用来给页面上的文字添加阴影效果，属性值如下所示。

h-shadow        必需，水平阴影的位置，允许负值
v-shadow        必需，垂直阴影的位置，允许负值
blur            可选，模糊的距离
color           可选，阴影的颜色

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文字阴影</title>
    <style>
        body {
            text-align: center;
        }

        .p1 {
            font-size: 30px;
            color: #f30;
            text-shadow: 10px 10px;
        }

        .p2 {
            font-size: 30px;
            color: #f30;
            text-shadow: 10px 10px 5px;
        }

        .p3 {
            font-size: 30px;
            color: #f30;
            text-shadow: 10px 10px 5px #222;
        }

        .p4 {
            font-size: 30px;
            color: #f0c;
            text-shadow: 10px 10px 3px #ffff00,
            20px 20px 6px #66ff66,
            30px 30px 9px #00ccff;
        }
    </style>
</head>
<body>
<h1>再别康桥</h1>
<p class="p1">轻轻的我走了，正如我轻轻的来；</p>
<p class="p2">我轻轻的招手，作别西天的云彩。</p>
<p class="p3">那河畔的金柳，是夕阳中的新娘；</p>
<p class="p4">波光里的艳影，在我的心头荡漾。</p>
</body>
</html>

13.盒子模型

现代 Web 前端的布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子与它们的摆放控制，会发现再复杂的页面也不过如此。

盒子是一个概念，也可以说是容器，可以在里面放置网页中需要显示的内容，文档中每一个元素都会产生一个盒子，盒子拥有很多属性，比如 width、height、padding、border 和 margin 等。

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>盒子模型</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>

宽和高：width/height

这里讲的宽和高，指的是元素内容区域的宽和高，而不是盒子的实际宽度和高度。

元素的宽度指 width 的属性值，高度指 height 的属性值。属性值单位可以为长度单位或百分比，取值为正值。

边框：border

任何元素都可以定义边框，并都能够很好地显示出来。边框在网页布局中就是用来分割模块的。可以为边框指定样式、颜色或宽度。宽度属性值可以指定长度值，比如 2px 或 0.l em 或者使用 3 个关键字(thin、 medium (默认值)和 thick)之一”。颜色可以省略，浏览器会根据默认值来解析。当为元素各边框定义不同颜色时，边角会平分来划分颜色的分布。

边框有 border、border-style、border-width、border-color、border-top、border-right、border-bottom、border-left 八种常用属性，如下所示：

border            简写属性，用于把针对四个边的属性设置在一个声明中
border-style      用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-width      简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
border-color      简写属性，设置元素的所有边框中可见部分的颜色，或为四个边分别设置颜色
border-bottom     简写属性，用于把下边框的所有属性设置到一个声明中
border-left       简写属性，用于把左边框的所有属性设置到一个声明中
border-right      简写属性，用于把右边框的所有属性设置到一个声明中
border-top        简写属性，用于把上边框的所有属性设置到一个声明中

border-style 值：

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .p1 {
            border: 8px solid #f00;
        }

        .p2 {
            border-top: green solid 5px;
            border-bottom: cornflowerblue solid 5px;
            border-left: greenyellow solid 5px;
            border-right: purple solid 5px;
        }

        .p3 {
            border-width: 14px;
            border-color: aqua;
            border-top-style: dotted;
            border-right-style: dashed;
            border-bottom-style: solid;
            border-left-style: double;
        }

        .p4 {
            border-color: aqua;
            border-width: 14px;
            border-top-style: groove;
            border-right-style: ridge;
            border-bottom-style: inset;
            border-left-style: outset;
        }
    </style>
</head>
<body>
<p class="p1">两个不同的边界样式</p>
<p class="p2">两个不同的边界样式</p>
<p class="p3">两个不同的边界样式</p>
<p class="p4">两个不同的边界样式</p>
</body>
</html>

14.外边距

外边距相当于文档中的页边距，是元素边框边缘与相邻元素之间的距离，主要用来分割各种元素，设置元素之间的距离。

定义元素外边距使用 margin 属性，属性值单位可以为长度单位或百分比，取值可以为正值或负值。根据实际需要灵活地设置元素的 margin 值可以实现各种复杂的网页布局。同时外边距还有专门设置某一方向上外边距的属性：margin-top、magin-right、margin-bottom、margin-left 四种属性，关于外边距的属性说明如下所示。

margin            在一个声明中设置所有外边距属性
margin-bottom     设置元素的下外边距
margin-left       设置元素的左外边距
margin-right      设置元素的右外边距
margin-top        设置元素的上外边距

下面的声明在 h1 元素的各个边上设置了1/4 英寸宽的空白。

h1{margin:0.25in;}

下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素(px)。这些值的顺序是从上外边距(top) 开始围着元素顺时针旋转计算的。

h1 {margin : 10px 0px 15px 5px;}

另外，还可以为 margin 设置一个百分比数值。百分比数是相对于父元素的 width 计算的。下面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

p {margin : 10%;}

简写规则：
在 Web 前端开发中，有时需要输入一些重复的值，如下所示:

p {margin: 0.5em 1em 0.5em 1em;}

这种情况下可以使用值复制，不必重复地键入相同的数字。上面的规则与下面的规则是等价的。

p {margin: 0.5em lem;}

规则如下

如果为外边距指定了 3 个值，则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。
如果给定了 2 个值，第 4 个值会从第 2 个值复制得到，第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。
如果只给定一个值，那么其他 3 个外边距都由这个值(上外边距)复制得到。

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>margin测试</title> 
<style>
p {
    background-color:yellow;
}
p.margin {
    margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>

外边距合并：

外边距合并（叠加）是一个相对简单的概念。但是在对网页进行布局时，会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并，如图所示。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和下外边距，或者上边距，或者下边距也会发生合并，如图所示。

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并，如图所示。

如果空元素外边距遇到另一个元素的外边距，也会发生合并，如图所示。这就是一系列的。段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

解决上面描述的外边距合并问题行之有效的办法是合理的利用内边距与外边距组合使用，因为外边距和内边距不会合并。

注意：

1、只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

2、当为行内元素（节元素 span、a）定义外边距时，只能看到左右外边距对布局的影响，但是上下外边距犹如不存在一般，不会对周围元素产生影响。对于块级元素来说，外边距都能够很好地被解析，如 div 。

15.内边距

内边距就是元素包含的内容与元素边框内边沿之间的距离。定义内边距使用 padding 属性，属性值单位可以为长度单位或百分比，取值可以为正值，但不允许使用负数值。内边距有 padding、padding-top、padding-right、padding-bottom、padding-left 五种属性，如下所示：

padding                在一个声明中设置所有内边距属性
padding-bottom         设置元素的下内边距
padding-left           设置元素的左内边距
padding-right          设置元素的右内边距
padding-top            设置元素的上内边距

如果希望所有 h1 元素的各边都有 10 像素的内边距，代码如下所示:

h1 {padding: 10px;}

还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。

h1 {padding: 10px 0.25em 2px 20%;}

也可通过使用单边内边距属性，分别设置上、右、下、左内边距，实现的效果与上面的简写规则是完全相同的。

h1 { 
    padding-top: 10px; 
    padding-right: 0.25em; 
    padding-bottom: 2px; 
    padding-left: 20%; 
}

注意：
1.百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
2.上下内边距与左右内边距参照一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
内边距与外边距差异

当元素没有定义边框时，可以把内边距当作外边距来使用，用来调节元素与其他元素之间的距离。由于外边距相邻时会出现重叠现象，而且比较复杂，使用内边距来调节元素之间的距离往往不用考虑边距重叠的问题。
当为元素定义背景时，对于外边距区域来说，背景图像是不显示的，它永远表现为透明状态：而内边距区域却可以显示背景。
行内元素的内边距能够影响元素的高度，而外边距不存在这样的问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            margin-top: 20px;
            padding: 10px;
            width: 500px;
            height: 200px;
            background: aqua;
        }

        span {
            padding: 20px;
            background: gray;
        }
    </style>
</head>
<body>
<h1>H1</h1>
<span>span</span>
</body>
</html>

16.盒子类型

CSS 提供了 display 属性来控制盒子的类型，盒子的基本类型如下所示。

none                 此元素不会被显示
block                此元素将显示为块级元素，并且前后会带有换行符
inline               默认。此元素会被显示为行内元素，元素前后没有换行符
inline-block         行内块元素
list-item            此元素会作为列表显示
table                此元素会作为块级表格来显示(类似<table>), 表格前后带有换行符
inline-table         此元素会作为内联表格来显示(类似<table>), 表格前后没有换行符
table-row-group      此元素会作为一一个或多个行的分组来显示(类似<tbody>)
table- column-group  此元素会作为一个或多个列的分组来显示(类似<colgroup> )
table-column         此元素会作为一个单元格列显示(类似<col>)
table-cell           此元素会作为一个表格单元格显示( 类似<d>和<th>)
table-caption        此元素会作为一个表格标题显示(类似<caption> )
inherit              规定应该从父元素继承display 属性的值
run-in               分配对象为块对象或基于内容之上的内联对象

1.none

display 属性可指定为 none 值，用于设置目标对象隐藏，一旦该对象隐藏，其占用的页面空间也会释放。

2.block

block 类型的盒子会占据一行，允许通过 CSS 设置高度和宽度。一些元素默认就是 block 类型，比如 div、p 等。使用该属性也可以将行内元素(节元素）如： span 标签转换为块元素。

3.inline

inline 类型的盒子不会占据一行(默认允许在一行放置多个元素)，即使用 CSS 设置宽度和高度也不会起作用。一些元素默认就是 inline 类型，比如 span、a。

4.inline-block

通过为 display 属性设置 inline-block，即可实现这种盒子类型，它是 inline 和 block 的综合体， inline-block 类型既不会占据一行，也支持 width 和 height 指定宽度和高度外边距和内边距，同时也不会有边距合并问题。通过使用 inline-block 类型可以非常方便地实现多个 div 元素的并列显示。

注意：与浮动不同的是 div 之间的空格会占用位置如果想解决这个问题，需要在父类上添加样式 display: table;。

5.list-item（不常用）

list-item可以将目标元素转换为类似 ul 的列表元素，也可以同时在元素前添加列表标志。

6.inline-table（不常用）

在默认情况下，table 元素属于 block 类型，也就是说，该元素默认占据一行，它的左边不允许出现其他内容，它的右边也不允许出现其他内容。该元素可通过 width、height 设置宽度和高度。

CSS 为 table 元素提供了一个 inline-table 类型，它允许设置表格的 width、height 值，而且允许表格的左边、右边出现其他内容。

7.run-in（不常用）

run-in 类型有点相似于 inline 类型，run-in 类型的元素希望显示在它后面的元素内部：如果 run-in 类型的元素后面紧跟一个 block 类型的元素，那么 run-in 类型的元素将被放入后面的元素中显示。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1 {
            display: none;
        }

        span {
            display: block;
            width: 200px;
            height: 100px;
            background: gray;
        }

        .inline {
            display: inline;
        }

        .content {
            display: table;
        }

        .content .inline-block {
            display: inline-block;
            width: 100px;
            background: peru;
        }
    </style>
</head>
<body>
<h1>不显示的H1</h1>
<span>span</span>
<div class="inline">测试inline</div>
<div class="content">
    <div class="inline-block">1</div>
    <div class="inline-block">2</div>
    <div class="inline-block">3</div>
</div>
</body>
</html>

17.内容溢出与阴影

在样式中指定了盒子的宽度和高度，就可能出现内容在盒子中容纳不下的情况，这时可以使用 overflow 属性来指定如何显示盒子中容纳不下的内容。同时，与 ovrflow 属性相关的还有 overflow-x 属性、overflow-y 属性及 text-overflow 属性。

1.overflow

使用 overflow 属性来指定对于盒子中容纳不下的内容的显示方法。overflow 有 visible、hidden、scroll、auto、inherit 五种属性值，如下所示：

visible            默认值。内容不会被修剪，会呈现在元素框之外
hidden             内容会被修剪，并且其余内容是不可见的
scroll             内容不会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto               如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit            规定应该从父元素继承overflow 属性的值

2.overflow-x 和 overflow-y

如果使用 overlow-x 属性或 overflow-y 属性，可以单独指定在水平方向上或垂直方向上内容超出盒子的容纳范围时的显示方法，使用方法与 overflow 属性的使用方法相似。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .overflowTest1 {
            background-color: #eee;
            width: 200px;
            height: 50px;
            border: 1px dotted black;
            margin-top: 20px;
        }

        .overflowTest2 {
            margin-top: 20px;
            background-color: #eee;
            width: 200px;
            height: 50px;
            border: 1px dotted black;
            overflow: hidden;
        }

        .overflowTest3 {
            margin-top: 20px;
            background-color: #eee;
            width: 200px;
            height: 50px;
            border: 1px dotted black;
            overflow: scroll;
        }

        .overflowTest4 {
            margin-top: 20px;
            background-color: #eee;
            width: 200px;
            height: 50px;
            border: 1px dotted black;
            overflow-y: scroll;
        }

    </style>
</head>
<body>
<div class="overflowTest1">
    <p>这里的文本内容会溢出元素框。</p>
</div>
<div class="overflowTest2">
    <p>这里的文本内容会溢出元素框。</p>
</div>
<div class="overflowTest3">
    <p>这里的文本内容会溢出元素框。</p>
</div>
<div class="overflowTest4">
    <p>这里的文本内容会溢出元素框。</p>
    <p>这里的文本内容会溢出元素框。</p>
    <p>这里的文本内容会溢出元素框。</p>
</div>
</body>
</html>

在 CSS3 中，可以使用 box-shadow 属性让盒子在显示时产生阴影效果。

box-shadow 属性 box-shadow 属性可以为所有盒模型的元素整体增加阴影，是一个复合属性。该属性值如下所示。

h-shadow        必需。水平阴影的位置。允许负值
v-shadow        必需。垂直阴影的位置。允许负值
blur            可选。模糊距离
spread          可选。阴影的尺寸
color           可选。阴影的颜色。请参阅CSS颜色值
inset           可选。将外部阴影(outest) 改为内部阴影

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        div {
            width: 300px;
            height: 50px;
            border: 1px solid black;
            margin: 30px;
        }

        .box1 {
            box-shadow: -10px -8px 6px #444;
        }

        .box2 {
            box-shadow: 10px 8px #444; /*右下阴影，不指定模糊程度*/
        }

        .box3 {
            box-shadow: 10px 8px 20px #444; /*右下阴影，增大模糊程度*/
        }

        .box4 {
            box-shadow: 10px 8px 10px -10px red; /*右下阴影，缩小阴影区域*/
        }
        .box5 {
            box-shadow: 0 0 10px 7px red inset; /*右下阴影，缩小阴影区域*/
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>

18.浮动

网页的布局主要通过 float 属性来实现，float 属性定义元素在哪个方向浮动，属性值有以下四种:

left     定义向左浮动。
right    定义向右浮动。
none     为 float 属性的默认值，表示元素不浮动，并会显示其在页面中出现的位置。
inherit  规定应该从父元素继承 float 属性值。

浮动元素特性

当一个元素被设置为浮动元素后，元素本身的属性也会发生一些改变，具体如下所示。

①空间的改变。当网页中一个元素被定义为浮动显示时，该元素就会自动收缩自身体积为最小状态。如果该元素被定义了高度或宽度，则该元素将以设置的高度与宽度进行显示；如果浮动元素包含了其他对象，则元素体积会自动收缩到仅能容纳所包含的对象大小；如果没有设置大小或没有任何包含对象，浮动元素将会缩小为一个点，甚至不可见。

②位置的改变。当网页中的一个元素浮动显示时，由于所占空间大小的变化，会使得其自动地向左或向右浮动直到碰到其父级元素的边框或内边距，或者碰到相邻浮动元素的外边距或边框时才会停下来。

③不能撑起父元素。当元素浮动之后，它原来的位置就会被下面的对象上移填充掉。它自身的宽高再不能撑起父元素。这是它和 inner-block 的主要区别。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .content {
            background: gray;
        }

        .content .float-left, .float-right {
            width: 100px;
            height: 50px;
            background: aqua;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
        }

        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="float-left">1</div>
    <div class="float-left">2</div>
    <div class="float-left">3</div>
    <div class="float-right">4</div>
</div>
</body>
</html>

浮动布局打破了原有网页元素的显示状态，会产生一些布局问题。CSS 为了解决这个问题，又定义了 clear 属性，用来解决浮动布局中页面杂乱无章的现象。

clear 属性规定元素的哪一侧不允许存在其他浮动元素，属性值有五种情况。

left、right、both: both 分别规定在左侧不允许浮动元素、在右侧不允许浮动元素 和在左右两侧均不允许浮动元素。 
none 为 clear 元素的默认值，允许浮动元素出现在两侧。 
inherit 规定应该从父元素继承 clear 属性的值。

元素浮动以后，其所在的位置会被下方不浮动的元素填充掉，而有些时候这样的填充会破坏页面布局，clear 元素可以解决这个问题。在不需要浮动元素中添加 clear 属性值，会使不浮动元素显示在浮动元素的下边距边界之下。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>
    <style>
        div {
            border: 1px solid #F00;
            height: 50px;
        }

        .left, .middle, .right {
            float: left;
            width: 33%;
        }

        .left {
            height: 100px;
        }

        .footer {
            clear: left;
        }
    </style>
</head>
<body>
<div >头部信息</div>
<div class="left">左栏信息</div>
<div class="middle">中栏信息</div>
<div class="right">右栏信息</div>
<div class="footer">脚部信息</div>
<div>test</div>
</body>
</html>

19.定位布局

CSS 定义了 position 属性来控制网页元素的定位显示，它与 float 属性协同作用，实现了网页布局的精确性和灵活性的高度统一。float 和 position 是 CSS 布局中最基本、最重要的两个技术概念，是最为基础的布局属性。

(1)定位坐标值

为了灵活地定位页面元素，CSS 定义了四个坐标属性：top、right、bottom 和 left。通过这些属性的联合使用，可包含块的四个内顶角来定位元素在页面中的位置。

top 属性表示定位元素项边外壁到包含块元素顶部内壁的距离。

right 属性表示定位元素右边外壁到包含块元素右侧内壁的距离。

left 属性表示定位元素左边外壁到包含块元素左侧内壁的距离。

bottom 属性表示定位元素底边外壁到包含块元素底部内壁的距离。

(2) position

position 属性用于确定元素的位置，该属性可将图片放置到任何位置，也可以使导航始终显示于页面最上方。CSS 的定位核心正是基于这个属性实现的。属性值有五种情况。

①static

static 为 position 的默认属性值，没有定位，元素出现在正常流中(忽略 top、bottom、left、right 或者 z-index 声明)。

任何元素在默认的状态下都会以静态定位来确定自己的位置，所以当没有定义 position 时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态位置下，开发人员无法通过坐标值(top、bottom、left 和right)来改变它的位置。

②absolute

absolute 可用于生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left、top、right、bottom 属性进行设置。当 position 属性取值为 absolute 时，程序就会把元素从文档流中拖出来，根据某个参照物坐标来确定显示位置。绝对定位是网页精准定位的基本方法。

③fixed

fixed 可用于生成固定定位的元素，即相对于浏览器窗口进行定位。元素的位置通过 top、right、bottom、left 属性进行定位。固定定位是绝对定位的一种特殊形式，它是以浏览器作为参照物来定义网页元素的。如果定义某个元素固定显示而不受文档流的影响，也不受包含块的位置影响，它始终以浏览器窗口来定位自已的显示位置不管浏览器的滚动条如何滚动，也不管浏览器窗口大小如何变化，该元素都会显示在浏览器窗口内。

④relative

relative 可用于生成相对定位的元素，相对于其正常位置进行定位。例如，"left:20px" 会向元素的左侧位置添加 20 像素。相对定位是一种折中的定位方法，是在静态定位和绝对定位之间取的一个平衡点。所谓相对定位就是使被应用元素不脱离文档流，却能通过坐标值以原始位置为参照物进行偏移。虽然，相对定位元素偏移了原始位置，但是它的原始位置所占据的空间仍被保留，并没有被其他元素挤占。认识并理解这一属性特别重要，这是因为在开发中经常需要校正元素的显示位置，但并不希望因为这些校正元素的修改而影响到其他元素的显示位置。

⑤inherit

inherit 用于从父元素继承 position 属性的值。

(3)定位层叠

Css 可通过 z-index 属性来排列不同定位元素之间的层叠顺序。该属性可以设置为任意的整数值，数值越大，所排列的顺序就越靠上(前)。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        body {
            height: 1000px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background: gray;
            font-size: 50px;
            line-height: 100px;
            text-align: center;
            color: white;
        }

        .box1 {
            position: static;
            top: 10px;
        }

        .box2 {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1000;
        }

        .box7 {
            position: absolute;
            top: 0;
            right: 0;
        }

        .box4 {
            position: fixed;
            bottom: 0;
            right: 0;
        }

        .box5 {
            position: relative;
            left: 150px;
        }

    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
</body>
</html>

20.背景图片

属性可以为元素指定背景图像。如果图像包括透明区域，下面的内容将会显示出来。为防止这一点，网页设计者通常将 background-image 属性和 background-color 属性一起使用。背景颜色显示在背景图像下面，提供了不透明的背景。background-image 属性需要一个 URL 来选择作为背景的图像。用作背景图像的图片类型可以为浏览器支持的任何格式，通常为 GIF、JPG 和 PNG 格式。

b{background-image:url(img.png);background-color:#fff;}
body{ background-image:url(img.gif);}

注意：透明背景的图片一般常见的有两种格式分别是 png 或者 gif 格式，但是 gif 格式更多的不是体现在透明方面，一般主要体现在动画上。

背景重复：background-repeat

属性决定当背景图像比元素的空间小时将如何排列。该属性的默认值为 repeat，这将让图像在水平和垂直两个方向上平铺。当该属性取值为 repeat-x 时，背景图像将仅仅在水平方向上平铺；当该属性取值为 repeat-y 时，背景图像将仅仅在垂直方向上平铺；当该属性取值为 no-repeat 时，背景图像将不会平铺。

p{background-image:url(img.gif);background-repeat:repeat-x;}
.titleup{background-image:url(img.gif);background-repeat:repeat-y;}
body{background-image:ur(img.gif);background-repeat:no-repeat;}

背景定位：background-position

指定背景图像在元素的画布空间中的定位方式，有三种方法指定位置，具体内容如下所示:

为图像的左上角指定一个绝对距离，通常以像素为单位。

可以使用水平和垂直方向的百分比来指定位置。

可以使用关键字来描述水平和垂直方向的位置。水平方向上的关键字为 left、center 和 right，垂直方向上的关键字为 top、center 和 bottom。在使用关键字时，未指明的方向上默认的取值为 center。

具体语法如下：

p{background-image:url(img.gif);background-position: l0px l0px;}
p{background-image:url(img.gif); background-position:20% 20%;}
body{background-image:url(img.gif);background-position:center center;}

注意：

1.如果仅仅设置了一个关键字，那么第二个关键字将取默认值 center。因此，在上面的例子中，关键字 center 只需用一次即可。

2.background 属性也可用于全面设置背景样式。该属性是一个复合属性，可用于同时设置背景色、背景图片、背景重复模式等。为更好地控制背景，一般不建议通过该属性来控制背景。

背景大小：background-size

在 CSS3 中，可以使用 background-size 属性来指定背景图像的尺寸。使用 background-size 属性指定背景图像尺寸的方法如下

background-size:40px 20px;

其中，40px 为背景图像的宽度，20px 为背景图像的高度，中间用半角空格进行分隔。如果要维持图像比例的话，可以在设定图像宽度与高度的同时，将另一个参数设定为 auto 。

21.圆角边框

使用 border-radius 属性指定盒子的圆角。

border-radius: 3px;

在 border-radius 属性中，可以指定两个半径，具体语法如下所示:

div{border-radius: 40px 20px;}

针对这种情况，各种浏览器的处理方式并不一致。在 Chrome 浏览器和 Safari 浏览器中，会绘制出一个椭圆形边框，第一个半径为椭圆的水平方向半径，第二个半径为椭圆的垂直方向半径。在 Firefox 浏览器与 Opera 浏览器中，将第一个半径作为边框左上角与右下角的圆半径来绘制，将第二个半径作为边框左下角与右上角的圆半径来绘制。

22.弹性布局 (自学)

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。

Flex 是 Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。

.box{
  display: flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。注意，设为Flex布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做cross size。

23.弹性盒子的属性 (自学)

以下6个属性设置在容器上。

flex-direction         弹性方向
flex-wrap              弹性换行
flex-flow              弹性浮动
justify-content        排满正文
align-items            排列项
align-content          排列正文

1.弹性方向 direction [dəˈrekʃn] 属性 flex-direction 属性决定主轴的方向（即项目的排列方向），它可能有4个值。

row                主轴为水平方向，起点在左端。（默认值）
row-reverse        主轴为水平方向，起点在右端。
column             主轴为垂直方向，起点在上沿。
column-reverse     主轴为垂直方向，起点在下沿。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 200px;
            background-color: #eee;
            display: flex;
            flex-direction: column;
        }

        .item {
            width: 90px;
            height: 90px;
            background-color: aqua;
            line-height: 90px;
            text-align: center;
            margin: 5px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
</body>
</html>

2.默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行，它可能取三个值。

nowrap            不换行。（默认）
wrap              换行，第一行在上方。
wrap-reverse      换行，第一行在下方。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 200px;
            background-color: #eee;
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            width: 90px;
            height: 90px;
            background-color: aqua;
            line-height: 90px;
            text-align: center;
            margin: 5px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>
</body>
</html>

3.弹性浮动 flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4.排满正文 justify-content [ˈdʒʌstɪfaɪ][kənˈtent]属性定义了项目在主轴上的对齐方式，它可能取5个值。

flex-start            左对齐（默认值）
flex-end              右对齐
center                居中
space-between         两端对齐，项目之间的间隔都相等。
space-around          每个项目两侧的间隔相等。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 200px;
            background-color: #eee;
            display: flex;
            justify-content: space-around;
        }

        .item {
            width: 90px;
            height: 90px;
            background-color: aqua;
            line-height: 90px;
            text-align: center;
            margin: 5px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
</body>
</html>

5.排列项 align-items [əˈlaɪn] [ˈaɪtəmz]属性定义项目在交叉轴上如何对齐，它可能取 5 个值。

flex-start            交叉轴的起点对齐。
flex-end              交叉轴的终点对齐。
center                交叉轴的中点对齐。
baseline              项目的第一行文字的基线对齐。
stretch               如果项目未设置高度或设为auto，将占满整个容器的高度。（默认值）

示意图：

6.排列正文 align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线（子元素只有一行），该属性不起作用，该属性可能取 6 个值。

flex-start             与交叉轴的起点对齐。
flex-end               与交叉轴的终点对齐。
center                 与交叉轴的中点对齐。
space-between          与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around           每根轴线两侧的间隔都相等。
stretch                轴线占满整个交叉轴。（默认值）

示意图：

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            background-color: #eee;
            display: flex;
            flex-wrap: wrap;
            align-content:space-around;
        }

        .item {
            width: 90px;
            height: 90px;
            background-color: aqua;
            line-height: 90px;
            text-align: center;
            margin: 5px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>
</body>
</html>

24.弹性元素的属性 (自学)

以下六个属性用于项目上。

order                顺序
flex-grow            弹性放大
flex-shrink          弹性缩小
flex-basis           弹性基准
flex                 弹性简写
align-self           排列自己

1.顺序 order 属性定义项目的排列顺序是一个数字。数值越小，排列越靠前，默认为 0。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            background-color: #eee;
            display: flex;
        }

        .item {
            width: 90px;
            height: 90px;
            background-color: aqua;
            line-height: 90px;
            text-align: center;
            margin: 5px;

        }

        .item:nth-of-type(2) {
            order: -1;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
</body>
</html>

2.弹性放大 flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            background-color: #eee;
            display: flex;
        }

        .item {
            width: 90px;
            height: 90px;
            background-color: aqua;
            line-height: 90px;
            text-align: center;
            margin: 5px;

        }

        .item:nth-of-type(2) {
            flex-grow: 2;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
</body>
</html>

3.弹性缩小 flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。为了计算方便建议大于1，负值对该属性无效。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            background-color: #eee;
            display: flex;
        }

        .item {
            width: 90px;
            height: 90px;
            background-color: aqua;
            line-height: 90px;
            text-align: center;
            margin: 5px;
        }

        .item:nth-of-type(2) {
            flex-shrink: 2;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>
</body>
</html>

4.弹性基准 flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。它可以设为像素值（比如350px），则项目将占据固定空间。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            background-color: #eee;
            display: flex;
        }

        .item {
            width: 90px;
            height: 90px;
            background-color: aqua;
            line-height: 90px;
            text-align: center;
            margin: 5px;
        }

        .item:nth-of-type(2) {
            flex-basis: 15px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">3</div>
    <div class="item">3</div>
    <div class="item">3</div>
    <div class="item">3</div>
</div>
</body>
</html>

5.flex属性是flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。flex: none | [ 'flex-grow''flex-shrink'? || 'flex-basis']

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6 排列自己 align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。该属性可能取6个值，除了auto，其他都与 align-items 属性完全一致。

flex-start            交叉轴的起点对齐。
flex-end              交叉轴的终点对齐。
center                交叉轴的中点对齐。
baseline              项目的第一行文字的基线对齐。
stretch               如果项目未设置高度或设为auto，将占满整个容器的高度。（默认值）

S妖O风F

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css基础

1.css 简介2.响应式3.基础选择器4.层次选择器5.属性选择器6.伪类选择器7.伪元素8.字体大小与颜色9.加粗与缩进10.字符间隔与对齐11.行高与装饰12.溢出和阴影13.盒子模型14.外边距15.内边距16.盒子类型17.内容溢出与阴影18.浮动19.定位布局20.背景图片21.圆角边框22.弹性布局23.弹性盒子的属性24.弹性元素的属性CSS (Cascading Style Shee)译作“层叠
复制链接

扫一扫