CSS:层叠样式表

  • (英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  • CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

作用

  • 结构与样式分离的方式，便于后期维护与改版
  • 可以用多套样式，使网页有任意样式切换的效果
  • 使页面载入得更快，降低服务器的成本
  • 等等…

CSS入门

CSS选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>BaiDu</title>
</head>
<body><p>http://www.baidu.com</p><p>百度</p><p>全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p></body>
</html>



<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>BaiDu</title><style type="text/css">p{background-color: red;font-size: 40px;}.p1{font-family: 隶书;} </style><!--p{标签选择器}， .p1{类选择器}-->
</head>
<body><p>http://www.baidu.com</p><p class="p1">百度</p><!--.p1{font-family: 隶书;}--><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p></body>
</html>

背景样式


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>BaiDu</title><style type="text/css">p{background-color: red;font-size: 40px;}.p1{font-family: 隶书;} body{background-color:yellow;background-image: url("img/baidu.jpg");background-repeat: no-repeat;background-attachment: fixed;background-position: top center;}</style><!--p{标签选择器}， .p1{类选择器} body{设置背景颜色 背景图片 背景重复方式  背景不跟随页面内容滚动 背景位置设置}-->
</head>
<body><p>http://www.baidu.com</p><p class="p1">百度</p><!--.p1{font-family: 隶书;}--><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
</body> <!--body{background-color:yellow;}背景设置-->
</html>


外部样式表






index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>BaiDu</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><p>http://www.baidu.com</p><p class="p1">百度</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
</body> <!--body{background-color:yellow;}背景设置-->
</html>

index.css

p{background-color: red;font-size: 40px;
}
.p1{font-family: 隶书;
} body{background-color:yellow;background-image: url("img/baidu.jpg");background-repeat: no-repeat;background-attachment: fixed;background-position: top center;
}

文本类样式




<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>BaiDu</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><p>http://www.baidu.com</p><p class="p1">百度</p><p>1 2 3 4 5 6 7 8 9</p><p>A B C D E F G H I</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p></body> <!--body{background-color:yellow;}背景设置-->
</html>

p{color: green; /*字体颜色*/direction: rtl;/*文本书写方向*/letter-spacing: 20px;/*字符间距*/line-height: 40px;/*行高*/text-align: justify;/*文本对齐方式*//*text-decoration: line-through; 下划线*/text-shadow: 5px 5px 1px red; /*阴影*/text-transform: capitalize; /*首字母大写*/text-indent: 2em; /*首行缩进*/}
/*（direction和text-align针对文字字母无影响，改变文字的书写方式主要针对阿拉伯有效） */

字体类样式


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>BaiDu</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><p>http://www.baidu.com</p><p class="p1">百度</p><p>1 2 3 4 5 6 7 8 9</p><p>A B C D E F G H I</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p></body> <!--body{background-color:yellow;}背景设置-->
</html>

p{/*color: green; 字体颜色*//*direction: rtl;文本书写方向*/letter-spacing: 20px;/*字符间距*/line-height: 40px;/*行高*//*text-align: justify;文本对齐方式*//*text-decoration: line-through; 下划线*//*text-shadow: 5px 5px 1px red; 阴影*/text-transform: capitalize; /*首字母大写*/text-indent: 2em; /*首行缩进*/font-style: italic;/*italic斜体效果,oblique所有倾斜显示*/font-weight: bold;/*bold加粗，normal取消加粗*/font-size: 30px;/*字号*/font-family: 隶书;/*字体*/}

列表样式



默认


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>BaiDu</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><p>http://www.baidu.com</p><p class="p1">百度</p><p>1 2 3 4 5 6 7 8 9</p><p>A B C D E F G H I</p><p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><ul><li>AAAAAAA</li><li>BBBBBBB</li><li>CCCCCCC</li><li>DDDDDDD</li><li>EEEEEEE</li></ul><ol><li>AAAAAAA</li><li>BBBBBBB</li><li>CCCCCCC</li><li>DDDDDDD</li><li>EEEEEEE</li></ol></body> <!--body{background-color:yellow;}背景设置-->
</html>

p{text-transform: uppercase; text-indent: 2em; /*首行缩进*/font-style: italic;/*italic斜体效果,oblique所有倾斜显示*/font-weight: bold;/*bold加粗，normal取消加粗*/font-size: 30px;/*字号*/font-family: 隶书;/*字体*/}ul{list-style-type:circle;list-style-position: inside;list-style-image: url(img/1.gif);/*当以图片为样式时 第一项外观就失效了*/}ol{list-style-type: lower-latin;list-style: inside url(img/1.gif); /*综合写法*/
}

伪类的样式设置

状态伪类






<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>百度</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><p>http://www.baidu.com</p><p>百度</p><a href="#">伪类</a><label>用户名</label></body>
</html>

a:link{color: red;/*未被访问显示红色*/
}a:visited{color: green;/*已访问显示绿色字体变成100px*/
}a:hover{color: yellow;font-size: 50px;/*鼠标悬停显示换色，字体50px*/
}a:active{color: blue; /*激活，鼠标按下去蓝色*/
}label:hover{color: yellow;font-size: 50px;/*鼠标悬停显示换色，字体50px*/
}

结构伪类

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>百度</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><p>http://www.baidu.com</p><p>百度</p><p>淘宝</p></body>
</html>


p:first-child{background-color: red;
} /*父元素第一个元素*/

伪元素选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>百度</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><h1>好好学习，天天向上</h1><p>http://www.baidu.com</p><p>百度</p><p>全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p><table border="1" width="400px"><tr><td>A</td><td>A</td><td>A</td><td>A</td></tr><tr><td>B</td><td>B</td><td>B</td><td>B</td></tr><tr><td>C</td><td>C</td><td>C</td><td>C</td></tr></table></body>
</html>

body::before{content: "body，h1，p任何一个能独立区分的标签都能使用 before在最前面添加文字 ";
}
body::after{content: "body，h1，p任何一个能独立区分的标签都能使用 after在最后面添加文字";
}h1::before{content: "开始>>>>: ";
}/*每一个p标签前面都会加上上诉文字*/
h1::after{content: ":<<<<结束 ";
}/*每一个H标签前面都会加上上诉文字*/p::before{content: "开始>>>>: ";
}/*每一个p标签前面都会加上上诉文字*/
p::after{content: ":<<<<结束 ";
}/*每一个p标签前面都会加上上诉文字*/p::first-line{background: yellow;
} /*每一个段落第一行加上背景颜色*/p::first-letter{font-size: 30px;
}/*每一个段落第一个字符改变字体*/p::selection{background-color:red
} /*p每一个段落里面选中的有红色背景，*::selection{所有}*/

其他选择器


CSS浮动

DIV样式设置



index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>百度</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><h1>好好学习，天天向上</h1><p>http://www.baidu.com</p><p>百度</p><div id="div1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</div>
</body>
</html>

index.css

#div1{background-color: yellow;width: 150px;height: 150px;}




#div1{background-color: yellow;width: 150px;height: 150px;top: 200px;left: 200px;position: absolute;overflow: scroll;
}/*背景颜色，方框，显示位置，决定定位,溢出部分hidden隐藏/scroll滚动条*/



