CSS-Cascading Style Sheet_层叠样式表_用法详解
2024-05-08 10:03:03
CSS Cascading Style Sheet
1. CSS 介绍
1. CSS 概念介绍
CSS 全称 Cascading Style Sheet 层叠样式表1. 专门用来为HTML标签添加样式2. 样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等3. 层叠属于CSS的三大特性之一4. 表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里
2. CSS 使用目的
1. CSS 之前
在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性,如下<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
</head>
<body>
<h1 align="center"><font color="pink" size="5">天净沙·秋思</font>
</h1>
<p align="center"><font color="pink" size="5">锦瑟无端五十弦,一弦一柱思华年。</font>
</p>
<p align="center"><font color="pink" size="5">庄生晓梦迷蝴蝶,望帝春心托杜鹃。</font>
</p>
<p align="center"><font color="pink" size="5">沧海月明珠有泪,蓝田日暖玉生烟。</font>
</p>
<p align="center"><font color="pink" size="5">此情可待成追忆,只是当时已惘然。</font>
</p>
</body>
</html>缺点1. 记忆困难：需要记忆每个标签的所有样式相关属性如果标签没有某个样式相关的属性,那么设置了也没有效果2. 代码耦合度高：HTML语义与样式耦合到一起3. 扩展性差：当某一类样式需要修改时,我们需要找到所有设置了该样式标签进行修改
2. CSS 之后
CSS 应运而生 很好地解决了html添加标签样式的三个缺点<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>h1,p {color: pink;font-size: 24px;text-align: center;}</style>
</head>
<body>
<h1>天净沙·秋思</h1>
<p>锦瑟无端五十弦,一弦一柱思华年。</p>
<p>庄生晓梦迷蝴蝶,望帝春心托杜鹃。</p>
<p>沧海月明珠有泪,蓝田日暖玉生烟。</p>
<p>此情可待成追忆,只是当时已惘然。</p>
</body>
</html>
3. CSS 使用方法
1. CSS 语法
CSS语法分为两部分：1. 选择器2. 声明声明由属性和值组成,多个声明之间用分号分隔,如下图CSS注释/*这是注释*/
2. CSS 四种引入方式
1. 内联式行内式是在标签的style属性中设定CSS样式,这种方式没有体现出CSS的优势,不推荐使用<p style="color: red;font-size: 50px;text-align: center">我是内联式</p>2. 嵌入式嵌入式是将CSS样式写在网页<head></head>标签内的<style></style>标签对中 格式如下<!DOCTYPE html><html> <head><style>p {color: red;font-size: 50px;text-align: center}</style></head><body><p>十年寒窗为哪般</p></body></html># 新建外部样式表,然后使用导入式和链接式引入
首先在与html文件同级目录下有一个css文件夹,该文件夹下新建一个外部样式表mystyle.css,内容为
p {color: red;font-size: 50px;text-align: center
}3. 导入式
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>/*形式一：*/@import "css/mystyle.css";/*形式二：*/@import url("css/mystyle.css");</style>
</head>
<body>
<p>一支穿云箭</p>
<p>千军万马来相见</p>
</body>
</html>4. 链接式（推荐使用）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<p>草原最美的花</p>
<p>火红的萨日朗</p>
</body>
</html>导入式与链接式的区别1. <link/>标签属于XHTML,@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说是无效的2. 导入式的缺点：导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式这是导入式固有的一个缺陷,用户体验差3. 链接式的优点：使用链接式与导入式不同的是它会在网页文件主体装载前装载CSS文件因此显示出来的网页从一开始就是带样式效果的它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点注意1. style标签必须放到head内,type="text/css" text指对象为网页中的文本 css是指定的文本类型2. type属性其实可以不用写,默认就是type="text/css"3. 设置样式时必须按照固定的格式来设置,key:value;
2. CSS 选择器
1. 基本选择器
1. id选择器
1. 作用根据指定的id名称,在当前界面中找到对应的唯一一个标签,设置属性2. 格式#id名称 {属性：值;}3. 注意点1. 在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的2. 每个标签都可以设置唯一一个id,id就相当于人/标签的身份证,因此在同一界面内id绝不能重复3. 引用id一定要加#4. id的命名只能由字符、数字、下划线组成,且不能以数字开头,更不能是html关键字如p,a,img4. 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>id选择器</title><style>#p1 {color: red;}#p2 {color: green;}#p3 {color: blue;}</style>
</head>
<body>
<p id="p1">山谷里的小溪</p>
<p id="p2">哗啦啦的流</p>
<p id="p3">让我轻轻的告诉你</p>
</body>
</html>
2. 类选择器
1. 作用根据指定的类名称,在当前界面中找到对应的标签,设置属性2. 格式.类名称 {属性：值;}3. 注意点1. 类名就是专门用来给某个特定的标签设置样式的2. 每个标签都可以设置一个或多个classclass就相当于人/标签的名称,因此同一界面内class可以重复3. 引用class一定要加点.4. 类名的命名规则与id的命名规则相同4. 案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>class选择器</title><style>.p1 {color: red;}.p2 {color: green;}.p3 {color: blue;}</style>
</head>
<body>
<p class="p1">My heart will go on</p>
<p class="p2">shape of you</p>
<p class="p3">Something just like this</p>
</body>
</html>5. 案例2第一行与第三行的颜色都是红色第一行与第二行的字体大小都是50px第二行与第三行内容有个下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>class选择器</title><style>.p1 {color: red;}.p2 {font-size: 50px;}.p3 {text-decoration: underline;}</style>
</head>
<body>
<p class="p1 p2">第一行内容</p>
<p class="p2 p3">第二行内容</p>
<p class="p1 p3">第三行内容</p>
</body>
</html>
3. 标签选择器
1. 作用根据指定的标签名称,在当前界面中找到所有该名称的标签,设置属性2. 格式标签名称 {属性：值;}3. 注意点：1. 只要是HTML的标签都能当做标签选择器2. 标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签3. 标签选择器,无论嵌套多少层都能选中4. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签选择器</title><style type="text/css">p {color: red;}</style>
</head>
<body><p>I see your monsters</p><ul><li><ul><li><ul><li><p>I see your pain</p></li></ul></li></ul></li></ul>
</body>
</html>
4. 通配符选择器
1. 作用选择所有标签2. 格式* {属性：值；}3. 注意点在企业开发中一般不会使用通配符选择器原因:由于通配符选择器是设置界面上所有的标签的属性所以在设置之前会遍历所有的标签如果当前界面上的标签比较多,那么性能就会比较差4. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>通配符选择器</title><style type="text/css">* {color: red;}</style>
</head>
<body><h1 >我是标题</h1><p >我是段落</p><a href="#">我是超链接</a>
</body>
</html>
2. 组合选择器
1. 后代选择器
1. 作用找到指定标签的所有后代（儿子,孙子,重孙子、、、）标签,设置属性2. 格式标签名1 xxx {属性：值;}3. 注意1. 后代选择器必须用空格隔开2. 后代不仅仅是儿子,也包括孙子、重孙子3. 后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class4. 后代选择器可以通过空格一直延续下去4. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器</title><style type="text/css">div p {color: red;}#id1 li p {font-size: 50px;}div ul li a {font-size: 100px;color: green;}</style>
</head>
<body><p>我是body下的段落1</p><!--如果想为div内所有标签都设置属性,无论用id还是class都不合理,因为当div内的标签过多,我们无法加那么多id或者class--><div id="id1" class="part1"><p>我是div下的段落1</p><p>我是div下的段落2</p><ul><li class="aaa"><p class="ccc">我是ul>li下的段落1</p><p class="ddd">我是ul>li下的段落</p><a href="">点我啊1</a></li><li><a href="#">点我啊2</a></li></ul></div><p>我是body下的段落2</p>
</body>
</html>
2. 子元素选择器
1. 作用找到制定标签的所有特定的直接子元素,设置属性2. 格式标签名1>标签名2 {属性：值;}
# 先找到名称叫做"标签名1"的标签,然后在这个标签中查找所有直接子元素名称叫做"标签名2"的元素3. 注意1. 子元素选择器之间需要用>符号链接,并且不能有空格比如div >p会找div标签的所有后代标签,标签名为">p"2. 子元素选择器只会查找儿子,不会查找其他嵌套的标签3. 子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class4. 子元素选择器可以通过>符号一直延续下去4. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子元素选择器</title><style type="text/css">body>p {color: green;}div>p {color: red;}.aaa>a {font-size: 100px;}div>ul>li>.ddd {color: blue;}</style>
</head>
<body><p>我是body下的段落1</p><div id="id1" class="part1"><p>我是div下的段落1</p><p>我是div下的段落2</p><ul><li class="aaa"><p class="ccc">我是ul>li下的段落1</p><p class="ddd">我是ul>li下的段落2</p><a href="">点我啊1</a></li><li><a href="#">点我啊2</a></li></ul></div><p>我是body下的段落2</p>
</body>
</html>
3. 毗邻选择器
CSS2 推出 又称相邻兄弟选择器
1. 作用选定紧跟其后的那个标签2. 格式选择器1+选择器2 {属性：值;}3. 注意点：1. 毗邻选择器必须通过+号链接2. 毗邻选择器只能选中紧跟其后的那个标签,不能选中被隔开的标签
4. 弟弟选择器
CSS3 推出 又称通用兄弟选择器
1. 作用给指定选择器后面的所有选择器中的所有标签设置属性2. 格式 选择器1~选择器2 {属性：值;}3. 注意点1. 通用兄弟选择器必须用~来链接2. 通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签无论有没有被隔开,都可以被选中4. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>兄弟选择器</title><style type="text/css">h1+p {font-size: 50px;}h1~p {color: red;}</style>
</head>
<body><h1>我是标题1</h1><a href="">有了这个标签,p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p><h1>我是标题2</h1><p>我是段落</p>
</body>
</html>
3. 交集/并集选择器
1. 交集选择器
1. 作用给所有选择器选中的标签中,相交的那部分标签设置属性2. 格式选择器1选择器2 {属性：值;}3. 注意1. 选择器与选择器之间没有任何链接符号2. 选择器可以使用标签名称、id、class3. 交集选择器在企业开发中并不多见,了解即可原因: p.part1 完全可以用.part1取代4. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>交集选择器</title><style type="text/css">p.part1 {color: red;}p#p1{font-size: 100px;}</style>
</head>
<body><p class="part1">我是段落</p><p id="p1">我是段落</p><p class="part1">我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p>
</body>
</html>
2. 并集选择器
1. 作用给所有满足条件的标签设置属性2. 格式选择器1,选择器2 {属性：值;}3. 注意1. 选择器与选择器之间必须用逗号来链接2. 选择器可以使用标签名称、id、class4. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>并集选择器</title><style type="text/css">.part1,h1,a {color: red;}</style>
</head>
<body><h1>哈哈啊</h1><p class="part1">我是段落</p><p id="p1">我是段落</p><p class="part1">我是段落</p><a href="#">我是我</a><p>我是段落</p><p>我是段落</p><p>我是段落</p>
</body>
</html>
4. 序列选择器
1. 作用css3中新推出的选择器中,最具代表性的的9个,又称为序列选择器过去的选择器中要选中某个必须加id或class,学习了这9个后不用加id或class,想选中同级别的第几个就选第几个2. 格式1. 同级别:first-child 同级别的第一个:last-child 同级别的最后一个:nth-child(n) 同级别的第n个:nth-last-child(n) 同级别的倒数第n个2. 同级别同类型:first-of-type 同级别同类型的第一个:last-of-type 同级别同类型的最后一个:nth-of-type(n) 同级别同类型的第n个:nth-last-of-type(n) 同级别同类型的倒数第n个3. 唯一:only-of-type 同类型的唯一一个:only-child 同级别的唯一一个3. 同级别1. 同级别的第一个示范一p:first-child { color: red;}代表：同级别的第一个,并且第一个要求是一个p标签<p>我是段落1</p><p>我是段落2</p><p>我是段落3</p><p>我是段落4</p><p>我是段落5</p><div><p>我是段落6</p></div>这样的话第一个p和div中的第一个p都变成红色示范二p:first-child {color: red;}代表：同级别的第一个,并且第一个要求是一个p标签<h1>w我是标题</h1><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p><p>我是段落4</p><p>我是段落5</p><div><p>我是段落6</p></div>这样的话只有div中的第一个p变红,因为在有在div内同一级别的第一个才是p注意点:first-child就是第一个孩子,不区分类型2. 同级别的最后一个示例一p:last-child {color: red;}代表：同级别的最后一个,并且最后一个要求是一个p标签<h1>我是标题</h1><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p><p>我是段落4</p><p>我是段落5</p><div><p>我是段落6</p></div><p>我是段落7</p>这样的话只有6跟7都变红3. 同级别的第n个示例一p:nth-child(3) {color: red;}代表：同级别的第3个,并且第3个要求是一个p标签<h1>我是标题</h1><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p><p>我是段落4</p><p>我是段落5</p><div><p>我是段落6.1</p><p>我是段落6.2</p><h1>我是标题</h1></div><p>我是段落7</p>这样的话只有“我是段落2”变红4. 同级别的倒数第n个示例一p:nth-last-child(3) {color: red;}代表：同级别的倒数第3个,并且第3个要求是一个p标签<h1>我是标题</h1><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p><p>我是段落4</p><p>我是段落5</p><div><p>我是段落6.1</p><p>我是段落6.2</p><h1>我是标题</h1></div><p>我是段落7</p>这样的话只有“我是段落6.1”和“我是段落5”被选中4. 同级别同类型
示例<h1>我是标题</h1><p>我是段落1</p><p>我是段落2</p><p>我是段落3</p><p>我是段落4</p><p>我是段落5</p><div><p>我是段落6.1</p><p>我是段落6.2</p><h1>我是标题</h1></div><p>我是段落7</p>1. 同级别同类型的第一个p:first-of-type {color: red;}“我是段落1”和“我是段落6.1”被选中2. 同级别同类型的最后一个p:last-of-type {color: red;}“我是段落7”和“我是段落6.2”被选中3. 同级别同类型的第n个p:nth-of-type(2) {color: red;}“我是段落2”和“我是段落6.2”被选中4. 同级别同类型的倒数第n个p:nth-last-of-type(2) {color: red;}“我是段落5”和“我是段落6.1”被选中5. 唯一1. 同类型的唯一一个p:only-of-type {color: red;}<h1>我是标题</h1><div><p>我是段落6.1</p><p>我是段落6.2</p><h1>我是标题</h1></div><p>我是段落7</p>“我是段落7“被选中2. 同级别的唯一一个p:only-child {color: red;}<h1>我是标题</h1><div><p>我是段落6.1</p></div><p>我是段落7</p>“我是段落6.1”被选中
5. 属性选择器
1. 作用根据指定的属性名称找到对应的标签,然后设置属性该选择器,最常用于input标签2. 格式与具体用法1. [属性名]例1：找到所有包含id属性的标签 => [id]2. 其他选择器[属性名]例2：找到所有包含id属性的p标签 => p[id]3. [属性名=值]例3：找到所有class属性值为part1的p标签 => p[class="part1"]4. [属性名^=值]例4：找到所有href属性值以https开头的a标签 => a[href^="https"]5. [属性名$=值]例5：找到所有src属性值以png结果的img标签 => img[src$="png"]6. [属性名*=值]例6：找到所有class属性值中包含part的标签 => [class*="part"] 3. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style type="text/css">[id] {color: red;}p[id] {font-size: 30px;}p[class="part1"] {color: green;}a[href^="https"] {font-size: 50px;}img[src$="png"] {width: 100px;}[class*="part"] {text-decoration: line-through;}</style>
</head>
<body><h1 id="id1">哈哈啊</h1><p id="id2">我是段落</p><p class="part1">我是段落</p><p class="xxx part2 yyy">我是段落</p><a href="#">我是我</a><a href="http://www.baidu.com">http://www.baidu.com</a><a href="https://www.baidu.com">https://www.baidu.com</a><img src="1.png" alt=""><img src="2.jpg" alt=""><p>我是段落</p><p>我是段落</p>
</body>
</html>
6. 伪类选择器
1. 常用伪类选择器1. 没有访问的超链接a标签样式：a:link {color: blue;}2. 访问过的超链接a标签样式：a:visited {color: gray;}3. 鼠标悬浮在元素上应用样式：a:hover {background-color: #eee; font-size: 50px;}4. 鼠标点击瞬间的样式：a:active {color: green;}5. input输入框获取焦点时样式：input:focus {outline: none;background-color: #eee;}2. 注意1. a标签的伪类选择器可以单独出现,也可以一起出现2. a标签的伪类选择器如果一起出现,有严格的顺序要求,否则失效link,visited,hover,active3. hover是所有其他标签都可以使用的4. focus只给input标签使用3. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style type="text/css">a:link {color: #cccccc;}a:visited {color: #55BBBB;}a:hover {color: green;}a:active {color: red;}input:hover {outline: none;background-color: #cccccc;}</style>
</head>
<body>
<a href="https://www.baidu.com">点击我</a>
<input type="text">
</body>
</html>
7. 伪元素选择器
1. 常用伪元素选择器1. first-letter: 杂志类文章首字母样式调整例如：p:first-letter {font-size: 48px;}2. before: 用于在元素的内容前面插入新内容例如：p:before {content: "*";color: red;}在所有p标签的内容前面加上一个红色的*3. after: 用于在元素的内容后面插入新内容例如：p:after {content: "?";color: blue;}在所有p标签的内容后面加上一个蓝色的?2. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪元素选择器</title><style type="text/css">p:first-letter {font-size: 50px;}/*两个冒号与一个是一样的,老版本用的是一个冒号,考虑到兼容性推荐使用一个冒号*/a::after {content: "?";color: red;}a:before {content: "-";color: green;}.help {color: gold;}</style>
</head>
<body>
<p>英雄不问出处,流氓不论岁数</p>
<a href="#" class="help">板砖破武术</a>
<a href="#" class="help">铁道压过腿</a>
<a href="#" class="help">黄河喝过水</a>
</body>
</html>
8. CSS三大特性
1. 继承性
1. 定义给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2. 注意1. 只有以color、font-、text-、line-开头的属性才可以继承2. a标签的文字颜色和下划线是不能继承别人的3. h标签的文字大小是不能继承别人的,会变大,但是会在原来字体大小的基础上变大ps: 打开浏览器审查元素可以看到一些inherited from ... 的属性3. 应用场景通常基于继承性统一设置网页的文字颜色,字体,文字大小等样式4. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>继承性</title><style type="text/css">div {color: red;font-size: 50px;}</style>
</head>
<body>
<div><h1>我是标题</h1><p><a href="#">Oh my god!</a></p><ul><li>导航1</li><li>导航2</li><li>导航2</li></ul>
</div>
<div><div><p>aaaa</p></div><div><p>bbbb</p></div>
</div>
</body>
</html>
2. 层叠性
1. 定义CSS 全称：Cascading Style Sheet 层叠样式表层叠性指的就是CSS处理冲突的一种能力,即如果有多个选择器选中了同一个标签那么会有覆盖效果2. 注意层叠性只有在多个选择器选中了同一个标签,然后设置了相同的属性,才会发生层叠性ps：通过谷歌浏览器可以查看到,一些属性被划掉了3. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>层叠性</title><style type="text/css">p1 {color: red;}.p2 {color: green;}</style>
</head>
<body>
<p class="p2">我是段落</p>
</body>
</html>
3. 优先级
1. 定义当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定2. 优先级整体优先级从高到底：行内样式>嵌入样式>外部样式行内样式并不推荐使用,所以我们以嵌入为例来介绍优先级
1. 直接选中 > 间接选中
大前提：直接选中 > 间接选中(即继承而来的)1. 直接选中<style type="text/css">#id1 {color: red;}.ppp {color: green;}p {color: blue;}</style>2. 间接选中<style type="text/css">ul {color: yellow;}</style>3. body<ul><li><p id="id1" class="ppp">我是pp</p></li></ul>
2. 间接选中
如果都是间接选中,那么谁离目标标签比较近,就听谁的示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>间接选中</title><style type="text/css">/*离目标近*/li {color: red;}/*离目标远*/ul {color: yellow;}</style>
</head>
<body><ul><li><p id="id1" class="ppp">我是pp</p></li></ul>
</body>
</html>
3. 直接选中
1. 同类型选择器
如果都是直接选中,并且都是同类型的选择器,那么就是谁写的在后面就听谁的示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相同类型直接选中</title><style type="text/css">p {color: red;}/*同样都是标签选择器,谁写在后面谁生效*/p {color: yellow;}</style>
</head>
<body><ul><li><p id="id1" class="ppp">我是pp</p></li></ul>
</body>
</html>
2. 不同类型选择器
如果都是直接选中,并且是不同类型的选择器,那么就会按照选择器的优先级来层叠选择器优先级id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>不同类型直接选中</title><style type="text/css">/*打开浏览器依次去掉优先级高的来进行验证*/#id1 {color: red;}.ppp {color: green;}p {color: blue;}* {color: yellow;}li {color: #7e1487;} </style>
</head>
<body><ul><li><p id="id1" class="ppp">我是pp</p></li></ul>
</body>
</html>
4. 优先级 !important
1. 作用!important 强制指定属性的优先级提升为最高,但是不推荐使用因为大量使用 !important 的代码是无法维护的2. 注意1. !important 只能用于直接选中,不能用于间接选中2. !important 只能用于提升被指定的属性的优先级,其他属性的优先级不会被提升3. !important 必须写在属性值分号的前面3. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>!important</title><style type="text/css">/*打开浏览器依次去掉优先级高的来进行验证*/#id1 {color: red;}.ppp {color: green;}p {color: blue;}* {color: yellow !important;}li {color: #7e1487;}</style>
</head>
<body><ul><li><p id="id1" class="ppp">我是span</p></li></ul>
</body>
</html>
5. 优先级 权重计算
1. 强调如果都是直接选中,并且混杂了一系列其他的选择器一起使用时,则需要通过计算权重来判定优先级2. 计算方式1. id数多的优先级高2. id数相同,则判定类数多的优先级高3. id数、class数均相同,则判定标签数多的优先级高4. 若id数、class数、标签数均相同,则无需继续往下计算了,谁写在后面谁的优先级高3. 案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>权重计算</title><style type="text/css">#id1 #id2 #id3 .ppp{color: red;}#id2 #id3.aaa p{color: purple;}#id1.ccc>.bbb>.aaa>p {color: pink;}#id1 .aaa .ppp {color: green;}#id2 .aaa p {color: yellow;}div ul li p {color: blue;}div ul p {color: cyan;}</style>
</head>
<body><div id="id1" class="ccc"><ul id="id2" class="bbb"><li id="id3" class="aaa"><p class="ppp">我是段落</p></li></ul></div>
</body>
</html>
3. CSS 属性设置
1. 字体属性
1. font-weight 文字粗细
| 取值 | 描述 |
|---|---|
| normal | 默认值 标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细 400等同于 normal 700等同于 bold |
| inherit | 继承父元素字体的粗细值 |
2. font-style 文字风格
normal 正常(默认)
italic 倾斜
3. font-size 文字大小
fs：一般是12px或13px或14px注意1. 通过font-size设置文字大小一定要带单位,即一定要写px2. 如果设置成inherit表示继承父元素的字体大小值
4. font-family 文字字体
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif常见字体：serif 衬线字体sans-serif 非衬线字体中文：宋体,微软雅黑,黑体注意1. 设置的字体必须是用户电脑里已经安装的字体,浏览器会使用它可识别的第一个值2. 如果取值为中文,需要用单或双引号扩起来
5. 文字属性简写
常规写法font-weight: bolder;font-style: italic;font-size: 50px;font-family: 'serif','微软雅黑';简写font: bolder italic 50px 'serif','微软雅黑';
6. color 文字颜色
| 取值 | 格式 | 描述 |
|---|---|---|
英文单词
|
color：red; | 大多数颜色都有对应的英文单词描述，但英文单词终究有其局限性:无法表示所有颜色 |
| rgb | color：rgb(255,0,0) | 三原色 red，green，blue 像素px 对于光学显示器，一整个屏幕是有一个个点组成，每一个点称为一个像素点，每个像素点都是由一个三元色的发光元件组成，该元件可以发出三种颜 色，red，green，blue。 发光元件协调三种颜色发光的明亮度可以调节出其他颜色 格式：rgb(255,0,0); 参数1控制红色显示的亮度 参数2控制绿色显示的亮度 参数3控制蓝色色显示的亮度数字的范围0-255，0代表不发光，255代表发光，值越大越亮红色：rgb(255,0,0) 绿色：rgb(0,255,0) 蓝色：rgb(0,0,255) 黑色：rgb(0,0,0) # 所有都不亮 白色：rgb(255,255,255) # 所有都最亮 灰色：只要让红色/绿色/蓝色的值都一样就是灰色，而且三个值越小，越偏 黑色，越大越偏白色 |
| rgba | color：rgba(255,0,0,0.1); | rgba到css3中才推出，比起rgb多了一个a，a代表透明度 a取值0-1，取值越小，越透明 |
| 十六进制 | color: #FF0000; | #FFEE00 其中FF代表R，EE代表G，00代表B 只要十六进制的颜色每两位都是一样的，那么就可以简写为一个， 例如#F00 等同于#FF0000 |
2. 文本属性
1. text-align
规定元素中的文本的水平对齐方式
| 值 | 描述 |
|---|---|
| left | 左对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
2. text-decoration
文本装饰
| 值 | 描述 |
|---|---|
| none | 默认 定义标准的文 通常用来去掉a标签的下划线 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| inherit | 继承父元素的text-decoration属性的值 |
3. text-indent
首行缩进
将段落的第一行缩进32像素,16px;=1em;p {text-indent: 32px;}
4. line-height
行高
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本属性</title><style type="text/css">p {width: 500px;height: 200px;background-color: yellow;text-align: center;text-decoration: underline;line-height: 200px;}a {text-decoration: none;}</style>
</head>
<body>
<div><p>hello英雄不问出处,流氓不论岁数</p><a href="#">点我啊</a>
</div>
</body>
</html>
3. 背景属性
注意 : 没有宽高的标签 即使设置背景也无法显示
1. 背景属性介绍
1. background-color 设置标签的背景颜色的background-color: red;background-color: rgb(0,255,0);background-color: rgba(0,255,0,0.1);background-color: #00ffff;2. background-image 设置标签的背景图片background-image: url("images/2.jpg");background-image: url("图片网址");注意如果图片的大小没有标签的大小大,那么会自动在水平和垂直方向平铺和填充3. background-size 设置标签的背景图片的宽、高background-size: 300px 300px;background-size: 100% 100%;4. background-repeat 设置标签的背景图片的平铺方式background-repeat: repeat; # 默认值,在垂直和水平方向都重复background-repeat: no-repeat; # 不重复,背景图片将仅显示一次background-repeat: repeat-x; # 背景图片将在水平方向平铺background-repeat: repeat-y; # 背景图片将在垂直方向平铺应用可以在服务端将一个大图片截成小图片,然后在客户端基于平铺属性将小图重复这样用户就以为是一张大图,如此,既节省了流量提升了速度,又不影响用户访问例如很多网站的导航条都是用这种手法制作的5. background-attachment 设置标签的背景图片在标签中固定或随着页面滚动而滚动background-attachment: scroll; # 默认值,背景图片会随着滚动条的滚动而滚动background-attachment: fixed; # 不会随着滚动条的滚动而滚动6. background-position 控制背景图片的位置前端的坐标系"：-------------------->x轴||||||y轴图片默认都是在盒子的左上角background-position：水平方向的值,垂直方向的值1. 具体的方位名词水平方向：left,center,right垂直方向：top,center,bottom如果只设置了一个关键词,那么第二个值就是"center"2. 百分比第一个值是水平位置,第二个值是垂直位置左上角是 0% 0%。右下角是 100% 100%如果只设置了一个值,另一个值就是50%3. 具体的像素（一定要加px单位）第一个值是水平位置,第二个值是垂直位置左上角是 0 0 单位是像素 (0px 0px) 或任何其他的 CSS 单位如果只设置了一个值,另一个值就是50%可以混合使用%和position值7. inherit 设置从父元素继承background属性值以上背景属性的值均可以设置为inherit,代表从父元素继承background属性 8.背景缩写 body { background: red url(xx.png) no-repeat fixed center/300px 300px; }
2. 背景属性缩写
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景属性缩写</title><style type="text/css">div {width: 500px;height: 500px;/*background-color: red;*//*background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510215639652-367382094.jpg");*//*background-repeat: no-repeat;*//*background-position: right bottom;*//*background-size: 100px 100px;*/background: red url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510215639652-367382094.jpg") no-repeat right bottom/100px 100px;}</style>
</head>
<body>
<div></div>
</body>
</html>
3. 背景图片和插入图片的区别
1. 背景图片仅仅只是一个装饰,不会占用位置,插入图片会占用位置2. 背景图片有定位属性,可以很方便地控制图片的位置,而插入图片则不可以3. 插入图片语义比背景图片的语义要强,所以在企业开发中如果你的图片想被搜索引擎收录,那么推荐使用插入图片案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景图片</title><style type="text/css">.box1 {width: 200px;height: 200px;background-color: red;background-image: url("http://image109.360doc.com/DownloadImg/2018/09/2605/145287524_15_20180926055051880");background-repeat: no-repeat;background-position: right bottom;}.box2{width: 300px;height: 300px;background-color: green;}</style>
</head>
<body>
<div class="box1">1111111111111
</div>
<div class="box2">22222222222222<img src="http://image109.360doc.com/DownloadImg/2018/09/2605/145287524_4_20180926055050520" alt="">
</div>
</body>
</html>
4. 背景图片练习
1. 背景图片居中显示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片居中显示</title><style type="text/css">div {height: 500px;background-image: url("bg2.jpg");background-position: top center;}</style>
</head>
<body>
<div></div>
</body>
</html>2. 图片拼接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片拼接</title><style type="text/css">div {height: 720px;background-image: url("bg1.jpg");}.box2 {background-image: url("ksyx.png");background-position: bottom center;background-repeat: no-repeat;}</style>
</head>
<body>
<div class="box1"><div class="box2"></div>
</div>
</body>
</html>3. 导航条
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>导航条</title><style type="text/css">.navbar {margin: 0 auto;width: 920px;height: 50px;background-image: url("dht.png");background-repeat: repeat-x;}</style>
</head>
<body>
<div class="navbar">
</div>
</body>
</html>
5. rgba opacity
示例一
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景透明度</title><style>.c1 {width: 200px;height: 200px;/*只能给背景设置透明度*//*background-color: rgba(0,0,0,0.65);*/background-color: rgb(0,0,0);opacity: 0.65; /*改变整个标签的透明度*/}</style>
</head>
<body>
<div class="c1">我是我啊啊啊啊</div>
</body>
</html>示例二
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景透明度</title><style>.c1 {height: 800px;/*背景颜色透明度不能与背景图片同时使用,如果想给背景图片设置透明度,则必须使用opacity*/background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225809591-1990809146.jpg");background-size:300px auto;opacity: 0.55; /*改变整个标签的透明度*/}</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>示例三
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>导航条</title><style type="text/css">.box1 {height: 720px;background-image: url("bg1.jpg");}.box2 {background-image: url("ksyx.png");background-repeat: no-repeat;background-position: center bottom;height: 720px;/*只能给背景设置透明度*//*background-color: rgba(0,255,0,0.3);*//*改变整个标签的透明度*/opacity: 0.3;}</style>
</head>
<body>
<div class="box1"><div class="box2"></div>
</div>
</body>
</html>
6. 精灵图
1. CSS精灵图定义CSS精灵图是一种图像合成技术可以通过浏览器抓包分析：微博,京东都有精灵图2. CSS精灵图作用一个电商网站可能有很多图片,比如有10张图片,这就要求客户端发10次请求给服务端但其实一次请求的带宽就足够容纳10张图片的大小精灵图的作用就是用来减少请求次数,以及降低服务器处理压力3. CSS精灵图用法CSS的精灵图需要配合背景图片和背景定位来使用4. 强调切图需要用到frameworks软件可以知道每个图片具体宽多少个像素高多少个像素,该软件与ps属于一个家族在右面,图层 => 位图 => 出一把锁固定住图片然后左侧,有一个切片工具,框住图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>精灵图</title><style type="text/css">.box1 {width: 86px;height: 28px;background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510222513182-115432192.png");background-repeat: no-repeat;background-position: -425px -100px;}</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
4. 盒子模型
1. CSS 盒子模型
HTML文档中的每个元素都被比喻成矩形盒子
盒子模型通过四个边界来描述margin（外边距）,border（边框）,padding（内填充）,content（内容区域）如果把一个盒子比喻成一个壁挂相片外边距 margin => 一个相框与另外一个相框之间的距离边框 border => 边框指的就是相框内边距 padding => 内容/相片与边框的距离宽度width/高度height => 指定可以存放内容/相片的区域提示：可以通过谷歌开发者工具查看盒子的各部分属性
2. 盒子模型的宽度和高度
1. 内容的宽度和高度通过标签的width和height属性设置2. 元素/盒子模型的宽度和高度宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度高度= ......3. 元素/盒子模型空间的宽度和高度宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距高度= ......4. 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型宽度和高度</title><style>span,a,b,strong {display: inline-block;width: 100px;height: 100px;border: 6px solid #000;padding: 20px;margin: 20px;}</style>
</head>
<body>
<span>我是span</span>
<a href="#"> 我是假链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>
</html>5. 为什么 height:100%; 不起作用？
如何让height:100%起作用：需要给这个元素的所有父元素的高度设定一个有效值,换句话说,需要这样做：现在你给div的高度为100%,它有两个父元素<body>和<html>为了让你的div的百分比高度能起作用,你必须设定<body>和<html>的高度<html style="height: 100%;"><body style="height: 100%;"><div style="height: 100%;"><p>这样这个div的高度就会100%了</p></div></body>
</html>相似的例子：可以查看qq注册界面 https://ssl.zc.qq.com/v3/index-chs.html
3. CSS 显示模式
在HTML中将所有标签分为两类,分别是容器级和文本级
在CSS中也将所有标签分为两类,分别是块级元素(容器级)和行内元素1. HTML中容器级与文本级容器级标签可以嵌套其他的所有标签div、h、ul>li、ol>li、dl>dt+dd文本级标签只能嵌套文字、图片、超链接span、p、buis、strong、em、ins、del2. CSS中块级与行内块级块级元素会独占一行,所有的容器类标签都是块级,文本标签中的p标签也是块级div、h、ul、ol、dl、li、dt、dd 还有标签p行内行内元素不会独占一行,所有除了p标签以外的文本标签都是行内span、buis、strong、em、ins、del3. 块级元素与行内元素的区别1. 块级元素 block独占一行可以设置宽高若没有设置宽度,那么默认和父元素一样宽比如下例中的div的父元素是body,默认div的宽就是body的宽若没有设置宽高,那么就按照设置的来显示2. 行内元素 inline不会独占一行不可以设置宽高盒子宽高默认和内容一样3. 行内块级元素 inline-block不会独占一行可以设置宽高4. 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>/*块级元素*/div,p,h1 {background-color: red;width: 200px;height: 100px;}/*行内元素*/span,b,strong {background-color: blue;width: 200px;height: 100px;}/*行内块级元素*/img {width: 100px;height: 100px;}</style>
</head>
<body>
<!--块级-->
<div>我是div</div>
<p>我是段落 </p>
<h1>我是标题</h1>
<hr>
<!--行内-->
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<hr>
<!--行内块级-->
<img src="../imags/1.png" alt="">
<img src="../imags/1.png" alt="">
</body>
</html>
4. CSS 显示模式转换
1. display 属性可以通过标签的display属性设置显示模式none HTML文档中元素存在 但在浏览器中不显示 一般用于配合JavaScript代码使用block 块级inline 行内inline-block 行内块级 2. display:none 与 visibility:hidden 的区别display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间也就是说,该元素虽然被隐藏了,但仍然会影响布局
5. div 与 span
布局都是用块级元素,而行内元素是控制内容显示的1. div标签一般用于配合css完成网页的基本布局2. span标签一般用于配合css修改网页中的一些局部信息比如一行文字我们只为一部分加颜色<p>我是<span>egon</span></p>3. div 和 span 的区别div一般用于排版,而span一般用于局部文字的样式1. 站在HTML的角度：div是一个块级元素,独占一行,而span是一个行内元素,不会单独占一行2. 站在CSS的角度：div是一个容器级标签,而span是一个文本级标签4. 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div与span标签</title><style>.header {margin: 0 auto;width: 980px;height: 100px;background: pink;margin-bottom: 10px;}.content {margin: 0 auto;width: 980px;height: 500px;background: #e9ca37;margin-bottom: 10px;}.footer {margin: 0 auto;width: 980px;height: 100px;background: #7e1487;}.logo {width: 200px;height: 50px;background: #bfccdb;float: left;margin: 20px;}.nav {width: 600px;height: 50px;background: palegreen;float: right;margin: 20px;}.aside {width: 250px;height: 460px;background: #cccccc;float: left;margin: 20px;}.article {width: 650px;height: 460px;background: green;float: right;margin: 20px;}span {color: red;}</style>
</head>
<body>
<div class="header"><div class="logo"></div><div class="nav"></div>
</div>
<div class="content"><div class="aside"><p>我是<span>EGON</span>一个最接近<span>神的男人</span></p></div><div class="article"></div>
</div>
<div class="footer"></div>
</body>
</html>
5. 盒子模型详解
1. border 边框
设置边框的方式1. 同时设置四条边的边框 border:边框的宽度 边框的样式 边框的颜色2. 分别设置四条边的边框 border-left: 边框的宽度 边框的样式 边框的颜色border-top: 边框的宽度 边框的样式 边框的颜色border-right: 边框的宽度 边框的样式 边框的颜色border-bottom: 边框的宽度 边框的样式 边框的颜色3. 分别指定宽度、格式、颜色1. 连写（分别设置四条边的边框）border-width: 上 右 下 左border-style: 上 右 下 左border-color: 上 右 下 左2. 注意点1. 这三个属性按照顺时针,即上、右、下、左赋值2. 这三个属性的取值省略时的规律省略右面,右面默认同左边省略下部,下面默认跟上面一样只留一个,那么其余三边都跟这一个一样4. 非连写border-top/right/bottom/left-width: ;border-top/right/bottom/left-style: ;border-top/right/bottom/left-color: #000;其他http://www.w3school.com.cn/cssref/pr_border-style.asp5. 边框的样式none 无边框dotted 点状虚线边框dashed 矩形虚线边框solid 实线边框6. border-radius/* 单独设置一个角：数值越大,弧度越大 */border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;/* 缩写设置 */border-radius: 20px; /* 所有角设置相同值 */border-radius: 20px 15px 10px 5px; /*顺时针顺序：上左 上右 下右 下左*//* 百分比设置 */border-radius: 50%;/* 椭圆圆弧设置 */border-radius: 25%/50%; /*前面一个值代表水平方向的半径占总宽度的,后面一个值代表垂直方向*/7. 边框练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框属性</title><style>div {width: 100px;;height: 100px;}.box1 {/*border: 5px solid black;*//*border-left: 5px solid black;*//*border-top: 5px solid black;*//*border-right: 5px solid black;*//*border-bottom: 5px solid black;*/border-width: 5px;border-style: solid;border-color: black;}.box2 {/*border-left: 5px solid purple;*//*border-top: 5px solid red;*//*border-right: 5px solid green;*//*border-bottom: 5px solid blue;*/border-width: 5px;border-style: solid;border-color: red green blue purple;}.box3 {/*border: 5px solid red;*//*border-right: 5px dashed red;*/border-width: 5px;border-style: solid dashed solid solid;border-color: red;}.box4 {border-width: 5px;border-style: solid dashed solid dashed;border-color: red;}.box5 {border:5px solid black;border-bottom: none;}/*在企业开发中要尽量降低网页的体积,图片越多,体积肯定越大,访问速度肯定越慢,所以针对简单的图形,可以只用用边框画出来使用下面的方法制作就可以*/.box6 {width: 0px;height: 0px;border-width: 25px;border-style: solid;border-color: black white skyblue white;border-bottom: none;}</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<hr>
<div class="box4"></div>
<hr>
<div class="box5"></div>
<hr>
<div class="box6"></div>
</body>
</html>8. border-radius 练习
示例一
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.box1 {margin: 0 auto;height: 100px;width: 920px;border-radius: 40px 30px 20px 10px;background-color: blue;}</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>示例二
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css"> img {width: 185px;border-radius: 50%;}</style>
</head>
<body><img src="data:images.png" alt="">
</body>
</html>
2. padding 内边距
内边距 边框与内容的距离就是内边距1. 非连写padding-top： 20px；padding-right： 20px；padding-bottom：20px；padding-left： 20px；2. 连写padding：上 右 下 左;3. 注意1. 给标签设置内边距后,标签内容占有的宽度和高度会发生变化设置padding之后标签内容的宽高是在原宽高的基础上加上padding值如果不想改变实际大小,那就在用宽高减掉padding对应方向的值2. padding是添加给父级的,改变的是父级包含的内容的位置3. 内边距也会有背景颜色4. 示例
1. 内边距练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内边距属性</title><style>div {width: 100px;height: 110px;border: 1px solid red;}.box1 {padding-top: 30px;}.box2 {padding-right: 40px;}.box3 {padding-bottom: 50px;}.box4 {padding-left: 60px;}.box5 {/*只留一个 全都相等*/padding: 70px;background-color: red;}</style>
</head>
<body>
<div class="box1">我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<hr>
<div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<hr>
<div class="box3">我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<hr>
<div class="box4">我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<hr>
<div class="box5">我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
</body>
</html>2. 添加边框与padding后保存盒子大小不变
方式一: 做减法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.box1 {/*width: 100px;*//*height: 100px;*/background-color: red;border: 10px solid #000;padding: 10px;width: 60px;height: 60px;}</style>
</head>
<body>
<div class="box1">我是文字</div>
</body>
</html>方式二: box-sizing
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">.box1 {width: 100px;height: 100px;background-color: red;border: 10px solid #000;padding: 10px;/*本质原理就是做减法*/box-sizing: border-box;}</style>
</head>
<body>
<div class="box1">我是文字</div>
</body>
</html>
3. 外边距
外边距标签与标签之间的距离就是外边距1. 非连写margin-top： 20px；margin-right： 20px；margin-bottom：20px；margin-left： 20px；2. 连写margin：上 右 下 左;3. 注意1. 外边距的那一部分是没有背景颜色的2. 外边距合并现象在默认布局的水平方向上,默认两个盒子的外边距会叠加而在垂直方向上,默认情况下两个盒子的外边距是不会叠加的会出现合并现象,谁的外边距比较大,就听谁的4. 外边距合并现象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距合并现象</title><style>span {display: inline-block;width: 100px;height: 100px;border: 1px solid #000;}div {height: 100px;border: 1px solid #000;}/*水平方向上 外边距会叠加*/.hezi1 {margin-right: 50px;}.hezi2 {margin-left: 100px;}/*垂直方向上 外边距不会叠加,会合并成一个,谁比较大就听谁的*/.box1 {margin-bottom: 50px;}.box2 {margin-top: 100px;}</style>
</head>
<body>
<!--
快捷创建
span.hezi${我是span}*2
-->
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>5. margin-top 塌陷
两个嵌套的盒子,内层盒子设置margin-top后会将外层盒子一起顶下来,解决方法如下：1. 外部盒子设置一个边框2. 外部盒子设置 overflow: hidden; 当子元素的尺寸超过父元素的尺寸时,内容会被修剪,并且其余内容是不可见的此属性还有清除浮动、清除margin-top塌陷的功能3. 使用伪元素类：.clearfix:before{content: '';display:table;}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型宽度和高度</title><style>.outter {background-color: green;width: 300px;height: 300px;/*方式一*//*border: 1px solid #000;*//*方式二*//*overflow: hidden;*/}.inner {background-color: red;width: 200px;height: 200px;margin-top: 100px;}/*方式三*/.clearfix:before {display: table;content: "";}</style>
</head>
<body>
<div class="outter clearfix"><div class="inner"></div>
</div>
</body>
</html>
4.内边距与外边距
1. 在企业开发中,一般情况下如果需要控制嵌套关系盒子之间的距离首先考虑 padding: padding本质上是用于控制父子关系的其次考虑 margin : margin本质上是用于控制兄弟直接的关系的示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.egon {width: 300px;height: 300px;background-color: yellow;padding: 50px;box-sizing: border-box;}.alex {width: 100px;height: 100px;background-color: green;}.linhaifeng {width: 300px;height: 300px;background-color: purple;padding: 50px;box-sizing: border-box;margin-top: 100px;}.liuqingzheng {width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body>
<div class="egon"><div class="alex"></div>
</div>
<div class="linhaifeng"><div class="liuqingzheng"></div>
</div>
</body>
</html>2. 如果两个盒子是嵌套关系,设置了里面一个盒子顶部的外边距,那么父盒子也会被顶下来如果外面的盒子不想被一起顶下来,可以给外面的盒子设置一个边框属性示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.egon {width: 300px;height: 300px;background-color: yellow;box-sizing: border-box;border: 1px solid #000;}.alex {width: 100px;height: 100px;background-color: green;margin-top: 50px;}</style>
</head>
<body>
<div class="egon"><div class="alex"></div>
</div>
</body>
</html>
5. 盒子居中与内容居中
1. 内容居中
1. 让一行内容在盒子中水平且垂直居中/*水平居中*/text-align: center;/*垂直居中*/line-height: 500px;2. 让多行内容在盒子中垂直居中（水平居中与单行内容一样）让行高与盒子高度一样,只能让一行内容垂直居中,如果想让多行内容垂直居中比如下面这种,想让div中的多行内容垂直居中,一看div中的文字是两行每一行的行高为20,加起来就是40,80-40=40,需要让文字距离顶部padding为20,底部padding为20height: 80px;line-height: 20px;padding-top: 20px;padding-bottom: 20px;box-sizing: border-box;3. 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子居中和内容居中</title><style>div {width: 300px;height: 300px;background-color: red;/*多行内容水平居中与单行一样*/text-align: center;/*多行内容垂直居中*/line-height: 30px;padding-top: 120px;box-sizing: border-box;}</style>
</head>
<body>
<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
</body>
</html>
2. 盒子居中
1. text-align: center; 只能让盒子中存储的文字、图片水平居中margin: 0 auto; 如果想让盒子自己相对于父元素水平居中,需要用到2. 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子居中和内容居中</title><style>.son {width: 300px;height: 300px;background-color: red;/*多行内容水平居中与单行一样*/text-align: center;/*多行内容垂直居中*/line-height: 30px;padding-top: 120px;box-sizing: border-box;/*盒子本身水平居中*/margin: 0 auto;}.father {width: 500px;height: 500px;background-color: yellow;}</style>
</head>
<body>
<div class="father"><div class="son">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</div>
</body>
</html>
6. 防止文字溢出
word-break: break-all; /* 防止文字溢出 */示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>防止文字溢出</title><style type="text/css">div {width: 200px;height: 200px;/*字母、数字溢出,可以用下列属性控制自动换行：允许在单词内换行http://www.w3school.com.cn/cssref/pr_word-break.asp*/word-break: break-all;}.box1 {background-color: red;}.box2 {background-color: green;}.box3 {background-color: blue;}</style>
</head>
<body>
<div class="box1"><p>asdfasdfsadfasdfasdfasdfad sfasdfsadasDSfafsafaasdfasdfasfdqwerqwerwqersdfqerwrsdf你好我的啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
<div class="box2">遗憾白鹭上青天两个黄鹂鸣翠柳啊哈哈哈
</div>
<div class="box3">我是12312312312312312312312312312312312312312312312312312312312我
</div>
</body>
</html>
7. 清除默认边距
1. 清空默认边距原因（外边距和内边距）浏览器会自动附加边距,在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等编写代码之前的第一件事情就是清空默认的边距2. 清空默认边距方法* {margin: 0px;padding: 0px;}3. 注意点通配符选择器会找到(遍历)当前界面中所有的标签,所以性能不好参考: https://yuilibrary.com/yui/docs/cssreset/拷贝代码：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0}可以查看京东,bat主页也是这么做的,在企业开发中也应该像上面这么写4. 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除默认边距</title><style>/** {margin: 0px;padding: 0px;}*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0} .box1 {width: 100px;height: 100px;background-color: green;}.box2 {width: 100px;height: 100px;background-color: yellow;}.box3 {width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
4. CSS 网页布局
1. 网页布局方式
1. 网页布局方式介绍布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的2. 网页布局/排版的三种方式1. 标准流2. 浮动流3. 定位流
2. 标准流
标准流又称之为文档流/普通流1. 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列2. 浏览器默认的排版方式就是标准流排版方式3. 在CSS中将元素分为三类:块级行内行内块级4. 在标准流中有两种排版方式1. 垂直排版,如果元素是块级元素,那么就会垂直排版2. 水平排版,如果元素是行内元素或行内块级元素,那么就会水平排版示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标准流排版</title><style type="text/css">div,h1,p {border: 1px solid red;}span,strong,b {border: 1px solid #000;}</style>
</head>
<body>
<div>我是div</div>
<h1>我是标题</h1>
<p>我是段落</p>
<span>span</span>
<strong>我是强调</strong>
<b>我是加粗</b>
</body>
</html>
3. 浮动流
浮动流是一种半脱离标准流的排版方式
1. 脱离文档流
1. 浮动元素脱离文档流1. 不再区分行内、块级、行内块级,无论是什么级的元素都可以水平排版2. 无论是什么级的元素都可以设置宽高综上所述,浮动流中的元素和标准流中的行内块级元素很像示例
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><style>* {margin: 0;padding: 0;}/*不再区分行内、块级、行内块级,无论是什么级的元素都可以水平排版：span和p都显示到一行无论是什么级的元素都可以设置宽高： span这种行内元素也可以设置宽高*/.box1 {width: 100px;height: 100px;background-color: red;float: left;}.box2 {width: 100px;height: 100px;background-color: blue;float: left;}</style>
</head>
<body>
<span class="box1">我是span</span>
<p class="box2">我是段落</p>
</body>
</html>2. 浮动元素脱标文档流1. 当某一个元素浮动走之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标2. 如果前面一个元素浮动走了,而后面一个元素没有浮动,那么垂直方向的元素会自动填充浮动元素重新归位后就会覆盖该元素示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素脱标</title><style>.box1 {float: left;width: 100px;height: 100px;background-color: red;}.box2 {width: 150px;height: 150px;background-color: blue;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>3. 注意点1. 浮动流只有一种排版方式,就是水平排版它只能设置某个元素左对齐或者右对齐,没有居中对齐,也就是没有center这个取值2. 一旦使用了浮动流,margin:0 auto;失效示例一
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"><style>* {margin: 0;padding: 0;}.header {width: 930px;height: 100px;border: 1px solid #000;margin: 0 auto;}.logo {width: 100px;height: 50px;background-color: yellow;float: left;}.nav {width: 300px;height: 50px;background-color: green;float: left;/*失效*/margin: 0 auto;}</style>
</head>
<body>
<div class="header"><div class="logo"></div><div class="nav"></div>
</div>示例二让两个元素显示到一行,有两种实现方式1. 修改元素的显示方式为inline-block2. 采用浮动的方式
方式一：
<!DOCTYPE html>
<html>
<head><title>方式一：修改显示方式为inline-block</title><meta charset="utf-8"><style>.box1 {display: inline-block;width: 100px;height: 100px;background-color: red;}.box2 {display: inline-block;width: 100px;height: 100px;background-color: blue;/*当设置box2的margin-left足够大时,第二个盒子就靠右面显示了但是当浏览器界面缩小时,box2由于左边的margin-left不够930则必须换一个新行显示,就无法让两个盒子处于一行*/margin-left: 930px;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>方式二：
<!DOCTYPE html>
<html>
<head><title>方式二：用浮动的方式</title><meta charset="utf-8"><style>.box1 {display: inline-block;width: 100px;height: 100px;background-color: red;float: left;}.box2 {display: inline-block;width: 100px;height: 100px;background-color: blue;float: right;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
2. 半脱离文档流
脱离分为半脱离与完全脱离1. 完全脱离指的是元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样2. 半脱离指的是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置跟标准流还是有一定的关系,比如说浮动的元素在浮动之前处于标准流的第二行那么他浮动之后也是处于浮动流的第二行,不会去找其他行的浮动元素去贴靠打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜,元素浮动之后就会被从标准流中扔到浮动流这个薄膜上他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠,贴靠的准则就是：1. 同一个方向上谁先浮动,谁在前面2. 不同方向上左浮动找左浮动,右浮动找右浮动示例
1. 浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素排序规则</title><style>.box1 {float: left;width: 100px;height: 100px;background-color: red;}.box2 {width: 150px;height: 150px;background-color: blue;}.box3 {float: left;width: 250px;height: 250px;background-color: yellow;}.box4 {width: 300px;height: 300px;background-color: rebeccapurple;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>2. 同一个方向上谁先浮动,谁在前面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素排序规则</title><style>.box1 {float: left;width: 100px;height: 100px;background-color: red;}.box2 {float: left;width: 150px;height: 150px;background-color: blue;}.box3 {float: left;width: 250px;height: 250px;background-color: yellow;}.box4 {float: left;width: 300px;height: 300px;background-color: rebeccapurple;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>3. 不同方向上左浮动找左浮动,右浮动找右浮动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素排序规则</title><style>.box1 {float: left;width: 100px;height: 100px;background-color: red;}.box2 {float: left;width: 150px;height: 150px;background-color: blue;}.box3 {float: right;width: 250px;height: 250px;background-color: yellow;}.box4 {float: right;width: 300px;height: 300px;background-color: rebeccapurple;}</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
3. 浮动元素贴靠问题
当父元素的宽度足够显示所有元素时,浮动的元素就会并列显示
当父元素的宽度不足够显示所有元素时,浮动的元素就贴前一个元素,如果还不够,就会再贴前一个元素
直到贴到父元素左边,此时无论是否宽度足够都会在这一行显示了示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素贴靠问题</title><style>.father {width: 400px;height: 400px;border: 1px solid #000;}.box1 {float: left;width: 50px;height: 300px;background-color: rebeccapurple;}.box2 {float: left;width: 50px;height: 100px;background-color: green;}.box3 {float: left;width: 250px;/*width: 300px;*//*width: 310px;*//*width: 400px;*/height: 100px;background-color: red;}</style>
</head>
<body>
<div class="father"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</div>
</body>
</html>
4. 浮动元素字围现象
没有浮动的文字、图片、超链接等元素会给浮动的元素让位置,并围绕在浮动元素的周围 示例一 图文混排
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素字围现象</title><style>img {float: left;width:300px;}p {background-color: #b9950c;}</style>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526318630409&di=8186a1ab56ed36696ade3e23a228acfc&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Ff%2F58be1c554d5f0.jpg" alt="">
<p>
迪丽热巴（Dilraba）,1992年6月3日出生于新疆乌鲁木齐市,中国内地影视女演员。2013年,迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道。2014年,她主演了奇幻剧《逆光之恋》。2015年,迪丽热巴凭借爱情剧《克拉恋人》赢得高人气,并获得国剧盛典最受欢迎新人女演员奖。2016年,其主演的现代剧《麻辣变形计》播出；同年,她还凭借喜剧片《傲娇与偏见》获得中英电影节最佳新人奖。2017年,迪丽热巴因在玄幻剧《三生三世十里桃花》中饰演青丘白凤九而获得白玉兰奖最佳女配角提名。2018年 ...迪丽热巴（Dilraba）,1992年6月3日出生于新疆乌鲁木齐市,中国内地影视女演员 [1] 。
2013年,迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道 [2] 。2014年,她主演了奇幻剧《逆光之恋》 [3] 。2015年,迪丽热巴凭借爱情剧《克拉恋人》赢得高人气,并获得国剧盛典最受欢迎新人女演员奖 [4] 。2016年,其主演的现代剧《麻辣变形计》播出 [5] ；同年,她还凭借喜剧片《傲娇与偏见》获得中英电影节最佳新人奖 [6] 。2017年,迪丽热巴因在玄幻剧《三生三世十里桃花》中饰演青丘白凤九而获得白玉兰奖最佳女配角提名 [7] 。2018年4月20日,主演的爱情喜剧电影《21克拉》上映 [8] 。迪丽热巴出生于新疆乌鲁木齐市,父亲是新疆歌舞团的独唱演员。因受父亲影响,迪丽热巴从小便对各种艺术类的东西颇感兴趣,并主动要求学习钢琴、舞蹈、小提琴、吉他等 [9] 。
2001年,9岁的迪丽热巴被父亲带去一所艺术学院参加考试,当时她以为是上兴趣班,结果被录取后才发现是一个专业的舞蹈院校,而迪丽热巴也开始了为期六年的民族舞、芭蕾舞专业学习。2007年,从艺术学院毕业的迪丽热巴成为了新疆歌舞团的舞蹈演员 [10] 。2009年,迪丽热巴还在东北师范大学民族学院读了一年预科,在此期间她还参加了吉林省的首届少数民族新歌大赛,并最终获得了省级三等奖的成绩 [11] 。
之后,迪丽热巴却慢慢发现这并不是自己想要的生活。于是决定继续求学,去看看外面的世界,因为有不错钢琴基础,所以本来想报考的是中央音乐学院,可报名时却看到了中戏和上戏在招生,便突然决定改学表演。而迪丽热巴会有这样的决定则是受到了她钢琴老师的指点。2010年,迪丽热巴顺利考入了上海戏剧学院表演系戏剧影视专业；同年,她参加了陆川执导的古装片《王的盛宴》女主角“虞姬”的上海站海选 [12] ,并因此获得了颇多关注 [13] 。
</p>
</body>
</html>示范二只要是行内块级元素,都会有字围效果
<!DOCTYPE html>
<html>
<head><title>只要是行内块级元素,都会有字围效果</title><meta charset="utf-8"><style>* {margin: 0;padding: 0;}.box1 {width: 200px;height: 200px;background-color: blue;float: left;}.box2 {display: inline-block;width: 200px;height: 50px;background-color: green;}.box3 {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
5. 浮动流排版练习
注意1. 垂直方向的布局用标准流布局,水平方向用浮动流布局2. 从上至下布局3. 从外向内布局4. 水平方向可以先划分为一左一右 先左边 后右边进一步布局示例一
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div与span标签</title><style>/*水平方向的块级元素的宽默认是父元素的100%而垂直方向如果想让子元素的高是父元素的100%则必须先设置父元素的高为100%*/* {margin: 0;padding: 0;}html {height: 100%;}body {height: 100%;background-color: #cccccc;}.header {width: 80%;height: 10%;background: red;margin: auto;margin-bottom: 10px;padding: 20px;box-sizing: border-box;}.content {width: 80%;height: 70%;background: green;margin: auto;margin-bottom: 10px;padding: 20px;box-sizing: border-box;}.footer {width: 80%;height: 10%;background: blue;margin: auto;}.logo {width: 20%;height: 100%;background: pink;float: left;}.nav {width: 75%;height: 100%;background: yellow;float: right;margin-left: 5%;}.aside {width: 20%;height: 100%;background: purple;float: left;}.article {width: 75%;height: 100%;background: skyblue;float: right;margin-left: 5%;}</style>
</head>
<body>
<div class="header"><div class="logo"></div><div class="nav"></div>
</div>
<div class="content"><div class="aside"></div><div class="article"></div>
</div>
<div class="footer"></div>
</body>
</html>示范二
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动流排版练习2</title><style>* {margin: 0px;padding: 0px;}.header {height: 100px;width: 980px;background-color: #fefefe;margin: 0 auto;}.header .logo {width: 250px;height: 100px;background-color: #f6c2d2;float: left;}.header .language {width: 150px;height: 50px;background-color: #a0d7e9;float: right;}.header .nav {width: 630px;height: 50px;background-color: #7e1487;float: right;}.content {height: 400px;width: 980px;background-color: #fcfd00;margin: 0 auto;margin-top: 10px;}.footer {height: 40px;width: 980px;background-color: #ec6357;margin: 0 auto;margin-top: 10px;}</style>
</head>
<body>
<div class="header"><div class="logo">logo</div><div class="language">language</div><div class="nav">导航</div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>示范三
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动流排版练习3</title><style>* {margin: 0px;padding: 0px;}.header {height: 100px;width: 980px;background-color: #f6c2d2;margin: 0 auto;}.content {height: 400px;width: 980px;background-color: #fefefe;margin: 0 auto;margin-top: 10px;}.content .aside {width: 320px;height: 400px;background-color: #fcfd00;float: left;}.content .article {width: 650px;height: 400px;background-color: #fefefe;float: right;}.content .articleTop {width: 650px;height: 350px;background-color: #fefefe;}.content .articleTopLeft {width: 400px;height: 350px;background-color: #fefefe;float: left;}.content .articleTopLeft .new1 {width: 400px;height: 200px;background-color: #e9289c;}.content .articleTopLeft .new2 {width: 400px;height: 140px;background-color: #3dd1fd;margin-top: 10px;}.content .articleTopRight {width: 240px;height: 350px;background-color: #acde3d;float: right;}.content .articleBottom {width: 650px;height: 40px;background-color: #b9950c;margin-top: 10px;}.footer {height: 40px;width: 980px;background-color: #ec6357;margin: 0 auto;margin-top: 10px;}</style>
</head>
<body>
<div class="header"></div>
<div class="content"><div class="aside"></div><div class="article"><div class="articleTop"><div class="articleTopLeft"><div class="new1"></div><div class="new2"></div></div><div class="articleTopRight"></div></div><div class="articleBottom"></div></div>
</div>
<div class="footer"></div>
</body>
</html>
6. 浮动元素高度问题(又称父级塌陷)
1. 在标准流中,内容的高度可以撑起父元素的高度
2. 在浮动流中,浮动的元素是不可以撑起父元素的高度的,当子元素都浮动起来后父亲的内容高度即height变为0,父元素就好像塌陷了一样,因而又称为父级塌陷示例一浮动的元素不再撑起父级元素的高度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动元素高度问题</title><style>* {margin: 0;padding: 0;} div {border: 10px solid #741a7b;}p {width: 100px;height: 100px;background-color: red;float: left;}</style>
</head>
<body>
<div><p>我是p标签</p>
</div>
</body>
</html>示例二父级塌陷对网页布局带来的影响
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;} .header {border: 5px solid #000;} .logo {width: 200px;height: 200px;background-color: red;float: left;}.nav {width: 200px;height: 200px;background-color: green;float: left;}.content {width: 960px;height: 200px;background-color: yellow;}</style>
</head>
<body>
<div class="header"><div class="logo">logo</div><div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</body>
</html>
7. 清除浮动
1. 清除浮动方式一
清除浮动方式一为浮动的子元素的父亲设置一个高度注意点在企业开发中,这样限定固定高度会使页面操作不灵活,不推荐！示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;} .header {border: 5px solid #000;height: 200px;} .logo {width: 200px;height: 200px;background-color: red;float: left;}.nav {width: 200px;height: 200px;background-color: green;float: left;}.content {width: 960px;height: 200px;background-color: yellow;}</style>
</head>
<body>
<div class="header"><div class="logo">logo</div><div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</html>
2. 清除浮动方式二
清除浮动方式二clear : none | left | right | both
注意clear这个属性必须设置在块级、并且不浮动的元素中1. 取值none : 默认值 允许两边都可以有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象both : 不允许左右有浮动对象2. 把握住两点1. 元素是从上到下、从左到右依次加载的2. clear: left; 对自身起作用,而不会影响其他元素一旦左边有浮动元素,即切换到下一行来保证左边元素不是浮动的,依据这一点解决父级塌陷问题示例一clear:both 解决父级塌陷
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;} .header {border: 5px solid #000;} .logo {width: 200px;height: 200px;background-color: red;float: left;}.nav {width: 200px;height: 200px;background-color: green;float: left;}.content {width: 960px;height: 200px;background-color: yellow;/*该元素的左右两边都不允许有浮动元素*/clear: both;}</style>
</head>
<body>
<div class="header"><div class="logo">logo</div><div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</html>注意元素是从上到下、从左到右依次加载的。在右侧元素还没有加载到时,clear：right是无用的示例二
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;}.r1{width: 300px;height: 100px;background-color: #7A77C8;float: left;}.r2{width: 200px;height: 200px;background-color: wheat;float: left;/*元素是从上到下、从左到右依次加载的。而此时r2右侧并没有浮动的元素,所以此处即便是设置了也没有用*/clear: right;}.r3{width: 100px;height: 200px;background-color: darkgreen;float: left;}</style>
</head>
<body>
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</body>
</html>注意这种方式的弊端是：当我们给某个元素添加clear属性之后,那么这个属性的margin-top属性可能会失效因而也不推荐直接用clear示范
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;}body {/*border: 1px solid #000;*/}.header {/*border: 5px solid #000;*/}.logo {width: 200px;height: 200px;background-color: red;float: left;}.nav {width: 200px;height: 200px;background-color: green;float: left;}/*浮动header内的两个元素,div内没有标准流元素能撑起他的高度,于是它的高度为0此时content应该先填充到header原来的位置,由于此时header既没有高度也没有边框于是content的margin-top就是相对于body来说的了对于margin-top,如果父元素body没有边框,则父元素会被一起顶下来,而body这个元素又不应该被顶下来,于是我们可以为body设置边框,但在企业开发中没人会为body设置边框所以此处只是单纯的演示效果而为body加边框*/.content {width: 960px;height: 200px;background-color: yellow;clear: both;margin-top: 500px;}</style>
</head>
<body>
<div class="header"><div class="logo">logo</div><div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</body>
</html>
3. 清除浮动方式三
隔墙法
1. 外墙法1. 在两个盒子中间添加一个额外的块级元素2. 给这个额外添加的块级元素设置clear：both；属性注意：外墙法它可以让第二个盒子使用margin-top属性外墙法不可以让第一个盒子使用margin-bottom属性,所以我们通常用墙的高度作margin的替代品搜狐网站大量使用了外墙法2. 内墙法1. 在第一个盒子中所有子元素最后添加一个额外的块级元素2. 给这个额外添加的块级元素设置clear：both；属性注意：内墙法它可以让第二个盒子使用margin-top属性内墙法可以让第一个盒子使用margin-bottom属性3. 内墙法与外墙法的区别1. 外墙法不可以撑起第一个盒子的高度,而内墙可以2. 在企业开发中清除浮动,内墙法与外墙法都不常用,因为添加一个无用的墙在前端开发中推崇结构与样式分离,而隔墙法需要添加大量的没有意义的空标签div示例一 外墙法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外墙法</title><style type="text/css">* {margin: 0;padding: 0;}body {}.header {}.logo {width: 200px;height: 200px;background-color: red;float: left;}.nav {width: 200px;height: 200px;background-color: green;float: left;}.content {width: 960px;height: 200px;background-color: yellow;}.wall {clear: both;height: 20px;}</style>
</head>
<body>
<div class="header"><div class="logo">logo</div><div class="nav">nav</div>
</div>
<!--外墙-->
<div class="wall"></div>
<div class="content">content</div>
</body>
</body>
</html>示例二 内墙法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;}body {}.header {/*margin-bottom: 30px;*/}.logo {width: 200px;height: 200px;background-color: red;float: left;}.nav {width: 200px;height: 200px;background-color: green;float: left;}.content {width: 960px;height: 200px;background-color: yellow;/*margin-top: 30px;*/}.wall {clear: both;height: 30px;}</style>
</head>
<body>
<div class="header"><div class="logo">logo</div><div class="nav">nav</div><!--内墙--><div class="wall"></div>
</div>
<div class="content">content</div>
</body>
</body>
</html>
4. 清除浮动方式四
清除浮动的方式四本质原理与内墙法一样,但我们用的css的伪元素选择器实现的,就应该用css来控制样式,符合前端开发思想详细用法.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容content: ""; <----内容为“” 空display: block; <----加入的这个元素转换为块级元素clear: both; <----清除左右两边浮动visibility: hidden; <----可见度设为隐藏 /* 注意它和display:none;是有区别的 visibility:hidden;仍然占据空间,只是看不到而已 */line-height: 0; <----行高为0height: 0; <----高度为0font-size:0; <----字体大小为0} 整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动1. 伪元素选择器(CSS3中新增的为元素选择器)伪元素选择器的作用before: 给指定标签的内容前面添加一个子元素after: 给指定标签的内容后面添加一个子元素2. 格式标签名称::before{属性名称：值；}标签名称::after{属性名称：值；}3. 示例一
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;}body {}.header:after {content: '';height: 0;display: block;clear: both;visibility: hidden;}.header {/*兼容ie6,否则伪类选择器只能在谷歌浏览器中生效,其余没用*/*zoom: 1;}.logo {width: 200px;height: 200px;background-color: red;float: left;}.nav {width: 200px;height: 200px;background-color: green;float: left;}.content {width: 960px;height: 200px;background-color: yellow;}</style>
</head>
<body>
<div class="header"><div class="logo">logo</div><div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</body>
</html>4. 通用写法/*兼容ie6,否则伪类选择器只能在谷歌浏览器中生效,其余没用*/.clearfix {*zoom:1;} .clearfix:before,.clearfix:after {content: "";display: table;} .clearfix:after {clear: both;} 5. 示例二
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><style>* {margin: 0;padding: 0;}.clearfix {*zoom:1} /*before的作用是子元素设置margin-top父元素不会一起被顶下来after的作用是清除浮动*/.clearfix:before,.clearfix:after {content: " ";display: table}.clearfix:after {clear: both} .father {background-color: purple;}.box1 {width: 200px;height: 300px;background-color: red;margin-top: 100px;}.box2 {width: 200px;height: 200px;background-color: green;}</style>
</head>
<body>
<div class="father clearfix"><div class="box1"></div><div class="box2"></div>
</div>
</body>
</html>
5. 清除浮动方式五
清除浮动的方式五overflow:hidden,但其实它除了清除浮动还有其他方面的用途1. 可以将超出标签范围的内容裁剪掉2. 清除浮动3. 可以通过overflow:hidden,让里面的盒子设置margin-top属性后外面的盒子不被顶下来,这样就不用为外边的盒子添加边框了示例一将超出标签范围的内容剪裁掉
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;}div {width: 200px;height: 50px;background-color: red; /*将超出标签范围的内容剪裁掉*/overflow: hidden;}</style>
</head>
<body>
<div>阿斯蒂芬俺的沙发士大夫撒分萨芬按时发到付阿道夫按时大是大非啊阿道夫阿士大夫撒地方
</div>
</body>
</html>示例二清除浮动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;}body {}.header {overflow: hidden;}.logo {width: 200px;height: 200px;background-color: red;float: left;}.nav {width: 200px;height: 200px;background-color: green;float: left;}.content {width: 960px;height: 200px;background-color: yellow;}</style>
</head>
<body>
<div class="header"><div class="logo">logo</div><div class="nav">nav</div>
</div>
<div class="content">content</div>
</body>
</html>示例三防止父盒子被顶下来
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>清除浮动方式五</title><style>* {margin: 0px;padding: 0px;}.box1 {width: 200px;height: 200px;background-color: red;/*border: 1px solid #000;*/overflow: hidden;}.box2 {width: 100px;height: 100px;background-color: blue;margin-top: 100px;}</style>
</head>
<body>
<div class="box1"><div class="box2"></div>
</div>
</body>
</html>
4. 定位流
1. 相对定位
1. 相对定位基本用法
相对定位相对于自己以前在标准流中的位置来移动格式position：relative需要配合以下四个属性一起使用top:20px;left:30px;right:40px;bottom:50px;
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>* {margin:0;padding:0;}div {width: 100px;height: 100px;}.box1 {background-color: red;}.box2 {background-color: green;position: relative;top: 20px;left: 20px;}.box3 {background-color: blue;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2. 相对定位注意点
注意点在相对定位中同一个方向上的定位属性只能使用一个top/bottom 只能用一个left/right 只能用一个相对定位是不脱离标准流的,会继续在标准流中占用一份空间由于相对定位是不脱离标准流的,所以在相对定位中是区分块级、行内、行内块级元素的并且相对定位的元素会占用标准流中的位置所以当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局即给相对定位的标签设置marin/padding,是以该标签原来的位置为基础来进行偏移的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位margin</title><style>* {margin:0;padding:0;}div {width: 100px;height: 100px;}.box1 {background-color: red;}.box2 {background-color: green;position: relative;top: 20px;left: 20px;/*相对于该标签原来的位置进行偏移*/margin-top: 50px;}.box3 {background-color: blue;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3. 相对定位应用场景
1. 用于对元素进行微调
2. 配合绝对定位来使用
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位使用场景</title><style>* {margin:0;padding:0;}input {width: 200px;height: 50px;}input:focus {outline: none;background-color: #eee;}img {height: 50px;position: relative;top: 20px;}</style>
</head>
<body>
<input type="text" name="call" placeholder="请输入图片中的验证码">
<img src="call.jpg" alt="">
</body>
</html>
2. 绝对定位
1. 绝对定位基本用法
绝对定位相对于body或者某个定位流中的祖先元素来定位
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>div {width: 100px;height: 100px;}.box1 {background-color: red;}.box2 {position: absolute;/*left: 0;*//*top: 10px;*/background-color: green;}.box3 {background-color: blue;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2. 绝对定位的参考点
1. 默认情况下所有的绝对定位的元素,无论有无祖先元素,都会以body作为参考点2. 如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点1. 只要是这个绝对定位元素的祖先元素都可以2. 祖先必须是定位流,此处的定位流指的是绝对定位、相对定位、固定定位(定位流中只有静态定位不行)3. 如果一个绝对定位的元素有祖先元素,而且祖先元素中有多个元素都是定位流那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点示例一默认情况下所有的绝对定位的元素,无论有无祖先元素,都会以body作为参考点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位父元素body</title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: red;position: absolute;right: 0;bottom: 0;}.box2 {width: 2000px;height: 100px;background-color: green;}.box3 {width: 100px;height: 2000px;background-color: blue;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>示例二
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>验证说法二</title><style>* {margin: 0;padding: 0;}.box1 {width: 300px;height: 300px;background-color: red;position: absolute;/*position: relative;*//*position: fixed;*//*position: static;*/}.box2 {width: 200px;height: 200px;background-color: green;/*position: absolute;*//*position: relative;*//*position: fixed;*//*position: static;*//*left: 200px;*//*bottom: 200px;*/}.box3 {width: 100px;height: 100px;background-color: blue;position: absolute;right: 0;bottom: 0;}</style>
</head>
<body>
<div class="box1"><div class="box2"><div class="box3"></div></div>
</div>
</body>
</html>
3. 绝对定位的注意点
1. 绝对定位的元素是脱离标准流的,所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
2. 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点而不是以整个网页的宽度和高度作为参考点,会相对于body定位随着页面的滚动而滚动
3. 一个绝对定位的元素会忽略祖先元素的padding示例一绝对定位的元素不区分块级元素/行内元素/行内块级元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: red;position: absolute;}</style>
</head>
<body>
<span class="box1"></span>
</body>
</html>示例二绝对定位相对于body定位是以首屏为准
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: red;position: absolute;right: 0;bottom: 0;}.box2 {width: 2000px;height: 100px;background-color: green;}.box3 {width: 100px;height: 2000px;background-color: blue;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>示例三一个绝对定位的元素会忽略祖先元素的padding
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background-color: red;padding: 20px;}.box2 {width: 50px;height: 50px;background-color: yellow;position: absolute;left: 0;top: 0;}</style>
</head>
<body>
<div class="box1"><div class="box2"></div>
</div>
</body>
</html>
4. 绝对定位水平居中
1. 注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
2. 如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.box1 {width: 200px;height: 50px;background-color: red;position: absolute;left: 50%;margin-left: -100px;}</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
5. 绝对定位的应用场景
1. 用于对元素进行微调
2. 配合相对定位来使用
企业开发中一般相对定位和绝对定位都是一起出现, 很少单独使用(子绝父相)
1. 子绝父相
子绝父相
示例一
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}ul {width: 800px;height: 50px;list-style: none;margin: 0 auto;}ul li {float: left;width: 100px;/*height: 50px;*/line-height: 50px;text-align: center;}a {display: inline-block;text-decoration: none;width: 100px;height: 50px;background-color: #5c5c62;}a:link {color: white;}a:visited {color: #b9950c;}a:hover{background-color: yellow;}a:hover {color: #55BBBB;}a:active {background-color: #003399;}ul li:nth-of-type(4) {position: relative;}img {width: 35px;/*相对定位弊端相对定位不会脱离标准流会继续在标准流中占用一份空间所以不利于布局界面*//*position: relative;*//*top: -60px;*//*left: 30px;*//*绝对定位弊端绝对定位会脱离标准流不会继续在标准流中占用一份空间但问题是默认情况下绝对定位的元素会以body为参考点所以会随着浏览器的宽度高度的变化而变化*//*position: absolute;top: 0px;left: 608px;*//*子绝父相子元素用绝对定位,父元素用相对定位*/position: absolute;right: 0;top: 0;}</style>
</head>
<body><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">京东超市</a></li><li><a href="#">全球购</a><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515210447998-344384162.png" alt=""></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">金融</a></li></ul>
</body>
</html>
2. 轮播图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图</title><style>* {margin: 0;padding: 0;}div {width: 590px;height: 470px;border: 2px solid gold;margin: 0 auto;margin-top: 100px;position: relative;background-color: green;}span {display: block;width: 40px;/*height: 80px;*/background-color: rgba(0,0,0,0.3);margin-top: 10px;font-size: 50px;color: white;text-align: center;line-height: 80px;}.leftArrow {position: absolute;left: 0px;top:200px;}.rightArrow {position: absolute;right: 0px;top:200px;}ol {list-style: none;width: 200px;height: 40px;background-color: rgba(255,255,255,0.7);position: absolute;right: 10px;bottom:7px;}ol li {width: 40px;/*height: 40px;*/float: left;border: 1px solid gold;box-sizing: border-box;text-align: center;line-height: 40px;}</style>
</head>
<body>
<div><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224016405-1306758469.jpg" alt=""><span class="leftArrow"><</span><span class="rightArrow">></span><ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol>
</div>
</body>
</html>
3. 团购界面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>团购界面</title><style>* {margin: 0;padding: 0;}div {width: 300px;height: 300px;border: 2px solid #ccc;margin: 0 auto;margin-top: 100px;position: relative;}div img {width: 300px;height: 200px;}div .rx {width: 60px;height: 60px;position: absolute;left: 0px;top: 0px;}div .star {width: 70px;height: 15px;position: absolute;left: 0px;top: 205px;}div p {padding-top: 25px;}</style>
</head>
<body>
<div><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224158063-1650448180.jpg" alt=""><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224206323-1896837444.png" alt="" class="rx"><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224212575-1236813022.png" alt="" class="star"><p>多店通用 必胜客欢乐餐厅150元代金券！免费WiFi！</p>
</div>
</body>
</html>
3. 固定定位
1. 固定定位基本用法
1. 固定定位（和绝对定位高度相似,背景的关联方式也高度相似）背景的关联方式background-attachment: fixed;可以让图片不随着滚动条的滚动而滚动而固定定位可以让某一个元素不随着滚动条的滚动而滚动2. 注意点1. 固定定位,就是相对浏览器窗口定位。页面如何滚动,这个盒子显示的位置不变2. 固定定位的元素是脱离标准流的,不会占用标准流中的空间3. 固定定位和绝对定位一样不区分行内、块级、行内块级4. E6不支持固定定位3. 应用场景网页对联广告网页头部通栏4. 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.bg {width: 600px;height: 1000px;border: 1px solid #000;background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224016405-1306758469.jpg");background-repeat: no-repeat;background-attachment: fixed;}div {width: 100px;height: 100px;}.box1 {background-color: red;}.box2 {border: 1px solid #000;border-radius: 50%;text-align: center;line-height: 100px;background-color: green;position: fixed;right: 0;bottom: 0;}.box3 {background-color: blue;}.box4 {background-color: yellow;height: 2000px;}</style>
</head>
<body>
<div class="bg"></div>
<div class="box1"></div>
<div class="box2">回到顶部</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
4. 静态定位
默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流
5. z-index
1. z-index属性用于指定定位的元素的覆盖关系2. 特点1. z-index值表示谁压着谁 数值大的压盖住数值小的 2. 只有定位了的元素,才能有z-index值也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值,而浮动的东西不能用3. z-index值没有单位,就是一个正整数,默认的z-index值是04. 如果大家都没有z-index值（默认所有元素z-index值为0）或者z-index值一样,那么谁写在HTML后面,谁在上面能压住其他定位定位了的元素,永远能够压住没有定位的元素3. 注意点 (从父现象)父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁4. 示例
示例一
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}div {width: 100px;height: 100px;}.box1 {background-color: red;position: relative;top: 0px;left: 0px;z-index: 3;}.box2 {background-color: green;position: absolute;top: 50px;left: 50px;z-index: 2;}.box3 {background-color: blue;position: fixed;left: 100px;top: 100px;z-index: 1;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>示例二
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>z-index</title><style>* {margin: 0;padding: 0;}.father1 {width: 200px;height: 200px;background-color: red;position: relative;z-index: 5;}.father2 {width: 200px;height: 200px;background-color: green;position: relative;z-index: 4;}.son1 {width: 100px;height: 100px;background-color: blue;position: absolute;left: 200px;top: 200px;z-index: 1;}.son2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 250px;/*top: 250px;*/z-index: 2;top: 50px;}</style>
</head>
<body>
<div class="father1"><div class="son1"></div>
</div>
<div class="father2"><div class="son2"></div>
</div>
</body>
</html>
5. 练习
练习: 博客页面
<!doctype html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}.clearfix {*zoom:1}.clearfix:before,.clearfix:after {content: " ";display: table}.clearfix:after {clear: both}.left {/*display: none;*/width: 20%;height: 100%;background-color: rgb(77,77,77);position: fixed;top: 0;left: 0;color: darkgrey;}.left .header-img {width: 120px;height: 120px;border: 5px solid white;border-radius: 50%;overflow: hidden;margin: 20px auto;}.left .header-img img {max-width: 120px;}.left .blog-title {text-align: center;}.left .blog-info {font-size: 12px;text-align: center;margin-top: 10px;}ul li {list-style: none;}a {text-decoration: none;}.blog-link,.blog-tag {margin-top: 20px;text-align: center;/*width: 100px;*//*border: 5px solid #000;*//*margin: 0 auto;*/}.blog-link a,.blog-tag a{color: darkgrey;}.blog-link a:hover,.blog-tag a:hover{color: white;font-size: 14px;}.right {width: 80%;height: 1000px;background-color: #eee;float: right;}.article-list {padding-left: 50px;width: 80%;}.article-list .article {background-color: white;margin-top: 20px;box-shadow: 3px 3px 3px rgba(0,0,0,0.2);}.article-list .article *{padding: 10px;}.article-list .article .article-header p {float: left;font-size: 24px;font-weight: bold;border-left: 5px solid red;}.article-list .article .article-header span {float: right;margin: 10px 0;}.article-list .article .article-info {border-bottom: 1px solid darkgrey;}</style>
</head>
<body>
<div class="left"><div class="header-img"><img src="o_tx.jpg" alt=""></div><div class="blog-title"><p>我的博客</p></div><div class="blog-info"><p>这个人很懒,什么都没留下</p></div><div class="blog-link"><ul><li><a href="#">关于我</a></li><li><a href="#">微博</a></li><li><a href="#">公众号</a></li></ul></div><div class="blog-tag"><ul><li><a href="#">JavaScript</a></li><li><a href="#">Python</a></li><li><a href="#">Golang</a></li></ul></div>
</div>
<div class="right"><div class="article-list"><div class="article"><div class="article-header clearfix"><p>海燕</p><span>2018-07-03</span></div><div class="article-info"><p>在苍茫的大海上,狂风卷积着乌云。在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔</p></div><div class="article-tag"><span># HTML</span><span># CSS</span></div></div><div class="article"><div class="article-header clearfix"><p>海燕</p><span>2018-07-03</span></div><div class="article-info"><p>在苍茫的大海上,狂风卷积着乌云。在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔</p></div><div class="article-tag"><span># HTML</span><span># CSS</span></div></div><div class="article"><div class="article-header clearfix"><p>海燕</p><span>2018-07-03</span></div><div class="article-info"><p>在苍茫的大海上,狂风卷积着乌云。在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔</p></div><div class="article-tag"><span># HTML</span><span># CSS</span></div></div><div class="article"><div class="article-header clearfix"><p>海燕</p><span>2018-07-03</span></div><div class="article-info"><p>在苍茫的大海上,狂风卷积着乌云。在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔</p></div><div class="article-tag"><span># HTML</span><span># CSS</span></div></div></div>
</div>
</body>
</html>
CSS-Cascading Style Sheet_层叠样式表_用法详解相关推荐
- css伪元素before和after用法详解
css伪元素before和after用法详解 要想了解伪元素before和after到底是什么,首先就应该打开编译器敲入代码并在浏览器运行检查 <!DOCTYPE html> <ht ...
- CSS(Cascading Style Sheets) 层叠样式表
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTM ...
- css文本行高是哪个属性_css属性行高line-height的用法详解
css属性行高line-height的用法详解 发布时间:2014-08-02 23:21:52 作者:佚名 我要评论 本文介绍下css中的line-height属性的用法,通过实例学习css ...
- highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
- CSS3(Cascading Style Sheet) 层叠样式表
CSS是Cascading Style Sheet 层叠样式表或级联样式表,简称"样式表".利用样式可以定义页面的样式,大大减少网页的设计工作量.也可以美化页面,精准定制页面的布局 ...
- python中split啥意思_python中split的用法详解_后端开发
如何用python正则表达式匹配字符串?_后端开发 用python正则表达式匹配字符串的方法:1.当匹配单个位置的字符串时,可以使用[(.+?)]正则表达式来提取:2.当连续多个位置的字符串匹配时,可 ...
- dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
- java 函数fun_c语言中fun用法详解_后端开发
Java Dao层的作用_后端开发 Dao层叫数据访问层,属于一种比较底层,比较基础的操作,可以具体到对于某个表或某个实体的增删改查,其Dao层的作用是对数据库的访问进行封装,从而不涉及业务,实现解耦 ...
- python count函数代码_python count函数用法详解_后端开发
fgetc函数的作用详解_后端开发 fgetc函数的作用是从指定文件读入一个字符,要求文件的打开方式必须是以读或读写的方式或者追加的方 式,只写方式是不能读的. 在python中可以使用"c ...
最新文章
- linux windows c system 函数简介
- excel如何匹配同名数据_Excel如何查找名字重复的数据
- 学长毕业日记 :本科毕业论文写成博士论文的神操作
- C/Cpp / 设计模式 / 模板模式
- 今天学了瀑布流的js方法
- MyBatis使增删改不刷新二级缓存
- Xcode 9.2下载地址
- 每日算法系列【LeetCode 1186】删除一次得到子数组最大和
- LIO-SAM探秘之文章索引
- mysql建表语句外键_mysql里面用语句怎么建立表外键的命令
- SQL Server 2012 下载与安装详细教程
- 最新正版win7系统下载
- 前端对页面中的 checked 选中状态的展示
- MySql 磁盘满了的处理
- tensorflow dataset 用法 from_tensor_slices dataset.repeat dataset.batch dataset.shuffle
- c#如何wmf图片转换成png图片_【C#】使用fo-dicom完成BMP，JPG，PNG图片转换为DICOM文件-阿里云开发者社区...
- shp转osm格式——道路文件格式转换
- 基于Java实现的用于计算个人所得税的程序
- 脑洞全开YY无罪－益智类游戏“脑力大战”引发思考
- 利用python计算圆球的体积_Python 实例：概率计算