CSS简介
CSS编写
行内样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 style="color:aquamarine;font-size: 60px;">欢迎来到振华中学</h1>
</body>
</html>
内部样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1{
color:aquamarine;
font-size: 40px;
}
h2{
color:red;
font-size: 60px;
}
p{
color:blue;
font-size: 80px;
}
img{
width:"200px";
}
</style>
</head>
<body>
<h1>欢迎来到振华中学</h1>
<h2>八月长安</h2>
<p>樊振东世界第一</p>
<p>樊振东世界第一</p>
<img src="../资料/图片/喜羊羊.jpg" alt="喜羊羊">
</body>
</html>
外部样式
h1{
color:aquamarine;
font-size: 40px;
}
h2{
color:red;
font-size: 60px;
}
p{
color:blue;
font-size: 80px;
}
img{
width:"200px";
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./a.css">
</head>
<body>
<h1>欢迎来到振华中学</h1>
<h2>八月长安</h2>
<p>樊振东世界第一</p>
<img src="../资料/图片/喜羊羊.jpg" alt="喜羊羊">
</body>
</html>
样式表的优先级
语法规范
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
/* 字体颜色 */
color:blueviolet;
font-size: 40px;
}
</style>
</head>
<body>
<h1>welcome to zhenhua!</h1>
</body>
</html>
代码风格
CSS选择器
通配选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
color:blueviolet;
font-size: 40px;
}
</style>
</head>
<body>
<h1>welcome to zhenhua!</h1>
<br>
<h2>振华四部曲</h2>
<h3>作者：八月长安</h3>
<p>《你好，旧时光》</p>
<p>《橘生淮南.暗恋》</p>
<p>《最好的我们》</p>
<p>《这么多年》</p>
</body>
</html>
元素选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
color: antiquewhite;
}
h2 {
color:cornflowerblue;
}
h3 {
color: crimson;
}
p {
color:darkolivegreen;
font-size: 20px;
}
</style>
</head>
<body>
<h1>welcome to zhenhua!</h1>
<br>
<h2>振华四部曲</h2>
<h3>作者：八月长安</h3>
<p>《你好，旧时光》</p>
<p>《橘生淮南.暗恋》</p>
<p>《最好的我们》</p>
<p>《这么多年》</p>
<br>
<h2>振华四部曲</h2>
<h3>作者：八月长安</h3>
<p>《你好，旧时光》</p>
<p>《橘生淮南.暗恋》</p>
<p>《最好的我们》</p>
<p>《这么多年》</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 选中页面中所有类名为say的元素 */
.say {
color: blanchedalmond;
}
/* 选中页面中所有类名为ans的元素 */
.ans {
color: aquamarine;
}
.big {
font-size: 60px;
}
</style>
</head>
<body>
<h1>welcome to zhenhua!</h1>
<br>
<h2>振华四部曲</h2>
<h3>作者：八月长安</h3>
<p class="say big">I：《你好，旧时光》</p>
<p class="say">I：《橘生淮南.暗恋》</p>
<p class="say">I：《最好的我们》</p>
<p class="say">I：《这么多年》</p>
<br>
<h2>振华四部曲</h2>
<h3>作者：八月长安</h3>
<p class="ans">YOU:《你好，旧时光》</p>
<p class="ans">YOU:《橘生淮南.暗恋》</p>
<p class="ans">YOU:《最好的我们》</p>
<p class="ans">YOU:《这么多年》</p>
</body>
</html>
ID选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#zhenhua {
color: red;
}
#zhenzhen {
color: salmon;
}
</style>
</head>
<body>
<h1>welcome to zhenhua!</h1>
<br>
<h2 id="zhenhua">振华四部曲</h2>
<h3>作者：八月长安</h3>
<p>I：《你好，旧时光》</p>
<p>I：《橘生淮南.暗恋》</p>
<p>I：《最好的我们》</p>
<p>I：《这么多年》</p>
<br>
<h2 id="zhenzhen">振华四部曲</h2>
<h3>作者：八月长安</h3>
<p>YOU:《你好，旧时光》</p>
<p>YOU:《橘生淮南.暗恋》</p>
<p>YOU:《最好的我们》</p>
<p>YOU:《这么多年》</p>
</body>
</html>
交集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.rich{
color:gold;
}
.pretty{
color:blue;
}
p.pretty{
color:green;
}
.rich.pretty{
color: orange;
}
</style>
</head>
<body>
<h2 class="rich">小太阳林杨</h2>
<h2 class="pretty">学霸林杨</h2>
<h2 class="rich pretty">小太阳学霸林杨</h2>
<hr>
<p class="pretty">小燕子詹燕飞</p>
<p class="pretty">一碗大白粥</p>
</body>
</html>
并集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.rich{
color:gold;
}
.pretty{
color:blue;
}
.dog{
color:green;
}
.pig{
color: orange;
}
#qian,
.rich,
.pretty,
.dog,
.pig{
font-size: 40px;
background-color: chartreuse;
width: 300px;
}
</style>
</head>
<body>
<h2 class="rich">小太阳林杨</h2>
<h2 class="pretty">学霸林杨</h2>
<h2>小太阳学霸林杨</h2>
<hr>
<p class="dog">小燕子詹燕飞</p>
<p class="pig">一碗大白粥</p>
<p id="qian">茜茜公主凌翔茜</p>
</body>
</html>
后代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li {
color:red;
}
ol li{
color: aquamarine;
}
ul li a {
color: gray;
}
ol li a {
color: fuchsia;
}
.subject li{
color: sienna;
}
.subject #front-end{
color: bisque;
}
</style>
</head>
<body>
<ul>
<li>读书</li>
<li>电影</li>
<li>
<a href="#">音乐</a>
</li>
</ul>
<hr>
<ol>
<li>林杨</li>
<li>余周周</li>
<li>
<a href="#">陈见夏</a>
</li>
</ol>
<hr>
<ol class="subject">
<li id="front-end">前端</li>
<li>java</li>
<li>大数据</li>
<li>UI</li>
</ol>
</body>
</html>
子代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div>a{
color: red;
}
div>p>a{
color: blue;
}
.foot>a{
color:pink;
}
</style>
</head>
<body>
<div>
<a href="#">林杨</a>
<a href="#">耿耿</a>
<a href="#">余淮</a>
<p>
<a href="#">余周周</a>
<div class="foot">
<a href="#">李燃</a>
</div>
</p>
</div>
</body>
</html>
兄弟选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 选中div后紧紧相邻的兄弟p元素 相邻兄弟选择器*/
div+p {
color: aquamarine;
}
/* 选中div后所有的兄弟p元素 通用兄弟选择器*/
div~p {
color: red;
}
</style>
</head>
<body>
<p>八月长安</p>
<div>振华</div>
<p>高一</p>
<p>高二</p>
<p>高三</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 第一种写法：选中具有title属性的元素 */
[title] {
color: pink;
}
/* 第二种写法：选中具有title属性，且属性值为wt3的元素 */
[title="wt3"] {
color:blueviolet;
}
/* 第三种写法： 选中具有title属性，且属性值以字母t开头的元素*/
[title^="t"] {
color: chartreuse;
}
/* 第四种写法： 选中具有title属性，且属性值以字母2结尾的元素*/
[title$="3"] {
color: forestgreen;
}
/* 第五种写法： 选中具有title属性，且属性值包含字母m的元素*/
[title*="m"] {
color: red;
}
</style>
</head>
<body>
<div title="watermelon1">西瓜1</div>
<div title="watermelon2">西瓜2</div>
<div title="wt3">西瓜3</div>
<div title="t4">西瓜4</div>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 什么是伪类：是元素特殊状态的一种描述 */
/* 选中的是没有访问过的a元素 */
a:link {
color: orange;
}
/* 选中的是访问过的a元素 */
a:visited {
color: gray;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
</body>
</html>
动态伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 选中的是没有访问过的a元素 */
a:link {
color: orange;
}
/* 选中的是访问过的a元素 */
a:visited {
color: gray;
}
/* 选中的是鼠标悬浮状态的a元素 */
a:hover {
color: aqua;
}
/* 选中的是激活状态的a元素 */
a:active {
color: greenyellow;
}
span:hover {
color: purple;
}
span:active {
color: blue;
}
/* */
input:focus {
color: orange;
background-color: green;
}
select:focus {
color: orange;
background-color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<span>振华中学</span>
<br>
<input type="text">
<br>
<input type="text">
<br>
<input type="text">
<select>
<option value="beijing">北京</option>
<option value="guangzhou">广州</option>
</select>
</body>
</html>
结构伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 选中的是div的第一个儿子p元素 */
div>p:first-child {
color: red;
}
/* 选中的是div的最后一个儿子p元素 */
div>p:last-child {
color: red;
}
/* 选中的是div的第n个儿子p元素 */
div>p:nth-child(3) {
color: red;
}
/* 选中的是前5个 */
div>p:nth-child(-n+5) {
color: red;
}
/* 选中的是div的第一个儿子p元素（按所有同类型兄弟计算） */
div>p:first-of-type {
color: red;
}
/* 选中的是div的最后一个儿子p元素（按所有同类型兄弟计算） */
div>p:last-of-type {
color: red;
}
/* 选中的是div的第n个儿子p元素（按所有同类型兄弟计算） */
div>p:nth-of-type(3) {
color: red;
}
/* 选中的是div中倒数第n个的儿子p元素（按所有兄弟计算） */
div>p:nth-last-child(3) {
color: red;
}
/* 选中的是div中倒数第n个的儿子p元素（按所有同类型兄弟计算） */
div>p:nth-last-of-type(2) {
color: red;
}
/* 选中的是没有兄弟的span元素 */
span:only-child {
color: red;
}
/* 选中的是没有同类型兄弟的span元素 */
span:only-of-type {
color: red;
}
/* 选中的是根元素 */
:root{
background-color: gainsboro;
}
/* 选中的是没有内容的div元素 */
div:empty{
width: 100px;
height: 100px;
color: coral;
}
</style>
</head>
<body>
<div>
<span>陈见夏：130分</span>
</div>
<div>
<p>余周周：150分</p>
<p>林杨：149分</p>
<p>凌翔茜：140分</p>
<p>余淮：138分</p>
<p>楚天阔：138分</p>
<p>耿耿：80分</p>
</div>
</body>
</html>
否定伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 选中div的儿子p元素，排除类名为fail的元素 */
div>p:not(.fail){
color: red;
}
/* 选中div的儿子p元素，排除title属性值以内的 */
div>p:not([title^="你要加油呀"]){
color: aquamarine;
}
/* 选中的是div儿子p元素，排除第一个儿子p元素 */
div>p:not(:first-child){
color:bisque;
}
</style>
</head>
<body>
<div>
<p>余周周：150分</p>
<p>林杨：149分</p>
<p>凌翔茜：140分</p>
<p>余淮：138分</p>
<p>楚天阔：138分</p>
<p class="fail" title="你要加油呀，耿耿">耿耿：80分</p>
<p class="fail" title="你要加油呀，李燃">李燃：60分</p>
</div>
</body>
</html>
UI伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 选中的是勾选的复选框或单选按钮 */
input:checked {
width: 100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled{
background-color: gray;
}
/* 选中的是可用的input元素 */
input:enabled{
background-color: greenyellow;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
</body>
</html>
目标伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
background-color: goldenrod;
height: 300px;
}
div:target {
background-color: aquamarine;
}
</style>
</head>
<body>
<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>
<a href="#four">去看第4个</a>
<a href="#five">去看第5个</a>
<a href="#six">去看第6个</a>
<div id="one">第1个</div>
<br>
<div id="two">第2个</div>
<br>
<div id="three">第3个</div>
<br>
<div id="four">第4个</div>
<br>
<div id="five">第5个</div>
<br>
<div id="six">第6个</div>
<br>
</body>
</html>
语言伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:lang(en) {
color: aquamarine;
}
:lang(zh-CN) {
color: orange;
}
</style>
</head>
<body>
<div>振华中学</div>
<div lang="en">zhenhuazhongxue</div>
<p>旧时光</p>
<span>橘生淮南</span>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 伪元素很像元素，但不是元素，是元素中的一些特殊位置 */
/* 选中div中第一个文字 */
div::first-letter{
color:red;
font-size:40px ;
}
/* 选中div中第一行文字 */
div::first-line{
background-color: aquamarine;
}
/* 选中的是div中被鼠标选择的元素 */
div::selection{
background-color: aquamarine;
color: blue;
}
/* 选中的是input中的提示文字 */
input::placeholder{
color: cornflowerblue;
}
/* 选中的是p元素最开始的位置，随后创建一个子元素 */
p::before{
content: "￥";
}
/* 选中的是p元素最后面的位置，随后创建一个子元素 */
p::after{
content: ".00";
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae consequuntur possimus ipsa libero ut totam? Minima, veritatis fugit. Ut odit ea, assumenda voluptas beatae nesciunt molestiae eveniet dolore labore vel.
</div>
<input type="text" placeholder="input your name please:">
<p>199.00</p>
<p>299.00</p>
<p>399.00</p>
<p>499.00</p>
</body>
</html>
选择器优先级
CSS三大特性
CSS颜色
颜色名
rgb或rgba
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.zhenhua {
color: rgb(138,43,226);
}
.zhenhua1 {
color: rgb(100%,0%,0%);
}
.zhenhua2 {
color: rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<div class="zhenhua">振华中学</div>
<div class="zhenhua1">振华中学1</div>
<div class="zhenhua2">振华中学2</div>
</body>
</html>
透明度0~1
HEX或HEXA
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.zhenhua {
color: #ff000022;
}
.zhenhua1 {
color: #c7edc7;
}
.zhenhua2 {
color: #87ceeb;
}
.zhenhua3 {
color: #fcdf;
}
</style>
</head>
<body>
<div class="zhenhua">振华中学</div>
<div class="zhenhua1">振华中学1</div>
<div class="zhenhua2">振华中学2</div>
<div class="zhenhua3">振华中学3</div>
</body>
</html>
HSL或HSLA
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.zhenhua {
color: hsl(0,100%,50%);
}
.zhenhua1 {
color: hsl(60,100%,50%);
}
.zhenhua2 {
color: hsl(120,100%,50%);
}
.zhenhua3 {
color: hsla(180,100%,50%,0.678);
}
</style>
</head>
<body>
<div class="zhenhua">振华中学</div>
<div class="zhenhua1">振华中学1</div>
<div class="zhenhua2">振华中学2</div>
<div class="zhenhua3">振华中学3</div>
</body>
</html>
常用字体属性
字体大小
字体族
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.zhen1 {
font-size: 100px;
font-family: "微软雅黑";
}
.zhen2 {
font-size: 100px;
font-family: "华文彩云";
}
.zhen3 {
font-size: 100px;
font-family: "宋体";
}
.zhen4 {
font-size: 100px;
font-family: "Microsoft YaHei";
}
</style>
</head>
<body>
<div class="zhen1">振华中学1</div>
<div class="zhen2">振华中学2</div>
<div class="zhen3">振华中学3</div>
<div class="zhen4">振华中学4</div>
</body>
</html>
字体风格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.zhen1 {
font-size: 100px;
font-style: normal;
}
.zhen2 {
font-size: 100px;
font-style: normal;
}
.zhen3 {
font-size: 100px;
font-style: italic;
}
.zhen4 {
font-size: 100px;
font-style: oblique;
}
</style>
</head>
<body>
<div class="zhen1">振华中学1</div>
<div class="zhen2">振华中学2</div>
<div class="zhen3">振华中学3</div>
<div class="zhen4">振华中学4</div>
</body>
</html>
字体粗细
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.zhen1 {
font-size: 100px;
font-weight: lighter;
}
.zhen2 {
font-size: 100px;
font-weight: normal;
}
.zhen3 {
font-size: 100px;
font-weight: bold;
}
.zhen4 {
font-size: 100px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="zhen1">振华中学1</div>
<div class="zhen2">振华中学2</div>
<div class="zhen3">振华中学3</div>
<div class="zhen4">振华中学4</div>
</body>
</html>
字体符合属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.zhen1 {
font:bold italic 100px "华文彩云"
}
</style>
</head>
<body>
<div class="zhen1">振华中学1</div>
</body>
</html>
常用文本属性
文本颜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 100px;
}
.zhen1 {
color: red;
}
.zhen2 {
color: rgb(255,0,0);
}
.zhen3 {
color: rgba(255,0,0,0.5);
}
.zhen4 {
color: #00f;
background-color: orange;
}
</style>
</head>
<body>
<div class="zhen1">振华中学1</div>
<div class="zhen2">振华中学2</div>
<div class="zhen3">振华中学3</div>
<div class="zhen4">振华中学4</div>
</body>
</html>
文本间距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 30px;
}
.zhen2 {
/* 字母间距 */
letter-spacing: 20px;
}
.zhen3 {
/* 单词间距 */
word-spacing: 20px;
}
</style>
</head>
<body>
<div>You got a dream, you gotta protect it.振华1</div>
<div class="zhen2">You got a dream, you gotta protect it.振华2</div>
<div class="zhen3">You got a dream, you gotta protect it.振华3</div>
</body>
</html>
文本修饰
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 40px;
}
.zhen1 {
/* 上画虚线 */
text-decoration: overline dotted;
}
.zhen2 {
/* 下滑红色波浪线 */
text-decoration: underline wavy red;
}
.zhen3 {
text-decoration: line-through;
}
.zhen4,ins,del {
/* 没有线 */
text-decoration: none;
}
</style>
</head>
<body>
<div class="zhen1">振华中学1</div>
<div class="zhen2">振华中学2</div>
<div class="zhen3">振华中学3</div>
<a class="zhen4" href="https://www.baidu.com">振华中学4</a>
<ins>测试1</ins>
<del>测试2</del>
</body>
</html>
文本缩进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 40px;
text-indent: 80px;
}
</style>
</head>
<body>
<div>欢迎来到霍格沃茨！欢迎来到霍格沃茨！欢迎来到霍格沃茨！欢迎来到霍格沃茨！欢迎来到霍格沃茨！</div>
</body>
</html>
文本对齐
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 40px;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>霍格沃茨</div>
</body>
</html>
行高
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 40px;
background-color: orange;
/* 第一种写法：值为像素 */
line-height: 40px;
/* 第二种写法：值为normal */
line-height: normal;
/* 第三种写法：值为数值 */
line-height: 1.5;
/* 第四种写法：值为百分比 */
line-height: 150%;
}
</style>
</head>
<body>
<div class="zhen">振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 注意点1：行高过小————文字重叠，且最小值为0，不能为负数
#zhen1 {
font-size: 40px;
background-color: orange;
line-height: 0px;
} */
/* 注意点2：行高可以继承
#zhen2 {
font-size: 40px;
background-color: orange;
line-height: 1.5;
}
span {
font-size: 200px;
color: red;
line-height: 1.5;
}*/
/* 注意点3：line-height和height是什么关系？
设置了height，高度就为height值；
没有设置height，高度为line-height*行数
*/
#zhen3 {
font-size: 40px;
background-color: yellowgreen;
line-height: 100px;
height: 300px;
}
</style>
</head>
<body>
<!-- <div id="zhen1">振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！</div> -->
<!-- <div id="zhen2">振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！<span>振华中学</span>，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！振华中学，平安喜乐，万事胜意！</div> -->
<div id="zhen3">振华中学，平安喜乐，万事胜意！</div>
</body>
</html>
文本对齐_垂直
vertical-align
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 100px;
height: 300px;
background-color: skyblue;
}
span {
font-size: 40px;
background-color: orange;
vertical-align: top;
}
img {
height: 150px;
vertical-align: middle;
}
.san {
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
振华中学<span>耿耿</span>
</div>
<hr>
<div>
振华中学<img src="../资料/图片/灰太狼.jpg">
</div>
<hr>
<table border="1" cellspacing="0">
<caption>人员信息</caption>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td class="san" height="200px">zhansan</td>
<td>18</td>
<td>mail</td>
</tr>
<tr>
<td>lisi</td>
<td>18</td>
<td>mail</td>
</tr>
</tbody>
</table>
</body>
</html>
列表相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
/* 列表符号 */
list-style-type: square;
/* 列表符号位置 */
list-style-position: outside;
/* 自定义列表符号 */
list-style-image: url("../资料/图片/video.gif");
/* 符合属性 */
list-style: square outside url("../资料/图片/video.gif");
}
li {
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>《你好，旧时光》</li>
<li>《暗恋.橘生淮南》</li>
<li>《最好的我们》</li>
</ul>
</body>
</html>
表格属性
边框相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
/* border-width: 2px;
border-color: aquamarine;
border-style: solid; */
border:2px aquamarine solid;
}
td,th {
border:2px aquamarine solid;
}
h2 {
border: 3px red solid;
}
span{
border: 3px purple dashed;
}
</style>
</head>
<body>
<h2>边框相关属性，不仅仅是表格能用，其他元素也能用</h2>
<span>你要加油</span>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>林杨</td>
<td>18</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>余淮</td>
<td>18</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>3</td>
<td>李燃</td>
<td>18</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>4</td>
<td>余周周</td>
<td>18</td>
<td>女</td>
<td>党员</td>
</tr>
</tbody>
</table>
</body>
</html>
表格独有属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
width: 500px;
border:2px aquamarine solid;
/* 控制表格列宽 */
table-layout: fixed;
/* 控制单元格间距 */
border-spacing: 10px;
/* 合并相邻单元格边框 */
border-collapse: collapse;
/* 隐藏没有内容的单元格 */
empty-cells: hide;
/* 设置表格标题位置 */
caption-side: top;
}
td,th {
border:2px orange solid;
}
.col {
width: 50px;
}
</style>
</head>
<body>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th class="col">序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>林杨</td>
<td>18</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>余淮</td>
<td>18</td>
<td>男</td>
<td>团员</td>
</tr>
<tr>
<td>3</td>
<td>李燃</td>
<td>18</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>4</td>
<td>余周周</td>
<td>18</td>
<td>女</td>
<td>党员</td>
</tr>
</tbody>
</table>
</body>
</html>
背景相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
border: black solid;
font-size: 20px;
/* 设置背景颜色，默认值transparent */
background-color: skyblue;
/* 设置背景图片 */
background-image: url(../资料/图片/悟空.jpg);
/* 设置背景图片重复方式 */
background-repeat: no-repeat;
/* 控制背景图片位置————第一种写法：关键词 */
background-position: right center;
/* 控制背景图片位置————第二种写法：具体像素值 */
background-position: 10px 20px;
/* 符合属性 */
background: skyblue url(../资料/图片/悟空.jpg) no-repeat 300px;
}
</style>
</head>
<body>
<div>平安喜乐，万事胜意！</div>
</body>
</html>
鼠标相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
background-color: aqua;
cursor: url("../资料/图片/arrow.png"),pointer;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<div>振华中学一日游<input type="text"></div>
<a href="#">百度</a>
<button>点我</button>
</body>
</html>
CSS盒子模型
常用的长度单位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 第一种长度单位：像素px */
#d1 {
width: 200px;
height: 200px;
font-size: 20px;
background-color: skyblue;
}
/* 第二种长度单位：em（相当于当前元素的font-size的倍数） */
#d2 {
width: 10em;
height: 10em;
font-size: 1em;
background-color: orange;
}
/* 第三种长度单位：rem（相当于根元素的font-size的倍数） */
#d3 {
width: 10rem;
height: 10rem;
font-size: 20px;
background-color: orange;
}
#d4 {
width: 200px;
height: 200px;
font-size: 20px;
background-color: gray;
}
.inside {
width: 50%;
height: 20%;
font-size: 20px;
background-color: aquamarine;
}
.test {
font-size: 20px;
text-indent: 2em;
background-color: yellowgreen;
}
</style>
</head>
<body style="font-size: 30px;">
<div id="d1">1</div>
<hr>
<div id="d2">2</div>
<hr>
<div id="d3">3</div>
<hr>
<div id="d4">
<div class="inside"></div>
</div>
<hr>
<div class="test">好好学习，天天向上</div>
</body>
</html>
元素的显示模式
修改元素的显示模式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 20px;
width: 200px;
height: 200px;
display: block;
}
#d1 {
background-color: skyblue;
}
#d2 {
background-color: orange;
}
#d3 {
background-color: green;
}
a {
font-size: 20px;
height: 200px;
width: 200px;
display: block;
}
#s1 {
background-color: skyblue;
}
#s2 {
background-color: orange;
}
#s3 {
background-color: green;
}
</style>
</head>
<body>
<div id="d1">hello1</div>
<div id="d2">hello2</div>
<div id="d3">hello3</div>
<hr>
<a id="s1" href="https://www.baidu.com">去百度</a>
<a id="s2" href="https://www.jd.com">去京东</a>
<a id="s3" href="https://www.toutiao.com">去头条</a>
</body>
</html>
盒子模型组成部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/* 内容区的宽 */
width: 400px;
/* 内容区的高 */
height: 400px;
/* 内边距,设置的背景颜色会填充内边距 */
padding: 20px;
/* 边框：设置的背景颜色会填充边框区域 */
border: 10px solid black;
/* 外边距 */
margin: 50px;
font-size: 20px;
background-color: gray;
}
</style>
</head>
<body>
<div>欢迎来到霍格沃茨</div>
</body>
</html>
盒子内容区
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 200px;
width: 800px;
/* min-width: 600px; */
/* max-width: 1000px; */
height: 200px;
/* min-height: 50px; */
/* max-height: 400px; */
background-color: skyblue;
}
</style>
</head>
<body>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero nemo ex at iusto porro! Illum, esse iusto! Repellat laborum voluptas consequuntur officiis eligendi distinctio vero inventore aliquam, accusamus doloremque quidem!</div>
</body>
</html>
默认宽度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 200px;
margin: 50px;
border: 5px solid black;
padding: 5px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>你好</div>
</body>
</html>
盒子内边距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 400px;
height: 400px;
font-size: 20px;
/* 左侧内边距 */
padding-left: 20px;
/* 上侧内边距 */
padding-top: 30px;
/* 右侧内边距 */
padding-right: 20px;
/* 下侧内边距 */
padding-bottom: 30px;
/* 复合属性：写一个值，四个方向的内边距是一样的 */
padding: 20px ;
/* 复合属性：写两个值，上下、左右 */
padding: 10px 20px ;
/* 复合属性：写三个值，上、左右、下*/
padding: 10px 20px 30px;
/* 复合属性：写四个值，上、右、下、左*/
padding: 10px 20px 30px 40px;
/* padding值不能为负数 */
background-color: aquamarine;
}
span {
background-color: orange;
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
img {
width: 200px;
padding: 50px;
}
</style>
</head>
<body>
<div id="d1">你好</div>
<hr>
<span>我很好</span>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis totam maiores odio nesciunt molestias illo eligendi quod, adipisci ea quaerat dolorem nostrum minima eius tempora quasi ullam vel officia magnam.</div>
<hr>
<img src="../资料/图片/喜羊羊.jpg" alt="">
<div>喜羊羊来啦</div>
</body>
</html>
盒子边框
外边距margin
margin注意事项
注意事项1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
width: 400px;
height: 400px;
padding: 50px;
background-color: gray;
}
.inner{
width: 100px;
height: 100px;
margin: 100px;
background-color: orange;
}
</style>
</head>
<body>
<!-- 子元素的margin是参考父元素的content计算的 -->
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
注意事项2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: skyblue;
}
.box2 {
background-color: orange;
margin-top: 50px;
margin-bottom: 50px;
}
.box3 {
background-color: green;
}
.second {
margin-left: 50px;
margin-right: 50px;
}
</style>
</head>
<body>
<!-- 上margin、左margin会影响自身位置，下margin、右margin会影响兄弟元素位置 -->
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<hr>
<img src="../资料/图片/悟空.jpg" alt=""><img class="second" src="../资料/图片/悟空.jpg" alt=""><img src="../资料/图片/悟空.jpg" alt="">
</body>
</html>
注意事项3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1 {
width: 400px;
height: 400px;
margin: 50px;
background-color: skyblue;
}
img {
margin: 50px;
}
.one {
background-color: skyblue;
}
.two {
background-color: orange;
margin-left: 50px;
margin-right: 50px;
margin-top: 1000px;
margin-bottom: 1000px;
}
.three {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 行内元素左右margin可以设置，上下margin设置后无效 -->
<div id="d1">我是一个块级元素</div>
<div>我是一段文字</div>
<hr>
<img src="../资料/图片/悟空.jpg" alt="悟空">
<div>我是一段文字</div>
<hr>
<span class="one">人之初</span><span class="two">性本善</span><span class="three">性相近</span>
<div>我是一段文字</div>
</body>
</html>
注意事项4
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 800px;
height: 100px;
margin-left: auto;
background-color: skyblue;
}
span {
background-color: purple;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- margin的值也可以是auto，一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中 -->
<div>你好呀</div>
<span>好好学习</span>
</body>
</html>
注意事项5
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: skyblue;
}
.box2 {
margin-top: -50px;
background-color: orange;
}
</style>
</head>
<body>
<!-- margin可以是负值 -->
<div class="box box1">1</div>
<div class="box box2">2</div>
</body>
</html>
margin塌陷问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
/* width: 400px;
height: 400px; */
background-color: gray;
/* border: 1px solid red; */
overflow: hidden;
}
.inner1 {
width: 100px;
height: 100px;
margin-bottom: 50px;
background-color: orange;
}
.inner2 {
width: 100px;
height: 100px;
margin-bottom: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1">inner1</div>
<div class="inner2">inner2</div>
</div>
<div>我是一个幸运儿</div>
</body>
</html>
margin合并问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: deepskyblue;
margin-bottom: 50px;
}
.box2 {
background-color: orange;
margin-top: 50px;
/* float: left; */
}
.test {
width: 200px;
height: 200px;
display: inline-block;
}
.testa {
background-color: purple;
margin-right: 50px;
}
.testb {
background-color: tomato;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<hr>
<div class="test testa">a</div><div class="test testb">b</div>
</body>
</html>
处理内容溢出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1 {
width: 400px;
height: 200px;
background-color: skyblue;
overflow: scroll;
/* overflow-x: hidden;
overflow-y: scroll; */
}
#d2 {
width: 1000px;
background-color: orange;
}
</style>
</head>
<body>
<div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque eaque molestias ut mollitia dolores
voluptates adipisci architecto hic molestiae quas labore accusantium sapiente eos voluptate eveniet nisi minus
<div id="d2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam sit explicabo, tenetur tempora necessitatibus iure aperiam, unde sequi ratione autem repudiandae enim fugiat laboriosam suscipit? Nisi itaque eos facilis esse.</div>
quis perspiciatis, corporis, unde reiciendis sint sequi. Totam beatae expedita harum laboriosam omnis quod.
Commodi, doloremque praesentium, voluptate atque quidem tempore enim optio maxime amet ab recusandae quam
asperiores eveniet assumenda dolore quia, tempora dicta deleniti harum iusto molestias voluptatum delectus
voluptatem! Corporis earum voluptatem esse est quam dolorem ab ratione commodi. Temporibus eaque voluptas labore
porro nisi quibusdam alias maxime iure asperiores est qui voluptatem, et, numquam, accusamus accusantium
expedita cum.</div>
</body>
</html>
隐藏元素的两种方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: skyblue;
/* display: none; */
visibility: hidden;
}
.box2 {
background-color: orange;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
</body>
</html>
样式的继承
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1 {
height: 600px;
padding: 50px;
background-color: gray;
font-size: 40px;
color: yellow;
font-weight: bold;
}
#d2 {
height: 400px;
padding: 50px;
background-color: orange;
}
#d3 {
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3">你好啊</div>
</div>
</div>
</body>
</html>
元素默认样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1 {
font-size: 50px;
color: orange;
}
a {
color: black;
text-decoration: none;
cursor: default;
}
</style>
</head>
<body>
<div id="d1">
<a href="https://www.baidu.com">去百度</a>
<span>你好啊</span>
</div>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<hr>
<p>我是一个段落</p>
<hr>
<ul>
<li>张安</li>
<li>刘扬</li>
</ul>
</body>
</html>
布局小技巧
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
overflow: hidden;
}
.inner {
width: 200px;
height: 100px;
padding: 5px;
margin: 0 auto;
background-color: orange;
margin-top: 150px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">inner</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
overflow: hidden;
text-align: center;
line-height: 400px;
}
span {
background-color: orange;
font-size: 20px;
}
</style>
</head>
<body>
<div class="outer">
<span>出来玩啊</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
overflow: hidden;
text-align: center;
line-height: 400px;
font-size: 0px;
}
span {
background-color: orange;
font-size: 20px;
vertical-align: middle;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="outer">
<span>出来玩啊</span><img src="../资料/图片/悟空.jpg" alt="悟空">
</div>
</body>
</html>
元素之间的空白问题
行内块的幽灵空白问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 600px;
background-color: skyblue;
font-size: 0px;
}
img {
/* vertical-align: top; */
height: 200px;
/* display: block; */
}
</style>
</head>
<body>
<div>
<img src="../资料/图片/悟空.jpg" alt="悟空">
</div>
</body>
</html>
浮动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 600px;
height: 400px;
background-color: skyblue;
}
img {
width: 200px;
float: right;
margin-right: 5px;
}
.test::first-letter {
font-size: 80px;
float: left;
}
</style>
</head>
<body>
<div>
<img src="../资料/图片/悟空.jpg" alt="悟空">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, tenetur eveniet similique magnam itaque et fugit esse ut sint impedit aperiam rerum. Pariatur quaerat facilis consequatur placeat asperiores. A, quae?
</div>
<hr>
<div class="test">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem autem quasi omnis cum et incidunt consequatur natus, minima ipsa, vel quo ex tenetur. Voluptatibus ullam assumenda veniam esse excepturi! Delectus?
</div>
</body>
</html>
元素浮动后特点
练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
}
.box1 {
float: right;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
}
.box1 {
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 300px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 300px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
float: left;
}
.box1 {
height: 300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
浮动后影响
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
}
.box1,.box2,.box3 {
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
</div>
<!-- <div style="background-color:orange">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde voluptatem perspiciatis neque id commodi soluta ea dignissimos sed fugiat voluptas aspernatur, odit provident temporibus maiores quaerat? Nam iure provident quisquam.</div> -->
</body>
</html>
解决浮动产生影响
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 500px;
/* 第一种解决方案 */
/* height: 122px; */
background-color: gray;
border: 1px solid black;
/* 第二种解决方案 */
/* float: left; */
/* 第三种解决方案 */
/* overflow: hidden; */
/* 第四种解决方案 */
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
}
.box1,.box2,.box3,.box4{
float: left;
}
.mofa{
clear: both;
}
/* 第五种解决方案 */
.outer::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<!-- 第四种解决方案 -->
<!-- <div class="mofa"></div> -->
</div>
<!-- <div style="background-color:orange">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde voluptatem perspiciatis neque id commodi soluta ea dignissimos sed fugiat voluptas aspernatur, odit provident temporibus maiores quaerat? Nam iure provident quisquam.</div> -->
</body>
</html>
定位
相对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
position: relative;
left: 100px;
top: 50px;
margin-left: 50px;
}
.box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
position: relative;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
position: absolute;
top: 220px;
left: 20px;
transition: 1s all linear;
}
.box3 {
background-color: green;
}
.outer:hover .box2 {
left: 220px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
position: fixed;
top: 0px;
left: 0px;
}
.box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque placeat veritatis, eaque quidem incidunt commodi autem rerum iure et reprehenderit rem voluptate dolorum cumque cupiditate aliquid similique non quod, soluta odit aspernatur repellendus facere delectus provident optio! Rem nesciunt quis beatae esse facilis pariatur fugit ut. Tempore fugit enim qui veniam deleniti a dolorem nihil officiis libero impedit, labore deserunt voluptates asperiores aliquid tenetur, odio totam explicabo laudantium inventore. Ullam dolore odio labore laboriosam voluptas eaque rem! Omnis porro dignissimos ipsum corporis libero placeat. Voluptatibus corrupti fugiat esse excepturi recusandae cumque voluptas placeat vel, sed ad sit natus dolorem, dolores, consequuntur hic. Assumenda quam asperiores omnis expedita repudiandae ducimus excepturi modi, quis fuga, voluptatibus eum dicta pariatur saepe obcaecati cupiditate ratione impedit nam iste nobis ipsum et quos illum velit? Aliquam quae dolorem quaerat, voluptatibus rerum laboriosam minima voluptatum voluptate vel obcaecati veniam ullam excepturi nihil ex accusamus perspiciatis! Non cumque suscipit, itaque odio, repellendus, alias nisi dicta totam similique modi ea sunt? Magni dolorem quaerat nesciunt? Debitis praesentium ipsum maiores dignissimos nam qui voluptatibus impedit quaerat repellat quam asperiores illum magni nobis eveniet voluptates incidunt, sunt quisquam quo tempore exercitationem molestiae at? Perspiciatis dignissimos eveniet perferendis fuga officia placeat maxime expedita, quibusdam nobis repudiandae. Impedit voluptatem nemo optio ipsum et eveniet ipsam nostrum. Reiciendis et aut adipisci cupiditate aperiam nesciunt sit, vitae consequuntur corrupti sed molestias ducimus alias nihil unde consequatur? Fugiat praesentium iusto velit dignissimos expedita voluptates vel ipsa beatae sint distinctio quae libero nesciunt, corporis iste deleniti id, dolor voluptas natus possimus sed. Maiores fugiat rem iure sunt sint quasi ipsum repellat vel minus? Mollitia esse quibusdam, eum temporibus animi quae. Quis illum cum aliquid corporis! Sed error aspernatur quisquam quibusdam autem quasi, minus optio quam quo voluptatum illo omnis vero sint repudiandae at repellendus. Earum dolorum quia eos! Aliquam veritatis aspernatur exercitationem delectus at nisi nemo voluptate ut quis, iste alias, a atque! Voluptas repellat omnis possimus molestias eligendi. Voluptatibus optio voluptates atque laudantium natus quasi a nostrum in architecto, explicabo maxime nobis necessitatibus neque quod voluptate esse iure repellendus laborum praesentium, fugiat, ducimus maiores? Alias nihil iste perferendis, a ex, quo voluptatibus vel nulla, fugit neque impedit sapiente consequatur rem. Tempore eveniet repellat neque quasi dolor suscipit est maiores inventore? Voluptatum, doloribus ut. Incidunt minima, expedita qui quos ipsum cupiditate harum facilis quisquam saepe suscipit quia accusantium esse dignissimos nemo delectus nulla repudiandae voluptates assumenda quis. Saepe illo debitis ipsum quis dolorem, earum tempora tenetur quod alias. Cum voluptatum necessitatibus provident non illum saepe sint sapiente eveniet? Ullam odio quisquam repudiandae nisi beatae velit! Voluptatem, eum. Velit officiis molestiae ipsam nihil odio, et numquam quisquam facilis, non tempore maiores distinctio ullam impedit nisi, quam iusto dolore similique! Doloremque tenetur optio autem accusantium, doloribus ab itaque eaque consequuntur aliquid iusto, eos quis fugit enim asperiores deleniti. Cumque veritatis dolores rem nobis quasi laborum quibusdam ut numquam a eos. Iusto nisi, quaerat eligendi perspiciatis quo deserunt molestiae nostrum mollitia magnam asperiores assumenda, expedita ab reiciendis quae beatae maiores odit sint. Maxime inventore eum ullam et recusandae rem provident error, doloremque, voluptatem iure quae velit voluptate asperiores, dolores excepturi dolore repellat accusantium deleniti autem facere architecto molestiae? Quo illo quod corporis officiis rem. Tenetur reprehenderit at exercitationem ab, nemo quia suscipit porro. Voluptates doloremque magnam, perspiciatis modi aspernatur accusantium ex possimus repellendus voluptas recusandae quod nisi cumque deserunt optio inventore ad delectus? Qui nemo perspiciatis voluptas? Voluptatum commodi dolores labore cum necessitatibus facilis modi quidem possimus ipsam nobis laboriosam facere quo iure odio minima deleniti, perferendis aspernatur. Distinctio maiores aut necessitatibus excepturi debitis ipsam quam voluptas commodi repellendus omnis repellat optio est corrupti consectetur, praesentium ducimus ea veniam ut iste iure! Sint deleniti expedita quam, sequi illo, eos fugiat nesciunt perspiciatis et dolores omnis nihil, magni mollitia laborum impedit. Fugiat ex earum iure tempora placeat illo distinctio in quod facere excepturi? Tempora ex at natus. Odio nihil necessitatibus nisi, consequatur est porro mollitia reiciendis similique ut tempore dicta ullam molestiae voluptates architecto vitae illo laboriosam. Sed quos quo maiores. Sunt praesentium harum possimus nesciunt dolores aperiam, suscipit sapiente iusto quod cumque corrupti minus eum cum laudantium odit voluptas libero commodi reiciendis repellendus quia accusamus numquam asperiores architecto porro. Fugit, error odit! Porro, blanditiis amet. Architecto earum accusamus cum praesentium quis laudantium saepe doloremque enim aliquid molestias provident aliquam quos consequuntur dignissimos rerum quae facilis sit in, ipsa officiis velit. Rem repellendus error voluptas nostrum at sapiente magni recusandae, veritatis, fugit quia ratione commodi illum atque. Optio ea commodi quas dolores ex in fugiat, officiis nostrum illo cum nesciunt quo rem minima laboriosam provident dolore. Error ullam sapiente voluptates voluptas ipsa? Iusto similique iste quae ea reiciendis modi fugit sunt pariatur, voluptatum, maxime soluta accusantium repellendus fugiat? Eaque distinctio nisi similique in? Recusandae soluta totam dolor officiis, doloremque quia suscipit tempora voluptate, saepe aspernatur illum vel ut eius incidunt eos. Dolore fugit accusantium quo itaque omnis, sapiente tenetur quos cupiditate, eos voluptas assumenda molestias reprehenderit minima harum eum perspiciatis odio consequatur excepturi expedita. Dicta, voluptas provident corrupti delectus aspernatur asperiores aperiam ad velit cumque quibusdam blanditiis repellat adipisci accusantium natus nam praesentium, ducimus cum consectetur facere autem nostrum ipsa. Quod eligendi quam cum tenetur omnis optio soluta quidem alias quos et maiores inventore quia, qui maxime aliquid minima reprehenderit eveniet ad adipisci non ut voluptas necessitatibus, dolor harum. Recusandae asperiores debitis cupiditate pariatur tempore id eius, possimus vitae at facilis nihil voluptatum aut atque quidem labore vero tenetur! Enim, sed veritatis. Eos voluptas ipsum pariatur suscipit, voluptatem facere eveniet animi quaerat praesentium beatae excepturi voluptate sapiente maxime exercitationem, necessitatibus laborum eaque magni ut eligendi dolorem possimus odio, rerum mollitia aperiam. Quo reiciendis cumque hic iure quis voluptatum, natus quisquam quos ut dolor recusandae laudantium labore temporibus repudiandae error minus illo deserunt, saepe doloribus qui, maxime omnis asperiores commodi. Fugiat illum ullam maxime cumque iste tempore! Cumque labore fuga asperiores tempore obcaecati velit accusamus facilis, temporibus unde facere repellendus at quaerat consequuntur rem dolor voluptatem enim nemo incidunt a. Necessitatibus.
</div>
</body>
</html>
粘性定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.body {
height: 2000px;
}
.page-header {
height: 100px;
text-align: center;
line-height: 100px;
background-color: orange;
font-size: 20px;
}
.item{
background-color: gray;
}
.first {
background-color: skyblue;
font-size: 40px;
position: sticky;
top: 0px;
}
.content {
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="page-header">头部</div>
<!-- 内容区 -->
<div class="content">
<!-- 每一项 -->
<div class="item">
<div class="first">A</div>
<h2>A1</h2>
<h2>A2</h2>
<h2>A3</h2>
<h2>A4</h2>
<h2>A5</h2>
<h2>A6</h2>
<h2>A7</h2>
<h2>A8</h2>
</div>
<div class="item">
<div class="first">B</div>
<h2>B1</h2>
<h2>B2</h2>
<h2>B3</h2>
<h2>B4</h2>
<h2>B5</h2>
<h2>B6</h2>
<h2>B7</h2>
<h2>B8</h2>
</div>
<div class="item">
<div class="first">C</div>
<h2>C1</h2>
<h2>C2</h2>
<h2>C3</h2>
<h2>C4</h2>
<h2>C5</h2>
<h2>C6</h2>
<h2>C7</h2>
<h2>C8</h2>
</div>
</div>
</body>
</html>
定位层级
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
position: relative;
z-index: 2;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
position: relative;
top: -150px;
left: 50px;
z-index: 0;
}
.box3 {
background-color: green;
position: absolute;
top: 130px;
left: 130px;
z-index: 0;
}
.box4 {
background-color: red;
position: fixed;
top: 200px;
left: 200px;
z-index: 50;
}
.box5 {
background-color: purple;
position: fixed;
top: 260px;
left: 260px;
z-index: 10;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
</div>
<div class="box box5">5</div>
</body>
</html>
定位的特殊应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
height: 400px;
background-color: #888;
position: relative;
}
.inner {
background-color: orange;
font-size: 20px;
padding: 20px;
border: 10px solid black;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 800px;
height: 400px;
background-color: #888;
position: relative;
}
.inner {
width: 400px;
height: 100px;
background-color: orange;
font-size: 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>
布局
版心
常用类名
重置默认样式
扫一扫
1336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