#div1{background-color: yellow;width: 150px;height: 150px;top: 200px;left: 200px;position: absolute;overflow: scroll;outline: dashed;
}
/*背景颜色，方框，显示位置，决定定位,
溢出部分hidden隐藏/scroll滚动条,
outline边框：dashed虚线、none不显示*/


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>百度</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><h1>好好学习，天天向上</h1><p>http://www.baidu.com</p><p>百度</p><div id="div1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</div><div id=div2><label>姓名:</label><input type="text"></div>
</body>
</html>

#div1{background-color: yellow;width: 150px;height: 150px;top: 200px;left: 200px;position: absolute;overflow: scroll;outline: dashed;
}
/*背景颜色，方框，显示位置，决定定位,
溢出部分hidden隐藏/scroll滚动条,
outline边框：dashed虚线、none不显示*/#div2{top: 400px;left: 200px;position: absolute;
}/*border-bottom: solid下边框*/input{border: none;border-bottom: solid;outline: none;
}

盒子模型



<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>百度</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div id="div1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</div><div id="div2">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</div>
</body>
</html>

#div1{width: 200px;height: 200px;overflow: hidden;
}
#div1{background-color: yellow;margin-top: 50px;margin-left: 50px;margin-bottom: 50px;}#div2{background-color: blue;
}*{margin: 50px 50px 50px 50px;
} /*  *{}表示所有*/




