CSS 学习笔记
<h4 id="1-css-简介">1 CSS 简介</h4><h5 id="11-什么是-css">1.1 什么是 CSS</h5>
<p>全称为 <code>Cascading Style Sheet</code> ，即层叠级联样式表，本质上用来美化网页</p>
<h5 id="12-css-优势">1.2 CSS 优势</h5>
<ul>
<li>
<p>内容和表现分离</p>
</li>
<li>
<p>网页结构表现统一，可以实现复用</p>
</li>
<li>
<p>样式十分丰富</p>
</li>
<li>
<p>建议使用独立的 <code>html</code> 和 <code>css</code> 文件</p>
</li>
<li>
<p>利用 <code>SEO</code> ，容易被搜索引擎收录</p>
</li>
</ul>
<h5 id="13-css-导入方式">1.3 CSS 导入方式</h5>
<p><strong>1 行内样式</strong></p>
<pre><code class="language-html"><h2 color: yellow>标题</h2>
</code></pre>
<p><strong>2 内部样式</strong></p>
<pre><code class="language-html"><head>
<style>
h1 {
color: blue;
}
</style>
</head>
</code></pre>
<p><strong>3 外部样式</strong></p>
<pre><code class="language-html">h1 {
color: red;
}
</code></pre>
<p><strong>4 各种方式优先级</strong></p>
<p>各种导入方式的优先级采用就近原则，谁离元素更近，谁就生效</p>
<h4 id="2-选择器">2 选择器</h4>
<blockquote>
<p>作用：用来选择页面上某一个或者某一类元素</p>
</blockquote>
<h5 id="21-选择器分类">2.1 选择器分类</h5>
<ul>
<li>标签选择器：会选择到这个页面上所有的该标签对应的元素</li>
</ul>
<pre><code class="language-html"><head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>标题</h1>
</body>
</code></pre>
<ul>
<li>类选择器：会选择到这个页面上所有的 <code>class</code> 相同的元素，可以全局复用和跨标签</li>
</ul>
<pre><code class="language-html"><head>
<style>
.my-color {
color: blue;
}
</style>
</head>
<body>
<h1 class="my-color">标题</h1>
<p class="my-color">段落</p>
</body>
</code></pre>
<ul>
<li>ID 选择器：会选择到这个页面上所有的 <code>id</code> 相同的元素，必须保证全局唯一</li>
</ul>
<pre><code class="language-html"><head>
<style>
#my-color-title {
color: blue;
}
#my-color-prog {
color: red;
}
</style>
</head>
<body>
<h1 id="my-color-title">标题</h1>
<h1 id="my-color-prog">段落</h1>
</body>
</code></pre>
<ul>
<li>三种选择器优先级：不遵循就近原则，<code>id</code> 选择器 > <code>class</code> 选择器 > 标签选择器</li>
</ul>
<h5 id="22-层次选择器">2.2 层次选择器</h5>
<blockquote>
<p>以实现以下的结构为例：</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408091422736.png" alt="image-20220408091422736" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
</head>
<body>
<p class="tt">p1</p>
<p class="acrtive">p2</p>
<p>p3</p>
<ul>
<li>
<p class="tt">p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
</code></pre>
<p>实现结果如下：</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408092405156.png" alt="image-20220408092405156" loading="lazy"></p>
</blockquote>
<h6 id="221-后代选择器">2.2.1 后代选择器</h6>
<ul>
<li>定义：在某个元素后面的所有元素（祖爷爷、爷爷、爸爸、我，选择祖爷爷，那么祖爷爷后边的将都被选中）</li>
</ul>
<pre><code class="language-css">body p {
background: red;
}
</code></pre>
<p>效果如下：</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408092535062.png" alt="image-20220408092535062" loading="lazy"></p>
<h6 id="222-子选择器">2.2.2 子选择器</h6>
<ul>
<li>定义：顾名思义，就是只选择儿子</li>
</ul>
<pre><code class="language-css">body>p {
background: blue;
}
</code></pre>
<p>效果如下：</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408092814579.png" alt="image-20220408092814579" loading="lazy"></p>
<h6 id="223-相邻兄弟选择器">2.2.3 相邻兄弟选择器</h6>
<ul>
<li>定义：只选择同辈且同辈必须相邻（向下相邻）</li>
</ul>
<pre><code class="language-css">.active + p {
background: blueviolet;
}
</code></pre>
<p>效果如下：</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408093231387.png" alt="image-20220408093231387" loading="lazy"></p>
<h6 id="224-通用兄弟选择器">2.2.4 通用兄弟选择器</h6>
<ul>
<li>定义：当前选中的元素向下的所有兄弟元素</li>
</ul>
<pre><code class="language-css">.tt~p {
background: green;
}
</code></pre>
<p>效果如下：</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408093900727.png" alt="image-20220408093900727" loading="lazy"></p>
<h5 id="23-结构伪类选择器">2.3 结构伪类选择器</h5>
<blockquote>
<p>以下面的结构为例子</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</body>
</html>
</code></pre>
</blockquote>
<pre><code class="language-css">/*选中 ul 的第一个子元素*/
ul li:first-child {
background: green;
}
/*选中 ul 的最后一个子元素*/
ul li:last-child {
background: blue;
}
/*选中 p1: 定位到父元素，选择当前的第一个元素
选择当前 p 元素的父级元素，然后选中父元素的第一个子元素，并且是当前元素才会生效！*/
p:nth-child(1){
background: red;
}
/*选中父元素下的第二个 p 元素*/
p:nth-last-of-type(2){
background: yellow;
}
</code></pre>
<p>效果如下：</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408095524464.png" alt="image-20220408095524464" loading="lazy"></p>
<h5 id="24-属性选择器">2.4 属性选择器</h5>
<blockquote>
<p>以下方的为例</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="http://www.bilibili.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="item" id="seven">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="item last">10</a>
</p>
</body>
</html>
</code></pre>
<pre><code class="language-css">.demo a {
float: left;
display: block;
height: 30px;
width: 30px;
border-radius: 10px;
border-style: solid;
text-align: center;
color: #000000;
text-decoration: none;
margin-right: 5px;
font: bold 10px/30px Arial;
}
</code></pre>
<p>初始效果如下：</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408102806364.png" alt="image-20220408102806364" loading="lazy"></p>
</blockquote>
<ul>
<li>选中 <strong>具有</strong> id 属性的元素</li>
</ul>
<pre><code class="language-css">a {
background: #0045ff;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408103035596.png" alt="image-20220408103035596" loading="lazy"></p>
<ul>
<li>选中 id <strong>等于</strong> first 的元素</li>
</ul>
<pre><code class="language-css">a {
background: yellow;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408103142163.png" alt="image-20220408103142163" loading="lazy"></p>
<ul>
<li>选中 class 中 <strong>包含</strong> links 的元素</li>
</ul>
<pre><code class="language-css">a {
background: red;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408103513706.png" alt="image-20220408103513706" loading="lazy"></p>
<ul>
<li>选中 href 以 http <strong>开头</strong> 的元素</li>
</ul>
<pre><code class="language-css">a {
background: blueviolet;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408103935134.png" alt="image-20220408103935134" loading="lazy"></p>
<ul>
<li>选中 href 以 pdf <strong>结尾</strong> 的元素</li>
</ul>
<pre><code class="language-css">a {
background: green;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220408104202026.png" alt="image-20220408104202026" loading="lazy"></p>
<h4 id="3-美化网页元素">3 美化网页元素</h4>
<h5 id="31-美化字体">3.1 美化字体</h5>
<table>
<thead>
<tr>
<th style="text-align: center">元素</th>
<th style="text-align: center">功能</th>
<th style="text-align: center">元素</th>
<th style="text-align: center">功能</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">font-family</td>
<td style="text-align: center">字体样式</td>
<td style="text-align: center">font-size</td>
<td style="text-align: center">字体大小</td>
</tr>
<tr>
<td style="text-align: center">color</td>
<td style="text-align: center">字体颜色</td>
<td style="text-align: center">font-weight</td>
<td style="text-align: center">字体粗细</td>
</tr>
</tbody>
</table>
<h5 id="32-文本样式">3.2 文本样式</h5>
<table>
<thead>
<tr>
<th style="text-align: center">元素</th>
<th style="text-align: center">功能</th>
<th style="text-align: center">元素</th>
<th style="text-align: center">功能</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">text-align</td>
<td style="text-align: center">文字排版</td>
<td style="text-align: center">text-indent</td>
<td style="text-align: center">首行缩进</td>
</tr>
<tr>
<td style="text-align: center">line-height</td>
<td style="text-align: center">行高</td>
<td style="text-align: center">overline</td>
<td style="text-align: center">上划线</td>
</tr>
<tr>
<td style="text-align: center">line-through</td>
<td style="text-align: center">中划线</td>
<td style="text-align: center">underline</td>
<td style="text-align: center">下划线</td>
</tr>
</tbody>
</table>
<h5 id="33-文本阴影">3.3 文本阴影</h5>
<ul>
<li><code>text-shadow</code> ：一共四个参数，分别为 阴影颜色、水平偏移、垂直偏移、阴影半径</li>
</ul>
<h5 id="34-美化列表">3.4 美化列表</h5>
<blockquote>
<p>以京东的首页商品列表为例，实现与之类似的效果</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220409102911243.png" alt="image-20220409102911243" loading="lazy"></p>
</blockquote>
<p>按照正常的列表写法进行实现</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美化网页元素</title>
<link rel="stylesheet" href="../css/1.css">
</head>
<body>
<div id="nav">
<div>
<p class="goods-title">全部商品列表</p>
</div>
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a>&nbsp;/&nbsp;<a href="#">运营商</a>&nbsp;/&nbsp;<a href="#">数码</a></li>
<li><a href="#">电脑</a>&nbsp;/&nbsp;<a href="#">电脑</a></li>
<li><a href="#">家居</a>&nbsp;/&nbsp;<a href="#">家具</a>&nbsp;/&nbsp;<a href="#">家装</a>&nbsp;/&nbsp;<a href="#">厨具</a></li>
<li><a href="#">男装</a>&nbsp;/&nbsp;<a href="#">女装</a>&nbsp;/&nbsp;<a href="#">童装</a>&nbsp;/&nbsp;<a href="#">内衣</a></li>
<li><a href="#">美妆</a>&nbsp;/&nbsp;<a href="#">个护清洁</a>&nbsp;/&nbsp;<a href="#">宠物</a></li>
</ul>
</div>
</body>
</html>
</code></pre>
<p>效果如下：</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220409103756583.png" alt="image-20220409103756583" loading="lazy"></p>
<p>可以看到，效果完全不一样：每行刚开始有圆点、字体有下划线、字体颜色不是黑色、背景颜色，那么，如何修改？</p>
<pre><code class="language-css">.goods-title {
margin-left: 20px;
text-indent: 2em;
line-height: 28px;
font-weight: bold;
}
ul li {
width: 190px;
height: 25px;
list-style: none;
text-indent: 1.5em;
}
a {
text-decoration: none;
color: black;
font-size: 14px;
}
a:hover {
color: #ffba96;
text-decoration: underline;
}
</code></pre>
<h4 id="4-盒子模型">4 盒子模型</h4>
<h5 id="41-什么是盒子模型">4.1 什么是盒子模型</h5>
<p>网页上随便一个元素都具有盒子模型，类似下图</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220410102838541.png" alt="image-20220410102838541" loading="lazy"></p>
<table>
<thead>
<tr>
<th style="text-align: center">属性名</th>
<th style="text-align: center">意义</th>
<th style="text-align: center">属性名</th>
<th style="text-align: center">意义</th>
<th style="text-align: center">属性名</th>
<th style="text-align: center">意义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center"><code>margin</code></td>
<td style="text-align: center">外边距</td>
<td style="text-align: center"><code>border</code></td>
<td style="text-align: center">边框</td>
<td style="text-align: center"><code>padding</code></td>
<td style="text-align: center">内边距</td>
</tr>
</tbody>
</table>
<h5 id="42-边框-border">4.2 边框 border</h5>
<p>边框 border 有三个基本属性：<code>border: 宽度,样式,颜色</code></p>
<pre><code class="language-css">border: 2px solid #000;
</code></pre>
<h5 id="43-外边距-margin">4.3 外边距 margin</h5>
<p>外边距一共有四个属性：<code>margin: 上,右,下,左</code> （顺时针转一圈）</p>
<pre><code class="language-css">margin: 0; /*上下左右均为 0*/
margin: 0 2px; /*上下为 0, 左右为 2px*/
margin: 0 1px 2px 3px; /*上，右，下，左分别为 0. 1px, 2px, 3px*/
</code></pre>
<h5 id="44-内边距-padding">4.4 内边距 padding</h5>
<p>内边距一共有四个属性：<code>padding: 上,右,下,左</code> （顺时针转一圈）</p>
<pre><code class="language-css">padding: 0; /*上下左右均为 0*/
padding: 0 2px; /*上下为 0, 左右为 2px*/
padding: 0 1px 2px 3px; /*上，右，下，左分别为 0. 1px, 2px, 3px*/
</code></pre>
<h5 id="45-圆角边框">4.5 圆角边框</h5>
<p>圆角边框也有四个属性，分别是左上、右上、右下、左下（左上开始顺时针转一圈）</p>
<pre><code class="language-css">.app{
width: 50px;
height: 50px;
border: 5px solid red;
border-radius: 20px 10px;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220410112202536.png" alt="image-20220410112202536" loading="lazy"></p>
<pre><code class="language-css">.app{
width: 50px;
height: 50px;
border: 5px solid red;
border-radius: 30px 20px 10px 0;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220410112335880.png" alt="image-20220410112335880" loading="lazy"></p>
<pre><code class="language-css">.app{
width: 50px;
height: 50px;
border: 5px solid red;
border-radius: 10px;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220410112429673.png" alt="image-20220410112429673" loading="lazy"></p>
<h5 id="46-盒子阴影">4.6 盒子阴影</h5>
<p>阴影一共四个基本属性：<code>box-shadow: X偏移,Y偏移,羽化半径,颜色</code></p>
<pre><code class="language-css">.app{
width: 50px;
height: 50px;
border: 5px solid red;
border-radius: 10px;
box-shadow: 10px 10px 5px blue;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220410113248627.png" alt="image-20220410113248627" loading="lazy"></p>
<h4 id="5-display-和浮动">5 display 和浮动</h4>
<h5 id="51-display">5.1 display</h5>
<p>div 默认为块元素，span 默认为行内元素</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="../css/1.css">
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
</code></pre>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 2px solid red;
}
span{
width: 100px;
height: 100px;
border: 2px solid red;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411101441437.png" alt="image-20220411101441437" loading="lazy"></p>
<p>dispaly 常用的一共拥有以下几种属性：</p>
<ul>
<li>block：块元素</li>
</ul>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 2px solid red;
}
span{
width: 100px;
height: 100px;
border: 2px solid red;
display: block;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411101807819.png" alt="image-20220411101807819" loading="lazy"></p>
<ul>
<li>inline：行内元素</li>
</ul>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 2px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 2px solid red;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411101836378.png" alt="image-20220411101836378" loading="lazy"></p>
<ul>
<li>inline-block：仍然是块元素，但是可以显示在同一行</li>
</ul>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 2px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 2px solid red;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411102024157.png" alt="image-20220411102024157" loading="lazy"></p>
<ul>
<li>none：不显示</li>
</ul>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 2px solid red;
display: none;
}
span{
width: 100px;
height: 100px;
border: 2px solid red;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411102056327.png" alt="image-20220411102056327" loading="lazy"></p>
<p>这是设置网页元素排版的一种方式，但是经常使用的一般为下方即将提到的 float 方式</p>
<h5 id="52-浮动">5.2 浮动</h5>
<blockquote>
<p>以下面的一个例子为例</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="../css/2.css">
</head>
<body>
<div class="demo">
<div class="label-01">
<img src="../resources/image/test-01.jpg" alt="" width="300px" height="170px">
</div>
<div class="label-02">
<img src="../resources/image/test-02.png" alt="" width="170px" height="100px">
</div>
<div class="label-03">
<img src="../resources/image/test-03.jpg" alt="" width="400px" height="230px">
</div>
<div class="label-04">
浮动的盒子可以向左、向右浮动，直到外边缘触碰到包含框或者另一个盒子为止
</div>
</div>
</body>
</html>
</code></pre>
<pre><code class="language-css">div {
margin: 10px;
padding: 5px;
}
.demo {
border: 1px solid #000;
}
.label-01 {
border: 1px #f00 dashed;
display: inline-block;
}
.label-02 {
border: 1px #245ef5 dashed;
display: inline-block;
}
.label-03 {
border: 1px #1ce376 dashed;
display: inline-block;
}
.label-04 {
border: 1px #f3a163 dashed;
display: inline-block;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411103939363.png" alt="image-20220411103939363" loading="lazy"></p>
</blockquote>
<p>现在，我们将图一设置为左浮动，图二设置为右浮动，为了清楚，我们注释掉图三，发现确实是浮动于 div 之上的</p>
<pre><code class="language-css">.label-01 {
border: 1px #f00 dashed;
display: inline-block;
float: left;
}
.label-02 {
border: 1px #245ef5 dashed;
display: inline-block;
float: right;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411104805856.png" alt="image-20220411104805856" loading="lazy"></p>
<p>如果将两个都设置为向左浮动，那么图二遇到图一所在的盒子边框后才会停下</p>
<pre><code class="language-css">.label-01 {
border: 1px #f00 dashed;
display: inline-block;
float: left;
}
.label-02 {
border: 1px #245ef5 dashed;
display: inline-block;
float: left;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411105157486.png" alt="image-20220411105157486" loading="lazy"></p>
<p>加入让三张图片以及文字都向左浮动，会是什么样呢？</p>
<pre><code class="language-css">.label-01 {
border: 1px #f00 dashed;
display: inline-block;
float: left;
}
.label-02 {
border: 1px #245ef5 dashed;
display: inline-block;
float: left;
}
.label-03 {
border: 1px #1ce376 dashed;
display: inline-block;
float: left;
}
.label-04 {
border: 1px #f3a163 dashed;
display: inline-block;
float: left;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411105436584.png" alt="image-20220411105436584" loading="lazy"></p>
<p>此时，如果当我们改变浏览器页面比例时，会发现图片及文字的排版完全错乱了</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411105621259.png" alt="image-20220411105621259" loading="lazy"></p>
<p>这不是我们想要的，那么怎么清除浮动呢？接下来将会学习清除浮动</p>
<h5 id="53-父级边框塌陷问题">5.3 父级边框塌陷问题</h5>
<p>清除浮动的类型</p>
<pre><code class="language-css">clear: right //右侧不允许有浮动
claer: left //左侧不允许有浮动
clear: both //两侧不允许有浮动
clear: none //都不允许有浮动
</code></pre>
<p>通过5.2 的例子可以看到，当我们改变浮动类型时，父级元素 div 的边框会出现塌陷的问题，那么怎么解决？</p>
<h6 id="531-增加父元素高度">5.3.1 增加父元素高度</h6>
<p>将父级元素设置一个高度，该高度大于所有浮动后元素的高度</p>
<pre><code class="language-css">.demo {
border: 1px solid #000;
height: 300px;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411111301360.png" alt="image-20220411111301360" loading="lazy"></p>
<h6 id="532-增加空-div">5.3.2 增加空 div</h6>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" href="../css/2.css">
</head>
<body>
<div class="demo">
<div class="label-01">
<img src="../resources/image/test-01.jpg" alt="" width="300px" height="170px">
</div>
<div class="label-02">
<img src="../resources/image/test-02.png" alt="" width="170px" height="100px">
</div>
<div class="label-03">
<img src="../resources/image/test-03.jpg" alt="" width="300px" height="180px">
</div>
<div class="label-04">
浮动的盒子可以向左、向右浮动，直到外边缘触碰到包含框或者另一个盒子为止
</div>
<!--清除浮动的 div -->
<div class="clear-float"></div>
</div>
</body>
</html>
</code></pre>
<pre><code class="language-css">div {
margin: 10px;
padding: 5px;
}
.demo {
border: 1px solid #000;
}
.label-01 {
border: 1px #f00 dashed;
display: inline-block;
float: left;
}
.label-02 {
border: 1px #245ef5 dashed;
display: inline-block;
float: left;
}
.label-03 {
border: 1px #1ce376 dashed;
display: inline-block;
float: left;
}
.label-04 {
border: 1px #f3a163 dashed;
display: inline-block;
float: left;
}
/*清除浮动的 div */
.clear-float {
clear: both;
margin: 0;
padding: 0;
}
</code></pre>
<p>可以发现，父级边框塌陷问题成功解决</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411112144091.png" alt="image-20220411112144091" loading="lazy"></p>
<h6 id="533-使用-overflow">5.3.3 使用 overflow</h6>
<pre><code class="language-CSS">.demo {
border: 1px solid #000;
overflow: hidden;
}
</code></pre>
<p>当我们改变浏览器页面比例的时候，仍然不会发生塌陷问题</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411112845184.png" alt="image-20220411112845184" loading="lazy"></p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411112824445.png" alt="image-20220411112824445" loading="lazy"></p>
<h6 id="534父类增加一个伪类">5.3.4父类增加一个伪类</h6>
<pre><code class="language-css">.demo {
border: 1px solid #000;
}
.demo:after{
content: '';
display: block;
clear: both;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220411113257746.png" alt="image-20220411113257746" loading="lazy"></p>
<p>小结：</p>
<ul>
<li>
<p>浮动元素后边增加空 div：不推荐，代码中尽量不使用空 div</p>
</li>
<li>
<p>设置父元素高度：不推荐，假设元素有了固定高度，就会被限制</p>
</li>
<li>
<p>使用 overflow：不推荐，下拉的一些场景避免使用</p>
</li>
<li>
<p>父类增加一个伪类：推荐，没有副作用</p>
</li>
</ul>
<h4 id="6-定位">6 定位</h4>
<h5 id="61-相对定位">6.1 相对定位</h5>
<blockquote>
<p>以下面的例子为例</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<link rel="stylesheet" href="../css/3.css">
</head>
<body>
<div id="father">
<div class="first">第一个盒子</div>
<div class="second">第二个盒子</div>
<div class="third">第三个盒子</div>
</div>
</body>
</html>
</code></pre>
<pre><code class="language-css">body {
margin: 20px;
padding: 10px;
}
div {
padding: 5px;
margin: 3px;
}
#father {
width: 200px;
border: 2px solid #ff0000;
padding: 10px;
margin: 10px;
}
.first {
border: 1px dashed #36ff4d;
background-color: #99990d;
}
.second {
border: 1px dashed #1754ee;
background-color: #175499
}
.third {
border: 1px dashed #f900ff;
background-color: #f12380;
}
</code></pre>
<p>效果如下</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412092711054.png" alt="image-20220412092711054" loading="lazy"></p>
</blockquote>
<p>下面使用相对定位，第一个盒子向上移动 20px，向右移动 30px；第二个盒子保持不动；第三个盒子向左移动 20px，向下移动 30px</p>
<pre><code class="language-css">.first {
border: 1px dashed #36ff4d;
background-color: #99990d;
position: relative;
top: -20px;
left: 30px;
}
.third {
border: 1px dashed #f900ff;
background-color: #f12380;
position: relative;
right: 20px;
bottom: -30px;
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412093114843.png" alt="image-20220412093114843" loading="lazy"></p>
<p><strong>总结：</strong> 相对定位使用 <code>position: relative</code> 描述，相对于该元素原来的位置进行偏移，原来的位置会被保留！（相对定位后的偏移，仍然属于标准文档流，因为父级元素的边框没有塌陷，不是浮动）</p>
<blockquote>
<p>练习：使用 div 和 a 标签设计如下页面，要求满足：</p>
<ul>
<li>
<p>每个超链接宽度和高度都是 100px，背景颜色都是粉色，鼠标指针移动上去变为绿色</p>
</li>
<li>
<p>使用相对定位改变每个超链接的位置</p>
</li>
</ul>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412100336698.png" alt="image-20220412100336698" loading="lazy"></p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位练习</title>
<link rel="stylesheet" href="../css/4.css">
</head>
<body>
<div id="father">
<div class="first"><a href="#">链接1</a></div>
<div class="second"><a href="#">链接2</a></div>
<div class="third"><a href="#">链接3</a></div>
<div class="fourth"><a href="#">链接4</a></div>
<div class="fifth"><a href="#">链接5</a></div>
</div>
</body>
</html>
</code></pre>
<pre><code class="language-css">body {
margin: 20px;
padding: 20px;
}
#father {
width: 320px;
height: 320px;
margin: 10px;
border: 2px solid red;
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: #fdb4ff;
text-align: center;
}
a {
color: #fff;
text-decoration: none;
position: relative;
top: 35px
}
div:hover {
background-color: #66ff8b;
}
.first {
position: relative;
left: 10px;
top: 10px
}
.second {
position: relative;
left: 210px;
top: -90px
}
.third {
position: relative;
bottom: -10px;
left: 10px;
}
.fourth {
position: relative;
top: -90px;
right: -210px;
}
.fifth {
position: relative;
top: -290px;
left: 110px;
}
</code></pre>
<h5 id="62-绝对定位">6.2 绝对定位</h5>
<blockquote>
<p>仍然以 6.1 的三个盒子为例</p>
</blockquote>
<ul>
<li>没有父级元素的前提下，相对于浏览器进行定位</li>
</ul>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412102301694.png" alt="image-20220412102301694" loading="lazy"></p>
<pre><code class="language-css">/*父级元素未使用定位*/
.third {
border: 1px dashed #f900ff;
background-color: #f12380;
position: absolute;
top: 10px;
}
</code></pre>
<ul>
<li>假设父级元素存在定位，我们通常会相对于父级元素进行偏移</li>
</ul>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412102454092.png" alt="image-20220412102454092" loading="lazy"></p>
<pre><code class="language-css">#father {
width: 200px;
border: 2px solid #ff0000;
padding: 10px;
margin: 10px;
position: relative; /*父级元素使用了定位*/
}
.third {
border: 1px dashed #f900ff;
background-color: #f12380;
position: absolute;
top: 15px;
}
</code></pre>
<ul>
<li>
<p>在父级元素之内进行偏移</p>
</li>
<li>
<p>相对于父级元素或者浏览器的位置进行偏移，绝对定位不在标准文档流中，原来的位置不会被保留</p>
</li>
</ul>
<h5 id="63-固定定位">6.3 固定定位</h5>
<p>固定定位：顾名思义，就是一直固定在某一个位置，不管怎么改变，位置都不变</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<link rel="stylesheet" href="../css/5.css">
</head>
<body>
<div>我是绝对定位</div>
<div>我是固定定位</div>
</body>
</html>
</code></pre>
<pre><code class="language-css">body {
height: 2000px;
}
div:nth-of-type(1) {
font-size: 10px;
width: 100px;
height: 100px;
position: absolute;
right: 0;
bottom: 0;
background-color: red;
}
div:nth-of-type(2) {
font-size: 8px;
width: 50px;
height: 50px;
background-color: #36ff4d;
position: fixed;
right: 0;
bottom: 0;
}
</code></pre>
<p>初始界面，两个 div 都在浏览器右下角处</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412104707121.png" alt="image-20220412104707121" loading="lazy"></p>
<p>滑动滚动条，可以看到，绝对定位的 div 发生了移动，而固定定位仍然保持不变</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412104717625.png" alt="image-20220412104717625" loading="lazy"></p>
<h5 id="65-z-index-和透明度">6.5 Z-index 和透明度</h5>
<p>z-index 类似于 PS 中的图层概念，通过设置 z-index 的值来控制元素之间的层级关系</p>
<blockquote>
<p>以如下情况为例</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Z-index</title>
<link rel="stylesheet" href="../css/6.css">
</head>
<body>
<div id="father">
<ul>
<li><img src="../resources/image/bg.jpg" alt=""></li>
<li class="tipText">UP : 苏苏思量</li>
<li class="tipBg"></li>
<li>时间 : 2022-04-12</li>
<li>地点 : 小破站学习区</li>
</ul>
</div>
</body>
</html>
</code></pre>
<pre><code class="language-css">#father {
width: 250px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
font-weight: bold;
line-height: 25px;
border: 1px solid #05212f;
}
#father ul {
position: relative;
}
ul, li {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.tipBg, .tipText {
position: absolute;
width: 250px;
height: 25px;
top: 111px;
}
img {
width: 250px;
height: 135px;
}
.tipBg {
z-index: 1; //背景遮罩
background-color: #383838;
}
.tipText {
color: white;
z-index: 2; //文字
}
</code></pre>
<p>这样情况下，文字的 z-index == 2，背景遮罩的 z-index == 1，因为文字的 z-index 值大于背景遮罩，所以文字会显示在背景上方</p>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412114503584.png" alt="image-20220412114503584" loading="lazy"></p>
<p>然后改变背景遮罩的 z-index 值，使其大于文字的 z-index，这样背景遮罩就遮住了文字</p>
<pre><code class="language-css">.tipBg {
z-index: 3; //背景遮罩
background-color: #383838;
}
.tipText {
color: white;
z-index: 2; //文字
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412114535859.png" alt="image-20220412114535859" loading="lazy"></p>
<p>接下来我们改变背景遮罩的透明度为 0.5，可以看到，文字确实在遮罩下方</p>
<pre><code class="language-css">.tipBg {
z-index: 3;
background-color: #383838;
opacity: 0.5;
/*IE8 之前支持下方的写法*/
/*filter: Alpha(opacity=50)*/
}
</code></pre>
<p><img src="https://my-pic-1309513254.cos.ap-shanghai.myqcloud.com//image-20220412114557293.png" alt="image-20220412114557293" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/wudaojiuxiao/p/16135192.html
頁:
[1]