首页 › CSS论坛 › CSS学习

文秀玉权健医院火疗 發表於 2022-1-5 15:01:00

CSS学习

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path>
                  </svg>
                  <p></p>
<div class="toc">
<h4>文章目录</h4>
<ul><li>1、初识CSS3</li><li><ul><li>1.1、什么是CSS</li><li>1.2、CSS的发展史</li><li>1.3、CSS的基本语法</li><li>1.4、引入CSS方式</li><li>1.5、CSS基本选择器</li><li>1.6、CSS高级选择器</li><li><ul><li>1、层次选择器</li><li>2、结构伪类选择器</li><li>3、属性选择器</li></ul>
   </li><li>1.7、小结</li></ul>
</li><li>2、美化网页元素</li><li><ul><li>2.1、为什么使用CSS</li><li>2.2、字体样式</li><li>2.3、文本样式</li><li>2.4、文本阴影</li><li>2.5、超链接伪类</li><li>2.6、列表样式</li><li>2.7、背景样式</li><li>2.8、CSS渐变样式</li><li>2.9、小结</li></ul>
</li><li>3、盒子模型</li><li><ul><li>3.1、什么是盒子模型</li><li>3.2、边框</li><li>3.3、内外边距</li><li>3.4、盒子型模尺寸</li><li>3.5、圆角边框</li><li>3.6、盒子阴影</li><li>3.7、小结</li></ul>
</li><li>4、浮动</li><li><ul><li>4.1、标准文档流</li><li>4.2、display</li><li>4.3、浮动</li><li>4.4、边框塌陷</li><li>4.5、inline-block和float区别</li><li>4.6、小结</li></ul>
</li><li>5、定位</li><li><ul><li>5.1、定位在网页中的应用</li><li>5.2、相对定位</li><li>5.3、绝对定位</li><li>5.4、固定定位</li><li>5.5、定位小结</li><li>5.6、z-index属性</li><li>5.7、小结</li></ul>
</li><li>6、制作网页动画(了解)</li><li><ul><li>6.1、CSS变形</li><li>6.2、CSS过渡</li><li>6.3、CSS动画</li><li>6.4、总结</li></ul>
</li></ul>
</div>
<p></p>
<hr color="#000000" size="1&quot;">
<h2>1、初识CSS3</h2>
<p><strong>本章目标：</strong></p>
<ul><li>会使用行内样式、内部样式表和外部样式表三种方式为HTML5文档添加CSS样式</li><li>会使用CSS3的基本选择器设置字体大小和颜色</li><li>会使用复合选择器为特定的网页元素添加CSS样式</li><li>会使用CSS3高级选择器为网页元素添加CSS样式</li></ul>
<h3>1.1、什么是CSS</h3>
<p><font color="red"> Cascading Style Sheet 级联样式表。</font><br> <strong>表现</strong>HTML或XHTML文件样式的计算机<strong>语言。</strong><br> 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定<br> <img src="https://img-blog.csdnimg.cn/498d2d4ba6ad48b7917bf0ad9c88cee0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<p><strong>说明：</strong></p>
<ul><li>首先介绍什么是CSS</li><li>然后对比讲解使用CSS和没有使用CSS的两个相同的HTML代码页面显示效果，说明CSS的重要性</li><li>最后根据图说明CSS在网页中的应用</li></ul>
<h3>1.2、CSS的发展史</h3>
<p><img src="https://img-blog.csdnimg.cn/0f357139aa7244e195f291357cd9df31.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><br> CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；<br> CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离<br> CSS2.1 融入了更多高级的用法，如浮动，定位等。<br> CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。<br> 由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势，因此本书会讲解最新的CSS3版本<br> 本课程中主要讲解css2.1和css3<br> <strong>CSS的优势</strong></p>
<ul><li>内容与表现分离</li><li>网页的表现统一，容易修改</li><li>丰富的样式，使得页面布局更加灵活</li><li>减少网页的代码量，增加网页的浏览速度，节省网络带宽</li><li>运用独立于页面的CSS，有利于网页被搜索引擎收录</li></ul>
<h3>1.3、CSS的基本语法</h3>
<ul><li>首先讲解CSS的基本语法结构，由选择器和声明构成</li><li>然后对照具体的样式详细讲解语法，强调声明必须在 <strong>{ }</strong> 中</li><li>最后说明基本W3C的规范，每条声明后的 <strong>;</strong> 都要写上</li></ul>
<p><img src="https://img-blog.csdnimg.cn/2bb725349b3b461f9629ae972c6a37ca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<p><font color="red">Style标签</font></p>
<ul><li>讲解CSS样式如何在HTML中应用，引入style标签的应用</li><li>讲解style标签，说明type=“text/css的用法</li><li>说明style标签在HTML文档中的位置，在与之间</li></ul>
<p><img src="https://img-blog.csdnimg.cn/c87d576919674c1bbe33358e2506cd71.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16"></p>
<h3>1.4、引入CSS方式</h3>
<ul><li> <p><font color="red">行内样式</font><br> 使用style属性引入CSS样式</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">color</span><span class="token punctuation">:</span>red<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>style属性的应用<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>14px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>green<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>直接在HTML标签中设置的样式<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</code></pre> <p>使用style属性设置CSS样式仅对当前的HTML标签起作为，并且是写在HTML标签中的<br> 这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。</p> </li><li> <p><font color="red">内部样式表</font><br> CSS代码写在 <code>&lt;head&gt;</code> 的 <code>&lt;style&gt;</code> 标签中</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">h1</span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <p>优点：方便在同页面中修改样式<br> 缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 引出外部样式表</p> </li><li> <p><font color="red">外部样式表</font><br> CSS代码保存在扩展名为.css的样式表中<br> HTML文件引用扩展名为.css的样式表，有两种方式</p>
<ul><li>链接式（使用的最多,记住这个就可以了）<br> 使用 <code>&lt;link&gt;</code> 标签链接外部样式表，并讲解各参数的含义， <code>&lt;link&gt;</code> 标签必须放在<code>&lt;head&gt;</code> 标签中<br> <img src="https://img-blog.csdnimg.cn/68c15859276d4019aa9a9caa394e5c86.png"></li><li>导入式<br> 使用@import导入外部样式表<br> <img src="https://img-blog.csdnimg.cn/fd8971c784434b77a398101ade533f8f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_16,color_FFFFFF,t_70,g_se,x_16"></li></ul> </li></ul>
<p><font color="red">链接式与导入式的区别</font></p>
<ol><li><code>&lt;link/&gt;</code> 标签是属于XHTML范畴的，@import是属于CSS2.1中特有的。</li><li>使用 <code>&lt;link/&gt;</code> 链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也一样的效果。</li><li>使用@import导入的CSS文件，客户端在浏览网页时是先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当然最终的效果也与使用 <code>&lt;link/&gt;</code> 链接文件效果一样，只是当网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉。这个也是现在目前大多少网站采用链接外部样式表的主要原因。</li><li>由于@import是属于CSS2.1中特有的，因此对于不兼容CSS2.1的浏览器来说就是无效的。</li></ol>
<p><font color="red">CSS样式优先级</font></p>
<pre><code class="prism language-bash">行内样式<span class="token operator">&gt;</span>内部样式表<span class="token operator">&gt;</span>外部样式表
就近原则：越接近标签的样式优先级越高
</code></pre>
<p>【学员练习】<br> 使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14p<br> <img src="https://img-blog.csdnimg.cn/2ace14e21e9544339e1c6781350ebe69.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_17,color_FFFFFF,t_70,g_se,x_16"></p>
<h3>1.5、CSS基本选择器</h3>
<ul><li> <p><font color="red">标签选择器</font></p> <pre><code class="prism language-css">HTML标签作为标签选择器的名称
&lt;h1&gt;…&lt;h6&gt;、&lt;p&gt;、&lt;img/&gt;
</code></pre> </li></ul>
<p><img src="https://img-blog.csdnimg.cn/19b69f9b37c3400e9d009d7dbdd5b6c9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16"></p>
<ul><li><font color="red">类选择器</font><br> 一些特殊的实现效果，单纯使用标签选择器不能实现，从而引出类选择器</li></ul>
<p><img src="https://img-blog.csdnimg.cn/5a95dccdf50c4e47826b714576440dcb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16"></p>
<ul><li><font color="red">ID选择器</font><br> ID选择器的名称就是HTML中标签的ID名称，ID全局唯一<br> <img src="https://img-blog.csdnimg.cn/eb1c772d8b7c423a9e4033d0d9b28bf7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16"></li></ul>
<p><font color="red">小结</font></p>
<ul><li>标签选择器直接应用于HTML标签</li><li>类选择器可在页面中多次使用</li><li>ID选择器在同一个页面中只能使用一次</li></ul>
<p><font color="red">基本选择器的优先级</font></p>
<pre><code class="prism language-css">ID选择器&gt;类选择器&gt;标签选择
</code></pre>
<p>标签选择器是否也遵循“就近原则”？<br> <strong>不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 &gt; class类选择器 &gt; 标签选择器的优先级</strong></p>
<h3>1.6、CSS高级选择器</h3>
<h4>1、层次选择器</h4>
<p><img src="https://img-blog.csdnimg.cn/cead0cb5e08f43fb988ff33fa647dcdc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<ul><li> <p>后代选择器</p> <pre><code class="prism language-css"><span class="token selector">body p</span><span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <p><img src="https://img-blog.csdnimg.cn/5ae7ed6657414fe4ba805ef36d19fbf6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <strong>后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入</strong></p> </li><li> <p>子选择器</p> <pre><code class="prism language-css"><span class="token selector">body&gt;p</span><span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <p><img src="https://img-blog.csdnimg.cn/ee0bf887a00546629f9be4a3d9c5b605.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p> </li><li> <p>相邻兄弟选择器</p> <pre><code class="prism language-css"><span class="token selector">.active+p</span> <span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <p><img src="https://img-blog.csdnimg.cn/05265b5dad2d4d0f8a62329531071ee8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p> </li><li> <p>通用兄弟选择器</p> <pre><code class="prism language-css"><span class="token selector">.active~p</span><span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <p><img src="https://img-blog.csdnimg.cn/51c1e34ff2ac4fd9bb0961486f65631a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16"></p> </li></ul>
<h4>2、结构伪类选择器</h4>
<p><img src="https://img-blog.csdnimg.cn/fd2eb43d45bc4beb8f3439aef2b374df.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_16,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>使用CSS3结构伪类选择器<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>p1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>p2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>p3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>li1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>li2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>li3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p>标红的重点强调下，其他的可以略讲<br> <img src="https://img-blog.csdnimg.cn/a0603a5af3c54abcb83a3df53e173b4a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-css"><span class="token selector">ul li:first-child</span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">ul li:last-child</span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">p:nth-child(1)</span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">p:nth-of-type(2)</span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/2b841143b9c54827b6ce216320cccdf0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <strong>小结</strong></p>
<ul><li>使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
<ul><li>E F:nth-child(n)在父级里从一个元素开始查找，不分类型</li><li>E F:nth-of-type(n)在父级里先看类型，再看位置</li></ul> </li></ul>
<h4>3、属性选择器</h4>
<p><img src="https://img-blog.csdnimg.cn/4d76bd9ef1ea4ee48c3770a381ced25a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <strong>E属性选择器</strong></p>
<pre><code class="prism language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/f31e4675f47f462c89af0a2ab09723bf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><br> <strong>E属性选择器</strong></p>
<pre><code class="prism language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/3debb255b64644569d35c3b46699a049.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <strong><code>E</code>属性选择器</strong></p>
<pre><code class="prism language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/7b84497e790b4aaf8e2c34ecd937bae6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <strong>E属性选择器</strong></p>
<pre><code class="prism language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/48579a1e28c14733b114cecb9e34eedf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <strong>E属性选择器</strong></p>
<pre><code class="prism language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/7e185efce4b14af288803127c4aee493.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<h3>1.7、小结</h3>
<p><img src="https://img-blog.csdnimg.cn/dc3b81871a654506affcb38b08faff41.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<h2>2、美化网页元素</h2>
<p><strong>本章目标：</strong></p>
<ul><li>会使用CSS设置字体样式和文本样式</li><li>会使用CSS设置超链接样式</li><li>会使用CSS设置列表样式</li><li>会使用CSS设置背景样式</li><li>会使用CSS设置渐变效果</li></ul>
<h3>2.1、为什么使用CSS</h3>
<p>【查看淘宝页面，让学员观察，重点记住了什么东西】<br> 因此使用CSS样式美化网页文本具有如下意义。</p>
<ol><li>有效的传递页面信息</li><li>使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户</li><li>可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容</li><li>具有良好的用户体验</li></ol>
<p><font color="red">&lt; span&gt;标签</font><br> &lt; span&gt;标签 的作用：能让某几个文字或者某个词语凸显出来，从而添加对应的样式！</p>
<pre><code class="prism language-css">&lt;p&gt;好好学习，&lt;span&gt;天天向上&lt;/span&gt;&lt;/p&gt;
</code></pre>
<h3>2.2、字体样式</h3>
<p><img src="https://img-blog.csdnimg.cn/c9df39838e414efdab8ace5f4519798e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <font color="red">字体类型 font-family</font></p>
<pre><code class="prism language-css"><span class="token selector">p</span><span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>Verdana<span class="token punctuation">,</span><span class="token string">"楷体"</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">body</span><span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span> Times<span class="token punctuation">,</span><span class="token string">"Times New Roman"</span><span class="token punctuation">,</span> <span class="token string">"楷体"</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
<p>同时设置中文和英文时，计算机如何识别中英文不同类型</p>
<p><font color="red">字体大小 font-size</font></p>
<ul><li>单位
<ul><li>px（像素）</li><li>em、rem、cm、mm、pt、pc</li></ul> </li></ul>
<pre><code class="prism language-css"><span class="token selector">h1</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>24px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">h2</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>16px<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">h3</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>2em<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">span</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>12pt<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">strong</span><span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span>13pc<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
<p><font color="red">字体风格 font-style</font><br> normal、italic和oblique</p>
<p><img src="https://img-blog.csdnimg.cn/bc1607b76a074f74990e1086a122ec0d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<p><font color="red">字体的粗细 font-weight</font><br> <img src="https://img-blog.csdnimg.cn/c2c9392152b942af89f828c7b9e63849.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<p><font color="red">字体属性 font</font><br> 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型</p>
<pre><code class="prism language-css"><span class="token selector">p span</span><span class="token punctuation">{</span>
        <span class="token property">font</span><span class="token punctuation">:</span>oblique bold 12px <span class="token string">"楷体"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3>2.3、文本样式</h3>
<p><img src="https://img-blog.csdnimg.cn/0d486a56b94743e0bcd4c533d3b29b38.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <font color="red">文本颜色color </font></p>
<ul><li>RGB
<ul><li>十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量<br> rgb(r,g,b) : 正整数的取值为0～255</li></ul> </li><li>RGBA
<ul><li>在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1</li></ul> </li></ul>
<pre><code class="prism language-css"><span class="token property">color</span><span class="token punctuation">:</span>#A983D8<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span>#EEFF66<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgb</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>255<span class="token punctuation">,</span>255<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>255<span class="token punctuation">,</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><font color="red">排版文本段落</font></p>
<p>水平对齐方式：text-align属性<br> <img src="https://img-blog.csdnimg.cn/2544d64221754baf94d4c9beee3690b6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<p>首行缩进：text-indent：em或px<br> 行高：line-height：px</p>
<p><code>文本修饰和垂直对齐</code><br> 文本装饰：text-decoration属性（后面的讲解中会大量用到）<br> <img src="https://img-blog.csdnimg.cn/d05f506c96d24ed389356198a8761b95.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> 垂直对齐方式：vertical-align属性：middle、top、bottom</p>
<p><img src="https://img-blog.csdnimg.cn/a6e9590053d2401a95980ad6f8885da9.png"></p>
<h3>2.4、文本阴影</h3>
<p><img src="https://img-blog.csdnimg.cn/f6ba66b827d14f6e9d4b3781acff0457.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> text-shadow属性在CSS2.0中出现，但迟迟未被各大浏览器所支持，因此在CSS2.1中被废弃，如今在CSS3中得到了各大浏览器的支持！</p>
<p>【学员练习】</p>
<p><img src="https://img-blog.csdnimg.cn/201c424d36684d3db120d1f09eb3e6f8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<h3>2.5、超链接伪类</h3>
<p><img src="https://img-blog.csdnimg.cn/385f81c5586a459880bb0cff441c9761.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><br> <strong>使用CSS设置超链接</strong></p>
<p><img src="https://img-blog.csdnimg.cn/d527cdb030e04fd7a5b8af4682e5bd8c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> 实际网页开发中通常只设置两种状态，一是a{color:#333;}，一是a:hover { color:#B46210;}</p>
<h3>2.6、列表样式</h3>
<ul><li>list-style-type</li><li>list-style-image</li><li>list-style-position</li><li>list-style</li></ul>
<p><img src="https://img-blog.csdnimg.cn/b6241784359e4c1eaf4ada650b7a1dea.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> 上网时大家都会看到在浏览的网页中用到列表时很少使用CSS自带的列表标记，而是使用设计的图标，那么大家会想使用list-style-image就可以了。可是list-style-position不能准确地定位图像标记的位置，通常，网页中图标的位置都是非常精确的。在实际的网页制作中，通常使用list-style或list-style-type设置项目无标记符号，然后通过背景图像的方式把设计的图标设置成列表项标记。在网页制作中，list-style和list-style-type两个属性是大家经常用到的，而另两个属性则不太常用，因此在这里大家<strong>牢记list-style和list-style-type</strong>的用法即可!🚊<br> <img src="https://img-blog.csdnimg.cn/2db0d62c40454036a3e1cbb838aae92b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<h3>2.7、背景样式</h3>
<p><strong>常见的背景样式</strong></p>
<ul><li>背景图像
<ul><li>background-image</li></ul> </li><li>背景颜色
<ul><li>background-color</li></ul> </li></ul>
<p><code>设置背景图像</code><br> background-image属性<br> background-repeat属性</p>
<p><img src="https://img-blog.csdnimg.cn/49624ec6915749138c570d8b2a838d88.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><br> <code>背景定位：background-position属性</code></p>
<p><img src="https://img-blog.csdnimg.cn/a96bc09872524aa2a1b5ff150c28a585.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> 这些小三角，实现定位<br> <img src="https://img-blog.csdnimg.cn/b38382fb3aae4f8f9932f2fa3a3324e8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <code>设置背景</code><br> 背景属性：background属性（背景样式简写）</p>
<pre><code class="prism language-css"><span class="token selector">.title</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span>18px<span class="token punctuation">;</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span>
        <span class="token property">text-indent</span><span class="token punctuation">:</span>1em<span class="token punctuation">;</span>
        <span class="token property">line-height</span><span class="token punctuation">:</span>35px<span class="token punctuation">;</span>
        <span class="token property">background</span><span class="token punctuation">:</span>#C00 <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../image/arrow-down.gif<span class="token punctuation">)</span></span> 205px 10px no-repeat<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token property">background</span><span class="token punctuation">:</span> 背景颜色 背景图像 背景定位 背景不重复显示
</code></pre>
<p><code>背景尺寸 background-size</code></p>
<p><img src="https://img-blog.csdnimg.cn/8482d33952af4571b3baeaee0861ac92.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<h3>2.8、CSS渐变样式</h3>
<p>网站推荐：http://color.oulu.me/</p>
<ul><li>线性渐变
<ul><li>颜色沿着一条直线过渡：从左到右、从右到左、从上到下等</li></ul> </li><li>径向渐变
<ul><li>圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合</li></ul> </li></ul>
<p><code>CSS3渐变兼容</code></p>
<ul><li>IE浏览器是Trident内核，加前缀：-ms-</li><li>Chrome浏览器是Webkit内核，加前缀：-webkit-</li><li>Safari浏览器是Webkit内核，加前缀：-webkit-</li><li>Opera浏览器是Blink内核，加前缀：-o-</li><li>Firefox浏览器是Mozilla内核，加前缀：-moz-</li></ul>
<p><code>线性渐变</code><br> <img src="https://img-blog.csdnimg.cn/325909d100bf4ad493f6b8bf2aa3e075.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> 兼容Webkit内核的浏览器</p>
<pre><code class="prism language-css">-webkit-linear-gradient <span class="token punctuation">(</span> position<span class="token punctuation">,</span> color1<span class="token punctuation">,</span> color2<span class="token punctuation">,</span>…<span class="token punctuation">)</span>
</code></pre>
<h3>2.9、小结</h3>
<p><img src="https://img-blog.csdnimg.cn/d43ac15aac3f476db79f249baf2afb56.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<h2>3、盒子模型</h2>
<p><strong>本章目标</strong></p>
<ul><li>理解盒子模型及其构成</li><li>会计算盒子模型尺寸</li><li>会使用盒子模型的两种解析方式来布局网页</li><li>会使用圆角属性给网页元素添加圆角效果</li><li>会使用盒子阴影属性给网页元素添加阴影效果</li></ul>
<h3>3.1、什么是盒子模型</h3>
<p>讲解盒子模型及属性，并说明边框、外边框和内边框都是四个边，最后介绍盒子模型的立体结构.<img src="https://img-blog.csdnimg.cn/1986a0de6fd84ff9b5cb39c66d02b289.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><br> <img src="https://img-blog.csdnimg.cn/892c8235d0544d2ca19d7ea028677110.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<h3>3.2、边框</h3>
<p><code>边框颜色 border-color</code></p>
<ul><li>边框颜色设置方式与文本颜色对比讲解，都是使用十六进制</li><li>强调同时设置4个边框颜色时，顺序为上右下左</li><li>详细讲解分别上、下、左、右各边框颜色的不同设置方式，及属性值的顺序</li></ul>
<p><img src="https://img-blog.csdnimg.cn/6a124cce1c004b9ca8b23d7840aace2f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <code>边框粗细 border-width</code></p>
<ul><li> <p>thin</p> </li><li> <p>medium</p> </li><li> <p>thick</p> </li><li> <p>像素值</p> <pre><code class="prism language-css"><span class="token property">border-top-width</span><span class="token punctuation">:</span>5px<span class="token punctuation">;</span>
<span class="token property">border-right-width</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
<span class="token property">border-bottom-width</span><span class="token punctuation">:</span>8px<span class="token punctuation">;</span>
<span class="token property">border-left-width</span><span class="token punctuation">:</span>22px<span class="token punctuation">;</span>
<span class="token property">border-width</span><span class="token punctuation">:</span>5px <span class="token punctuation">;</span>
<span class="token property">border-width</span><span class="token punctuation">:</span>20px 2px<span class="token punctuation">;</span>
<span class="token property">border-width</span><span class="token punctuation">:</span>5px 1px 6px<span class="token punctuation">;</span>
<span class="token property">border-width</span><span class="token punctuation">:</span>1px 3px 5px 2px<span class="token punctuation">;</span>
</code></pre> </li></ul>
<p><code>边框样式 border-style</code></p>
<ul><li> <p>none</p> </li><li> <p>hidden</p> </li><li> <p>dotted</p> </li><li> <p>dashed</p> </li><li> <p>solid</p> </li><li> <p>double</p> <pre><code class="prism language-css"><span class="token property">border-top-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span>
<span class="token property">border-right-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span>
<span class="token property">border-bottom-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span>
<span class="token property">border-left-style</span><span class="token punctuation">:</span>solid<span class="token punctuation">;</span>
<span class="token property">border-style</span><span class="token punctuation">:</span>solid <span class="token punctuation">;</span>
<span class="token property">border-style</span><span class="token punctuation">:</span>solid dotted<span class="token punctuation">;</span>
<span class="token property">border-style</span><span class="token punctuation">:</span>solid dotted dashed<span class="token punctuation">;</span>
<span class="token property">border-style</span><span class="token punctuation">:</span>solid dotted dashed double<span class="token punctuation">;</span>
</code></pre> </li></ul>
<p><code>border简写</code><br> 同时设置边框的颜色、粗细和样式</p>
<pre><code class="prism language-css"><span class="token property">border</span><span class="token punctuation">:</span>1px solid #3a6587<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 1px dashed red<span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/8826810f999f44e69a39f715bfde223e.png"></p>
<h3>3.3、内外边距</h3>
<p><code>外边距 margin</code></p>
<ul><li>margin-top</li><li>margin-right</li><li>margin-bottom</li><li>margin-left</li></ul>
<pre><code class="prism language-css"><span class="token property">margin-top</span><span class="token punctuation">:</span> 1 px
<span class="token property">margin-right</span> <span class="token punctuation">:</span> 2 px
<span class="token property">margin-bottom</span> <span class="token punctuation">:</span> 2 px
<span class="token property">margin-left</span> <span class="token punctuation">:</span> 1 px
<span class="token property">margin</span> <span class="token punctuation">:</span>3px 5px 7px 4px<span class="token punctuation">;</span>
<span class="token property">margin</span> <span class="token punctuation">:</span>3px 5px<span class="token punctuation">;</span>
<span class="token property">margin</span> <span class="token punctuation">:</span>3px 5px 7px<span class="token punctuation">;</span>
<span class="token property">margin</span> <span class="token punctuation">:</span>8px<span class="token punctuation">;</span>
</code></pre>
<p><code>外边距的妙用：网页居中对齐</code></p>
<pre><code class="prism language-css"><span class="token property">margin</span><span class="token punctuation">:</span>0px auto<span class="token punctuation">;</span>
</code></pre>
<p><strong>网页居中对齐的必要条件</strong></p>
<ul><li>块元素</li><li>固定宽度</li></ul>
<p><img src="https://img-blog.csdnimg.cn/058a025d41fb4cf8a226159674d9cd52.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16"><br> <code>内边距 padding</code></p>
<ul><li>padding-left</li><li>padding-right</li><li>padding-top</li><li>padding-bottom</li></ul>
<pre><code class="prism language-css"><span class="token property">padding-left</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
<span class="token property">padding-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">padding-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span>8px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>20px 5px 8px 10px <span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>10px 5px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>30px 8px 10px <span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
</code></pre>
<h3>3.4、盒子型模尺寸</h3>
<p><img src="https://img-blog.csdnimg.cn/524ae181d1084a7992550f3b6747bdf1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <code>box-sizing</code></p>
<p><img src="https://img-blog.csdnimg.cn/c5281410b3bd45d192999181fb1f0474.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>box-sizing<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">div</span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 1px solid #000000<span class="token punctuation">;</span>
<span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token comment">/*box-sizing: content-box; /!* 默认值*!/*/</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<h3>3.5、圆角边框</h3>
<pre><code class="prism language-css"><span class="token property">border-radius</span><span class="token punctuation">:</span> 20px 10px 50px 30px<span class="token punctuation">;</span>
</code></pre>
<p><strong>四个属性值按顺时针排列</strong></p>
<p><img src="https://img-blog.csdnimg.cn/f1110e8c0aa54be9a2a85f959905f6dc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16"></p>
<p><code>border-radius制作特殊图形：圆形</code></p>
<p>利用border-radius属性制作圆形的两个要点</p>
<ul><li>元素的宽度和高度必须相同</li><li>圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%</li></ul>
<pre><code class="prism language-css"><span class="token selector">div</span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 4px solid red<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>border-radius制作圆形<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">div</span><span class="token punctuation">{</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
                <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
                <span class="token property">border</span><span class="token punctuation">:</span> 4px solid red<span class="token punctuation">;</span>
                <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><code>使用border-radius制作特殊图形：半圆形</code></p>
<p>利用border-radius属性制作半圆形的两个要点</p>
<ul><li>制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值</li><li>制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值<br> <img src="https://img-blog.csdnimg.cn/05b0606a33e748de88aac167f1b7c15f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_17,color_FFFFFF,t_70,g_se,x_16"></li></ul>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>border-radius制作半圆形<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
                <span class="token selector">div</span><span class="token punctuation">{</span>
                        <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
                        <span class="token property">margin</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
                <span class="token selector">div:nth-of-type(1)</span><span class="token punctuation">{</span>
                        <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
                        <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                        <span class="token property">border-radius</span><span class="token punctuation">:</span> 50px 50px 0 0<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
                <span class="token selector">div:nth-of-type(2)</span><span class="token punctuation">{</span>
                        <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
                        <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                        <span class="token property">border-radius</span><span class="token punctuation">:</span>0 0 50px 50px<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
                <span class="token selector">div:nth-of-type(3)</span><span class="token punctuation">{</span>
                        <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                        <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
                        <span class="token property">border-radius</span><span class="token punctuation">:</span>0 50px 50px 0<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
                <span class="token selector">div:nth-of-type(4)</span><span class="token punctuation">{</span>
                        <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                        <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
                        <span class="token property">border-radius</span><span class="token punctuation">:</span> 50px 0 0 50px<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><code>使用border-radius制作特殊图形：扇形</code></p>
<p>利用border-radius属性制作扇形遵循“三同，一不同”原则</p>
<ul><li>“三同”是元素宽度、高度、圆角半径相同</li><li>“一不同”是圆角取值位置不同</li></ul>
<p><img src="https://img-blog.csdnimg.cn/e511031164344e6ba7beb7672d4cf718.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_17,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>border-radius制作扇形<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">div</span><span class="token punctuation">{</span>
                <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
                <span class="token property">margin</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector">div:nth-of-type(1)</span><span class="token punctuation">{</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                <span class="token property">border-radius</span><span class="token punctuation">:</span> 50px 0 0 0<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector">div:nth-of-type(2)</span><span class="token punctuation">{</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                <span class="token property">border-radius</span><span class="token punctuation">:</span>0 50px 0 0<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector">div:nth-of-type(3)</span><span class="token punctuation">{</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                <span class="token property">border-radius</span><span class="token punctuation">:</span>0 0 50px 0<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector">div:nth-of-type(4)</span><span class="token punctuation">{</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
                <span class="token property">border-radius</span><span class="token punctuation">:</span> 0 0 0 50px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<h3>3.6、盒子阴影</h3>
<p><img src="https://img-blog.csdnimg.cn/0120fea6d5cf4e0e8abea0abc4feffed.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>box-shadow的使用<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
                <span class="token selector">div</span><span class="token punctuation">{</span>
                        <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
                        <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
                        <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
                        <span class="token property">border-radius</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
                        <span class="token property">margin</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
                        <span class="token comment">/*box-shadow: 20px 10px 10px #06c; /!*内阴影*!/*/</span>
                        <span class="token comment">/*box-shadow: 0px 0px 20px #06c; /!*只设置模糊半径的阴影
                        *!/*/</span>
                        <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 3px 3px 10px #06c<span class="token punctuation">;</span> <span class="token comment">/*内阴影*/</span>
                <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<h3>3.7、小结</h3>
<p><img src="https://img-blog.csdnimg.cn/2c1b39306b484e478a817f5f5a3f1cad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<h2>4、浮动</h2>
<p><strong>本章目标：</strong></p>
<ul><li>会使用display属性排版网页元素</li><li>会使用float属性排版网页元素</li><li>会使用float属性创建横向多列布局</li><li>会使用四种防止父级边框塌陷的清除浮动的方法</li></ul>
<h3>4.1、标准文档流</h3>
<p>标准文档流：指元素根据块元素或行内元素的特性按<strong>从上到下，从左到右</strong>的方式自然排列。这也是元素默认的排列方式</p>
<p><strong>标准文档流组成</strong></p>
<ul><li> <p>块级元素（block）</p> <pre><code class="prism language-css">&lt;h1&gt;…&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、列表
</code></pre> </li><li> <p>内联元素（inline）</p> <pre><code class="prism language-css">&lt;span&gt;、&lt;a&gt;、&lt;img/&gt;、&lt;strong&gt;...
</code></pre> </li></ul>
<p>内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立</p>
<h3>4.2、display</h3>
<p><code>display属性</code><br> <img src="https://img-blog.csdnimg.cn/58da264acac44e449d239bdd8f1ebce7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-css"><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/fbee63ebe2414e93b24f1bd4fd54abf3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-css"><span class="token property">display</span><span class="token punctuation">:</span>inline<span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/ed09f1c33cc14705811f65bab63fa2bc.png"></p>
<pre><code class="prism language-css"><span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/134507710e6141e7b6f162aa581125ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-css"><span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/2a6c0f2a3caf4646a8bf29ac249d8e40.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<p><code>display特性</code></p>
<ul><li>块级元素与行级元素的转变（block、inline）</li><li>控制块元素排到一行（inline-block）</li><li>控制元素的显示和隐藏（none）</li></ul>
<p><strong>【学员操作—制作QQ会员页面导航】</strong></p>
<ul><li>导航背景颜色为黑色半透明效果</li><li>鼠标移入“功能特权”等导航信息时文字颜色变为蓝色，无下划线</li><li>“登录”部分信息使用超链接实现，添加圆角边框，鼠标移入字体颜色加深，添加背景颜色为黄色</li></ul>
<p><img src="https://img-blog.csdnimg.cn/edf9633150de457e85c917c23faf58f3.png"><br> <strong>块元素排在一行的方法</strong><br> 可以使用什么属性使块元素排在一行？</p>
<ul><li>inline-block</li><li>float</li></ul>
<p>刚刚学过的inline-block；然后介绍还有一种方式可以实现让块元素排在一行。引出浮动。</p>
<h3>4.3、浮动</h3>
<p><code>float属性</code></p>
<p><img src="https://img-blog.csdnimg.cn/bd6049cb7bfa4bb48af6f50bc294f88a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>father<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer01<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>日用品<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer02<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图书<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer03<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-3.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>鞋子<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer04<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>浮动的盒子……<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><code>左浮动</code></p>
<pre><code class="prism language-css"><span class="token selector">.layer01</span> <span class="token punctuation">{</span>
        <span class="token property">border</span><span class="token punctuation">:</span>1px #F00 dashed<span class="token punctuation">;</span>
        <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.layer02</span> <span class="token punctuation">{</span>
        <span class="token property">border</span><span class="token punctuation">:</span>1px #00F dashed<span class="token punctuation">;</span>
        <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.layer03</span> <span class="token punctuation">{</span>
        <span class="token property">border</span><span class="token punctuation">:</span>1px #060 dashed<span class="token punctuation">;</span>
        <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><code>右浮动</code></p>
<pre><code class="prism language-css"><span class="token selector">.layer01</span> <span class="token punctuation">{</span>
        <span class="token property">border</span><span class="token punctuation">:</span>1px #F00 dashed<span class="token punctuation">;</span>
        <span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.layer02</span> <span class="token punctuation">{</span>
        <span class="token property">border</span><span class="token punctuation">:</span>1px #00F dashed<span class="token punctuation">;</span>
        <span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3>4.4、边框塌陷</h3>
<p>layer04设置宽度和右浮动后，为什么边框塌陷了？怎么解决？</p>
<ul><li>浮动元素脱离标准文档流</li><li>清除浮动</li></ul>
<p><code>clear属性</code></p>
<p><img src="https://img-blog.csdnimg.cn/e04339b2840544759c89bccda39485dd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-css"><span class="token selector">.layer04</span> <span class="token punctuation">{</span>
        <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span> #清除两侧浮动
<span class="token punctuation">}</span>
<span class="token selector">.layer04</span> <span class="token punctuation">{</span>
        <span class="token property">clear</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> #清除左侧浮动
<span class="token punctuation">}</span>
<span class="token selector">.layer04</span> <span class="token punctuation">{</span>
        <span class="token property">clear</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span> #清除右侧浮动
<span class="token punctuation">}</span>
</code></pre>
<p>未清除浮动：<br> <img src="https://img-blog.csdnimg.cn/5eaedd5ceb08482f9b05fc9471abec62.png"><br> 清除浮动：<br> <img src="https://img-blog.csdnimg.cn/ed74947f54894de584c59a028572b92f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16"></p>
<p><code>解决父级边框塌陷的方法</code></p>
<p>clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？</p>
<ul><li> <p>浮动元素后面加空div</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>father<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer01<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>日用品<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer02<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图书<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer03<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-3.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>鞋子<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer04<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>浮动的盒子……<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clear<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
.clear{ clear: both; margin: 0; padding: 0;}
</code></pre> </li><li> <p>设置父元素的高度</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>father<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer01<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>日用品<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer02<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图书<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer03<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-3.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>鞋子<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer04<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>浮动的盒子……<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
#father {height: 400px; border:1px #000 solid; }
</code></pre> </li><li> <p>父级添加overflow属性（溢出处理)<br> <img src="https://img-blog.csdnimg.cn/b07cca7081cd4f828de3945c59f1f2a5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16">hidden属性值，这个值在网页中经常使用，通常与&lt; div&gt;宽度结合使用设置&lt; div&gt;自动扩展高度，或者隐藏超出的内容</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>father<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer01<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>日用品<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer02<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图书<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer03<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-3.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>鞋子<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer04<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>浮动的盒子……<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
#father {overflow: hidden;border:1px #000 solid; }
</code></pre> </li><li> <p>父级添加伪类after</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>father<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clear<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer01<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>日用品<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer02<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图书<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer03<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/photo-3.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>鞋子<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layer04<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>浮动的盒子……<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
.clear:after{
        content: ''; /*在clear类后面添加内容为空*/
        display: block; /*把添加的内容转化为块元素*/
        clear: both; /*清除这个元素两边的浮动*/
}
</code></pre> </li></ul>
<p><code>小结</code></p>
<p><strong>【清除浮动，防止父级边框塌陷的四种方法】</strong></p>
<ul><li> <p>浮动元素后面加空div</p>
<ul><li>简单，空div会造成HTML代码冗余</li></ul> </li><li> <p>设置父元素的高度</p>
<ul><li>简单，元素固定高会降低扩展性</li></ul> </li><li> <p>父级添加overflow属性</p>
<ul><li>简单，下拉列表框的场景不能用</li></ul> </li><li> <p>父级添加伪类after</p>
<ul><li>写法比上面稍微复杂一点，但是没有副作用，推荐使用</li></ul> </li></ul>
<p>【学员操作】</p>
<p><img src="https://img-blog.csdnimg.cn/e3f8ac8215e441139757fe04f2c4da07.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<p>注：这部分有点难懂，大家最好敲一遍。😀</p>
<h3>4.5、inline-block和float区别</h3>
<ul><li>display:inline-block
<ul><li>可以让元素排在一行，并且支持宽度和高度，代码实现起来方便</li><li>位置方向不可控制，会解析空格</li><li>IE 6、IE 7上不支持</li></ul> </li><li>float
<ul><li>可以让元素排在一行并且支持宽度和高度，可以决定排列方向</li><li>float 浮动以后元素脱离<strong>文档流</strong>，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式</li></ul> </li></ul>
<h3>4.6、小结</h3>
<p><img src="https://img-blog.csdnimg.cn/ab5895e73b2240d08a94543824a2b4b5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<h2>5、定位</h2>
<p><strong>本章目标：</strong></p>
<ul><li>会使用position定位网页元素</li><li>会使用z-index属性调整定位元素的堆叠次序</li></ul>
<h3>5.1、定位在网页中的应用</h3>
<p><img src="https://img-blog.csdnimg.cn/5b76683090ff4073899ac43a2072998a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><img src="https://img-blog.csdnimg.cn/3e73a41b54374a4984641fec511e946e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <img src="https://img-blog.csdnimg.cn/fb54b7d513d64a618ddc6781d3e372a3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<h3>5.2、相对定位</h3>
<p><strong>position属性</strong><br> <code>static：默认值，没有定位</code><br> <img src="https://img-blog.csdnimg.cn/8e62e0cc0b394526a83b9972af978592.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_18,color_FFFFFF,t_70,g_se,x_16"><br> <code>relative：相对定位</code><br> 相对<strong>自身原来位置</strong>进行偏移，偏移设置：top、left、right、bottom</p>
<p><img src="https://img-blog.csdnimg.cn/f6ab94d5117a46938c8c94a720a99702.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><br> <strong>相对定位元素的规律</strong></p>
<ul><li>设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置</li><li>设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响</li><li>设置相对定位的盒子原来的位置会被保留下来</li></ul>
<p><strong>设置第二个盒子右浮动，再设置第一、第二盒子相对定位</strong><br> <img src="https://img-blog.csdnimg.cn/66250867c56b4243b5b8df46808dcca9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<pre><code class="prism language-css"><span class="token selector">#first</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span>#FC9<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span>1px #B55A00 dashed<span class="token punctuation">;</span>
        <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
        <span class="token property">right</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span>
        <span class="token property">bottom</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#second</span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span>#CCF<span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span>1px #0000A8 dashed<span class="token punctuation">;</span>
        <span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>
        <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span>-20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/8e6b250c34cf4bfe87abbcf359927200.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <strong>学员操作：</strong></p>
<ul><li>使用和超链接布局页面</li><li>每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标指针移上去时变为蓝色</li><li>使用相对定位改变每个超链接的位置<br> <img src="https://img-blog.csdnimg.cn/3cfa8679ed6142b1ad394750a5f46167.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></li></ul>
<h3>5.3、绝对定位</h3>
<p>absolute属性值：偏移设置： left、right、top、bottom</p>
<p>绝对定位：</p>
<ul><li>使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移</li><li>如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位</li><li>绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响</li><li><strong>元素位置发生偏移后，它原来的位置不会被保留下来</strong><br> <img src="https://img-blog.csdnimg.cn/49546122daf64552bdd2841edcd19307.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></li></ul>
<blockquote>
<p>设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。<br> 在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况</p>
</blockquote>
<h3>5.4、固定定位</h3>
<p><strong>fixed属性值</strong><br> 偏移设置： left、right、top、bottom<br> <strong>类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口</strong></p>
<p><img src="https://img-blog.csdnimg.cn/6276ca0b72e0436da222da8e40c50374.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><br> <img src="https://img-blog.csdnimg.cn/c23b3bb944cf4415a4da54b79b5c36c9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<h3>5.5、定位小结</h3>
<p><strong>相对定位</strong></p>
<ul><li>相对定位的特性
<ul><li>相对于自己的初始位置来定位</li><li>元素位置发生偏移后，它原来的位置会被保留下来</li><li>层级提高，可以把标准文档流中的元素及浮动元素盖在下边</li></ul> </li><li>相对定位的使用场景
<ul><li>相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量</li></ul> </li></ul>
<p><strong>绝对定位</strong></p>
<ul><li>绝对定位的特性
<ul><li>绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位</li><li>元素位置发生偏移后，原来的位置不会被保留</li><li>层级提高，可以把标准文档流中的元素及浮动元素盖在下边</li><li>设置绝对定位的元素脱离文档流</li></ul> </li><li>绝对定位的使用场景<br> 一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景</li></ul>
<p><strong>固定定位</strong></p>
<ul><li>固定定位的特性<br> - 相对浏览器窗口来定位<br> - 偏移量不会随滚动条的移动而移动</li><li>固定定位的使用场景<br> 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等</li></ul>
<h3>5.6、z-index属性</h3>
<ul><li>调整元素定位时重叠层的上下位置
<ul><li>z-index属性值：整数，默认值为0</li><li>设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系</li><li>z-index值大的层位于其值小的层上方<br> <img src="https://img-blog.csdnimg.cn/ab837e35c49842d9a32acc6a07eb946b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></li></ul> </li></ul>
<p><strong>网页元素透明度</strong><br> <img src="https://img-blog.csdnimg.cn/7898a473df34491b9a1fd02f674fd20a.png"></p>
<p><code>小结</code></p>
<ul><li>网页中的元素都含有两个堆叠层级</li><li>未设置绝对定位时所处的环境，z-index是0</li><li>设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定</li><li>改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可</li></ul>
<h3>5.7、小结</h3>
<p><img src="https://img-blog.csdnimg.cn/3a3e3f7385c249f08c76b15f5224eae9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p>
<h2>6、制作网页动画(了解)</h2>
<p><strong>本章目标</strong></p>
<ul><li>会使用transform 2D变形设置网页元素样式</li><li>会使用transition制作过渡动画</li><li>会使用animation制作网页动画</li></ul>
<p><strong>如何在网页中实现动画效果？</strong></p>
<ol><li>动态图片</li><li>Flash</li><li>JavaScript</li></ol>
<p>Flash需要插件支持，文件体积大<br> 从这次课开始学习使用CSS代码来完成动画：存在兼容性问题</p>
<ul><li>CSS3变形</li><li>CSS3过渡</li><li>CSS3动画</li></ul>
<h3>6.1、CSS变形</h3>
<ul><li>CSS3变形是一些效果的集合
<ul><li>如平移、旋转、缩放、倾斜效果</li><li>简言之，平移就是一个变形，旋转就是一个变形。。。</li></ul> </li><li>每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化<br> <img src="https://img-blog.csdnimg.cn/44f59200e99e4fbc8918afabe07f9c6a.png"></li></ul>
<p><strong>变形函数</strong></p>
<ul><li>translate()：平移函数，基于X、Y坐标重新定位元素的位置</li><li>scale()：缩放函数，可以使任意元素对象尺寸发生变化</li><li>rotate()：旋转函数，取值是一个度数值</li><li>skew()：倾斜函数，取值是一个度数值</li></ul>
<p><code>2D位移</code><br> <img src="https://img-blog.csdnimg.cn/fc5d30e986dd41f5a892b59a891551a2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><img src="https://img-blog.csdnimg.cn/484711cac18e4b118d02bc9dd863b14e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><br> <strong>一个方向上的偏移</strong></p>
<p><img src="https://img-blog.csdnimg.cn/069b75406a5c4231989429876398d73d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"><br> <code>2D缩放</code></p>
<p><img src="https://img-blog.csdnimg.cn/a17db95e51aa40ff8205eff8257d8f2e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<p>scale()函数能够用来缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例，默认值为1，0～0.99的任意值都可以使元素缩小，而任何大于1的值都能让元素放大。</p>
<p>scale()函数和translate()函数的语法非常相似，可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等，例如，scale（1，1）元素不会有任何变化，而scale（2，2）会让元素放大2倍</p>
<p><code>2D倾斜</code></p>
<p><strong>可以仅设置沿着X轴或Y轴方向倾斜</strong></p>
<ul><li>skewX（ax）：表示只设置X轴的倾斜</li><li>skewY（ay）：表示只设置Y轴的倾斜<br> <img src="https://img-blog.csdnimg.cn/05d385dedb014a38a83fc2ca90121248.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></li></ul>
<p><code>2D旋转</code></p>
<pre><code class="prism language-css"> <span class="token function">rotate</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>参数a单位使用deg表示</li><li>参数a取正值时元素相对原来中心顺时针旋转<br> <img src="https://img-blog.csdnimg.cn/cfcfae7632eb48e3aa4910ebd02429c8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_17,color_FFFFFF,t_70,g_se,x_16"></li></ul>
<p><strong>小结：</strong><br> rotate( )函数只是旋转，而不会改变元素的形状<br> skew( )函数是倾斜，元素不会旋转，会改变元素的形状</p>
<h3>6.2、CSS过渡</h3>
<p>transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等<br> CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡</p>
<p><img src="https://img-blog.csdnimg.cn/f385ae6191b0492bb6b0772343f56992.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"><br> <code>过渡属性的使用</code></p>
<ul><li>过渡属性（ transition-property ）
<ul><li>定义转换动画的CSS属性名称<br> -IDENT：指定的CSS属性（width、height、background-color属性等）<br> - all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all</li></ul> </li></ul>
<blockquote>
<p>设置过渡中背景颜色，让学员观察到div的背景颜色的变化。</p>
</blockquote>
<ul><li>过渡所需的时间（ transition-duration ）
<ul><li>定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）</li></ul> </li></ul>
<blockquote>
<p>设置过渡第二个参数，分别设置时间长短，让学员明显观察到这个参数的作用及使用场景</p>
</blockquote>
<ul><li>过渡动画函数（ transition-timing-function ）
<ul><li>指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
    <ul><li>ease：速度由快到慢（默认值）</li><li>linear：速度恒速（匀速运动）</li><li>ease-in：速度越来越快（渐显效果）</li><li>ease-out：速度越来越慢（渐隐效果）</li><li>ease-in-out：速度先加速再减速（渐显渐隐效果）</li></ul> </li></ul> </li></ul>
<blockquote>
<p>演示大概2-3个动画函数的值，让学员理解第三个参数（动画函数）的作用及使用场景</p>
</blockquote>
<ul><li>过渡延迟时间（ transition-delay ）
<ul><li>指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
    <ul><li>正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发</li><li>负值：元素过渡效果会从该时间点开始显示，之前的动作被截断</li><li>0：默认值，元素过渡效果立即执行</li></ul> </li></ul> </li></ul>
<blockquote>
<p>设置第四个参数，过渡延迟时间，让学员能明白过这个参数的作用及使用场景</p>
</blockquote>
<p><code>过渡的触发机制</code></p>
<ul><li>伪类触发
<ul><li>：hover</li><li>：active</li><li>：focus</li><li>：checked</li></ul> </li><li>媒体查询：通过@media属性判断设备的尺寸，方向等</li><li>JavaScript触发：用JavaScript脚本触发</li></ul>
<p>**注意：**媒体查询和JavaScript的方法在后面课程会详细讲解，现在只需要大家了解即可。重点需要掌握伪类触发的方法，这种方法也是实际开发中用的比较多的一种</p>
<p><code>使用transition实现过渡动画的使用步骤</code></p>
<ul><li>在默认样式中声明元素的初始状态样式</li><li>声明过渡元素最终状态样式，如悬浮状态</li><li>在默认样式中通过添加过渡函数，添加一些不同的样式</li></ul>
<h3>6.3、CSS动画</h3>
<ul><li>animation动画简介
<ul><li>animation实现动画主要由两个部分组成
    <ul><li>通过类似Flash动画的关键帧来声明一个动画</li><li>在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果</li></ul> </li></ul> </li></ul>
<p><code>CSS3动画的使用过程</code></p>
<ul><li> <p>设置关键帧<br> <img src="https://img-blog.csdnimg.cn/ebc760718423475f95d07b984ae761c7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p> </li><li> <p>@keyframes的浏览器兼容性<br> <img src="https://img-blog.csdnimg.cn/5f2f2f6bbe5f4c2ca2dae5b68f859cbc.png"><br> 写兼容的时候浏览器前缀是放在@keyframes中间<br> 例如：@-webkit-keyframes、@-moz- keyframes</p> </li><li> <p>调用关键帧<br> <img src="https://img-blog.csdnimg.cn/2e360b54436b49aaa7c2b929c21517b2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_19,color_FFFFFF,t_70,g_se,x_16"></p> </li><li> <p>动画的播放次数（animation-iteration-count）</p>
<ul><li>值通常为整数，默认值为1</li><li>特殊值infinite，表示动画无限次播放</li></ul> </li><li> <p>动画的播放方向（animation-direction）</p>
<ul><li>normal，动画每次都是循环向前播放</li><li>alternate，动画播放为偶数次则向前播放</li></ul> </li><li> <p>动画的播放状态（animation-play-state）</p>
<ul><li>running将暂停的动画重新播放</li></ul>
<ul><li>paused将正在播放的元素动画停下来</li></ul> </li><li> <p>动画发生的操作（animation-fill-mode）</p>
<ul><li>forwards表示动画在结束后继续应用最后关键帧的位置</li><li>backwards表示会在向元素应用动画样式时迅速应用动画的初始帧</li><li>both表示元素动画同时具有forwards和backwards的效果</li></ul> </li></ul>
<h3>6.4、总结</h3>
<p><img src="https://img-blog.csdnimg.cn/34a3b3684e5e472f987707666468972f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq655Sf5LiN6L-H5LqOX-i6ug==,size_20,color_FFFFFF,t_70,g_se,x_16"></p>
<p>参考视频：<br> https://www.bilibili.com/video/BV1YJ411a7dy?from=search&amp;seid=5442416604109235919&amp;spm_id_from=333.337.0.0</p><br><br>
来源：https://www.cnblogs.com/songwz/p/18080746

查看完整版本: CSS学习