浮动




<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div id="div1">DIV1</div><div id="div2">DIV2</div><div id="div3">DIV3</div>
</body>
</html>

div{width: 200px;height: 200px;text-align: center;line-height: 200px;
} /*框200*200 文字居中*/#div1{background-color: yellow;
}
#div2{background-color: red;
}
#div3{background-color: blue;
}

文档流依次从上往下显示

浮动 脱离标准文档流

div{width: 200px;height: 200px;text-align: center;line-height: 200px;
} /*框200*200 文字居中*/#div1{background-color: yellow;float: left;
}/*浮动*/
#div2{background-color: red;width: 300px;
}
#div3{background-color: blue;width: 400px;
}



float初衷，包裹，崩溃

崩溃

正常的情况，不会出现崩溃的情况

（1）一个空白的div中，如果不进行任何尺寸的设定，并且div里面没有任何内容时，div是没有高度的：

（2）当在div中添加内容时候：div中内容的高度就是div的高度；即div中的内容会把div给撑起来；

（3）总结：元素的宽度默认占满父一级元素；；；；元素的高度由子元素撑起来。

2.出现了崩溃：浮动的子元素不能撑起非浮动的父元素

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div id="div1"><div id="div2"></div></div>
</body>
</html>


#div1{border: 1px solid black;background-color: yellow;}#div2{background-color: red;height: 230px;width: 450px;
}


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div id="div1"><div id="div2"></div><div id="div3"></div></div>
</body>
</html>


#div1{border: 1px solid black;background-color: yellow;}#div2{background-color: red;height: 230px;width: 450px;float: left;
}#div3{background-color: blue;height: 160px;width: 500px;float: left;
}

div2，div3增加了浮动效果，我们无法看见div1了
崩溃指的是子元素存在浮动后，父元素没有指定高度就会遭到破坏

包裹


我们设置完浮动后就产生了包裹

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div id="div1"><img src="img/11.jpg"></div>
</body>
</html>


#div1{background-color: yellow;float: left;
}img{vertical-align:bottom;
}/*使用图片标签设置对齐方式为底边对齐*/

初衷

浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div id="div1"><img src="img/2.jpg"><p>浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。</p></div>
</body>
</html>


#div1{background-color: yellow;float: left;
}img{vertical-align:bottom;float: left;
}/*使用图片标签设置对齐方式为底边对齐*/p{margin-top: 0px;text-align: justify;line-height: 1em;
}

清除浮动

  • div1，div4文档流 div2，div3浮动 导致4被覆盖
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div id="div1"><div id="div2"></div><div id="div3"></div><div id="div4"></div></div>
</body>
</html>

#div1{background-color: red;
}
#div2{background-color: yellow;float: left;width: 200px;height: 200px;
}#div3{background-color: blue;float: left;width: 220px;height: 220px;
}#div4{background-color: black;width: 240px;height: 240px;
}


#div1{background-color: red;
}
#div2{background-color: yellow;float: left;width: 200px;height: 200px;
}#div3{background-color: blue;float: left;width: 220px;height: 220px;
}#div4{background-color: black;width: 240px;height: 240px;clear: both;
} /*clear: both清除浮动*/

CSS定位

相对定位


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div class="main"><div class="div1"></div>天不生我李淳罡，剑道万古如长夜。剑来！”要说雪中悍刀行哪一句话最牛皮，得到最广泛的传播，那必然是这一句“天不生我李淳罡”。虽然这句话是烽火大总管对“天不生夫子，万古如长夜”的改编，但是和李淳罡这个羊皮裘老头结合在一起，就具有了新生命。只要是看过雪中的书友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的剑神风范。而且，很搞笑的是，由于这一句太流行了，网上有太多模仿这句话的梗。比如说：“天不生我王境泽，饭道万古如长夜，饭来”，“天不生我吕小树，贱道万古如长夜...</div>
</body>
</html>

