【CSS 基础】
- CSS 是一门语言，用于控制网页表现
CSS（Cascading Style Sheet）：层叠样式表 - W3C 标准：网页主要有三部分组成
- 结构：HTML
- 表现：CSS
- 行为：JavaScript
一、 CSS 简介
1. CSS 导入方式
CSS 导入 HTML 有三种方式：
- 内联样式：在标签内部使用 style 属性，属性值是 CSS 属性键值对
<div style="color:red">Hello CSS</div> - 内部样式：定义
<style>标签，在标签内部定义 CSS 样式
<style type="text/css">
div{
color:red;
}
<style>
- 外部样式：定义
<link>标签，引入外部的 CSS 文件
<link rel="stylesheet" href="demo.css">
demo.css
div{color:red;}
2. CSS 选择器
- 概念：选择器是选取需要设置样式的元素（标签）（例如：
div{color:red;}） - 分类：
- 元素选择器：
元素名称{color:red;}，（例如：div{color:red;}） - id 选择器：
#id属性值{color:red;}，（例如：#name{color:red;}<div id="name">Hello</div>） - 类选择器：
.class属性值{color:red;}，（例如：.cls(color:red)<div class="cls">Hello</div>）
- 元素选择器：
二、 详细使用
1. 体验 CSS 语法规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验CSS语法规范</title>
<style>
/* 选择器 {样式} */
/* 给谁改样式 {改什么样式} */
p {
/* 修改了文字颜色为红色 */
color: red;
/* 修改了文字大小为12像素 */
font-size: 12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
2. 基础选择器
（1） 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之标签选择器</title>
<style>
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
（2） 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之类选择器</title>
<style>
/* 类选择器样式由点来定义 结构类（class）调用 一个或多个 开发最常用 */
.red {
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<ul>
<li class="red">冰雨</li>
<li class="green">来生缘</li>
<li>李香兰</li>
</ul>
<div class="red">冰雨</div>
<!-- 头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
CSS+DIV的命名规则：
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
友情链接:friendLink
页脚:footer
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyRight
1.CSSID的命名
外套:wrap
主导航:mainNav
子导航:subnav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗志:logo
标语:banner
菜单内容1:menu1Content
菜单容量:menuContainer
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:login
功能区:shop(如购物车，收银台)
当前的current
2.样式文件命名
主要的:master.css
布局版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用类选择器画三个盒子</title>
<style>
.red {
width: 100px;
height: 100px;
/*背景颜色*/
background-color: red;
}
.green{
width: 100px;
height: 100px;
background-color: green;
}
.pink{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="red">红色</div>
<div class="green">绿色</div>
<div class="pink">粉色</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多类名的使用</title>
<style>
.red {
color: red;
}
.pink {
background-color: pink;
}
.green {
background-color: green;
}
.font35 {
font-size: 35px;
}
.box {
width: 100px;
height: 100px;
font-size: 25px;
}
</style>
</head>
<body>
<div class="red font35">某某某</div>
<div class="box pink">粉色</div>
<div class="box green">绿色</div>
<div class="box pink">粉色</div>
</body>
</html>
（3） ID 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器</title>
<!--ID选择器的口诀:样式#定义，结构id调用，只能调用一次，别人切勿使用-->
<style>
#pink{
color: pink;
}
</style>
</head>
<body>
<div id="pink">迈克尔杰克逊</div>
</body>
</html>
（4） 通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<!-- * 这里把所有的 html body div span li 等等的标签都改为了红色-->
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>红色</div>
<span>红色</span>
<ul>
<li>红色</li>
</ul>
</body>
</html>
3. 字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体属性之字体系列</title>
<!-- 标题标签比较特殊需要自己设定字号 -->
<style>
h2 {
font-family: '微软雅黑';
/*font-weight: normal;*/
/*normal相当于400*/
/*不加粗改为常规字体*/
font-weight: 400;
}
p {
font-family: 'Microsoft Yahei';
}
body {
font-size: 25px;
}
h2 {
font-size: 45px;
}
.bold {
/*font-weight: bold;*/
/*这个700后面不要加单位，它等价于bold*/
font-weight: 700;
}
</style>
</head>
<body>
<h2>淘宝网</h2>
<p>淘宝网是亚太地区较大的网络零售、商圈，由阿里巴巴集团在2003年5月创立。</p>
<p>淘宝网是中国深受欢迎的网购零售平台，拥有近5亿的注册用户数，每天有超过6000万的固定访客，
同时每天的在线商品数已经超过了8亿件，平均每分钟售出4.8万件商品。</p>
<p>截止2011年年底，淘宝网单日交易额峰值达到43.8亿元，创造270.8万直接 且充分就业机会。</p>
<P>随着淘宝网规模的扩大和用户数量的增加，淘宝也从单一的C2C网络集市变成了包括C2C、团购、分销、拍卖
等多种电子商务模式在内的综合性零售商圈。已经成为世界范围的电子商务交易平台之一。</P>
<p class="bold">2016年3月15日，315晚会曝光，淘宝商家存在刷单等欺骗消费者现象。</p>
<p class="bold">2016年3月29日，阿里巴巴集团CEO张勇为淘宝的未来明确了战略：社区化、内容化和本地生活化是三大方向。</p>
<p class="bold">2018年8月8日，阿里巴巴淘宝透露将进军MR（混合现实）购物领域，即将在2018年造物节上推出产品——淘宝买啊。</p>
<p class="bold">2019年12月12日，《汇桔网·2019胡润品牌榜》发布，淘宝以3000亿元品牌价值排名第四。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体样式</title>
<style>
p {
font-style: italic;
}
em {
/*让倾斜的字体不在倾斜*/
font-style: normal;
}
/*要让div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑*/
div {
/*font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft Yahei';*/
/*复合属性 简写的方式 节约代码*/
/*font: font-style font-weight font-size/line-height font-family;*/
/* font: italic 700 16px 'Microsoft Yahei';*/
/*最少写font-size font-family*/
font: 30px '黑体';
}
</style>
</head>
<body>
<p>倾斜</p>
<em>让倾斜不再倾斜</em>
<div>倾斜 加粗 字号设置为16像素 微软雅黑</div>
<!-- font-size 字号 通常用的单位是px像素，一定要跟上单位
font-family 字体
font-weight 字体粗细 加粗是700或者bold不加粗是normal或者400记住数字不要跟单位
font-style 字体样式 记住倾斜是italic 不倾斜是normal
font 字体连写 字号和字体必须同时出现 -->
</body>
</html>
4. 文本外观
（1） 颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本外观属性之颜色</title>
<style>
div {
/* color: deeppink; */
/* color: #ff0000; */
/* red green blue 为rgb */
color: rgb(200,0,0);
}
</style>
</head>
<body>
<div>十六进制写法</div>
<div>rgb写法</div>
</body>
</html>
（2）文字对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本外观之文字对齐</title>
<style>
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
/* text-align: left; */
/* text-align: right; */
text-align: center;
}
</style>
</head>
<body>
<h1>居中对齐的标题</h1>
</body>
</html>
（3） 装饰文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本外观之装饰文本</title>
<style>
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
/* text-decoration: line-through; */
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<div>文本外观之装饰文本</div>
<a href="#">文本链接自带下划线要取消</a>
</body>
</html>
（4） 文本缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本外观之文本缩进</title>
<style>
p {
font-size: 25px;
/* 文本的第一行首行缩进 多少距离 */
/* text-indent: 20px; */
/* 当前文字两个字符的缩进距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>北京地铁（Beijing Subway），是服务于中国北京市的城市轨道交通系统，
也是国际地铁联盟（CoMET）的成员，其第一条线路于1971年1月15日正式开通运营 ，
使北京成为中国第一个开通地铁的城市 。截至2020年12月31日，北京地铁运营里程为727.0千米，
位于中国内地第二名。</p>
<p>截至2020年12月，北京市轨道交通路网运营线路达24条，总里程727千米，车站428座（包括换乘站64座)。</p>
<p>截至2019年12月，北京地铁在建线路15条 [5] 。到2025年，北京地铁将形成线网由30条运营，总长1177千米的轨道交通网络 。</p>
<p>2017年，北京地铁年乘客量达到45.3亿人次，日均客流为1241.1万人次，单日客运量最高达1327.46万人次。</p>
</body>
</html>
（5） 行间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本外观之行间距</title>
<style>
div {
line-height: 26px;
}
p {
line-height: 25px;
text-indent: 2em;
}
</style>
</head>
<body>
<div>北京地铁</div>
<p>北京地铁（Beijing Subway），是服务于中国北京市的城市轨道交通系统，
也是国际地铁联盟（CoMET）的成员，其第一条线路于1971年1月15日正式开通运营 ，
使北京成为中国第一个开通地铁的城市 。截至2020年12月31日，北京地铁运营里程为727.0千米，
位于中国内地第二名。</p>
<p>截至2020年12月，北京市轨道交通路网运营线路达24条，总里程727千米，车站428座（包括换乘站64座)。</p>
<p>截至2019年12月，北京地铁在建线路15条 [5] 。到2025年，北京地铁将形成线网由30条运营，总长1177千米的轨道交通网络 。</p>
<p>2017年，北京地铁年乘客量达到45.3亿人次，日均客流为1241.1万人次，单日客运量最高达1327.46万人次。</p>
<!-- color 文本颜色 我们通常用 十六进制 比如 而且是简写形式#ff
text-align 文本对齐 可以设定文字水平的对齐方式
text-indent 文本缩进 通常我们用于段落首行缩进2个字符的距离 text-indent：2em
text-decoration 文本修饰 记住下划线underline 取消下划线 none
line-height 行高 控制行与行的距离 -->
</body>
</html>
5. 内部样式表、行内样式表、外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表及行内部样式表</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>所谓内部样式表，就是在HTML页面内部写样式，但是单独写到style标签内部。</div>
<p>行内部样式表</p>
<p>行内部样式表</p>
<p>行内部样式表</p>
<p style="color: red;">行内部样式表</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表</title>
<link rel="stylesheet" href="CSS外部样式表.css">
</head>
<body>
<div>外部样式表</div>
<!-- 行内样式表 书写方便，权重高 结构样式混写 较少 控制一个标签
内部样式标签 部分结构与样式相分离 没有彻底分离 较多 控制一个页面
外部样式表 完全实现结构和样式相分离 需要引入 最多 控制多个页面 -->
</body>
</html>
/* 这个css文件里只有样式没有标签 */
div {
color: red;
}
6. Emmet 语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emmet语法使用</title>
<style>
.one {
/* tac */
text-align: center;
/* ti */
text-indent: 2em;
/* w */
width: 20px;
/* h */
height: 20px;
/* ti2 */
text-indent: 2px;
/* lh26px */
line-height: 26px;
/* tdn */
text-decoration: none;
}
</style>
</head>
<body>
<div></div>
<table></table>
<!-- div*5 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p></p>
<p></p>
<p></p>
<p></p>
<!-- div+p -->
<div></div>
<p></p>
<ul>
<li></li>
</ul>
<div><span></span></div>
<div></div>
<p></p>
<div class="nav"></div>
<div class="banner"></div>
<p class="one"></p>
<!-- p.one -->
<span class="gray"></span>
<!-- ul>li#two -->
<ul>
<li id="two"></li>
</ul>
<!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!-- 向生成的标签中输入几个文字 div{输入文字}-->
<div>输入文字</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速格式化代码</title>
<style>
/* 快速格式化 shift+alt+f */
body {
width: 100px;
height: 200px;
}
</style>
</head>
<body>
VScode快速格式化代码
</body>
</html>
7. 复合选择器
（1） 后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
/* 想要把ol里面的li选出来改为red */
ol li {
color: red;
}
ol li a {
color: red;
}
.nav li a {
color: yellow;
}
</style>
</head>
<body>
<ol>
<li>子项</li>
<li>子项</li>
<li>子项</li>
<li>子项</li>
<li><a href="#">子项</a></li>
</ol>
<ul>
<li>子项</li>
<li>子项</li>
<li>子项</li>
<li>子项</li>
<li><a href="#">不变色的</a></li>
</ul>
<ul class="nav">
<li>子项</li>
<li>子项</li>
<li>子项</li>
<li>子项</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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子元素选择器</title>
<style>
/* 这是后代选择器 */
/*.nav a {
color: yellow;
}*/
/* 这是子选择器 */
.nav>a {
color: red;
}
.lian ul li a {
color: green;
}
.hot>a {
color: greenyellow;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">某某</a>
<p>
<a href="#">某某</a>
</p>
</div>
<div class="lian">
<ul>
<li>
<a href="#">练习</a>
</li>
<li>
<a href="#">练习</a>
</li>
</ul>
</div>
<div class="hot">
<a href="#">大肘子</a>
<ul>
<li><a href="#">猪头</a></li>
<li><a href="#">猪尾巴</a></li>
</ul>
</div>
</body>
</html>
（3） 并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<!-- 并i选择器就是各选择器通过英文逗号 连接而成，任何形式的选择器都可以作为并集选择器的一部分。-->
<style>
/* 要求一 把熊大和熊二改为粉色 */
/* div,
p {
color: pink;
} */
/* 要求二 把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
div,
p,
.pig li {
color: pink;
}
/* 约定的语法规范，并集选择器需要竖着写 */
/* 一定要注意最后一个选择器不需要加英文逗号 */
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
</html>
（4） 伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<!-- 链接伪类选择器 -->
<!-- 伪类选择器用于向某些选择器添加特殊的效果，比如给来链接添加特殊效果，或选择第一个，第n个元素 -->
<!-- 伪类选择器书写最大的特点就是用冒号（:）表示，比如:hover :first-child -->
<!-- a:link选择所有未被访问的链接 -->
<!-- a:visited 选择所有已被访问的链接 -->
<!-- a:hover 选择鼠标指针位于其上的链接 -->
<!-- a:active 选择活动链接（鼠标按下未弹起的链接） -->
<style>
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: orange;
}
a:hover {
color: blue;
text-decoration: underline;
}
a:active {
color: green;
}
/* 把获得光标的input表单元素选取出来 */
input:focus {
background-color: blue;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a><br>
<a href="https://www.baidu.com">百度一下</a><br>
<input type="text">
<input type="text">
<input type="text">
<!-- 后代选择器 用来选择后代元素 之后的子孙 符号是空格.nav.a -->
<!-- 子代选择器 选择最近一级元素 只选直属的元素 符号是大于.nav>p -->
<!-- 并集选择器 选择某些相同样式的元素 可以用于集体声明 符号是逗号.nav.header -->
<!-- 链接伪类选择器 选择不同状态的链接 跟链接相关 重点记住a{}和a:hover 实际开发写法 -->
<!-- :focus选择器 选择获得光标的表单 跟表单相关 input:foucus 记住这个写法 -->
</body>
</html>
8. 元素显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式</title>
<style>
div {
/* width: 200px; */
height: 200px;
background-color: greenyellow;
}
input {
width: 250px;
height: 50px;
}
</style>
</head>
<body>
<!-- 块元素 <h1></h1>... <p></p><div></div><ul></ul><ol></ol><li></li> -->
<!-- 比较霸道，自己独占一行。 -->
<!-- 高度，宽度，外边距以及内边距都可以控制。 -->
<!-- 宽度默认是容器（父级宽度）的100%。 -->
<!-- 是一个容器及盒子，里面可以放行内或者块级元素。 -->
<div>
自己独占一行
</div>
瑟瑟发抖
<!-- 注意 -->
<!-- 文字类的元素内不能使用块级元素 -->
<!-- <p></p>标签主要用于存放文字，因此<p></p>里面不能放块级元素，特别是不能放<div></div> -->
<!-- 同理，<h1></h1>等都是文字类块级标签，里面也不能放其它块级元素。 -->
<!-- 行内元素<a></a><strong></strong><b></b><em></em> -->
<!-- <i></i><del></del><s></s><ins></ins><u></u><span></span>等， -->
<!-- 相邻行内元素在一行上，一行可以显示多个 -->
<!-- 高宽直接设置是无效的 -->
<!-- 默认宽度就是他本身内容的宽度 -->
<!-- 行内元素只能容纳文本或其他行内元素 -->
<span>行内元素</span><strong>行内元素</strong>
<!-- 注意 -->
<!-- 链接里不能再放链接 -->
<!-- 特殊情况链接<a></a>里面可以放块级元素，但是给<a></a>转换一下块级模式最安全 -->
<!-- 行内块元素 <img/><input/><td>他们同时具有块元素和行内元素的特点。 -->
<!-- 和相邻行内元素（行内块）在一行上，但是它们会有空白缝隙，一行可以显示多个（行内元素特点）。 -->
<!-- 默认宽度就是它本身内容的宽度（行内元素的特点）。 -->
<!-- 高度，行高。外边距以及内边距都可以控制（块级元素的特点）。 -->
<input type="text">
<input type="text">
<input type="text">
<!-- 元素显示模式总结
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度和高度 它本身内容的宽度 容纳文本或者其他行内元素
行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式转换</title>
<style>
a {
width: 150px;
height: 50px;
background-color: yellow;
/* 把行内元素a转换为块级元素 */
display: block;
}
div {
/* width: 250px; */
/* height: 40px; */
background-color: green;
/* 把div块状元素转换为行内元素 */
display: inline;
}
span {
width: 250px;
height: 40px;
background-color: skyblue;
/* 把span行内元素转换为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度一下</a>
<a href="https://www.baidu.com">百度一下</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例练习之简洁版小米侧边栏 技巧文字垂直居中</title>
<!-- 文字垂直居中 -->
<!-- 让文字行高等于盒子行高 -->
<style>
/* 将a转换为块级元素 */
a {
display: block;
width: 200px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
padding-left: 30px;
line-height: 40px;
}
/* 鼠标经过；链接变换背景颜色 */
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
9. 背景
（1） 背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景颜色</title>
<style>
div {
width: 200px;
height: 40px;
/* background-color: transparent;透明的，清澈的 */
/* background-color: red; */
background-color: #666;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（2） 背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
div {
width: 1990px;
height: 1000px;
/* background-image: none; */
background-image: url(网络图片/星空图片.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（3） 背景平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景平铺</title>
<style>
div {
width: 1990px;
height: 1240px;
background-image: url(网络图片/星空图片.png);
/* 背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 一般情况下背景图片是平铺的 */
/* background-repeat: repeat; */
/* 沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 沿着y轴平铺 */
background-repeat: repeat-y;
/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（4） 背景位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景位置 方位名词</title>
<style>
div {
width: 1000px;
height: 1100px;
background-color: green;
background-image: url(网络图片/中国地图.png);
background-repeat: no-repeat;
/* background-position: 方位名词; */
/* background-position: center top; */
/* background-position: right center; */
/* background-position: center right; */
/* 如果是方位名词right center和center right是一样的与顺序无关 */
/* background-position: right; */
/* 此时 水平一定是靠右侧对齐 第二个参数省略y轴是垂直居中显示的 */
background-position: top;
/* 此时 第一个参数一定是top y轴 顶部对齐 第二个参数省略x轴是水平居中显示的 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景位置 方位名词 案例一</title>
<style>
h3 {
width: 260px;
height: 40px;
background-color: skyblue;
font-size: 14px;
font-weight: 400;
line-height: 40px;
background-image: url(网络图片/王者荣耀案例一.png);
background-repeat: no-repeat;
background-position: left center;
text-indent: 9em;
}
</style>
</head>
<body>
<h3>成长守护平台</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景位置 方位名词 案例二</title>
<style>
body {
background-image: url(网络图片/王者荣耀案例二.jpg);
background-repeat: no-repeat;
/* background-position: center top; */
background-position: center 40px;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景位置 坐标位置</title>
<style>
div {
width: 300px;
height: 300px;
background-color: #666;
background-image: url(网络图片/王者荣耀案例一.png);
background-repeat: no-repeat;
/* 20px 50px 一定是x轴20px y轴50px */
/* background-position: 20px 50px; */
/* 只写一个参数默认为x轴另一个默认为y轴垂直居中 */
/* background-position: 20px; */
/* 混合单位制 */
/* background-position: 20px center; */
/* 此时x轴为20px y轴为垂直居中 */
background-position: center 50px;
/* 此时x轴水平居中 y轴为50px */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（5） 背景固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图像固定（背景附着）</title>
<!-- background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 -->
<!-- scroll 背景图像是随对象内容滚动 -->
<!-- fixed 背景图像固定 -->
<style>
body {
background-image: url(网络图片/王者荣耀案例二.jpg);
background-repeat: no-repeat;
background-position: center top;
/* 把背景图片固定 */
background-attachment: fixed;
color: #fff;
font-size: 50px;
}
</style>
</head>
<body>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
<p>女儿国国王</p>
</body>
</html>
（6） 背景属性复合写法及背景颜色半透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景属性复合写法及背景颜色半透明</title>
<!-- background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置； -->
<style>
body {
background: black url(网络图片/王者荣耀案例二.jpg) no-repeat fixed center top;
}
div {
width: 500px;
height: 500px;
/* background: rgba(0, 0, 0, 0.3) */
background: rgba(0, 0, 0, .3)
}
</style>
<!-- CSS为我们提供了背景颜色半透明的效果
background: rgba（0，0，0，0.3）:
最后一个参数是alpha透明度 取值范围在0~1之间 -->
</head>
<body>
<div></div>
<!-- background-color 背景颜色 预定义的颜色/十六进制/RGB代码 -->
<!-- background-image 背景图片 url（图片路径） -->
<!-- backgr-repeat 是否平铺 repeat/norepeat/repeat-x/repeat-y -->
<!-- background-position 背景位置 length/position 分别是x轴和y轴 -->
<!-- background-attachment 背景附着 scroll（背景滚动）/fixed（背景固定） -->
<!-- 背景简写 书写更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 -->
<!-- 背景半透明 背景颜色半透明 background:rgba(0,0,0,0.3);后面必须是四个值 -->
</body>
</html>
10. 定位
（1）固定定位即固定到版心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
.gd {
position: fixed;
top: 100px;
right: 40px;
}
.gd img {
width: 90px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="gd">
<div>
<img src="../../电信2106王昱衡/images/倒计时.jfif" alt="">
</div>
</div>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
<p>下降</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位之固定到版心</title>
<style>
li {
list-style: none;
}
.fixed {
position: fixed;
/* 走到浏览器宽度的一半 */
left: 50%;
/* 利用margin 走到版心盒子宽度的一半距离 */
margin-left: 405px;
/* 留一点缝隙 */
margin-top: 500px;
width: 50px;
height: 200px;
background-color: skyblue;
}
.fixed li {
width: 50px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: blue;
}
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="fixed">
<li><a href="#饺子">饺子</a></li>
<li><a href="">年糕</a></li>
<li><a href="">糍粑</a></li>
<li><a href="">汤圆</a></li>
<li><a href="">鱼肉</a></li>
</div>
<div class="w">版心盒子 800像素
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p id="饺子">饺子</p>
</div>
</body>
</html>
（2） 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
/* 绝对定位的位置不再保留 */
.ye {
position: relative;
width: 800px;
height: 800px;
background-color: hotpink;
padding: 50px;
}
.father {
/* 父级没有定位 */
width: 500px;
height: 500px;
background-color: pink;
/* 父级有定位 */
/* position: relative; */
}
.son {
position: absolute;
top: 200px;
right: 20px;
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="ye">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
（3）相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
（4） 粘性定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位之粘性定位</title>
<style>
body {
height: 3000px;
}
.nav {
width: 800px;
height: 50px;
position: sticky;
top: 0;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="nav">我是导航栏</div>
</body>
</html>
11. 三大特性
（1） 层叠性和继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性之层叠性和继承性</title>
<!-- 层叠性 -->
<!-- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 -->
<!-- 样式不冲突，不会层叠 -->
<!-- 继承性 -->
<!-- CSS中的继承 子标签会继承父标签的某些样式，如文本颜色和字号。 -->
<!-- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性） -->
<style>
div {
color: red;
font-size: 14px;
}
body {
color: red;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素的body 的行高1.5 */
/* 这个1.5就是当前元素文字大小font-size的1.5倍 */
font-size: 14px;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<div>
<p>龙生龙，凤生凤，老鼠的儿子会打洞。</p>
</div>
<div>行高的继承</div>
<p>行高的继承</p>
<ul>
<li>文字大小继承</li>
<!-- li 里的文字没有设置大小但会继承父元素的文字大小 -->
</ul>
</body>
</html>
（2） 优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性之优先级</title>
<style>
div {
color: pink !important;
}
.test {
color: red;
}
#demo {
color: royalblue;
}
/* fa 的权重是100 */
#fa {
color: seagreen;
}
/* p的继承的权重是0 */
/* 继承过后权重再次变为0，再次写一个元素选择器为1的权重 */
/* 所以以后看标签到底执行哪个样式，就先看这个标签有没有被直接选出来 */
p {
color: slategray;
}
body {
color: red;
}
/* a标签是由浏览器自己制定的样式是蓝色的有下划线的，所以继承的颜色无法执行a{color:green;} */
a {
color: green;
}
/* 重新设置的元素选择器层叠了浏览器默认的样式 */
</style>
</head>
<body>
<!-- 选择器的权重 -->
<!-- 继承或者 * 0，0，0，0 -->
<!-- 元素选择器 0，0，0，1 -->
<!-- 类选择器，伪类选择器 0，0，1，0 -->
<!-- ID选择器 0，1，0，0 -->
<!-- 行内选择器style="" 1，0，0，0 -->
<!-- !important 重要的 =无穷大 -->
<div class="test" id="demo" style="color: saddlebrown;">你笑起来真好看! </div>
<div id="fa">
<p>你笑起来真好看</p>
</div>
<a href="#">我是单独的样式</a>
</body>
</html>
（3） 权重的叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重的叠加</title>
<style>
/* 复合选择器会有权重叠加的问题 */
/* 权重虽然会叠加但是永远不会出现进位的问题 */
/* 如果是复合选择器，则会有权重叠加，需要计算权重。 */
/* div ul li 0,0,0,3 */
/* .nav ul li 0,0,1,2 */
/* a:hover 0,0,1,1 */
/* .nav a 0,0,1,1 */
/* li的权重是0，0，0，1 */
li {
color: red;
}
/* ul li 的权重是0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
/* 会执行绿色的权重 */
ul li {
color: green;
}
/* .nav li 的权重是0，0，1，0 + 0，0，0，1 = 0，0，1，1 */
.nav li {
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重的叠加练习</title>
<style>
/* .si {
color: green;
} */
/* li {
color: pink;
} 加上他就是粉色*/
.si li {
color: purple;
}
/* 他的权重是 0,0,1,0 + 0,0,0,1 =,0,0,1,1 */
/* 所以仍然是紫色 */
.pink {
color: pink;
font-weight: 700;
}
.si .pink {
color: pink;
}
/* 改为这么写权重变为0,0,2,0 */
</style>
</head>
<body>
<ul class="si">
<li class="pink">四大</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没WiFi</li>
</ul>
</body>
</html>
12. 盒子模型
（1） 边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之边框</title>
<!-- border 可以设置元素的边框，边框有三部分组成边框宽度（粗细）边框样式 边框颜色 -->
<!-- border-width 定义边框粗细，单位是px -->
<!-- border-style 边框的样式 -->
<!-- border-color 边框颜色 -->
<style>
div {
width: 300px;
height: 300px;
/* border-width: 5px; */
/* border-style 边框的样式 solid 实现边框 dashed 虚线边框 dotted 点虚线式*/
/* border-style: solid; */
/* border-style: dashed; */
/* border-style: dotted; */
/* border-color: pink; */
/* 复合写法 没有顺序 */
/* border: 5px solid pink; */
/* 边框分开写法也可以 */
/* border-top: 10px solid red; */
/* border-bottom: 10px dotted green; */
/* 练习 */
border: 10px solid blue;
border-top: 10px solid pink;
/* 前后顺序不同会出现层叠 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（2） 细线边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之细线边框</title>
<style>
table {
width: 500px;
height: 300px;
}
th {
height: 35px;
}
table,
td,
th {
border: 1px solid blue;
border-collapse: collapse;
font-size: 16px;
text-align: center;
}
/* border-collapse:collapse; */
/* collapse单词是合并的意思 */
/* border-collapse:collapse; 表示相邻边框合并在一起 */
</style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xxxx</td>
<td>趋平</td>
<td>640350</td>
<td>640350</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>2</td>
<td>xxxx</td>
<td>下降</td>
<td>623003</td>
<td>623003</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>xxxx</td>
<td>上涨</td>
<td>507270</td>
<td>507270</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>4</td>
<td>xxxx</td>
<td>趋平</td>
<td>433165</td>
<td>433165</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>5</td>
<td>xxxx</td>
<td>上涨</td>
<td>297775</td>
<td>297775</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
（3） 内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 20px;
padding-right: 20px;
padding-top: 30px;
/* padding属性的复合写法 */
/* padding:5px; 1个值 代表上下左右都有5像素内边距 */
/* padding:5px 10px; 2个值 代表上下内边距是5像素 左右内边距是10像素 */
/* padding:5px 10px 20px; 3个值 代表上内边距5像素 左右内边距10像素 下内边距20像素 */
/* padding:5px 10px 20px 30px 4个值 代表上是5像素 右10像素 下20像素 左30像素 顺时针 */
}
h1 {
height: 200px;
background-color: #666;
padding: 30px;
/* 没有指定宽度只有高度 则只会出现宽度不变 高度变化 当都默认状态时则都不会变化 */
}
div p {
padding: 30px;
background-color: skyblue;
/* 不写宽度和高度就不会超出原有盒子的大小 */
}
</style>
</head>
<body>
<div>
盒子的内容是content
盒子的内容是content
盒子的内容是content
盒子的内容是content
盒子的内容是content
<p>盒子</p>
</div>
<h1>padding不会影响盒子大小的情况</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之内边距 案例 新浪导航栏</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
/* a属于行内元素 此时必须要转换为行内块元素 */
display: inline-block;
height: 41px;
padding: 0px 20px;
font-size: 12px;
text-decoration: none;
color: #4c4c4c;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</div>
</body>
</html>
（4） 外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之外边距</title>
<style>
div {
width: 300px;
height: 300px;
background-color: blue;
}
/* .one {
margin-bottom: 20px;
} */
.two {
margin-top: 20px;
}
/* margin复合写法方式与padding一致 */
</style>
</head>
<body>
<div class="one">一</div>
<div class="two">二</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之内边距的典型应用水平居中</title>
<!-- 必须满足 -->
<!-- 盒子必须指定了宽度（width） -->
<!-- 盒子左右的外边距都设置为auto -->
<style>
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 30px auto;
text-align: center;
}
/* 行内元素或者行内块元素水平居中需要给其父元素添加text-align:center 即可 */
</style>
</head>
<body>
<div class="header">
<span>行内元素</span>
</div>
<div class="header">
<img src="网络图片/王者荣耀案例一.png" alt="">
<!-- 这是行内块元素 -->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
/* 对于塌陷问题1.可以为父元素定义上边框2.可以为父元素定义上内边距3.可以为父元素添加overflow:hidden */
}
/* 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大外边距值。 */
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
（5） 清除内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之消除内外边距</title>
<!-- 注意:行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了 -->
<style>
* {
padding: 0;
margin: 0;
/* 消除了浏览器默认的内外边距 */
}
span {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
消除内外边距
<ul>
<li>消除内外边距</li>
</ul>
<span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>
（6） 圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之圆角边框</title>
<style>
.yuanxing {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
/* 50%就是宽度和高度的一半 等价于100px*/
border-radius: 50%;
}
.juxing {
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}
.radius {
width: 200px;
height: 200px;
/* border-radius: 10px 20px 30px 40px; */
/* 顺时针左上角右上角右下角左下角 */
background-color: black;
border-radius: 20px 40px;
/* 这时是左上角和右下角一样右上角和左下角一样 */
/* 也有分开写的方法只写某一个角 */
}
</style>
</head>
<body>
1.圆形的做法
<div class="yuanxing"></div>
2.圆角矩形的做法
<div class="juxing"></div>
3.可以设置不同的圆角
<div class="radius"></div>
</body>
</html>
（7） 盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之盒子阴影</title>
<!-- h-shaow 必须，水平阴影的位置，允许负值 -->
<!-- v-shadow 必须，垂直阴影的位置，允许负值 -->
<!-- blur 可选，模糊距离 -->
<!-- spread 可选，阴影的尺寸 -->
<!-- color 可选，阴影的颜色，参阅CSS颜色值 -->
<!-- inset 可选，将外部阴影（outset）改为内部阴影 -->
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); */
/* 默认是外阴影但是不能写出来 */
}
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
/* 当鼠标经过时，产生阴影效果 */
</style>
</head>
<body>
<div></div>
</body>
</html>
（8） 文字阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型之文字阴影</title>
<!-- h-shaow 必须，水平阴影的位置，允许负值 -->
<!-- v-shadow 必须，垂直阴影的位置，允许负值 -->
<!-- blur 可选，模糊距离 -->
<!-- color 可选，阴影的颜色，参阅CSS颜色值 -->
<style>
div {
font-size: 50px;
color: orangered;
font-weight: 700;
text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div>你是阴影，我是火影</div>
</body>
</html>
13. 浮动布局
（1） 浮动布局基本使用及练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局</title>
<!-- 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动 -->
<!-- 属性值 描述 -->
<!-- none 元素不浮动（默认值） -->
<!-- left 元素向左浮动 -->
<!-- right 元素向右浮动 -->
<!-- 浮动的元素具有行内块元素特点 -->
<!-- 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性 -->
<!-- 为了约束浮动元素的位置，我们网页布局一般采用的策略是 -->
<!-- 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则 -->
<!-- 浮动的盒子只会影响浮动盒子后面的标准，不会影响前面的标准 -->
<style>
.left,
.right {
float: left;
/* 被层叠 */
width: 200px;
height: 200px;
background-color: #666;
}
.right {
float: right;
}
span {
float: left;
width: 200px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="left">左青龙</div>
<div class="right">右白虎</div>
<span></span>
<span></span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局搭配父级盒子练习一</title>
<style>
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 230px;
height: 460px;
background-color: purple;
}
.right {
float: right;
width: 970px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局搭配父级盒子练习二</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
width: 296px;
height: 285px;
background-color: skyblue;
float: left;
margin-right: 14px;
}
.box .last {
margin-right: 0;
}
</style>
</head>
<body>
<ul class="box">
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
</body>
</html>
（2） 清除浮动之额外标签法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局之清除浮动之额外标签法</title>
<!-- 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。 -->
<!-- 清除浮动的本质就是清除浮动元素造成的影响 -->
<!-- 如果父级元素有高度，则不需要清除浮动 -->
<!-- 清除浮动后，父级元素就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了 -->
<!-- left 不允许左侧有浮动元素（清除左侧浮动的影响） -->
<!-- right 不允许右侧有浮动元素（清除右侧浮动的影响） -->
<!-- both 同时清除左右两侧的浮动的影响 -->
<!-- 清除浮动的策略是闭合浮动 -->
<!-- 方法 -->
<!-- 1.额外标签法也称为隔墙法，时W3C推荐的做法 -->
<!-- 2.父级添加overflow属性 -->
<!-- 3.父级添加after伪元素 -->
<!-- 4.父级添加双伪元素 -->
<style>
.box {
width: 980px;
background-color: gray;
margin: 0 auto;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.ermao {
float: left;
width: 200px;
height: 150px;
background-color: #666;
}
.footer {
height: 400px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="clear"></div>
<!-- 这个新增的元素要求必须是块级元素不能是行内元素 -->
</div>
<div class="footer"></div>
<body>
</body>
</html>
（3） 清除浮动之父级添加 overflow 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局之清除浮动之父级添加overflow属性</title>
<!-- 可以给父级元素添加overflow属性，将其属性设置为hidden，auto，或scroll -->
<style>
.box {
overflow: hidden;
/* 清除浮动 */
width: 980px;
background-color: gray;
margin: 0 auto;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.ermao {
float: left;
width: 200px;
height: 150px;
background-color: #666;
}
.footer {
height: 400px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>
（4） 清除浮动之父级添加 after 伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局之清除浮动之父级添加after伪元素</title>
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6`7专有 */
*zoom: 1;
}
.box {
width: 980px;
background-color: gray;
margin: 0 auto;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.ermao {
float: left;
width: 200px;
height: 150px;
background-color: #666;
}
.footer {
height: 400px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>
（5） 清除浮动之父级添加双伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局之清除浮动之父级添加双伪元素</title>
<style>
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.box {
width: 980px;
background-color: gray;
margin: 0 auto;
}
.damao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.ermao {
float: left;
width: 200px;
height: 150px;
background-color: #666;
}
.footer {
height: 400px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
