CSS入门学习
<blockquote><p>前端三剑客</p>
<ul>
<li>html：html为前端页面的主体。可以理解为一间什么东西都没有的房间</li>
<li>css：css为前端页面的样式。可以理解成房间里的地砖，灯，床</li>
<li>javascript：js为前端页面的脚本。可以理解成房间开灯，关门。</li>
</ul>
</blockquote>
<h2 id="header1">学习内容</h2>
<ol>
<li>
<p>CSS是什么</p>
</li>
<li>
<p>CSS怎么用（快速入门）</p>
</li>
<li>
<p>CSS选择器（重点+难点）</p>
</li>
<li>
<p>美化页面（文字，阴影，超链接，列表，渐变….)</p>
</li>
<li>
<p>盒子模型</p>
</li>
<li>
<p>浮动</p>
</li>
<li>
<p>定位</p>
</li>
<li>
<p>网页动画（特效效果）</p>
</li>
</ol>
<h1 id="header6">1、CSS</h1>
<h2 id="header3">1.1、什么是CSS</h2>
<ul>
<li>CSS：层叠样式表（英文全称：Cascading Style Sheets），用来修饰网页样式。</li>
<li>作用：美化网页，装饰网页样式。</li>
</ul>
<h2 id="header4">1.2、 发展史</h2>
<ul>
<li>CSS 1.0</li>
<li>CSS 2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页简单，SEO</li>
<li>CSS 2.1 浮动，定位</li>
<li>CSS 3.0 圆角，阴影，动画…浏览器兼容性~</li>
</ul>
<h2 id="header5">1.3、CSS的几种导入方式</h2>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L6"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L7"><code class="lang-html"><span class="com"><!--内部样式--></span></code></li>
<li class="L8"><code class="lang-html"><span class="tag"><style></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> h1<span class="pun">{</span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> color<span class="pun">:<span class="pln"> yellow<span class="pun">;</span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"></style></span></code></li>
<li class="L3"><code class="lang-html"><span class="com"><!--外部样式--></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"><link<span class="pln"> <span class="atn">rel<span class="pun">=<span class="atv">"stylesheet"<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"css/style.css"<span class="tag">></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="com"><!--优先级：遵循就近原则，离代码越近，优先级越高--></span></code></li>
<li class="L6"><code class="lang-html"><span class="com"><!--内行样式：在标签元素中编写一个style属性，编写样式即可--></span></code></li>
<li class="L7"><code class="lang-html"><span class="tag"><h1<span class="pln"> <span class="atn">style<span class="pun">=<span class="atv">"<span class="pln">color<span class="pun">:<span class="pln"> <span class="com">#c134b5<span class="atv">"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"first"<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"test"<span class="tag">><span class="pln">第一个标题<span class="tag"></h1></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L9"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<h1 id="header11">2、 选择器</h1>
<blockquote>
<p>作用： 选择页面上的某一个或则某一类元素</p>
</blockquote>
<h2 id="header7">2.1、 基本选择器</h2>
<p>1.标签选择器： 选择一类标签。例如：h1{}</p>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="com">/*标签选择器会选择页面上所有的对应标签*/</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> h1<span class="pun">{</span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> color<span class="pun">:<span class="pln"> lightblue<span class="pun">;</span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> p<span class="pun">{</span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> color<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L6"><code class="lang-html"></code></li>
<li class="L7"><code class="lang-html"><span class="tag"><h1><span class="pln">2.标签选择器<span class="tag"></h1></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="tag"><p><span class="pln">这是一段文字<span class="tag"></p></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L0"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<p>2.类选择器 class： 选择所有class属性一致的标签。.类名{}</p>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="com">/*类选择器格式：.class的名称{}</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="com"> 好处：不同的标签，可以用一个类。*/</span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">text<span class="pun">{</span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> color<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L3"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L4"><code class="lang-html"></code></li>
<li class="L5"><code class="lang-html"><span class="tag"><h1><span class="pln">3.类选择器<span class="tag"></h1></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="tag"><p<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"text"<span class="tag">><span class="pln">这是一段文字<span class="tag"></p></span></span></span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="tag"><span<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"text"<span class="tag">><span class="pln">这是一段文字<span class="tag"></span></span></span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L9"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<p>3.ID选择器： 全局唯一！ #id名{}</p>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="com">/*id选择器 : id必须保证全局唯一</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="com"> 优先级： id选择器 > class选择器 > 标签选择器*/</span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="com">#title{</span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">text<span class="pun">{</span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> color<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L6"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L7"><code class="lang-html"></code></li>
<li class="L8"><code class="lang-html"><span class="tag"><h1><span class="pln">4.id选择器<span class="tag"></h1></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="tag"><p<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"text"<span class="tag">><span class="pln">这是一段文字<span class="tag"></p></span></span></span></span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="tag"><span<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"text"<span class="tag">><span class="pln">这是一段文字<span class="tag"></span></span></span></span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<h2 id="header8">2.2、 层次选择器</h2>
<ol>
<li>
<p>后代选择器： 在某个元素的后面</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">/*后代选择器*/</span></code></li>
<li class="L1"><code class="lang-css"><span class="pln">body p<span class="pun">{</span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> background<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pun">}</span></code></li>
</ol></li>
<li>
<p>子选择器 下一代</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">/*子选择器*/</span></code></li>
<li class="L1"><code class="lang-css"><span class="pln">body <span class="pun">><span class="pln"> p<span class="pun">{</span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> background<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pun">}</span></code></li>
</ol></li>
<li>
<p>相邻，兄弟选择器（对下不对上）</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">/*兄弟选择器： 只有一个，向下*/</span></code></li>
<li class="L1"><code class="lang-css"><span class="pun">.<span class="pln">active <span class="pun">+<span class="pln">p<span class="pun">{</span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> background<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pun">}</span></code></li>
</ol></li>
<li>
<p>通用选择器</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">/*通用兄弟选择器， 当前选中元素的向下所有的兄弟元素*/</span></code></li>
<li class="L1"><code class="lang-css"><span class="pun">.<span class="pln">active<span class="pun">~<span class="pln">p<span class="pun">{</span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> background<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pun">}</span></code></li>
</ol></li>
</ol><ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="com">/*后代选择器*/</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> body p<span class="pun">{</span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="com">/*子选择器*/</span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> p <span class="pun">><span class="pln"> span<span class="pun">{</span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightblue<span class="pun">;</span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="com">/*兄弟选择器： 只有一个，向下*/</span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">active <span class="pun">+<span class="pln"> p<span class="pun">{</span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightgreen<span class="pun">;</span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="com">/*通用兄弟选择器， 当前选中元素的向下所有的兄弟元素*/</span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">active<span class="pun">~<span class="pln">li<span class="pun">{</span></span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L5"><code class="lang-html"></code></li>
<li class="L6"><code class="lang-html"><span class="tag"><h1<span class="pln"> <span class="tag">><span class="pln">2.标签选择器<span class="tag"></h1></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="tag"><p<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"active"<span class="tag">><span class="pln">这是一段文字</span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="tag"><span><span class="pln">这是一段描述<span class="tag"></span></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="tag"></p></span></code></li>
<li class="L0"><code class="lang-html"><span class="tag"><p><span class="pln">这是段落2<span class="tag"></p></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><ul></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="tag"><li><span class="pln">1-1<span class="tag"></li></span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><li<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"active"<span class="tag">><span class="pln">1-2<span class="tag"></li></span></span></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><li><span class="pln">1-3<span class="tag"></li></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"></ul></span></code></li>
<li class="L6"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L7"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<h2 id="header9">2.3、 结构伪类选择器</h2>
<p>标签：条件</p>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="com">/*ul的第一个子元素*/</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> ul li<span class="pun">:<span class="pln">first<span class="pun">-<span class="pln">child<span class="pun">{</span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightgreen<span class="pun">;</span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="com">/*ul的最后一个子元素*/</span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> ul li<span class="pun">:<span class="kwd">last<span class="pun">-<span class="pln">child<span class="pun">{</span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="com">/*选中p1: 定位到父元素，选择当前的第一个元素</span></span></code></li>
<li class="L5"><code class="lang-html"><span class="com"> 选择当前p元素的父级元素，选中父级元素的第一个</span></code></li>
<li class="L6"><code class="lang-html"><span class="com"> 并且是当前元素才生效！</span></code></li>
<li class="L7"><code class="lang-html"><span class="com"> */</span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> p<span class="pun">:<span class="pln">nth<span class="pun">-<span class="pln">child<span class="pun">(<span class="lit">2<span class="pun">){</span></span></span></span></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightblue<span class="pun">;</span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="com">/*选中父元素下的p元素的第二个，类型 */</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> p<span class="pun">:<span class="pln">nth<span class="pun">-<span class="pln">of<span class="pun">-<span class="pln">type<span class="pun">(<span class="lit">2<span class="pun">){</span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightgoldenrodyellow<span class="pun">;</span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="com">/*鼠标在上面的样式*/</span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> a<span class="pun">:<span class="pln">hover<span class="pun">{</span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> color<span class="pun">:<span class="pln"> orange<span class="pun">;</span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L2"><code class="lang-html"></code></li>
<li class="L3"><code class="lang-html"><span class="tag"><h1><span class="pln">6.伪类选择器<span class="tag"></h1></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"><p><span class="pln">pp1<span class="tag"></p></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"><p><span class="pln">pp2<span class="tag"></p></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="tag"><p><span class="pln">pp3<span class="tag"></p></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="tag"><ul></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="tag"><li><span class="pln">1-1<span class="tag"></li></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="tag"><li><span class="pln">1-2<span class="tag"></li></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="tag"><li><span class="pln">1-3<span class="tag"></li></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"></ul></span></code></li>
<li class="L2"><code class="lang-html"></code></li>
<li class="L3"><code class="lang-html"><span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"#"<span class="tag">><span class="pln">超链接。。。<span class="tag"></a></span></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<h2 id="header10">2.4、属性选择器</h2>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">demo a<span class="pun">{</span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> display<span class="pun">:<span class="pln"> <span class="kwd">inline<span class="pun">-<span class="pln">block<span class="pun">;</span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> height<span class="pun">:<span class="pln"> <span class="lit">50px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> width<span class="pun">:<span class="pln"> <span class="lit">50px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> border<span class="pun">-<span class="pln">radius<span class="pun">:<span class="pln"> <span class="lit">10px<span class="pun">;</span></span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> <span class="com">#67e4ff;</span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> text<span class="pun">-<span class="pln">align<span class="pun">:<span class="pln"> center<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> color<span class="pun">:<span class="pln"> <span class="com">#ffffff;</span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> text<span class="pun">-<span class="pln">decoration<span class="pun">:<span class="pln"> none<span class="pun">;<span class="pln"> <span class="com">/*去下划线*/</span></span></span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> margin<span class="pun">-<span class="pln">right<span class="pun">:<span class="pln"> <span class="lit">5px<span class="pun">;</span></span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> font<span class="pun">:<span class="pln"> bold <span class="lit">20px<span class="pun">/<span class="lit">50px<span class="pln"> <span class="typ">Arial<span class="pun">;</span></span></span></span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="com">/* 属性名， 属性名 = 属性值（正则）</span></span></code></li>
<li class="L9"><code class="lang-html"><span class="com"> = 绝对等于</span></code></li>
<li class="L0"><code class="lang-html"><span class="com"> *= 包含这个元素</span></code></li>
<li class="L1"><code class="lang-html"><span class="com"> ^= 以这个开头</span></code></li>
<li class="L2"><code class="lang-html"><span class="com"> $ 以这个结尾</span></code></li>
<li class="L3"><code class="lang-html"><span class="com"> */</span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="com">/*存在id属性的元素 a[]{}*/</span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> a<span class="pun">[<span class="pln">id<span class="pun">]{</span></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightgoldenrodyellow<span class="pun">;</span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> a<span class="pun">[<span class="pln">id<span class="pun">=<span class="pln">first<span class="pun">]{</span></span></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightblue<span class="pun">;</span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="com">/*class 中有links的元素*/</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> a<span class="pun">[<span class="kwd">class<span class="pun">*=<span class="str">"links"<span class="pun">]{</span></span></span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightcoral<span class="pun">;</span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="com">/*选中href中以http开头的元素*/</span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> a<span class="pun">[<span class="pln">href<span class="pun">^=<span class="pln">http<span class="pun">]{</span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightcyan<span class="pun">;</span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="com">/*a标签中href里面的值以jpg结尾*/</span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> a<span class="pun">[<span class="pln">href$<span class="pun">=<span class="pln">jpg<span class="pun">]{</span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> lightseagreen<span class="pun">;</span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L6"><code class="lang-html"><span class="tag"><p<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"demo"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"http://www.baidu.com"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item first"<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"first"<span class="tag">><span class="pln">1<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"http://www.baidu.com"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item active"<span class="pln"> <span class="atn">target<span class="pun">=<span class="atv">"_blank"<span class="pln"> <span class="atn">title<span class="pun">=<span class="atv">"test"<span class="tag">><span class="pln">2<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"images/123.html"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item"<span class="tag">><span class="pln">3<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"images/123.png"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item"<span class="tag">><span class="pln">4<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"images/123.jpg"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item"<span class="tag">><span class="pln">5<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"abc"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item"<span class="tag">><span class="pln">6<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"/a.pdf"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item"<span class="tag">><span class="pln">7<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"/abc.pdf"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item"<span class="tag">><span class="pln">8<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"abc.doc"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item"<span class="tag">><span class="pln">9<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="tag"><a<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"abcd.doc"<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"links item last"<span class="tag">><span class="pln">10<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="tag"></p></span></code></li>
<li class="L8"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L9"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<h1 id="header18">3、美化网页元素</h1>
<h2 id="header12">3.1、为什么要美化网页</h2>
<ol>
<li>有效的传递页面信息</li>
<li>美化网页，页面漂亮，才能吸引用户</li>
<li>凸显页面的主题</li>
<li>提高用户的体验</li>
</ol>
<blockquote>
<p>美化网页元素重点：为了好看，为了好看，为了好看。</p>
</blockquote>
<h2 id="header13">3.2、字体样式</h2>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="pln">font<span class="pun">-<span class="pln">family<span class="pun">:<span class="pln"> <span class="pun">字体</span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pln">font<span class="pun">-<span class="pln">size<span class="pun">:<span class="pln"> <span class="pun">字体大小</span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln">font<span class="pun">-<span class="pln">weight<span class="pun">:<span class="pln"> <span class="pun">字体粗细</span></span></span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pln">color<span class="pun">:<span class="pln"> <span class="pun">字体颜色</span></span></span></span></code></li>
</ol>
<h2 id="header14">3.3、文本样式</h2>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="pun">颜色<span class="pln"> color rgb rgba</span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pun">文本对齐的方式<span class="pln"> text<span class="pun">-<span class="pln">align <span class="pun">=<span class="pln"> center</span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pun">首行缩进<span class="pln"> text<span class="pun">-<span class="pln">indent</span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pun">行高<span class="pln"> line<span class="pun">-<span class="pln">height</span></span></span></span></code></li>
<li class="L4"><code class="lang-css"><span class="pun">装饰<span class="pln"> text<span class="pun">-<span class="pln">decoration</span></span></span></span></code></li>
<li class="L5"><code class="lang-css"><span class="pun">文本图片水平对齐：<span class="pln"> vertical<span class="pun">-<span class="pln">align</span></span></span></span></code></li>
</ol><ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> h1<span class="pun">{</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> color<span class="pun">:<span class="pln"> rgba<span class="pun">(<span class="lit">250<span class="pun">,<span class="pln"> <span class="lit">75<span class="pun">,<span class="pln"> <span class="lit">165<span class="pun">,<span class="pln"> <span class="lit">0.5<span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> text<span class="pun">-<span class="pln">align<span class="pun">:<span class="pln"> center<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">p1<span class="pun">{</span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> text<span class="pun">-<span class="pln">indent<span class="pun">:<span class="pln"> <span class="lit">2em<span class="pun">;</span></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="com">/*上划线*/</span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">l1<span class="pun">{</span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> text<span class="pun">-<span class="pln">decoration<span class="pun">:<span class="pln"> underline<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> <span class="com">/*中划线*/</span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">l2<span class="pun">{</span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> text<span class="pun">-<span class="pln">decoration<span class="pun">:<span class="pln"> line<span class="pun">-<span class="pln">through<span class="pun">;</span></span></span></span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="com">/*下划线*/</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">l3<span class="pun">{</span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> text<span class="pun">-<span class="pln">decoration<span class="pun">:<span class="pln"> overline<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="com">/*超链接去下划线*/</span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> a<span class="pun">{</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> text<span class="pun">-<span class="pln">decoration<span class="pun">:<span class="pln"> none<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L2"><code class="lang-html"></code></li>
<li class="L3"><code class="lang-html"><span class="tag"><h1><span class="pln">学习CSS<span class="tag"></h1></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"><p<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"p1"<span class="tag">><span class="pln">穿过挪威的森林，让我走进你的梦里，夕阳落在我的铠甲，王子不一定骑着白马，黑马王子四海为家，现在是晚上18:00，我不是马思唯，也没有王子陪。<span class="tag"></p></span></span></span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"></code></li>
<li class="L6"><code class="lang-html"><span class="tag"><p<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"l1"<span class="tag">><span class="pln">1231231<span class="tag"></p></span></span></span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="tag"><p<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"l2"<span class="tag">><span class="pln">1231231<span class="tag"></p></span></span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="tag"><p<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"l3"<span class="tag">><span class="pln">1231231<span class="tag"></p></span></span></span></span></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L0"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<h2 id="header15">3.4、列表前缀样式</h2>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">/*ul li*/</span></code></li>
<li class="L1"><code class="lang-css"><span class="com">/*circle 空心圆</span></code></li>
<li class="L2"><code class="lang-css"><span class="com"> decimal 数字</span></code></li>
<li class="L3"><code class="lang-css"><span class="com"> square 正方形*/</span></code></li>
<li class="L4"><code class="lang-css"><span class="com">/*ul li*/</span></code></li>
<li class="L5"><code class="lang-css"><span class="pln">ul li<span class="pun">{</span></span></code></li>
<li class="L6"><code class="lang-css"><span class="pln"> list<span class="pun">-<span class="pln">style<span class="pun">:<span class="pln"> none<span class="pun">;<span class="pln"> <span class="com">/*去掉圆点*/</span></span></span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<h2 id="header16">3.5、背景样式</h2>
<ul>
<li>背景图可以填充，拉伸，居中…等效果</li>
</ul>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> div<span class="pun">{</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> width<span class="pun">:<span class="pln"> <span class="lit">1000px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> height<span class="pun">:<span class="pln"> <span class="lit">700px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> border<span class="pun">:<span class="pln"> <span class="lit">1px<span class="pln"> solid red<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> background<span class="pun">-<span class="pln">image<span class="pun">:<span class="pln"> url<span class="pun">(<span class="str">"images/t.jpg"<span class="pun">);</span></span></span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="com">/*默认是全部平铺的*/</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">div1<span class="pun">{</span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> background<span class="pun">-<span class="pln">repeat<span class="pun">:<span class="pln"> repeat<span class="pun">-<span class="pln">x<span class="pun">;</span></span></span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">div2<span class="pun">{</span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> background<span class="pun">-<span class="pln">repeat<span class="pun">:<span class="pln"> repeat<span class="pun">-<span class="pln">y<span class="pun">;</span></span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="pun">.<span class="pln">div3<span class="pun">{</span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> background<span class="pun">-<span class="pln">repeat<span class="pun">:<span class="pln"> <span class="kwd">no<span class="pun">-<span class="pln">repeat<span class="pun">;</span></span></span></span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"><div<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"div1"<span class="tag">></div></span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="tag"><div<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"div2"<span class="tag">></div></span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="tag"><div<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"div3"<span class="tag">></div></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L9"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<h2 id="header17">3.6、渐变</h2>
<p>一个渐变的网站：https://www.grabient.com/</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="pln">body<span class="pun">{</span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pln"> background<span class="pun">:<span class="pln"> linear<span class="pun">-<span class="pln">gradient<span class="pun">(<span class="lit">43deg<span class="pun">,<span class="pln"> <span class="com">#4158D0 0%, #C850C0 46%, #FFCC70 100%);</span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<h1 id="header25">4、盒子模型</h1>
<h2 id="header19">4.1、什么是盒子模型</h2>
<p><img src="https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/12/10/kuangstudy2fd2ccbe-40d7-4af9-adee-2df5ae325580.png"></p>
<p>margin：外边距</p>
<p>padding：内边距</p>
<p>border：边框</p>
<h2 id="header20">4.2、边框</h2>
<ol>
<li>边框的粗细</li>
<li>边框的样式</li>
<li>边框的颜色</li>
</ol><ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">/* 边框大小 边框样式 边框颜色 */</span></code></li>
<li class="L1"><code class="lang-css"><span class="pln">border<span class="pun">:<span class="pln"> <span class="lit">1px<span class="pln"> solid <span class="com">#000000;</span></span></span></span></span></span></code></li>
</ol>
<h2 id="header21">4.3、内外边距</h2>
<p>margin：外边距</p>
<p>padding：内边距</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">/*</span></code></li>
<li class="L1"><code class="lang-css"><span class="com"> 当margin/padding</span></code></li>
<li class="L2"><code class="lang-css"><span class="com"> 有一个参数，上下左右，都有边距</span></code></li>
<li class="L3"><code class="lang-css"><span class="com"> 有二个参数，上下，左右，表示</span></code></li>
<li class="L4"><code class="lang-css"><span class="com"> 四个参数时，上，右，下，左，表示</span></code></li>
<li class="L5"><code class="lang-css"><span class="com"> margin：0 1px 2px 3px;</span></code></li>
<li class="L6"><code class="lang-css"><span class="com">*/</span></code></li>
</ol>
<p>盒子的计算方式：元素到底多大？</p>
<p>margin+border+padding+内容宽度</p>
<h2 id="header22">4.4、圆角边框</h2>
<p>4个角</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="pln">div<span class="pun">{</span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pln"> width<span class="pun">:<span class="pln"> <span class="lit">100px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> height<span class="pun">:<span class="pln"> <span class="lit">50px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pln"> margin<span class="pun">:<span class="pln"> <span class="lit">30px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L4"><code class="lang-css"><span class="pln"> border<span class="pun">:<span class="pln"> <span class="lit">2px<span class="pln"> solid red<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-css"><span class="pln"> border<span class="pun">-<span class="pln">radius<span class="pun">:<span class="pln"> <span class="lit">50px<span class="pln"> <span class="lit">50px<span class="pln"> <span class="lit">0px<span class="pln"> <span class="lit">0px<span class="pun">;<span class="pln"> <span class="com">/* 和边距的参数一样，左上，右上，右下，左下 */</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<h2 id="header23">4.5、阴影</h2>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">/*</span></code></li>
<li class="L1"><code class="lang-css"><span class="com">h-shadow 必需。水平阴影的位置。允许负值。</span></code></li>
<li class="L2"><code class="lang-css"><span class="com">v-shadow 必需。垂直阴影的位置。允许负值。</span></code></li>
<li class="L3"><code class="lang-css"><span class="com">blur 可选。模糊的距离。</span></code></li>
<li class="L4"><code class="lang-css"><span class="com">color 可选。阴影的颜色。</span></code></li>
<li class="L5"><code class="lang-css"><span class="com">text-shadow: h-shadow v-shadow blur color;</span></code></li>
<li class="L6"><code class="lang-css"><span class="com">*/</span></code></li>
</ol>
<h2 id="header24">4.6、综合案例</h2>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="com">/*</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="com"> 当margin/padding</span></code></li>
<li class="L8"><code class="lang-html"><span class="com"> 有一个参数，上下左右，都有边距</span></code></li>
<li class="L9"><code class="lang-html"><span class="com"> 有二个参数，上下，左右，表示</span></code></li>
<li class="L0"><code class="lang-html"><span class="com"> 四个参数时，上，右，下，左，表示</span></code></li>
<li class="L1"><code class="lang-html"><span class="com"> margin：0 1px 2px 3px;</span></code></li>
<li class="L2"><code class="lang-html"><span class="com"> */</span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="com">#box{</span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> width<span class="pun">:<span class="pln"> <span class="lit">300px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> margin<span class="pun">:<span class="pln"> <span class="lit">0<span class="pln"> <span class="kwd">auto<span class="pun">;<span class="pln"> <span class="com">/*有宽度时，可以居中*/</span></span></span></span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> padding<span class="pun">:<span class="pln"> <span class="lit">10px<span class="pun">;<span class="pln"> <span class="com">/* 内边距 */</span></span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> border<span class="pun">:<span class="pln"> <span class="lit">1px<span class="pln"> solid <span class="com">#67e4ff;</span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln"> linear<span class="pun">-<span class="pln">gradient<span class="pun">(<span class="lit">43deg<span class="pun">,<span class="pln"> <span class="com">#4158D0 0%, #C850C0 46%, #FFCC70 100%);</span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> border<span class="pun">-<span class="pln">radius<span class="pun">:<span class="pln"> <span class="lit">20px<span class="pun">;<span class="com">/*圆角*/</span></span></span></span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> box<span class="pun">-<span class="pln">shadow<span class="pun">:<span class="pln"> <span class="lit">10px<span class="pln"> <span class="lit">10px<span class="pln"> <span class="lit">10px<span class="pln"> <span class="com">#000000;/*阴影*/</span></span></span></span></span></span></span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> h2<span class="pun">{</span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> color<span class="pun">:<span class="pln"> <span class="com">#ffffff;</span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> text<span class="pun">-<span class="pln">align<span class="pun">:<span class="pln"> center<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> div<span class="pun">{</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> padding<span class="pun">:<span class="pln"> <span class="lit">10px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> input<span class="pun">[<span class="pln">type<span class="pun">=<span class="pln">submit<span class="pun">]{</span></span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> width<span class="pun">:<span class="pln"> <span class="lit">100<span class="pun">%;</span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"><div<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"box"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="tag"><h2><span class="pln">会员登录<span class="tag"></h2></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> <span class="tag"><form<span class="pln"> <span class="atn">action<span class="pun">=<span class="atv">"#"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="tag"><div></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="tag"><span><span class="pln">用户名：<span class="tag"></span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> <span class="tag"><input<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="tag"></div></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="tag"><div></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><span><span class="pln">密码：<span class="tag"></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><input<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="tag"></div></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="tag"><div></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> <span class="tag"><input<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"submit"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> <span class="tag"></div></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="tag"></form></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="tag"></div></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<h1 id="header30">5、浮动</h1>
<h2 id="header26">5.1、 标准文档流</h2>
<p>块级元素：独占一行</p>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="com"><!-- h1-h6 p div ... --></span></code></li>
</ol>
<p>行内元素：不独占一行</p>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="com"><!-- span a img strong ... --></span></code></li>
</ol>
<p>块级元素可以存在行内元素。</p>
<h2 id="header27">5.2、display</h2>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="com"><!-- block，块元素</span></span></code></li>
<li class="L6"><code class="lang-html"><span class="com"> inline 行内元素</span></code></li>
<li class="L7"><code class="lang-html"><span class="com"> inline-block 是块元素，但是可以内联，在一行！</span></code></li>
<li class="L8"><code class="lang-html"><span class="com"> none： 消失--></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> <span class="tag"><style></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> div<span class="pun">{</span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> width<span class="pun">:<span class="pln"> <span class="lit">100px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> height<span class="pun">:<span class="lit">100px<span class="pun">;</span></span></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> border<span class="pun">:<span class="pln"> <span class="lit">1px<span class="pln"> solid red<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> display<span class="pun">:<span class="pln"> <span class="kwd">inline<span class="pun">;</span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> span<span class="pun">{</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> width<span class="pun">:<span class="pln"> <span class="lit">100px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> height<span class="pun">:<span class="lit">100px<span class="pun">;</span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> border<span class="pun">:<span class="pln"> <span class="lit">1px<span class="pln"> solid red<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> display<span class="pun">:<span class="pln"> block<span class="pun">;</span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pln"> <span class="pun">}</span></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="tag"></style></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"><div><span class="pln">div块元素<span class="tag"></div></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="tag"><span><span class="pln">span行内元素<span class="tag"></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L8"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol>
<h2 id="header28">5.3、float</h2>
<p>1、左右浮动</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="pln">div<span class="pun">{</span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pln"> <span class="kwd">float<span class="pun">:<span class="pln"> right<span class="pun">;<span class="com">/*向右浮动*/</span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<p>浮动的元素会脱离标准流。</p>
<h2 id="header29">5.4、父级边框塌陷问题</h2>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">/*</span></code></li>
<li class="L1"><code class="lang-css"><span class="com">clear: right; 右侧不允许有浮动元素</span></code></li>
<li class="L2"><code class="lang-css"><span class="com">clear: left; 左侧不允许有浮动元素</span></code></li>
<li class="L3"><code class="lang-css"><span class="com">clear: both; 两侧不允许有浮动元素</span></code></li>
<li class="L4"><code class="lang-css"><span class="com">clear: none; 不允许有浮动元素</span></code></li>
<li class="L5"><code class="lang-css"><span class="com">*/</span></code></li>
<li class="L6"><code class="lang-css"><span class="pun">.<span class="pln">text<span class="pun">{</span></span></span></code></li>
<li class="L7"><code class="lang-css"><span class="pln"> clear<span class="pun">:<span class="pln">both<span class="pun">;</span></span></span></span></code></li>
<li class="L8"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<p>解决父级边框塌陷问题：</p>
<p>1、增加父级元素高度</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">#body{</span></code></li>
<li class="L1"><code class="lang-css"><span class="pln"> border<span class="pun">:<span class="pln"> <span class="lit">1px<span class="pln"> <span class="com">#000 solid;</span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> height<span class="pun">:<span class="pln"> <span class="lit">800px<span class="pun">;</span></span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<p>2、增加一个空的div标签，清除浮动</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="tag"><div<span class="pln"> <span class="atn">class<span class="pun">=<span class="atv">"clear"<span class="tag">></div></span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pln">.clear{</span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> clear: both;</span></code></li>
<li class="L3"><code class="lang-css"><span class="pln"> margin: 0;</span></code></li>
<li class="L4"><code class="lang-css"><span class="pln"> padding: 0;</span></code></li>
<li class="L5"><code class="lang-css"><span class="pln">}</span></code></li>
</ol>
<p>3、父类添加一个伪类：after</p>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="com">#body:after{</span></code></li>
<li class="L1"><code class="lang-css"><span class="pln"> content<span class="pun">:<span class="pln"> <span class="str">''<span class="pun">;</span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> display<span class="pun">:<span class="pln"> block<span class="pun">;</span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pln"> clear<span class="pun">:<span class="pln"> both<span class="pun">;</span></span></span></span></code></li>
<li class="L4"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<p>小结：</p>
<p>1、浮动元素后面增加div</p>
<p>简单，代码中尽量避免空div</p>
<p>2、设置父元素的高度</p>
<p>简单，元素假设有了固定的高度，就会被限制</p>
<p>3、父类添加伪类:after(推荐使用)</p>
<p>原理跟第一个方法一样。这里是通过伪类添加元素。</p>
<h1 id="header35">6、定位</h1>
<h2 id="header31">6.1、相对定位</h2>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="pln">div<span class="pun">{</span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pln"> position<span class="pun">:<span class="pln"> relative<span class="com">/*相对定位*/</span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> top<span class="pun">:<span class="pln"> <span class="pun">-<span class="lit">20px<span class="pun">;<span class="com">/*相对当前的位置 向上移动，负值相反方向*/</span></span></span></span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pln"> left<span class="pun">:<span class="pln"> <span class="lit">20px<span class="pun">;<span class="com">/*相对当前的位置 向右移动*/</span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-css"><span class="pln"> bottom<span class="pun">:<span class="pln"> <span class="pun">-<span class="lit">20px<span class="pun">;<span class="com">/*相对当前的位置 向下移动*/</span></span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-css"><span class="pln"> right<span class="pun">:<span class="pln"> <span class="lit">20px<span class="pun">;<span class="com">/*相对当前的位置 向左移动*/</span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<p>相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留</p>
<h2 id="header32">6.2、绝对定位</h2>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="pln">div<span class="pun">{</span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pln"> position<span class="pun">:<span class="pln"> absolute<span class="pun">;<span class="com">/*绝对定位*/</span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> top<span class="pun">:<span class="pln"> <span class="pun">-<span class="lit">20px<span class="pun">;<span class="com">/*相对当前的位置 向上移动，负值相反方向*/</span></span></span></span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pln"> left<span class="pun">:<span class="pln"> <span class="lit">20px<span class="pun">;<span class="com">/*相对当前的位置 向右移动*/</span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<p>绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器。</p>
<p>用绝对定位的元素会脱离文档流。</p>
<h2 id="header34">6.3、固定定位</h2>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="pln">div<span class="pun">{</span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pln"> position<span class="pun">:<span class="pln"> <span class="kwd">fixed<span class="pun">;<span class="com">/*固定定位*/</span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pln"> right<span class="pun">:<span class="pln"> <span class="lit">0<span class="pun">;</span></span></span></span></span></code></li>
<li class="L3"><code class="lang-css"><span class="pln"> bottom<span class="pun">:<span class="pln"> <span class="lit">0<span class="pun">;</span></span></span></span></span></code></li>
<li class="L4"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<p>固定定位使元素的位置相对于浏览器窗口来定位。</p>
<p>即使窗口是滚动的它也不会移动。</p>
<h3 id="header33">6.4、z-index</h3>
<ol class="linenums">
<li class="L0"><code class="lang-css"><span class="pln">div<span class="pun">{</span></span></code></li>
<li class="L1"><code class="lang-css"><span class="pln"> z<span class="pun">-<span class="pln">index<span class="pun">:<span class="lit">2<span class="pun">;</span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-css"><span class="pun">}</span></code></li>
</ol>
<p>图层，用定位的时候会产生会和其他元素重叠。</p>
<p>相当于上一层盖住了下一层的内容。</p>
<h1 id="header36">7、动画</h1>
<ol class="linenums">
<li class="L0"><code class="lang-html"><span class="dec"><!DOCTYPE html></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><html<span class="pln"> <span class="atn">lang<span class="pun">=<span class="atv">"en"<span class="tag">></span></span></span></span></span></span></code></li>
<li class="L2"><code class="lang-html"><span class="tag"><head></span></code></li>
<li class="L3"><code class="lang-html"><span class="pln"> <span class="tag"><meta<span class="pln"> <span class="atn">charset<span class="pun">=<span class="atv">"UTF-8"<span class="tag">></span></span></span></span></span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="tag"><title><span class="pln">Title<span class="tag"></title></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="tag"><style></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln">div<span class="pun">{</span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> width<span class="pun">:<span class="lit">100px<span class="pun">;</span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pln"> height<span class="pun">:<span class="lit">100px<span class="pun">;</span></span></span></span></code></li>
<li class="L9"><code class="lang-html"><span class="pln"> background<span class="pun">:<span class="pln">red<span class="pun">;</span></span></span></span></code></li>
<li class="L0"><code class="lang-html"><span class="pln"> animation<span class="pun">:<span class="pln">myfirst <span class="lit">5s<span class="pun">;<span class="pln"> <span class="com">/* 动画执行时间 */</span></span></span></span></span></span></span></code></li>
<li class="L1"><code class="lang-html"><span class="pun">}</span></code></li>
<li class="L2"><code class="lang-html"></code></li>
<li class="L3"><code class="lang-html"><span class="lit">@keyframes<span class="pln"> myfirst<span class="pun">{</span></span></span></code></li>
<li class="L4"><code class="lang-html"><span class="pln"> <span class="lit">0<span class="pun">%<span class="pln"> <span class="pun">{<span class="pln">background<span class="pun">:<span class="pln"> red<span class="pun">;}</span></span></span></span></span></span></span></span></span></code></li>
<li class="L5"><code class="lang-html"><span class="pln"> <span class="lit">25<span class="pun">%<span class="pln"> <span class="pun">{<span class="pln">background<span class="pun">:<span class="pln"> yellow<span class="pun">;}</span></span></span></span></span></span></span></span></span></code></li>
<li class="L6"><code class="lang-html"><span class="pln"> <span class="lit">50<span class="pun">%<span class="pln"> <span class="pun">{<span class="pln">background<span class="pun">:<span class="pln"> blue<span class="pun">;}</span></span></span></span></span></span></span></span></span></code></li>
<li class="L7"><code class="lang-html"><span class="pln"> <span class="lit">100<span class="pun">%<span class="pln"> <span class="pun">{<span class="pln">background<span class="pun">:<span class="pln"> green<span class="pun">;}</span></span></span></span></span></span></span></span></span></code></li>
<li class="L8"><code class="lang-html"><span class="pun">}</span></code></li>
<li class="L9"><code class="lang-html"><span class="tag"></style></span></code></li>
<li class="L0"><code class="lang-html"><span class="tag"></head></span></code></li>
<li class="L1"><code class="lang-html"><span class="tag"><body></span></code></li>
<li class="L2"><code class="lang-html"><span class="pln"> <span class="tag"><div></div></span></span></code></li>
<li class="L3"><code class="lang-html"><span class="tag"></body></span></code></li>
<li class="L4"><code class="lang-html"><span class="tag"></html></span></code></li>
</ol><br><br>
来源：https://www.cnblogs.com/irony8023/p/15957073.html
頁:
[1]