.main{width: 600px;height: 600px;background-color: #123456;
}.div1{width: 100px;height: 100px;background-color: red;position: relative;top: 50px;left: 50px;
}/*相对定位 上边距 左边据   相对定位是相对的之前的位置进行偏移*/

绝对定位

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div class="main"><div class="div1"></div>天不生我李淳罡，剑道万古如长夜。剑来！”要说雪中悍刀行哪一句话最牛皮，得到最广泛的传播，那必然是这一句“天不生我李淳罡”。虽然这句话是烽火大总管对“天不生夫子，万古如长夜”的改编，但是和李淳罡这个羊皮裘老头结合在一起，就具有了新生命。只要是看过雪中的书友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的剑神风范。而且，很搞笑的是，由于这一句太流行了，网上有太多模仿这句话的梗。比如说：“天不生我王境泽，饭道万古如长夜，饭来”，“天不生我吕小树，贱道万古如长夜...</div>
</body>
</html>

.main{width: 600px;height: 600px;background-color: #123456;position: absolute;top: 50px;left: 50px;
}.div1{width: 100px;height: 100px;background-color: red;position: absolute;top: 50px;left: 50px;
}/*绝对定位 上边距 左边据   绝对定位是参照父级元素如果没有父级就参照body*/

相对和绝对

绝对

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div class="div1"></div><div class="div2"></div><div class="div3"></div>
</body>
</html>

div{width: 100px;height: 100px;
}.div1{background-color: red;position: absolute;top: 100px;left: 100px;
}/*绝对定位有浮动的效果*/
.div2{background-color: green;
}
.div3{background-color: blue;
}



相对

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div class="div1"></div><div class="div2"></div><div class="div3"></div>
</body>
</html>

div{width: 100px;height: 100px;
}.div1{background-color: red;position: relative;top: 100px;left: 100px;
}/*绝对定位有浮动的效果*/
.div2{background-color: green;position: relative;top: 100px;left: 100px;
}
.div3{background-color: blue;position: relative;top: 100px;left: 100px;
}


添加一个父级元素，对父级元素进行偏移

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div class="div0"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div>
</body>
</html>

div{width: 100px;height: 100px;
}
.div0{position: relative;left: 200px;
}
.div1{background-color: red;
}
.div2{background-color: green;
}
.div3{background-color: blue;
}

div{width: 100px;height: 100px;
}
.div0{position: absolute;left: 200px;
}
.div1{background-color: red;
}
.div2{background-color: green;
}
.div3{background-color: blue;
}

在父级元素偏移，相对和绝对基本上无变化

z-index

  • 决定谁前谁后，数字越大越前
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div class="div0"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div>
</body>
</html>

div{width: 100px;height: 100px;
}
.div0{left: 200px;
}
.div1{background-color: red;position: absolute;top: 20px;left: 100px;
}
.div2{background-color: green;position: absolute;top: 40px;left: 120px;
}
.div3{background-color: blue;position: absolute;top: 60px;left: 140px;
}


div{width: 100px;height: 100px;
}
.div0{left: 200px;
}
.div1{background-color: red;position: absolute;top: 20px;left: 100px;z-index: 1;
}
.div2{background-color: green;position: absolute;top: 40px;left: 120px;z-index: 3;
}
.div3{background-color: blue;position: absolute;top: 60px;left: 140px;z-index: 2;
}

固定定位

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>DIV</title><link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body><div class="div1">李淳罡</div><div class="div2"><p>天不生我李淳罡，剑道万古如长夜。剑来！”要说雪中悍刀行哪一句话最牛皮，得到最广泛的传播，那必然是这一句“天不生我李淳罡”。虽然这句话是烽火大总管对“天不生夫子，万古如长夜”的改编，但是和李淳罡这个羊皮裘老头结合在一起，就具有了新生命。只要是看过雪中的书友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的剑神风范。而且，很搞笑的是，由于这一句太流行了，网上有太多模仿这句话的梗。比如说：“天不生我王境泽，饭道万古如长夜，饭来”，“天不生我吕小树，贱道万古如长夜...</p></div><div class="div3">木马牛</div>
</body>
</html>

