CSS学习笔记
<h1 id="css">CSS</h1><h2 id="1-什么是css">1、 什么是CSS</h2>
<blockquote>
<p>Cascading Style Sheet(层叠/级联样式表)</p>
<p>层叠：多个样式可以作用在同一个html的元素上，同时生效</p>
</blockquote>
<h2 id="2作用">2、作用</h2>
<blockquote>
<p>表现层,美化网页</p>
</blockquote>
<ul>
<li>内容</li>
<li>字体</li>
<li>颜色</li>
<li>边距</li>
<li>宽高</li>
<li>背景图片</li>
<li>网页浮动</li>
<li>...</li>
</ul>
<h2 id="3优势">3、优势</h2>
<ul>
<li>内容和表现分离</li>
<li>网页结构表现统一,可以实现复用</li>
<li>样式十分丰富</li>
<li>建议使用独立于html的css文件</li>
<li>利用SEO, 容易被搜索引擎收录</li>
</ul>
<h2 id="4css的三种导入方式">4、CSS的三种导入方式</h2>
<ul>
<li>内部样式</li>
<li>外部样式</li>
<li>行内样式</li>
</ul>
<pre><code class="language-java"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式 -->
<style>
h1{
color: blue;
}
</style>
<!-- 外部样式 -->
<!--链接式:-->
<link rel="stylesheet" href="css/style.css">
<!--导入式-->
<style>
@import url("css/style.css");
</style>
</head>
<body>
<!--样式优先级:
遵循就近原则, 离代码的远近, 此处是内部 > 外部 > 内部-->
<!--行内样式: 在标签元素中,编写一个style属性,编写样式即可,不符合结构与表现分离-->
<h1 style="color: crimson">标题</h1>
</body>
</html>
</code></pre>
<p><strong>拓展：外部样式的两种写法</strong></p>
<ul>
<li>
<p>链接式：link标签，只能在<strong>html</strong>源代码中使用</p>
<pre><code class="language-java"><!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">
</code></pre>
</li>
<li>
<p>导入式：</p>
<p>@import是 <strong>CSS2.1</strong> 特有的</p>
<pre><code class="language-java"><!--导入式-->
<style>
@import url("css/style.css");
</style>
</code></pre>
<p>首页link和import语法结构不同，前者 <strong>link</strong> 是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要 <strong>style</strong> 标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。</p>
<p>本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。</p>
</li>
</ul>
<hr>
<h2 id="5重点选择器">5、(重点)选择器</h2>
<blockquote>
<p>作用：选择页面上的某一个或者某一类元素</p>
</blockquote>
<h3 id="51基本选择器">5.1、基本选择器</h3>
<p> <strong>优先级： 不遵循就近原则，id选择器 > class选择器 > 标签选择器</strong></p>
<h4 id="1标签选择器">1、标签选择器</h4>
<p> <strong>格式：标签{}，会选择到页面上所有的这个标签的元素</strong></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**标签选择器,会选择到页面上所有的这个标签的元素**/
h1{
color: crimson;
background: aquamarine;
border-radius: 10px;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>学java</h1>
<h1>学汇编</h1>
<p>学Python</p>
<p>学C++</p>
</body>
</html>
</code></pre>
<hr>
<h4 id="2类选择器">2、类选择器</h4>
<p>CSS 类选择器 (w3school.com.cn)</p>
<p> <strong>格式:.class名称{}，好处,可以多个标签归类,是同一个class</strong></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器格式: .class名称{}
好处,可以多个标签归类,是同一个class */
.title_1{
color: crimson;
}
.title_2{
color: blue;
}
</style>
</head>
<body>
<h1 class="title_1">标题1</h1>
<h1 class="title_2">标题2</h1>
<h1 class="title_1">标题3</h1>
<h1 class="title_2">标题4</h1>
<!--不同的标签也可以用同一个class-->
<p class="title_1">标题5</p>
</body>
</html>
</code></pre>
<hr>
<h4 id="3id选择器">3、ID选择器</h4>
<p>CSS id 选择器 (w3school.com.cn)</p>
<p> <strong>格式:#id名称{}， ID必须保证全局唯一!</strong></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ID选择器格式: #id名称{}
ID必须保证全局唯一!*/
#title_3{
color: #dcd914;
}
#title_4{
color: #f33a13;
}
</style>
</head>
<body>
<h1 id="title_3">标题3</h1>
<h1 id="title_4">标题4</h1>
</body>
</html>
</code></pre>
<hr>
<h3 id="52高级选择器">5.2、高级选择器</h3>
<h4 id="1层次选择器">1、层次选择器</h4>
<pre><code class="language-html"><body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul id="u_list">
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
<p>p7与li同级</p>
</ul>
<p class="active">p8</p>
<p>p9</p>
</body>
</code></pre>
<h5 id="后代选择器">后代选择器</h5>
<blockquote>
<p>在某个元素的后代所有的同类标签</p>
</blockquote>
<pre><code class="language-css"> /* 1. 后代选择器,选择后代中所有的同类标签,ul标签的id为u_list*/
#u_list p{
color: #dc1428;
}
</code></pre>
<img src="https://i.bmp.ovh/imgs/2022/02/1c8f4b23af33ff15.png">
<h5 id="子选择器">子选择器</h5>
<blockquote>
<p>选择下一个层次的标签</p>
</blockquote>
<pre><code class="language-css">/* 2. 子选择器,选择下一个层次的同类标签，ul标签的id为u_list */
#u_list > li{
color: crimson;
}
</code></pre>
<img src="https://i.bmp.ovh/imgs/2022/02/b2f8398e241516b8.png">
<h5 id="相邻兄弟选择器">相邻兄弟选择器</h5>
<blockquote>
<p>弟弟选择器,不选自己</p>
</blockquote>
<pre><code class="language-css"> /* 3. 相邻兄弟选择器 同辈,对下不对上(弟弟选择器)，p2和p8的class都是active */
.active + p{
color: crimson;
}
</code></pre>
<img src="https://i.bmp.ovh/imgs/2022/02/0cdc43768e13c239.png">
<h5 id="通用选择器">通用选择器</h5>
<blockquote>
<p>所有弟弟选择器，不选自己</p>
</blockquote>
<pre><code class="language-css">/* 4. 通用选择器 选择所有同辈,对下不对上(所有弟弟选择器)*/
.active ~ p{
color: crimson;
}
</code></pre>
<img src="https://i.bmp.ovh/imgs/2022/02/f6d435f81622d704.png">
<hr>
<h4 id="2结构伪类选择器带冒号不常用">2、结构伪类选择器(带冒号，不常用)</h4>
<p>CSS 类选择器详解 (w3school.com.cn)</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 避免使用class,id选择器 -->
<style>
/*ul的第1个子元素*/
ul li:first-child{
background: #dcd914;
}
/*ul的最后1个子元素*/
ul li:last-child{
background: #d61326;
}
/*ul的第2个子元素*/
ul li:nth-child(2){
background: blue;
}
/* 选中p1: 定位到父元素(body), 选择当前的第2个元素,并且这个元素标签要跟：前的标签一样(不好用)*/
p:nth-child(2){
color: blue;
}
/* 选中p2: 定位到父元素下(body)的p的第2个元素 (不好用)*/
p:nth-of-type(2){
color: blueviolet;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
</code></pre>
<img src="https://i.bmp.ovh/imgs/2022/02/a9d57c6a30713286.png">
<hr>
<h4 id="3属性选择器常用">3、属性选择器（常用）</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
/*左浮动*/
float: left;
/*块级元素*/
display: block;
/*宽高*/
width: 50px;
height: 50px;
/*圆角*/
border-radius: 25px;
/*对齐方式,居中*/
text-align: center;
/*文字颜色*/
color: chocolate;
/*去掉下划线*/
text-decoration: none;
/*外边距*/
margin: 10px;
/*行高,使文字居中*/
line-height: 50px;
}
/* 选中存在指定属性的元素,可以写多个属性 a[属性名1][属性名2][...]{} */
a{
background: #dcd914;
}
/*
选择 abc 属性值以 "def" 开头的所有元素
选择 abc 属性值以 "def" 结尾的所有元素
选择 abc 属性值中包含子串 "def" 的所有元素
*/
/* 选中class中有first的元素 ,正则匹配*/
a{
background: #dc1428;
}
/* 选中class中first开头的元素*/
a{
background: blue;
}
/* 选中class中item结尾的元素 */
a{
background: chartreuse;
}
/* 结合元素选择器 选中链接4只会匹配class中的字串*/
a.second.first{
background: black;
}
/* 多类选择器 选中链接3,h1, 如果不指定匹配元素,则会匹配所有元素*/
.demo{
background: #183de8;
}
</style>
</head>
<body>
<p class="demo">
<!-- 超链接 -->
<a href="" class="links item 1" id="first">链接1</a>
<a href="" class="links item active" target="_blank" title="test">链接2</a>
<a href="" class="links item 3 demo">链接3</a>
<a href="" class="links item second first">链接4</a>
<a href="" class="links item 5">链接5</a>
<a href="" class="links item first">链接6</a>
<a href="" class="links item 7" id="second">链接7</a>
<a href="" class="first links item">链接8</a>
<a href="" class="links item 9">链接9</a>
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>
<h1 class="demo">标题1</h1>
</p>
</body>
</html>
</code></pre>
<img src="https://i.bmp.ovh/imgs/2022/02/8ec47cbfe025c8df.png">
<hr>
<h2 id="6美化网页元素">6、美化网页元素</h2>
<h4 id="61span标签">6.1、span标签</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#java{
color: #dc1428;
}
</style>
</head>
<body>
欢迎学习<span id="java">java</span>
</body>
</html>
</code></pre>
<p><img src="https://i.bmp.ovh/imgs/2022/02/82e0b517bf05108c.png"></p>
<hr>
<h4 id="62字体样式">6.2、字体样式</h4>
<p>CSS 字体 (w3school.com.cn)</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
字体系列font-family
字体风格font-style
字体变形font-variant
...
-->
<style>
body{
font-family: 宋体;
font-style: oblique;/* 斜体 */
font-variant: small-caps;/* 小型大写字母 ,原本是大写的不会改变 */
...
}
</style>
</head>
<body>
<h2>故事简介</h2>
Thank you!<br>
“潘子！”我惊了一下，但是没法靠过去看。<br>
对方道：“小三爷，快走。”声音相当微弱。<br>
接着我听到一连串的咳嗽声。“你怎么样？”我问道，“你怎么会在这儿？”<br>
潘子在黑暗中说道：“说来话长了，小三爷，你有烟吗？”“在这儿你还抽烟，不怕肺烧穿？”<br>
我听着潘子的语气，觉得他特别地淡定，忽然起了一种非常不详的预感。<br>
</body>
</html>
</code></pre>
<hr>
<h4 id="63文本样式">6.3、文本样式</h4>
<p><strong>一般都是现用现找</strong></p>
<p>CSS 文本 (w3school.com.cn)</p>
<h5 id="1颜色">1、颜色</h5>
<h5 id="2文本对齐方式">2、文本对齐方式</h5>
<h5 id="3首行缩进">3、首行缩进</h5>
<h5 id="4行高">4、行高</h5>
<h5 id="5装饰">5、装饰</h5>
<h4 id="64超链接伪类">6.4、超链接伪类</h4>
<p>CSS 伪类 (w3school.com.cn)</p>
<pre><code class="language-css">/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
</code></pre>
<h4 id="65列表">6.5、列表</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 效果:
链接不要下划线,无序列表前的 点 去掉-->
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><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></li>
<li><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></li>
</ul>
</div>
</body>
</html>
</code></pre>
<pre><code class="language-css">#nav{
width: 200px;
}
.title{
color: #d61326;
/*粗体*/
font-weight: bold;
/*首行间距*/
text-indent: 1cm;
/*行高*/
line-height: 35px;
background: cyan;
}
ul li{
height: 30px;
/*无列表样式*/
list-style: none;
/*首行间距*/
text-indent: 1cm;
background: #dcd914;
}
a{
/*无下划线*/
text-decoration-line: none;
}
</code></pre>
<hr>
<h4 id="66背景图像">6.6、背景图像</h4>
<p>CSS 背景图像 (w3school.com.cn)</p>
<p>CSS 背景简写 (w3school.com.cn)</p>
<p>在使用简写属性时，属性值的顺序为：</p>
<ul>
<li>background-color 颜色</li>
<li>background-image图像</li>
<li>background-repeat平铺方式</li>
<li>background-attachment</li>
<li>background-position</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">background</td>
<td style="text-align: left">在一条声明中设置所有背景属性的简写属性。</td>
</tr>
<tr>
<td style="text-align: left">background-attachment</td>
<td style="text-align: left">设置背景图像是固定的还是与页面的其余部分一起滚动。</td>
</tr>
<tr>
<td style="text-align: left">background-clip</td>
<td style="text-align: left">规定背景的绘制区域。</td>
</tr>
<tr>
<td style="text-align: left">background-color</td>
<td style="text-align: left">设置元素的背景色。</td>
</tr>
<tr>
<td style="text-align: left">background-image</td>
<td style="text-align: left">设置元素的背景图像。</td>
</tr>
<tr>
<td style="text-align: left">background-origin</td>
<td style="text-align: left">规定在何处放置背景图像。</td>
</tr>
<tr>
<td style="text-align: left">background-position</td>
<td style="text-align: left">设置背景图像的开始位置。</td>
</tr>
<tr>
<td style="text-align: left">background-repeat</td>
<td style="text-align: left">设置背景图像是否及如何重复。</td>
</tr>
<tr>
<td style="text-align: left">background-size</td>
<td style="text-align: left">规定背景图像的尺寸。</td>
</tr>
</tbody>
</table>
<h4 id="67渐变">6.7、渐变</h4>
<p>CSS 渐变 (w3school.com.cn)</p>
<p>CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。</p>
<p>CSS 定义了两种渐变类型：</p>
<ul>
<li>线性渐变（向下/向上/向左/向右/对角线）</li>
<li>径向渐变（由其中心定义）</li>
</ul>
<p>如需创建线性渐变（<strong>默认从上到下</strong>），您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。</p>
<p><strong>语法</strong></p>
<pre><code class="language-css">background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
</code></pre>
<hr>
<h2 id="7盒子模型">7、盒子模型</h2>
<h4 id="71margin外边距">7.1、<strong>margin</strong>：外边距</h4>
<p>CSS 外边距 (w3school.com.cn)</p>
<p>CSS 拥有用于为元素的每一侧指定外边距的属性：(<strong>默认顺序上右下左</strong><strong>顺时针</strong>)</p>
<ul>
<li>margin-top</li>
<li>margin-right</li>
<li>margin-bottom</li>
<li>margin-left</li>
</ul>
<p>所有外边距属性都可以设置以下值：</p>
<ul>
<li>auto - 浏览器来计算外边距</li>
<li>length - 以 px、pt、cm 等单位指定外边距</li>
<li>% - 指定以包含元素宽度的百分比计的外边距</li>
<li>inherit - 指定应从父元素继承外边距</li>
</ul>
<p><strong>提示：</strong>允许负值。</p>
<hr>
<h4 id="72padding内边距">7.2、padding：内边距</h4>
<p>CSS 内边距 (w3school.com.cn)</p>
<p>CSS 拥有用于为元素的每一侧指定内边距的属性：（<strong>默认顺序上右下左</strong><strong>顺时针</strong>）</p>
<ul>
<li>padding-top</li>
<li>padding-right</li>
<li>padding-bottom</li>
<li>padding-left</li>
</ul>
<p>所有内边距属性都可以设置以下值：</p>
<ul>
<li><em>length</em> - 以 px、pt、cm 等单位指定内边距</li>
<li>% - 指定以包含元素宽度的百分比计的内边距</li>
<li>inherit - 指定应从父元素继承内边距</li>
</ul>
<p><strong>提示：</strong>不允许负值。</p>
<hr>
<h4 id="73border边框">7.3、border：边框</h4>
<p><strong>默认顺序</strong> -> border: (线宽 样式 颜色)</p>
<p>CSS 边框 (w3school.com.cn)</p>
<h5 id="1边框宽度width">1、边框宽度width</h5>
<p>border-width 属性指定四个边框的宽度。</p>
<p>可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick</p>
<hr>
<h5 id="2边框样式style">2、边框样式style</h5>
<p>border-style 属性指定要显示的边框类型。</p>
<p>允许以下值：</p>
<ul>
<li>dotted - 定义点线边框</li>
<li>dashed - 定义虚线边框</li>
<li>solid - 定义实线边框</li>
<li>double - 定义双边框</li>
<li>groove - 定义 3D 坡口边框。效果取决于 border-color 值</li>
<li>ridge - 定义 3D 脊线边框。效果取决于 border-color 值</li>
<li>inset - 定义 3D inset 边框。效果取决于 border-color 值</li>
<li>outset - 定义 3D outset 边框。效果取决于 border-color 值</li>
<li>none - 定义无边框</li>
<li>hidden - 定义隐藏边框</li>
</ul>
<p>border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。</p>
<hr>
<h5 id="3边框颜色color">3、边框颜色color</h5>
<p>border-color 属性用于设置四个边框的颜色。</p>
<p>可以通过以下方式设置颜色：</p>
<ul>
<li>name - 指定颜色名，比如 "red"</li>
<li>HEX - 指定十六进制值，比如 "#ff0000"</li>
<li>RGB - 指定 RGB 值，比如 "rgb(255,0,0)"</li>
<li>HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"</li>
<li>transparent</li>
</ul>
<p><strong>注释：</strong>如果未设置 <code>border-color</code>，则它将继承元素的颜色。</p>
<h4 id="74圆角边框和阴影">7.4、圆角边框和阴影</h4>
<p>CSS 圆角边框 (w3school.com.cn)</p>
<h5 id="圆角边框border-radius">圆角边框border-radius</h5>
<p>属性用于向元素添加圆角边框</p>
<pre><code class="language-css">p {
border: 2px solid red;
border-radius: 5px;
}
</code></pre>
<hr>
<p>CSS 阴影效果 (w3school.com.cn)</p>
<ul>
<li>text-shadow</li>
<li>box-shadow</li>
</ul>
<hr>
<h5 id="文字阴影text-shadow">文字阴影text-shadow</h5>
<p>CSS text-shadow 属性为文本添加阴影。</p>
<p>最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）</p>
<pre><code class="language-css">h1 {
text-shadow: 2px 2px red;
}
</code></pre>
<hr>
<h5 id="盒子阴影box-shadow">盒子阴影box-shadow</h5>
<p>CSS Box Shadow (w3school.com.cn)</p>
<pre><code class="language-c's's">div {
box-shadow: 10px 10px 5px grey;
}
</code></pre>
<hr>
<h4 id="75浮动会离开当前图层">7.5、浮动(会离开当前图层)</h4>
<h5 id="1块级元素独占一行">1、块级元素,独占一行</h5>
<pre><code class="language-java">h1-h6 p div列表...
</code></pre>
<h5 id="2行内元素不独占一行">2、行内元素,不独占一行</h5>
<pre><code class="language-java">span a img strong...
</code></pre>
<p><strong>行内元素可以被包含在块级元素中，反之不可以。</strong></p>
<h5 id="3display">3、display</h5>
<p>CSS 布局 - display 属性 (w3school.com.cn)</p>
<p>display 属性规定是否/如何显示元素。</p>
<p>每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block (块级)或 inline（行内）。</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">none</td>
<td style="text-align: left">此元素不会被显示。</td>
</tr>
<tr>
<td style="text-align: left">block</td>
<td style="text-align: left">此元素将显示为块级元素，此元素前后会带有换行符。</td>
</tr>
<tr>
<td style="text-align: left">inline</td>
<td style="text-align: left">默认。此元素会被显示为内联元素，元素前后没有换行符。</td>
</tr>
<tr>
<td style="text-align: left">inline-block</td>
<td style="text-align: left">行内块元素。（CSS2.1 新增的值）</td>
</tr>
<tr>
<td style="text-align: left">list-item</td>
<td style="text-align: left">此元素会作为列表显示。</td>
</tr>
<tr>
<td style="text-align: left">run-in</td>
<td style="text-align: left">此元素会根据上下文作为块级元素或内联元素显示。</td>
</tr>
<tr>
<td style="text-align: left">...</td>
<td style="text-align: left">...</td>
</tr>
</tbody>
</table>
<h5 id="4浮动float">4、浮动float</h5>
<p>CSS 布局 - 浮动和清除 (w3school.com.cn)</p>
<p>float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。</p>
<p>float 属性可以设置以下值之一：</p>
<ul>
<li>left - 元素浮动到其容器的左侧</li>
<li>right - 元素浮动在其容器的右侧</li>
<li>none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。</li>
<li>inherit - 元素继承其父级的 float 值</li>
</ul>
<p><strong>最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。</strong></p>
<hr>
<p>CSS 布局 - 浮动和清除</p>
<p>CSS float 属性规定元素如何浮动。</p>
<p>CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。</p>
<hr>
<p>如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：</p>
<p>然后我们可以向包含元素添加 <strong>overflow: auto</strong>;</p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<h1>Clearfix</h1>
<p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>
<div>
<img class="img1" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
<p style="clear:right">请为包含元素添加一个带有 overflow: auto; 的 clearfix 类，以解决此问题：</p>
<div class="clearfix">
<img class="img2" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
</body>
</html>
</code></pre>
<p>但是，新的现代 clearfix hack 技术使用起来更安全,使用<strong>伪类 :after</strong></p>
<pre><code class="language-css">.clearfix:after {
content: "";
clear: both;
display: table;
}
</code></pre>
<hr>
<h4 id="76定位">7.6、定位</h4>
<p>CSS 布局 - position 属性 (w3school.com.cn)</p>
<p><strong>所有 CSS 定位属性</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">bottom</td>
<td style="text-align: left">设置定位框的底部外边距边缘。</td>
</tr>
<tr>
<td style="text-align: left">clip</td>
<td style="text-align: left">剪裁绝对定位的元素。</td>
</tr>
<tr>
<td style="text-align: left">left</td>
<td style="text-align: left">设置定位框的左侧外边距边缘。</td>
</tr>
<tr>
<td style="text-align: left">position</td>
<td style="text-align: left">规定元素的定位类型。</td>
</tr>
<tr>
<td style="text-align: left">right</td>
<td style="text-align: left">设置定位框的右侧外边距边缘。</td>
</tr>
<tr>
<td style="text-align: left">top</td>
<td style="text-align: left">设置定位框的顶部外边距边缘。</td>
</tr>
<tr>
<td style="text-align: left">z-index</td>
<td style="text-align: left">设置元素的堆叠顺序。</td>
</tr>
</tbody>
</table>
<h5 id="1相对定位--position-relative">1、相对定位position: relative</h5>
<p>CSS 相对定位 (w3school.com.cn)</p>
<p><strong>相对原始的位置偏移</strong></p>
<p>如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。<strong>仍然在当前图层（文档流）</strong></p>
<p>如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。</p>
<pre><code class="language-css">#box_relative {
position: relative;
left: 30px;
top: 20px;
}
</code></pre>
<hr>
<h5 id="2绝对定位--position-absolute">2、绝对定位position: absolute</h5>
<p>CSS 绝对定位 (w3school.com.cn)</p>
<p>1、父级元素<strong>不存在定位</strong>（父级元素没有position属性）的情况下，相对于浏览器定位</p>
<p>2、父级元素<strong>存在定位</strong>的情况下，相对于父级元素定位</p>
<p><strong>绝对定位使元素的位置与文档流无关，因此不占据空间。</strong>这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。</p>
<p>普通流中其它元素的布局就像绝对定位的元素不存在一样</p>
<pre><code class="language-css">#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
</code></pre>
<hr>
<h5 id="3固定定位--positionfixed">3、固定定位position:fixed</h5>
<p><strong>相对于浏览器位置偏移</strong></p>
<pre><code class="language-css">p.one
{
position:fixed;
left:5px;
top:5px;
}
</code></pre>
<h5 id="4设置当前图层层级-z-index">4、设置当前图层层级 z-index</h5><br><br>
来源：https://www.cnblogs.com/one-uncle/p/15871885.html
頁:
[1]