css学习笔记
<h1 class="md-end-block md-heading"><span class="md-plain md-expand">什么是CSS</span></h1><h2 class="md-end-block md-heading"><span class="md-plain">如何学习（<span class="md-link md-pair-s">https://www.runoob.com/<span class="md-plain">）</span></span></span></h2>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">CSS是什么</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">CSS<span class="md-tab"> <span class="md-plain">怎么用</span></span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-pair-s "><strong>CSS选择器（重点+难点）</strong></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">美化网页</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">盒子模型</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">浮动</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">定位</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">网页动画（特效效果）</span></p>
</li>
</ol>
<h2 class="md-end-block md-heading"><span class="md-plain">1.1 什么是CSS</span></h2>
<p class="md-end-block md-p"><span class="md-plain">Cascading Style Sheet 层叠级联样式表</span></p>
<p class="md-end-block md-p"><span class="md-plain">css: 表现（美化网页）</span></p>
<p class="md-end-block md-p"><span class="md-plain">字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">1.2、发展史</span></h2>
<p class="md-end-block md-p"><span class="md-plain">CSS1.0</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS2.0 DIV(块) + CSS, HTML与CSS结构分离的思想，网页变得很简单， SEO</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS2.1 浮动，定位</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS3.0 圆角，阴影，动画…… 浏览器兼容性！</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">1.3、快速入门</span></h2>
<h3 class="md-end-block md-heading"><span class="md-plain">基本入门</span></h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!-- 规范，<style> 可以编写css的代码， 每一个声明，最好使用分号结尾<br> <span> <span class="cm-comment">语法：<br> <span> <span class="cm-comment">选择器 {<br> <span> <span class="cm-comment">声明1;<br> <span> <span class="cm-comment">声明2;<br> <span> <span class="cm-comment">声明3;<br> <span> <span class="cm-comment">}<br> <span><span class="cm-comment">--><br> <span> <span class="cm-comment"><!--<link rel="stylesheet" href="css/sytle.css">--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">h1 {<br> <span> <span class="cm-property">color: <span class="cm-keyword">red;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>我是标题<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">建议使用这种规范</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="F:\java\kuangshen\pictrue\image-20220529215353852.png"><img alt="image-20220529215353852" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"><span class="md-plain">css的优势：</span></p>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">内容和表现分离</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">网页结构表现统一，可以实现复用</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">样式十分的丰富</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">建议使用独立html的css文件</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">利用SEO，容易被搜索引擎收录！</span></p>
</li>
</ol>
<p class="md-end-block md-p"><span class="md-plain">1.4、CSS的3种导入方式</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!-- 内部样式--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">h1 {<br> <span> <span class="cm-property">color: <span class="cm-keyword">green;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!-- 外部样式--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"css/sytle.css"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!--优先级：就近原则--><br> <span><span class="cm-comment"><!--行内样式--><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">style=<span class="cm-string">"color: red;background: #cba4af"<span class="cm-tag cm-bracket">>我是标题<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">拓展：外部样式两种写法</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">链接式：</span></p>
</li>
</ul>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-plain">html</span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment"><!--外部样式--><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"css/sytle.css"<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">导入式：</span></p>
</li>
</ul>
<p class="md-end-block md-p"><span class="md-tab"> <span class="md-pair-s"><code>@import url("")</code><span class="md-plain">是css2.1特有的</span></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment"><!--导入式--><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tab"> <span class="cm-def">@import <span class="cm-atom">url(<span class="cm-string">"css/style.css")<br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">2.2、层次选择器</span></h2>
<p class="md-end-block md-p"><span class="md-plain">1、后代选择器：在某个元素的后面</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*后代选择器:选择body后面的所有p元素*/<br> <span><span class="cm-tag">body <span class="cm-tag">p{<br> <span> <span class="cm-property">background: <span class="cm-keyword">red;<br> <span>}</span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">2、子选择器，一代</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*子选择器：只选择body下层的p*/<br> <span><span class="cm-tag">body><span class="cm-tag">p{<br> <span><span class="cm-tab"> <span class="cm-property">background: <span class="cm-keyword">green;<br> <span>}</span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">3、相邻兄弟选择器</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*相邻兄弟选择器：只有一个，相邻（向下）,选中类选择器active下面相邻的p标签*/<br> <span><span class="cm-qualifier">.active + <span class="cm-tag">p{<br> <span><span class="cm-tab"> <span class="cm-property">background: <span class="cm-keyword">darkorange;<br> <span>}</span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">4、通用选择器</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*通用选择器,当前选中元素的向下的所有兄弟元素*/<br> <span><span class="cm-qualifier">.active~<span class="cm-tag">p{<br> <span><span class="cm-tab"> <span class="cm-property">background: <span class="cm-atom">#82b6e3;<br> <span>}</span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">2.3、结构伪类选择器</span></h2>
<p class="md-end-block md-p"><span class="md-plain">伪类：条件</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*选中ul的第一个子元素*/<br> <span><span class="cm-tag">ul <span class="cm-tag">li:<span class="cm-variable-3">first-child{<br> <span> <span class="cm-property">background: <span class="cm-atom">#cba4af;<br> <span>}<br> <span><span class="cm-tag">ul <span class="cm-tag">li:<span class="cm-variable-3">last-child{<br> <span> <span class="cm-property">background: <span class="cm-keyword">darkorange;<br> <span>}<br> <span><span class="cm-comment">/* 选中p1：定位到父元素，选择当前的第一个元素<br> <span><span class="cm-comment">选择当前p元素的父元素，选中父元素的第一个，并且是当前元素才生效。 顺序<br> <span><span class="cm-comment">*/<br> <span><span class="cm-tag">p:<span class="cm-variable-3">nth-child(<span class="cm-number">1){<br> <span> <span class="cm-property">background: <span class="cm-keyword">darkorange;<br> <span>}<br> <span><span class="cm-comment">/*选中父元素下的p元素的第二个，类型*/<br> <span><span class="cm-tag">p:<span class="cm-variable-3">nth-of-type(<span class="cm-number">2){<br> <span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">2.4、属性选择器（常用）</span></h2>
<p class="md-end-block md-p"><span class="md-plain">id + class 结合~</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>属性选择器<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-qualifier">.demo <span class="cm-tag">a{<br> <span> <span class="cm-property">float: <span class="cm-atom">left;<br> <span> <span class="cm-property">display: <span class="cm-atom">block;<br> <span> <span class="cm-property">height: <span class="cm-number">50px;<br> <span> <span class="cm-property">width: <span class="cm-number">50px;<br> <span> <span class="cm-property">border-radius: <span class="cm-number">10px;<br> <span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br> <span> <span class="cm-property">text-align: <span class="cm-atom">center;<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">none;<br> <span> <span class="cm-property">margin-left: <span class="cm-number">10px;<br> <span> <span class="cm-property">font: <span class="cm-atom">bold <span class="cm-number">20px/<span class="cm-number">50px <span class="cm-variable">Arial;<br> <span> <span class="cm-property">color: <span class="cm-keyword">red;<br> <span> }<br> <span><span><br> <span> <span class="cm-comment">/*存在id属性的元素a[]{}*/<br> <span> <span class="cm-comment">/*a{*/<br> <span> <span class="cm-comment">/*background: #cba4af;*/<br> <span> <span class="cm-comment">/*}*/<br> <span><span><br> <span> <span class="cm-comment">/*选中存在id=last属性的元素*/<br> <span> <span class="cm-comment">/*a{*/<br> <span> <span class="cm-comment">/*background: #9bd75a;*/<br> <span> <span class="cm-comment">/*}*/<br> <span><span><br> <span> <span class="cm-comment">/*属性名，属性名=属性值(正则)<br> <span><span class="cm-comment"> = 绝对等于<br> <span><span class="cm-comment"> *= 包含<br> <span><span class="cm-comment"> ^= 以什么开头<br> <span><span class="cm-comment"> $= 以什么结尾<br> <span><span class="cm-comment"> */<br> <span><span><br> <span> <span class="cm-comment">/*class 中有 links 的元素*/<br> <span> <span class="cm-comment">/*a{*/<br> <span> <span class="cm-comment">/*background: yellow;*/<br> <span> <span class="cm-comment">/*}*/<br> <span><span><br> <span> <span class="cm-comment">/*href属性以http开头的*/<br> <span> <span class="cm-comment">/*a{*/<br> <span> <span class="cm-comment">/*background: #bb8fe3;*/<br> <span> <span class="cm-comment">/*}*/<br> <span><span><br> <span> <span class="cm-comment">/*href属性以pdf结尾的*/<br> <span> <span class="cm-tag">a[<span class="cm-tag">href$=<span class="cm-tag">pdf]{<br> <span> <span class="cm-property">background: <span class="cm-keyword">coral;<br> <span> }<br> <span><span><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"demo"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"http://www.baidu.com" <span class="cm-attribute">class=<span class="cm-string">"links item first" <span class="cm-attribute">id=<span class="cm-string">"first"<span class="cm-tag cm-bracket">>1<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"http://www.gn.cn" <span class="cm-attribute">class=<span class="cm-string">"links item first" <span class="cm-attribute">target=<span class="cm-string">"_blank" <span class="cm-attribute">title=<span class="cm-string">"test"<span class="cm-tag cm-bracket">>2<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"image/123.htnl" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>3<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"image/123.png" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>4<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"image/123.jpg" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>5<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"abc" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>6<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"/a.pdf" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>7<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"/abc.pdf" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>8<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"abc.doc" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>9<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"abcd.doc" <span class="cm-attribute">class=<span class="cm-string">"links item" <span class="cm-attribute">id=<span class="cm-string">"last"<span class="cm-tag cm-bracket">>10<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h1 class="md-end-block md-heading"><span class="md-plain">3、美化网页元素</span></h1>
<h2 class="md-end-block md-heading"><span class="md-plain">3.1、为什么要美化网页</span></h2>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">有效的传递页面信息</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">美化网页，页面漂亮，才能吸引用户</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">凸显页面的主题</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">提高用户的体验</span></p>
</li>
</ol>
<p class="md-end-block md-p"><span class="md-plain">span标签：重点要突出的字用span标签套起来</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>span标签<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-builtin">#id1{<br> <span> <span class="cm-property">font-size: <span class="cm-number">50px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span>欢迎学习<span class="cm-tag cm-bracket"><<span class="cm-tag">span <span class="cm-attribute">id=<span class="cm-string">"id1"<span class="cm-tag cm-bracket">>Java<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">3.2、字体样式</span></h2>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag">body{<br> <span> <span class="cm-property">font-family: <span class="cm-string">"Arial Black", 楷体;<br> <span> <span class="cm-property">color: <span class="cm-keyword">chocolate;<br> <span>}<br> <span><span class="cm-tag">h1{<br> <span> <span class="cm-property">font-size: <span class="cm-number">50px;<br> <span>}<br> <span><span class="cm-qualifier">.p1{<br> <span> <span class="cm-property">font-weight: <span class="cm-atom">bolder;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">3.3、文本样式</span></h2>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">颜色：color rgb rgba</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">文本对齐的方式：text-align=center</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">首行缩进：text-indent:2em;</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">行高：line-height：单行文字上下居中！line-height=height</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">装饰：text-decoration</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">文本图片水平对齐：vertical-align：middle</span></p>
</li>
</ol>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>文本样式<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-comment">/*颜色：<br> <span><span class="cm-comment"> 单词<br> <span><span class="cm-comment"> RGB:0~F<br> <span><span class="cm-comment"> RGBA<br> <span><span class="cm-comment"> text-align：居中<br> <span><span class="cm-comment"> */<br> <span> <span class="cm-tag">h1{<br> <span> <span class="cm-property">color: <span class="cm-atom">rgba(<span class="cm-number">0,<span class="cm-number">255,<span class="cm-number">255,<span class="cm-number">0.9);<br> <span> <span class="cm-property">text-align: <span class="cm-atom">center;<br> <span> }<br> <span> <span class="cm-comment">/*text-indent:2em; 段落首行缩进*/<br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-of-type(<span class="cm-number">3){<br> <span> <span class="cm-property">text-indent: <span class="cm-number">2em;<br> <span> }<br> <span> <span class="cm-comment">/*行高和块的高度一致就可以实现上线居中。*/<br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-of-type(<span class="cm-number">4){<br> <span> <span class="cm-property">background: <span class="cm-atom">#cba4af;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">line-height: <span class="cm-number">100px;<br> <span> }<br> <span> <span class="cm-comment">/*上划线*/<br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-of-type(<span class="cm-number">5){<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">underline;<br> <span> }<br> <span> <span class="cm-comment">/*中划线*/<br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-of-type(<span class="cm-number">6){<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">line-through;<br> <span> }<br> <span> <span class="cm-comment">/*下划线*/<br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-of-type(<span class="cm-number">7){<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">overline;<br> <span> }<br> <span> <span class="cm-comment">/*两个行内元素对齐方式*/<br> <span> <span class="cm-builtin">#img1,<span class="cm-builtin">#span1{<br> <span> <span class="cm-property">vertical-align: <span class="cm-atom">middle;<br> <span> }<br> <span> <span class="cm-comment">/*a标签去下划线*/<br> <span> <span class="cm-tag">a:<span class="cm-variable-3">first-child{<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">none;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">""<span class="cm-tag cm-bracket">>a标签去下划线<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>面朝大海,春暖花开<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">><span class="cm-error">&nbsp<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">h2<span class="cm-tag cm-bracket">>海子<span class="cm-tag cm-bracket"></<span class="cm-tag">h2<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">><span class="cm-error">&nbsp<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>从明天起, 做一个幸福的人<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>喂马, 劈柴, 周游世界<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>从明天起, 关心粮食和蔬菜<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>我有一所房子, 面朝大海, 春暖花开<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">br<span class="cm-tag cm-bracket">/><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>从明天起, 和每一个亲人通信<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>告诉他们我的幸福<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>那幸福的闪电告诉我的<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>我将告诉每一个人<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">br<span class="cm-tag cm-bracket">/><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>给每一条河每一座山取一个温暖的名字<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>陌生人, 我也为你祝福<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>愿你有一个灿烂的前程<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>愿你有情人终成眷属<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>愿你在尘世获得幸福<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>我只愿面朝大海, 春暖花开<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">hr<span class="cm-tag cm-bracket">/><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> The most luxurious thing in my life is to meet you on the way, and then help each other, smell the fragrance of flowers together. In my lifetime, I will only tell you the warmth, but not the sorrow. I will meet you and accompany you in peace and warmth.<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"picture/img.png" <span class="cm-attribute">alt=<span class="cm-string">"" <span class="cm-attribute">id=<span class="cm-string">"img1"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">span <span class="cm-attribute">id=<span class="cm-string">"span1"<span class="cm-tag cm-bracket">><br> <span> 问世间情为何物，直教人生死相许。从古至今，中国的文人们也一直奉行此道，对美好的爱情歌以咏志，对真挚的情感动以心扉，对远方的恋人辅以相思。今天小编整理了中国古代最美的十首情诗，现在读来仍旧朗朗上口。<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">3.4、阴影</span></h2>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="F:\java\kuangshen\pictrue\image-20220603090141918.png"><img alt="image-20220603090141918" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"> </p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-builtin">#a1{<br> <span> <span class="cm-property">text-shadow: <span class="cm-atom">#3cc7f5 <span class="cm-number">3px <span class="cm-number">3px <span class="cm-number">1px;<br> <span>}</span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">3.5、超链接伪类</span></h2>
<p class="md-end-block md-p"><span class="md-plain">正常情况下, a,a:hover{}</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*默认的颜色*/<br> <span><span class="cm-tag">a{<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">none;<br> <span> <span class="cm-property">color: <span class="cm-atom">#000000;<br> <span>}<br> <span><span class="cm-comment">/*鼠标悬浮的颜色*/<br> <span><span class="cm-tag">a:<span class="cm-variable-3">hover{<br> <span> <span class="cm-property">color: <span class="cm-keyword">orange;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">3.6、列表</span></h2>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*list-style:<br> <span><span class="cm-comment"> none:去掉原点<br> <span><span class="cm-comment"> circle:空心圆<br> <span><span class="cm-comment"> decimal:数字<br> <span><span class="cm-comment"> square:正方形<br> <span><span class="cm-comment"> */<br> <span><span class="cm-tag">ul <span class="cm-tag">li{<br> <span> <span class="cm-property">height: <span class="cm-number">30px;<br> <span> <span class="cm-property">list-style: <span class="cm-atom">none;<br> <span> <span class="cm-property">text-indent: <span class="cm-number">1em;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">3.7、背景</span></h2>
<p class="md-end-block md-p"><span class="md-plain">背景颜色</span></p>
<p class="md-end-block md-p"><span class="md-plain">背景图片</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">3.8、渐变</span></h2>
<p class="md-end-block md-p"><span class="md-link md-pair-s">https://www.grabient.com/</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag">background-color: <span class="cm-builtin">#4158D0;<br> <span><span class="cm-tag">background-image: <span class="cm-variable-3">linear-gradient(<span class="cm-number">255deg, <span class="cm-builtin">#4158D0 <span class="cm-number">0%, <span class="cm-builtin">#C850C0 <span class="cm-number">46%, <span class="cm-builtin">#FFCC70 <span class="cm-number">100%);</span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h1 class="md-end-block md-heading"><span class="md-plain">4、盒子模型</span></h1>
<p class="md-end-block md-p"><span class="md-plain">4.1、什么是盒子模型</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="F:\java\kuangshen\pictrue\image-20220605154228024.png"><img alt="image-20220605154228024" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"><span class="md-plain">margin：外边距</span></p>
<p class="md-end-block md-p"><span class="md-plain">padding：内边距</span></p>
<p class="md-end-block md-p"><span class="md-plain">border：边框</span></p>
<p class="md-end-block md-p"><span class="md-plain">margin + border + padding + 内容宽度</span></p>
<p class="md-end-block md-p"><span class="md-plain">4.2、边框</span></p>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">边框的粗细</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">边框的样式</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">边框的颜色</span></p>
</li>
</ol>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*border: 粗细 样式 颜色*/<br> <span><span class="cm-tag">form <span class="cm-tag">div:<span class="cm-variable-3">nth-of-type(<span class="cm-number">1) <span class="cm-tag">input{<br> <span> <span class="cm-property">border: <span class="cm-number">3px <span class="cm-atom">solid <span class="cm-keyword">black;<br> <span>}<br> <span><span class="cm-tag">form <span class="cm-tag">div:<span class="cm-variable-3">nth-of-type(<span class="cm-number">2) <span class="cm-tag">input{<br> <span> <span class="cm-property">border: <span class="cm-number">3px <span class="cm-atom">dashed <span class="cm-atom">#b24f62;<br> <span>}<br> <span><span class="cm-tag">form <span class="cm-tag">div:<span class="cm-variable-3">nth-of-type(<span class="cm-number">3) <span class="cm-tag">input{<br> <span> <span class="cm-property">border: <span class="cm-number">3px <span class="cm-atom">solid <span class="cm-atom">#efcb16;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">4.3、内外边距</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>盒子模型<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-comment">/*body 总有一个默认的外边距 margin: 0;*/<br> <span> <span class="cm-comment">/*h1,ul,li,a,body{*/<br> <span> <span class="cm-comment">/* margin: 0;*/<br> <span> <span class="cm-comment">/* padding: 0;*/<br> <span> <span class="cm-comment">/* text-decoration: none;*/<br> <span> <span class="cm-comment">/*}*/<br> <span> <span class="cm-comment">/*border: 粗细 样式 颜色*/<br> <span><span><br> <span> <span class="cm-comment">/*margin: 0 auto; 居中*/<br> <span> <span class="cm-builtin">#box{<br> <span> <span class="cm-property">width: <span class="cm-number">300px;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-keyword">red;<br> <span> <span class="cm-property">margin: <span class="cm-number">0 <span class="cm-atom">auto;<br> <span> <span class="cm-property">padding: <span class="cm-number">0;<br> <span> }<br> <span> <span class="cm-tag">h2{<br> <span> <span class="cm-property">font-size: <span class="cm-number">16px;<br> <span> <span class="cm-property">background-color: <span class="cm-atom">#3cbda6;<br> <span> <span class="cm-property">line-height: <span class="cm-number">30px;<br> <span> <span class="cm-property">color: <span class="cm-keyword">white;<br> <span> <span class="cm-property">text-align: <span class="cm-atom">center;<br> <span> <span class="cm-property">margin: <span class="cm-number">0 <span class="cm-atom">auto;<br> <span> <span class="cm-property">padding:<span class="cm-number">10px;<br> <span> }<br> <span> <span class="cm-tag">form{<br> <span> <span class="cm-property">background: <span class="cm-atom">#3cbda6;<br> <span> <span class="cm-property">padding-bottom: <span class="cm-number">10px;<br> <span> }<br> <span> <span class="cm-builtin">#div1 <span class="cm-tag">input{<br> <span> <span class="cm-property">border: <span class="cm-number">3px <span class="cm-atom">solid <span class="cm-keyword">black;<br> <span> <span class="cm-property">margin-bottom: <span class="cm-number">5px;<br> <span> }<br> <span> <span class="cm-builtin">#div2 <span class="cm-tag">input{<br> <span> <span class="cm-property">border: <span class="cm-number">2px <span class="cm-atom">dashed <span class="cm-atom">#b24f62;<br> <span> <span class="cm-property">margin-bottom: <span class="cm-number">5px;<br> <span> }<br> <span> <span class="cm-builtin">#div3 <span class="cm-tag">input{<br> <span> <span class="cm-property">border: <span class="cm-number">3px <span class="cm-atom">solid <span class="cm-atom">#efcb16;<br> <span> }<br> <span> <span class="cm-builtin">#div2{<br> <span> <span class="cm-property">text-indent: <span class="cm-number">1em;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"box"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">h2<span class="cm-tag cm-bracket">>会员登录<span class="cm-tag cm-bracket"></<span class="cm-tag">h2<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">form <span class="cm-attribute">action=<span class="cm-string">"#"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">label<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"div1"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">span<span class="cm-tag cm-bracket">>用户名：<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">input <span class="cm-attribute">type=<span class="cm-string">"text"<span class="cm-tag cm-bracket">/><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">label<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">label<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"div2"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">span<span class="cm-tag cm-bracket">>密码：<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">input <span class="cm-attribute">type=<span class="cm-string">"password"<span class="cm-tag cm-bracket">/><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">label<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">label<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"div3"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">span<span class="cm-tag cm-bracket">>验证码：<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">input <span class="cm-attribute">type=<span class="cm-string">"text"<span class="cm-tag cm-bracket">/><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">label<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">form<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">盒子的计算方式：你这个元素到底多大？</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="F:\java\kuangshen\pictrue\image-20220607234706146.png"><img alt="image-20220607234706146" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"><span class="md-plain">margin + border + padding + 内容宽度</span></p>
<p class="md-end-block md-p"><span class="md-plain">4.4、圆角边框</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-builtin">#div2{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">border: <span class="cm-number">10px <span class="cm-atom">solid <span class="cm-atom">#84ff00;<br> <span> <span class="cm-property">border-radius: <span class="cm-number">100px <span class="cm-number">0px <span class="cm-number">0px <span class="cm-number">0px;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">4.5、盒子阴影</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!-- margin: 0 auto;<br> <span> <span class="cm-comment">要求：块元素，块元素有固定的宽度<br> <span><span class="cm-comment">--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">div:<span class="cm-variable-3">first-child{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">border: <span class="cm-number">10px <span class="cm-atom">solid <span class="cm-keyword">red;<br> <span> <span class="cm-property">box-shadow: <span class="cm-number">10px <span class="cm-number">10px <span class="cm-number">100px <span class="cm-keyword">yellow;<br> <span> <span class="cm-property">margin-bottom: <span class="cm-number">100px;<br> <span> }<br> <span> <span class="cm-tag">div:<span class="cm-variable-3">nth-child(<span class="cm-number">2) <span class="cm-tag">img{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">border: <span class="cm-number">10px <span class="cm-atom">solid <span class="cm-keyword">red;<br> <span> <span class="cm-property">border-radius: <span class="cm-number">100px;<br> <span> <span class="cm-property">box-shadow: <span class="cm-number">10px <span class="cm-number">10px <span class="cm-number">100px <span class="cm-keyword">yellow;<br> <span><span><br> <span> }<br> <span> <span class="cm-tag">div:<span class="cm-variable-3">nth-child(<span class="cm-number">2){<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">margin: <span class="cm-number">0 <span class="cm-atom">auto;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"../../pictrue/OIP-C.jpg" <span class="cm-attribute">alt=<span class="cm-string">"图片"<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h1 class="md-end-block md-heading"><span class="md-plain">5.浮动</span></h1>
<h2 class="md-end-block md-heading"><span class="md-plain">5.1、标准文档流</span></h2>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="F:\java\kuangshen\pictrue\image-20220615200547485.png"><img alt="image-20220615200547485" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"><span class="md-plain">块级元素：独占一行</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>h1~h6p div 列表……</span></pre>
<p class="md-end-block md-p"><span class="md-plain">行内元素：不独占一行</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>span a img strong……</span></pre>
<p class="md-end-block md-p"><span class="md-plain">行内元素可以被包含在块级元素中，反之，则不可以。</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">5.2、display</span></h2>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><<span class="cm-keyword">!-- <span class="cm-tag">block 块元素<br> <span> <span class="cm-tag">inline 行内元素<br> <span> <span class="cm-tag">inline-block 是块元素，但也可以内联，在一行<br> <span> <span class="cm-tag">none 不显示<br> <span> --><br> <span> <<span class="cm-tag">style><br> <span> <span class="cm-tag">div{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-keyword">red;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> }<br> <span> <span class="cm-tag">span{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-keyword">red;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> }<br> <span> </<span class="cm-tag">style></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">这个也是一种实现行内元素排列的方式，但是我们很多情况都是用 float。</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">5.3、float</span></h2>
<p class="md-end-block md-p"><span class="md-plain">1、左右浮动 float</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><<span class="cm-tag">style><br> <span> <span class="cm-builtin">#father{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">#000 <span class="cm-atom">solid;<br> <span> }<br> <span> <span class="cm-qualifier">.layer01{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">#f00 <span class="cm-atom">dashed;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> <span class="cm-property">width: <span class="cm-number">50px;<br> <span> <span class="cm-property">height: <span class="cm-number">50px;<br> <span> <span class="cm-property">background: <span class="cm-atom">#f00;<br> <span> <span class="cm-property">float: <span class="cm-atom">right;<br> <span> <span class="cm-property">clear: <span class="cm-atom">both;<br> <span> }<br> <span> <span class="cm-qualifier">.layer02{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">#00f <span class="cm-atom">dashed;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">background: <span class="cm-atom">#00f;<br> <span> <span class="cm-property">float: <span class="cm-atom">right;<br> <span> <span class="cm-property">clear: <span class="cm-atom">both;<br> <span> }<br> <span> <span class="cm-qualifier">.layer03{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">#060 <span class="cm-atom">dashed;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> <span class="cm-property">width: <span class="cm-number">150px;<br> <span> <span class="cm-property">height: <span class="cm-number">150px;<br> <span> <span class="cm-property">background: <span class="cm-atom">#060;<br> <span> <span class="cm-property">float: <span class="cm-atom">right;<br> <span> <span class="cm-property">clear: <span class="cm-atom">both;<br> <span> }<br> <span> <span class="cm-qualifier">.layer04{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">#666 <span class="cm-atom">dashed;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> <span class="cm-property">font-size: <span class="cm-number">12px;<br> <span> <span class="cm-property">line-height: <span class="cm-number">23px;<br> <span> <span class="cm-property">float: <span class="cm-atom">right;<br> <span> <span class="cm-property">clear: <span class="cm-atom">both;<br> <span> }<br> <span> </<span class="cm-tag">style></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">5.4、父级边框塌陷问题</span></h2>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>clear: right; 右侧不允许有浮动元素<br> <span>clear: left; 左侧不允许有浮动元素<br> <span>clear: both; 两侧不允许有浮动元素<br> <span>clear: none;</span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">解决方案：</span></p>
<p class="md-end-block md-p"><span class="md-plain">1、增加父级元素的高度。</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-builtin">#father{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">#000 <span class="cm-atom">solid;<br> <span> <span class="cm-property">height: <span class="cm-number">800px;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">2、增加一个空的div标签，清除浮动</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-qualifier">.clear{<br> <span> <span class="cm-property">clear: <span class="cm-atom">both;<br> <span> <span class="cm-property">margin: <span class="cm-number">0;<br> <span> <span class="cm-property">padding: <span class="cm-number">0;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">3、overflow</span></p>
<p class="md-end-block md-p"><span class="md-plain">在父级元素中增加一个 overflow: hidden;</span></p>
<p class="md-end-block md-p"><span class="md-plain">4、父类添加一个伪类</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-builtin">#father:<span class="cm-variable-3">after{<br> <span> <span class="cm-property">content: <span class="cm-string">'';<br> <span> <span class="cm-property">display: <span class="cm-atom">block;<br> <span> <span class="cm-property">clear: <span class="cm-atom">both;<br> <span> }</span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">小结：</span></p>
<ol class="ol-list">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">浮动元素后面增加空div</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">简单，代码中尽量避免空div</span></p>
</li>
</ul>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">设置父元素的高度</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">简单，元素假设有了固定的高度，就会被限制</span></p>
</li>
</ul>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">overflow</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">简单，下拉的一些场景避免使用</span></p>
</li>
</ul>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">父类添加一个伪类:after（推荐）</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">写法相对复杂一点，但是没有副作用，推荐使用</span></p>
</li>
</ul>
</li>
</ol>
<p class="md-end-block md-p"><span class="md-plain">5.5、对比</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">display</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">方向不可以控制</span></p>
</li>
</ul>
</li>
</ul>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">float</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">浮动起来会脱离文档流，所以要解决父级边框塌陷的问题。</span></p>
</li>
</ul>
</li>
</ul>
<h1 class="md-end-block md-heading"><span class="md-plain">6、定位</span></h1>
<h2 class="md-end-block md-heading"><span class="md-plain">6.1、相对定位</span></h2>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">body{<br> <span> <span class="cm-property">padding: <span class="cm-number">20px;<br> <span> }<br> <span> <span class="cm-tag">div{<br> <span> <span class="cm-property">margin: <span class="cm-number">10px;<br> <span> <span class="cm-property">padding: <span class="cm-number">5px;<br> <span> <span class="cm-property">font-size: <span class="cm-number">12px;<br> <span> <span class="cm-property">line-height: <span class="cm-number">25px;<br> <span> }<br> <span> <span class="cm-builtin">#father{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-atom">#666;<br> <span> <span class="cm-property">background: <span class="cm-atom">#666;<br> <span> <span class="cm-property">padding: <span class="cm-number">0;<br> <span> }<br> <span> <span class="cm-builtin">#first{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#cc4c4c;<br> <span> <span class="cm-property">background: <span class="cm-atom">#cc4c4c;<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span> <span class="cm-property">top: <span class="cm-number">-20px;<br> <span> <span class="cm-property">left: <span class="cm-number">20px;<br> <span><span><br> <span> }<br> <span> <span class="cm-builtin">#second{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#0d2d75;<br> <span> <span class="cm-property">background: <span class="cm-atom">#0d2d75;<br> <span><span><br> <span> }<br> <span> <span class="cm-builtin">#third{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#b885e8;<br> <span> <span class="cm-property">background: <span class="cm-atom">#b885e8;<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span> <span class="cm-property">bottom: <span class="cm-number">-10px;<br> <span> <span class="cm-property">right: <span class="cm-number">20px;<br> <span><span><br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"father"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"first"<span class="cm-tag cm-bracket">>第一个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"second"<span class="cm-tag cm-bracket">>第二个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"third"<span class="cm-tag cm-bracket">>第三个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">相对定位：position:relative;</span></p>
<p class="md-end-block md-p"><span class="md-plain">相对于原来的位置，进行指定的偏移，相对定位，它仍然在标准文档流中，原来的位置会被保留。</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag">top: <span class="cm-number">-20px;<br> <span><span class="cm-tag">left: <span class="cm-number">20px<br> <span><span class="cm-tag">bottom: <span class="cm-number">-10px;<br> <span><span class="cm-tag">right: <span class="cm-number">20px;</span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">6.2、绝对定位</span></h2>
<p class="md-end-block md-p"><span class="md-plain">定位：基于xxx定位，上下左右~</span></p>
<p class="md-end-block md-p"><span class="md-plain">1、没有父级元素定位的前提下，相对于浏览器定位</span></p>
<p class="md-end-block md-p"><span class="md-plain">2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移~</span></p>
<p class="md-end-block md-p"><span class="md-plain">3、在父级元素范围内移动</span></p>
<p class="md-end-block md-p"><span class="md-plain">相对于父级或浏览器的位置，进行指定的偏移，绝对定位，不在标准文档流中，原来的位置不会被保留。</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">div{<br> <span> <span class="cm-property">margin: <span class="cm-number">10px;<br> <span> <span class="cm-property">padding: <span class="cm-number">5px;<br> <span> <span class="cm-property">font-size: <span class="cm-number">12px;<br> <span> <span class="cm-property">line-height: <span class="cm-number">25px;<br> <span> }<br> <span> <span class="cm-builtin">#father{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-atom">#666;<br> <span> <span class="cm-property">background: <span class="cm-atom">#666;<br> <span> <span class="cm-property">padding: <span class="cm-number">0;<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span> }<br> <span> <span class="cm-builtin">#first{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#cc4c4c;<br> <span> <span class="cm-property">background: <span class="cm-atom">#cc4c4c;<br> <span><span><br> <span> }<br> <span> <span class="cm-builtin">#second{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#0d2d75;<br> <span> <span class="cm-property">background: <span class="cm-atom">#0d2d75;<br> <span> <span class="cm-property">position: <span class="cm-atom">absolute;<br> <span> <span class="cm-property">right: <span class="cm-number">30px;<br> <span> <span class="cm-property">top: <span class="cm-number">-10px;<br> <span> }<br> <span> <span class="cm-builtin">#third{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#b885e8;<br> <span> <span class="cm-property">background: <span class="cm-atom">#b885e8;<br> <span><span><br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"father"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"first"<span class="cm-tag cm-bracket">>第一个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"second"<span class="cm-tag cm-bracket">>第二个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"third"<span class="cm-tag cm-bracket">>第三个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">6.3、固定定位</span></h2>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">body{<br> <span> <span class="cm-property">height: <span class="cm-number">1000px;<br> <span> }<br> <span> <span class="cm-tag">div:<span class="cm-variable-3">nth-of-type(<span class="cm-number">1){<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">background: <span class="cm-keyword">red;<br> <span> <span class="cm-property">position: <span class="cm-atom">absolute;<span class="cm-comment">/* 绝对定位：相对于浏览器 */<br> <span> <span class="cm-property">right: <span class="cm-number">0;<br> <span> <span class="cm-property">bottom: <span class="cm-number">0;<br> <span> }<br> <span> <span class="cm-tag">div:<span class="cm-variable-3">nth-of-type(<span class="cm-number">2){<br> <span> <span class="cm-property">width: <span class="cm-number">50px;<br> <span> <span class="cm-property">height: <span class="cm-number">50px;<br> <span> <span class="cm-property">background: <span class="cm-keyword">yellow;<br> <span> <span class="cm-property">position: <span class="cm-atom">fixed;<span class="cm-comment">/* fixed,固定定位 */<br> <span> <span class="cm-property">right: <span class="cm-number">0;<br> <span> <span class="cm-property">bottom: <span class="cm-number">0;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">>div1<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">>div2<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">6.4、z-index</span></h2>
<p class="md-end-block md-p"><span class="md-plain">图层~</span></p>
<p class="md-end-block md-p"><span class="md-plain">z-index: 默认是0，最高无限制~</span></p>
<p class="md-end-block md-p"><span class="md-plain">opacity: 0.5;/<span class="md-pair-s "><em>背景透明度</em><span class="md-plain">/</span></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"css.css"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"content"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">ul<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"images/img.png" <span class="cm-attribute">alt=<span class="cm-string">"图片"<span class="cm-tag cm-bracket">></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li <span class="cm-attribute">class=<span class="cm-string">"tipText"<span class="cm-tag cm-bracket">>学习Java<span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li <span class="cm-attribute">class=<span class="cm-string">"tipBg"<span class="cm-tag cm-bracket">></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">>时间：2022/6/15<span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">>地点：地球一号基地<span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">ul<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">><br> <span><span><br> <span>css部分：<br> <span>#content{<br> <span> width: 672px;<br> <span> padding: 0;<br> <span> margin: 0;<br> <span> overflow: hidden;<br> <span> /*font:字体样式 粗细 字体大小/行间距 字体体系；*/<br> <span> /*font: italic bold 12px/20px sans-serif;*/<br> <span> font: normal bold 18px/20px sans-serif;<br> <span> line-height: 25px;<br> <span> border: 1px #000 solid;<br> <span>}<br> <span>ul,li{<br> <span> padding: 0;<br> <span> margin: 0;<br> <span> list-style: none;<br> <span>}<br> <span>/*父元素相对定位*/<br> <span>#content{<br> <span> position: relative;<br> <span>}<br> <span>.tipText, .tipBg{<br> <span> position: absolute;<br> <span> width: 672px;<br> <span> height: 25px;<br> <span> top: 352px;<br> <span>}<br> <span>.tipText{<br> <span> color: white;<br> <span> /*z-index: 999;*//*图层*/<br> <span>}<br> <span>.tipBg{<br> <span> background: #000;<br> <span> opacity: 0.5;/*背景透明度*/<br> <span> filter: alpha(opacity=50);/*旧版本浏览器兼容，已上面的功能一样*/<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p md-focus"><span class="md-block-like"><span class="md-blockmeta"># <span class="md-header-span"><span class="md-plain md-expand">7、动画</span></span></span></span></p><br><br>
来源：https://www.cnblogs.com/biyulin-bky/p/16325128.html
頁:
[1]