CSS基础
为网页添加样式
h1{
color:red;
background-color:lightblue;
text-align:center;
}
CSS规则 = 选择器 + 声明块
选择器
选择器：选中元素
- ID选择器：选中对应ID值的元素 (选中范围太窄)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test{
color:blue;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<p id="test">Nihil ab dolor doloribus architecto.</p>
<p>Harum doloremque nostrum corrupti veniam?</p>
<p>Quo iusto cumque soluta nisi?</p>
</body>
- 元素选择器：选中页面中匹配的所有元素 (选中范围太宽)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1{
color:red;
background-color:lightblue;
text-align:center;
}
</style>
</head>
<body>
<h1 class="red">
现在开始添加样式
</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p">Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</body>
- 类选择器：选中类名相同的元素 (推荐使用)
选中跟class属性相同的元素。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test {
color:blue;
}
/* 类选择器书写规则 */
.red {
color: red;
}
.big-center {
font-size: 3em;
text-align: center;
}
</style>
</head>
<body>
<p class="red">Lorem ipsum dolor sit amet.</p>
<p class="big-center">Lorem ipsum dolor sit amet.</p>
<!-- 应用多个类选择器 -->
<p class="big-center red">Lorem ipsum dolor sit amet.</p>
<p id="test">Lorem ipsum dolor sit amet.</p>
</body>
声明块
声明块：出现在大括号中
声明块中包含很多声明 (属性)，每一个声明 (属性) 表达了某一方面的样式。
CSS代码书写位置
- 内部样式表
书写在style元素中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>这是标题</h1>
</body>
- 内联样式表，元素样式表
直接书写在元素的style属性中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 style="color:green; background-color: blue;">
这是标题
</h1>
</body>
- 外部样式表【推荐】
将样式书写到独立的CSS文件中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="red-big-center">
Lorem, ipsum dolor sit amet consectetur adipisicing.
</div>
</body>
- 外部样式表可以解决多页面样式重复的问题
- 有利于浏览器缓存，从而提高页面响应速度
- 有利于代码分离 (HTML和CSS)，更容易阅读和维护
常见样式声明
color
元素内部文字的颜色
预设值：定义好的单词
三原色，色值：光学三原色 (红、绿、蓝)，每个颜色可以使用0-255之间的数字来表达，色值。
rgb表示法：
rgb(0, 255, 0)
hex (16进制) 表示法：
#红绿蓝
常用的颜色的色值：
- 淘宝红：#ff4400, #f40
- 黑色：#000000, #000
- 白色：#ffffff, #fff
- 红色：#ff0000, #f00
- 绿色：#00ff00, #0f0
- 蓝色：#0000ff, #00f
- 紫色：#f0f
- 青色：#0ff
- 黄色：#ff0
10.灰色：#ccc
<p style="color:red;">Lorem ipsum dolor sit amet.</p>
background-color
元素背景颜色
<p style="color:red; background-color:#008c8c;">Lorem ipsum dolor sit amet.</p>
font-size
元素内部文字尺寸大小
- px：像素，绝对单位，简单的理解为文字的高度占多少个像素
- em：相对单位，相对于父元素的 字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素 (html无父元素)，则使用基准字号。
user agent，UA：用户代理 (浏览器)
<p style="color:red; background-color:#008c8c; font-size:10px;">Lorem ipsum dolor sit amet.</p>
<p style="color:red; background-color:#008c8c; font-size:2em;">Lorem ipsum dolor sit amet.</p>
这里p元素没有设置绝对字体大小，回去继承其父元素的字体大小 (body)，body若也没有font-size属性，则会取继承html的，若html也没有，则会使用基准字号，基准字号可以在浏览器中设置。
font-weight
文字粗细程度， 可以直接取值数字， 可以取值预设值
<div style="font-weight:normal;">
Lorem ipsum dolor sit amet.
</div>
<div style="font-weight:bold;">
Lorem ipsum dolor sit amet.
</div>
通常不用取值为数字，常使用normal 和 bold两个预设值
strong，默认加粗
<strong>
表示重要的，不能忽略的内容
</strong>
font-family
文字类型
必须用户计算机中存在的字体才会有效
实际开发中，使用多个字体， 以匹配不同的环境。
<div style="font-family:consola,微软雅黑,">
Lorem ipsum dolor sit amet.明早按时到
</div>
有可能用户的电脑非常古老，可以在最后加上通用的写法。sans-serif， 非称线字体。代表一类字体，表示字体的边缘没有经过修饰。在用户机器上没有之前写的字体时，让OS帮忙选择一款非称线字体。
<div style="font-family:consolas,翩翩体-简,微软雅黑,Arial,sans-serif;">
Lorem ipsum dolor sit amet.明早按时到
</div>
称线字体在打印出来的时候非常好看，但在网页上显示的时候不好看
非称线字体在打印出的时候不好看，但在网页上显示的时候好看，因为非称线字体比较圆滑。
font-style
字体样式， 通常用它设置斜体
<div style="font-style: italic;">
Lorem ipsum dolor sit amet.
</div>
i、em元素，默认样式是倾斜字体；实际使用中，通常用它表示一个图标 (icon)
text-decoration
文本修饰，给文本加线
预设值：
line-through：给文本中间加条线
overline：给文本上面加条线
underline：给文本下面家条线
<div style="text-decoration: line-through;">
Lorem ipsum dolor sit amet.
</div>
a元素中浏览器默认样式text-decoration设置为underline
<p>
<a href="" style="text-decoration: none;color: red;">百度</a>
</p>
del元素：错误的内容
成语：<del>章</del>张口就来
s元素：过期的内容
<p>
活动价格：1.8 原价：<s>998</s>
</p>
text-indent
首行文本缩进
px缩进多少个像素，em缩进多少个字符。
<p style="text-indent: 2em;">
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
</p>
line-weight
每行 文本的高度， 该值越大， 每行文本的距离越大
<p style="line-height: 30px;">
Lorem ipsum dolor sit amet.
</p>
设置行高为容器的高度， 可以让单行文本垂直居中
<p style="background-color: #008c8c; color:#fff; height:50px;
line-height:50px;">
Lorem ipsum dolor sit amet.
</p>
行高可以设置为纯数字， 表示相对于当前元素的字体大小
<p style="text-indent: 2em; line-height:1.5;">
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
大多数见覅就爱积分IE进入
</p>
width
宽度
height
高度
<p style="color:red; background-color:#008c8c; width:100px; height:100px;">
Lorem ipsum dolor sit amet.
</p>
letter-spacing
文字间隙
<p style="letter-spacing: 1em;">
Lorem ipsum dolor sit amet.
</p>
text-align
元素内部的水平化排列方式
<p style="text-align:center;">
Lorem ipsum dolor sit amet.
</p>
选择器
选择器的作用：帮助你精准的徐哪种你想要的元素
简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器
*，选中所有元素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
color:red;
}
</style>
</head>
<body>
<div>Lorem.</div>
<p>Lorem.</p>
<h1>Lorem.</h1>
</body>
- 属性选择器
根据属性名和属性值选中元素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 选中所有具有href属性的元素 */
[href] {
color: red;
}
[href="https:www.sina.com"] {
color: black;
}
[class~="a"] {
color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.sina.com">新浪</a>
<a href="https://www.douyu.com">斗鱼</a>
</body>
- 伪类选择器
- link：超链接未访问时的状态
- visited：超链接访问过后的状态
- hover：鼠标悬停状态
- active：激活状态，鼠标按下状态
爱恨法则：love hate
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 未访问时的a元素 */
a:link {
color: chocolate;
}
/* 访问后的a元素 */
a:visited {
color: green;
}
/* 选中鼠标悬停时的a元素 */
a:hover {
color: red;
}
/* 鼠标按下时的a元素 */
a:active {
color: #008c8c;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.sina.com">新浪</a>
<a href="https://www.douyu.com">斗鱼</a>
</body>
- 伪元素选择器
会在选中的元素后面自动生成一个元素
before：
after：
接下来有一个需求，给下面的HTML和CSS加上书名号，要求使用CSS
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span::before {
content: "《";
color: red;
}
span::after {
content: "》";
color: red;
}
</style>
</head>
<body>
<p>
老师的<span>HTML和CSS</span>课程真的是不错
</p>
</body>
选择器的组合
- 并且
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
text-indent: 2em;
line-height: 2;
}
/* 表示选中必须是p元素，且代有类样式red */
p.red {
color: red;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, esse?
</p>
<p class="red">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat, illo.
</p>
</body>
- 后代元素 – 空格
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 表示选中class为red的后代元素li */
.red li {
color: green;
}
</style>
</head>
<body>
<div class="red">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat, illo.
<ul>
<li>Lorem.</li>
<li>Mollitia.</li>
<li>Repudiandae.</li>
<li>Doloribus?</li>
<li>Consectetur.</li>
</ul>
</div>
<ul>
<li>Lorem.</li>
<li>Deserunt?</li>
<li>Aliquid.</li>
<li>Laudantium?</li>
<li>Natus.</li>
</ul>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.abc .bcd {
color: green;
}
</style>
</head>
<body>
<div class="abc">
<p>Lorem.</p>
<p class="bcd">Excepturi?</p>
<p>Impedit.</p>
</div>
<p class="bcd">Lorem.</p>
</body>
- 子元素 – >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div>ul>li {
color: green;
}
</style>
</head>
<body>
<div>
<ul>
<li>Lorem.</li>
<li>Debitis.</li>
<li>Est.</li>
</ul>
</div>
</body>
- 相邻兄弟元素 – +
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 表示选中class为special的下一个元素li */
.special+li {
color: #008c8c;
}
</style>
</head>
<body>
<div>
<ul>
<li>Lorem.</li>
<li>Dolor.</li>
<li class="special">Explicabo.</li>
<li>Ullam.</li>
<li>Odit!</li>
<li>Sed.</li>
<li>Voluptas.</li>
<li>Amet?</li>
<li>Tenetur?</li>
<li>Ad.</li>
</ul>
</div>
</body>
- 后边出现的所有兄弟元素 – ~
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 表示选中class为special的后面的所有li元素 */
.special~li {
color: #008c8c;
}
</style>
</head>
<body>
<div>
<ul>
<li>Lorem.</li>
<li>Dolor.</li>
<li class="special">Explicabo.</li>
<li>Ullam.</li>
<li>Odit!</li>
<li>Sed.</li>
<li>Voluptas.</li>
<li>Amet?</li>
<li>Tenetur?</li>
<li>Ad.</li>
</ul>
</div>
</body>
选择器的并列
多个选择器，用逗号分隔
语法糖 – 减轻书写代码的负担
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 表示选中class为special的下一个元素li */
.special~li, p {
color: #008c8c;
}
</style>
</head>
<body>
<div>
<ul>
<li>Lorem.</li>
<li>Dolor.</li>
<li class="special">Explicabo.</li>
<li>Ullam.</li>
<li>Odit!</li>
<li>Sed.</li>
<li>Voluptas.</li>
<li>Amet?</li>
<li>Tenetur?</li>
<li>Ad.</li>
</ul>
</div>
<div>
<ul>
<li>Lorem.</li>
<li>Dolor.</li>
<li class="special">Explicabo.</li>
<li>Ullam.</li>
<li>Odit!</li>
<li>Sed.</li>
<li>Voluptas.</li>
<li>Amet?</li>
<li>Tenetur?</li>
<li>Ad.</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, ut.</p>
<p>Vero, numquam nihil excepturi ex maiores dignissimos asperiores laudantium cumque.</p>
<p>Nemo possimus quam earum dolores, et doloribus dolorem! Accusantium, quas?</p>
</body>
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理 (权重计算)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a {
color: red;
}
</style>
</head>
<body>
<a href="">Lorem.</a>
</body>
在浏览器中查看上面的代码，我们可以发现，我们的样式和浏览器默认样式有冲突
1. 比较重要性
重要性从高到低：
作者样式表：开发者书写的样式
- 作者样式表中 !important 样式
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a {
color: red !important;
text-decoration: none;
font-style: italic;
}
.green {
color: green;
}
</style>
</head>
<body>
<a class="green" href="">Lorem.</a>
</body>
2. 比较特殊性
看选择器
总体规则：选择器选中的范围越窄， 越特殊
具体规则：通过选择器，计算出一个四位数 (xxxx)
- 千位：如果是内联样式， 记作1， 否则0
演示代码图片 - 百位：等于选择器中所有ID选择器的数量
演示代码图片 - 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
代码演示图片 - 个位：等于选择器中所有元素选择器，伪元素选择器的数量
代码演示图片
权重计算练习
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a {
/* 0001 */
color: red;
}
div ul a {
/* 0003 */
color: green;
}
#mydiv #myul a {
/* 0201 */
color: #ccc;
}
#mydiv #myul .mylink {
/* 0210 */
color: #008c8c;
}
#mydiv #myul a:link {
/* 0211 */
color: chocolate;
}
</style>
</head>
<body>
<div id="mydiv">
<ul id="myul">
<li id="myli">
<a href="https://huya.com" class="mylink">
举个例子
</a>
</li>
</ul>
</div>
</body>
3. 比较源次序
代码书写靠后的胜出
应用
- 重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表：normalize.css、reset.css、mryer.css - 爱恨法则
link > visited > hover > active
继承
子元素会继承父元素的某些CSS属性
通常，跟文字内容相关的属性都能被继承。
通常会给body元素设置字体，让网站的字体统一。
可以在mdn中查询属性能否被继承。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
color: red;
font-size: 2em;
background-color: blue;
text-align: center;
}
body {
font-family: 宋体, Arial， sans-serif;
}
</style>
</head>
<body>
<div class="container">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur, facere.
</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Architecto perspiciatis qui ipsa aperiam!</li>
<li>Quos alias incidunt commodi quam.</li>
<li>Obcaecati architecto nulla laborum harum?</li>
<li>Eum, nostrum rerum. Obcaecati, a.</li>
<li>Quasi reprehenderit eaque accusantium vero.</li>
<li>Autem odio rem assumenda quod!</li>
<li>Autem aut quo minima architecto!</li>
<li>Earum odit laborum nesciunt eum!</li>
<li>Ipsum, mollitia? Iste, doloribus! Dolore!</li>
</ul>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores, quae.
</div>
</div>
</body>
属性值的计算过程
一个元素一个元素一次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值的计算过程。
- 什么是属性值计算
- 属性值计算过程简介
- 确定声明值
- 层叠冲突
- 使用继承
- 使用默认值
- 属性值计算总结
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<a href="">
<!--
a元素的颜色，在确定声明值时已经确定，不需要层叠和继承，
因为浏览器有默认样式
-->
举个例子
</a>
<p>
<!-- p元素的颜色继承自div元素 -->
p元素
</p>
</div>
</body>
特殊的两个CSS取值：
- inherit：手动（强制）继承，将父元素的取值取出应用到该元素。
- initial：初始值，将该属性设置为默认值。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
}
/* .mydiv {
background-color: transparent;
} */
.mydiv {
background-color: initial;
/* initial: 使用默认值 */
}
</style>
</head>
<body>
<div class="mydiv">
</div>
</body>
盒模型
box：盒子，每个元素都会在页面中都会生成一个矩形区域 (盒子)
盒子类型：
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行。
display默认inline，浏览器默认为inline
浏览器默认样式表设置的块盒：容器元素、h1-h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
- 内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的 内容盒 content-box - 填充(内边距) padding
盒子边框到盒子内容的距离：
padding-left、padding-right、padding-top、padding-bottom
padding：简写属性
padding：上 右 下 左
padding：50px
padding：50px 30px
填充区+内容区 = 填充盒 padding-box - 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
变宽颜色：border-color 默认是字体颜色
这几个都是简写属性，遵循上 右 下 左
border：4px dashed red;
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
/* border-width: 4px;
border-style: solid;
border-color: #008c8c; */
/* 速写属性 */
border: 4px dashed red;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit.
</div>
</body>
边框 + 填充区 + 内容区 = 边框盒 border-box
4. 外边距 margin
边框到其它盒子的距离
margin-top、margin-left、magin-right、margin-bottom
速写属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: lightblue;
border: 2px solid red;
}
.div1 {
margin-left: 20px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
盒模型的应用
改变宽高范围
默认情况下，width 和 height 设置的是内容宽高
页面重构师：将psd文件 (设计稿) 制作为静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置 width 和 height ，则设置的是内容盒。
- 精确计算
- CSS3：box-sizing
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 236px;
height: 51px;
background: #2d2e36;
color: #a7a7a7;
line-height: 51px;
padding-left: 46px;
border: 3px solid red;
/*
改变宽高的影响范围，这里直接设置的是边框盒的宽高，
内容盒的宽高浏览器会自动计算.
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
页游中心
</div>
</body>
改变背景覆盖范围
默认情况下背景覆盖边框盒
可以通过background-clip进行修改
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: #008c8c;
border: 5px dashed red;
background-clip: content-box;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit.
</div>
</body>
溢出处理
overflow，控制内容溢出边框盒后的处理方式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
border: 3px solid black;
padding: 20px;
width: 300px;
height: 100px;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero officiis accusamus, quibusdam velit dolores ipsa nesciunt consequatur vel cumque ea est quam voluptas similique quis eius laudantium repellat corrupti aspernatur!
</div>
</body>
断词规则
word-break，会影响文字在什么位置被截断换行
normal：普通。CJK字符 (文字位置截断)，非CJK字符 (单词位置截断)
break-all：截断所有，所有字符都在文字处截断
keep-all：保持所有，所有文字都在单词位置截断
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
border: 3px solid black;
padding: 20px;
width: 300px;
word-break: keep-all;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero officiis accusamus, quibusdam velit dolores ipsa nesciunt consequatur vel cumque ea est quam voluptas similique quis eius laudantium repellat corrupti aspernatur!
</div>
<div>
萨达十大实打实 大师法师法师法萨芬萨法算法算法大师大师大师法是否三大萨达所大所大叔大婶多阿诗丹顿撒多大叔大婶多大赛等撒多撒大萨达所大所大萨达所大所大萨达撒多
</div>
</body>
空白处理
white-space：norwap
文字过多自一行显示不下，在尾部用三个点显示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li {
border-bottom: 1px dashed #ccc;
line-height: 2;
border-left: 3px solid #008c8c;
padding-left: 10px;
margin: 1em 0;
width: 200px;
/* 单行文本--文字溢出的同一处理方法
1. 不换行
2. 溢出隐藏
3. 溢出的部分使用圆点来处理
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
<li>Qui exercitationem quis vitae molestiae ratione quod!</li>
<li>Totam aspernatur voluptas necessitatibus nihil aliquam explicabo?</li>
<li>Velit ipsa nihil mollitia officia. Deserunt, laudantium!</li>
<li>Libero repudiandae modi explicabo sit possimus architecto.</li>
<li>Omnis ad tenetur maxime, provident voluptatem incidunt!</li>
<li>Voluptate perferendis culpa quo debitis commodi ullam!</li>
<li>Dicta aliquid dolor consequuntur ea inventore quos!</li>
<li>Harum in deleniti animi? Possimus, recusandae tenetur.</li>
<li>Sapiente facilis aperiam libero! Sit, sunt dignissimos.</li>
</ul>
</body>
pre元素中的内容不会空白折叠，是因为在CSS中设置了white-space为pre属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
white-space: pre;
}
</style>
</head>
<body>
<pre>
var i = 1;
alert("a")
</pre>
<div>
var i = 1;
alert("a");
</div>
</body>
行盒的盒模型
常见的行盒：包含具体元素的内容
sapn、strong、em、i、img、video、audio
显著特点
- 盒子延着内容延伸
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p, span {
background: lightblue;
border: 2px solid;
line-height: 3;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit alias commodi totam autem molestias magni quas impedit atque hic corrupti ipsa, soluta minima cumque a voluptates quae blanditiis, minus error!
</p>
<span>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius consequatur ea omnis, nostrum, cumque corrupti blanditiis cum excepturi quia nesciunt vero fuga modi, veniam dignissimos possimus quam beatae tempora nam.
</span>
</body>
- 行盒不能设置宽高
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p, span {
background: lightblue;
border: 2px solid;
line-height: 3;
}
#selected {
/* 设置的宽高无效, 行盒的宽高应该跟着内容走*/
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit alias commodi totam autem molestias magni quas impedit atque hic corrupti ipsa, soluta minima cumque a voluptates quae blanditiis, minus error!
</p>
<span id="selected">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius consequatur ea omnis, nostrum, cumque corrupti blanditiis cum excepturi quia nesciunt vero fuga modi, veniam dignissimos possimus quam beatae tempora nam.
</span>
<span>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius consequatur ea omnis, nostrum, cumque corrupti blanditiis cum excepturi quia nesciunt vero fuga modi, veniam dignissimos possimus quam beatae tempora nam.
</span>
</body>
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
- 内边距 (填充区)
水平方向有效，垂直方向仅会影响背景，不会实际占据空间。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p, span {
background: lightblue;
border: 2px solid;
line-height: 3;
}
#selected {
padding: 20px 20px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit alias commodi totam autem molestias magni quas impedit atque hic corrupti ipsa, soluta minima cumque a voluptates quae blanditiis, minus error!
</p>
<span id="selected">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius consequatur ea omnis, nostrum, cumque corrupti blanditiis cum excepturi quia nesciunt vero fuga modi, veniam dignissimos possimus quam beatae tempora nam.
</span>
</body>
- 边框
水平方向有效，垂直方向不会占据实际空间。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p, span {
background: lightblue;
border: 2px solid;
line-height: 3;
}
#selected {
border: 30px solid;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit alias commodi totam autem molestias magni quas impedit atque hic corrupti ipsa, soluta minima cumque a voluptates quae blanditiis, minus error!
</p>
<span id="selected">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius consequatur ea omnis, nostrum, cumque corrupti blanditiis cum excepturi quia nesciunt vero fuga modi, veniam dignissimos possimus quam beatae tempora nam.
</span>
</body>
- 外边距
水平方向有效，垂直方向不会占据空间。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p, span {
background: lightblue;
border: 2px solid;
line-height: 3;
}
#selected {
margin: 20px 10px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit alias commodi totam autem molestias magni quas impedit atque hic corrupti ipsa, soluta minima cumque a voluptates quae blanditiis, minus error!
</p>
<span id="selected">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius consequatur ea omnis, nostrum, cumque corrupti blanditiis cum excepturi quia nesciunt vero fuga modi, veniam dignissimos possimus quam beatae tempora nam.
</span>
</body>
行块盒
display：inline-block的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a {
background: red;
color: white;
display: inline-block;
width: 100px;
text-align: center;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<span>a</span>
<a href="">
百度
</a>
<span>a</span>
</body>
行块盒在实际开发中常用于做分页，下面是代码演示。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.pager a {
border: 1px solid #e1e2e3;
text-decoration: none;
color: #38f;
display: inline-block;
width: 34px;
height: 34px;
text-align: center;
line-height: 34px;
}
.pager a:hover {
border-color: #38f;
background: #f2f8ff;
}
.pager a.selected {
border: none;
color: #000;
background: initial;
}
</style>
</head>
<body>
<div class="pager">
<a href="">1</a>
<a href="">2</a>
<a href="" class="selected">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</div>
</body>
空白折叠
空白折叠，发生在行盒内部，(行块盒) 或 行盒之间 (行块盒)
可替换元素 和 非可替换元素
大部分元素，页面上显示的效果，取取决于元素的内容，称为 非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为 可替换元素
可替换元素：image、video、audio
绝大部分可替换元素为行盒
可替换元素类似于行块盒，盒模型中所有尺寸都有效。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3685397514,1979161172&fm=26&gp=0.jpg">
</body>
object-fit属性可以设置图片的适应方式
- contain：保持比例，但不会填充满图片
- fill：填充满图片，但会牺牲比例
- cover：保证图片的比例，又要填充满图片，这时只能牺牲图片的一部分。
常规流
盒模型：规定单个盒子的规则
视觉格式化模型 (布局规则) ：页面中的多个盒子的排列规则
视觉格式化模型， 大体上将页面中盒子的排列方式分为三种方式：
- 常规流
- 浮动
- 定位
常规流
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行、行盒水平排列
包含块 (containing block) ：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大部分情况下：盒子的包含块，为其父元素的内容盒
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
background: lightblue;
width: 300px;
height: 100px;
border: 2px solid;
padding: 30px;
}
.child {
border: 2px solid;
/* width: 100px; */
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是auto
auto：将剩余空间吸收掉
margin的取值也可以是auto，默认值是0
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收。
在常规流中，块盒在其包含块中居中，可以定宽，然后左右margin设置为auto
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
background: lightblue;
width: 300px;
height: 100px;
border: 2px solid;
padding: 30px;
}
.child {
/* 左右两个margin的吸收能力是一样的 */
border: 2px solid;
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
-
每个块盒垂直方向上的auto值
height：auto，适应内容的高度
margin：auto，表示0 -
百分比取值
padding、宽高、margin可以取值百分比
以上的百分比相对于包含块的宽度
高度的百分比：
- 包含块的高度是否取决于子元素的高度，设置百分比无效
- 包含块的高度不取决于子元素的高度，百分比相对于父元素的高度
- 上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并。
两个外边距取最大值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
padding: 20px;
border: 3px solid;
margin: 50px;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
</body>
</html>
父子元素中的外边距合并
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
.parent {
background: lightblue;
height: 300px;
margin-top: 50px;
}
.child {
height: 100px;
background: red;
margin-top: 50px;
width: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
可以在父元素设置border属性或者，去掉子元素的margin属性，给父元素设置padding属性来取消合并。
扫一扫
1030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