.div1{width: 5%;height: 100px;position: fixed;top: 200px;left: 10px;background-color: yellow;
}/*固定定位*/
.div2{width: 70%;position: relative;left: 10%;
}
.div3{width: 5%;height: 100px;position: fixed;top: 200px;right: 10px;background-color: yellow;
}/*固定定位*/

前端基础-02-CSS相关推荐

  1. 前端基础：CSS 3

    前端基础:CSS 3 文章目录 前言 一.什么是CSS 0. CSS的简单介绍 1. 什么是CSS 2. CSS发展史 3. CSS的快速入门及优势 4. 四种CSS导入方式 二.选择器 1. 三种基 ...

  2. 外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明

    随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...

  3. 前端基础之CSS复合选择器

    ## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础 # CSS 第二天 今天我们围绕一个 导航栏案例进行 ...

  4. web前端基础与CSS入门

    web前端基础 1.嵌套列表 注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...

  5. 前端基础02：CSS

    学习路线 什么是CSS CSS怎么用 (快速入门) CSS选择器 (重点 + 难点) 美化网页 (文字,阴影,超链接,列表,渐变-) 盒子模型 浮动 定位 网页动画 (特效效果) 一.什么是CSS C ...

  6. web前端基础html,css,js,jquery

    目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...

  7. 前端基础之CSS盒子模型

    目录 长度单位 像素 百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型 内容区(content) 边框(border) 内边距(padding) 外边距(ma ...

  8. Java学习07–前端基础之CSS

    Java学习07–CSS基础 1.CSS介绍 1.1.发展史 css1.0 基本 css2.0 div(块)+css html与css结构分离的思想网页变简单 css2.1 浮动,定位 css3.0 ...

  9. ☀️前端基础—【CSS✨✨✨】

    文章目录(PS:觉得不错请点赞收藏支持一下) 一.CSS 初识 1.1 概念 1.2 引入 CSS 样式表 1.2.1 行内式(内联样式) 1.2.2 内部样式表(内嵌样式表) 1.2.3 外部样式表 ...

  10. 前端基础(HTML,CSS,JavaScript,jQuery)

    文章目录 `HTML` 基础 `HTML`文件的基本结构 标签 属性 转义字符 元素之间的关系 常用标签 基本 列表 图片 表格 嵌套页面 表单 `form`提交表单的属性: `GET`请求的特点 ` ...

最新文章

  1. java编写代码用什么_如何学习用Java编写代码：为什么要学习以及从哪里开始
  2. mysql单用户赋予多库权限
  3. ASP.Net全局变量的设置和读取方法
  4. Java编程的逻辑 (84) - 反射
  5. 一个控制器怎么转发到另外一个控制器_楼宇自动化系统（BAS），DDC，一个最核心的控制器...
  6. [codevs1262] 不要把球传我 数论+组合数学
  7. Linux实战 | Centos6.8安装matlab的mount挂载问题的解决方法_3
  8. AutoFDO自动反馈式优化
  9. C++基础知识（八）例外、异常处理
  10. JQuery 选择器总结
  11. cb使用msagent
  12. java 代码行数统计工具_代码行数统计工具
  13. 机器码、序列号、认证码、注册码的生成算法（三）
  14. 远景论坛黑苹果专区_黑苹果扯犊子篇
  15. Python的学习心得和知识总结（十二）|Python图形用户接口编程（Graphical User Interface编程 一）
  16. linux redis-trib.rb,redis集群配置 执行 redis-trib.rb 报错解决方法
  17. Unity 3D课程总结
  18. RMQ倍增，附赠有趣小故事一发
  19. 平面设计师怎么找素材？
  20. 【编程开发】之微信登录

热门文章

  1. [CODE【VS】]江哥的DP题d
  2. SecureCrt配置之自动存储操作日志
  3. python非可选参数_带plac的可选参数的默认值和非默认值 - python
  4. 夯实基础——P1830 轰炸III
  5. PKU C++课程期末编程题解答
  6. ffmpeg_Cropping Video(剪裁视频)
  7. 对于干涉仪二维测向的一些要点
  8. 自动驾驶地图中的深度学习
  9. GraphQL的探索之路 – 一种为你的API而生的查询语言 - 第314篇
  10. 2020-08-17:为什么HashMap中数组的容量为2的次幂？