css几个概念
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文将讲述 CSS 中最核心的几个概念，<span style="color: black;">包含</span>：盒模型、position、float等。这些是 CSS 的<span style="color: black;">基本</span>，<span style="color: black;">亦</span>是最常用的几个属性，它们之间看似独立却又相辅相成。为了<span style="color: black;">把握</span>它们，有必要写出来探讨一下，如有错误欢迎指正。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">元素类型</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 的元素<span style="color: black;">能够</span>分为两种：</p>块级元素（block level element）内联元素（inline element 有的人<span style="color: black;">亦</span>叫它行内元素）<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">两者的区别在于以下三点：</p>块级元素会<span style="color: black;">独霸</span>一行（即<span style="color: black;">没</span>法与其他元素<span style="color: black;">表示</span>在同一行内，除非你显式修改元素的 display 属性），而内联元素则都会在一行内<span style="color: black;">表示</span>。块级元素<span style="color: black;">能够</span>设置 width、height 属性，而内联元素设置<span style="color: black;">没</span>效。块级元素的 width 默认为 100%，而内联元素则是<span style="color: black;">按照</span>其<span style="color: black;">自己</span>的内容或子元素来决定其宽度。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最<span style="color: black;">平常</span>块级元素应该是 <div> 吧，内联元素有 <span> <a> <img> 等等，完整的元素列表<span style="color: black;">能够</span>谷歌一下。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">详细</span><span style="color: black;">来讲</span>一下吧,</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.example {</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> width: 100px;</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> height: 100px;</p>}<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>为 <div> 设置上面的样式，是有效果的，<span style="color: black;">由于</span>其是块级元素，而对 <span> 设置上面的样式是没用的。<span style="color: black;">想要</span>让 <span> <span style="color: black;">亦</span><span style="color: black;">能够</span>改变宽高，<span style="color: black;">能够</span><span style="color: black;">经过</span>设置 display: block; 来达到效果。当 display 的值设为 block 时，元素将以块级形式呈现；当 display 值设为 inline 时，元素将以内联形式呈现。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">若既想让元素在行内<span style="color: black;">表示</span>，又能设置宽高，<span style="color: black;">能够</span>设置：</p>display: inline-block;<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">inline-block 在我看来<span style="color: black;">便是</span>让元素对外呈内联元素，<span style="color: black;">能够</span>和其他元素共处与一行内；对内则让元素呈块级元素，可改变其宽高。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 代码是<span style="color: black;">次序</span>执行的，一份<span style="color: black;">没</span>任何 CSS 样式的 HTML 代码<span style="color: black;">最后</span>呈现出的页面是<span style="color: black;">按照</span>元素<span style="color: black;">显现</span>的<span style="color: black;">次序</span>和类型<span style="color: black;">摆列</span>的。块级元素就从上到下<span style="color: black;">摆列</span>，遇到内联元素则从左到右<span style="color: black;">摆列</span>。这种<span style="color: black;">没</span>样式的<span style="color: black;">状况</span>下，元素的分布叫普通流，元素<span style="color: black;">显现</span>的位置应该叫正常位置（这是我瞎起的），<span style="color: black;">同期</span>所有元素会在页面上占据一个空间，空间<span style="color: black;">体积</span>由其盒模型决定。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">盒模型</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">页面上<span style="color: black;">表示</span>的<span style="color: black;">每一个</span>元素（包括内联元素）都<span style="color: black;">能够</span>看作一个盒子，即盒模型( box model )。请看 Chrome DevTools 里的截图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-8eae2ad0e4d493733ee007df88c3fc3f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">能够</span>显而易见的看出盒模型由 4 部分<span style="color: black;">构成</span>。从内到外分别是：</p>content -> padding -> border -> margin<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">按理<span style="color: black;">来讲</span>一个元素的宽度（高度以此类推）应该<span style="color: black;">这般</span>计算：</p>总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">然则</span><span style="color: black;">区别</span>浏览器（你<span style="color: black;">无</span>猜错，<span style="color: black;">便是</span>那个与众<span style="color: black;">区别</span>的浏览器）对宽度的诠释不<span style="color: black;">同样</span>。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度，其余都要额外算。于是你规定一个元素：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.example {</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> width: 200px;</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> padding: 10px;</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> border: 5px solid #000;</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> margin: 20px;</p>}<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">则他<span style="color: black;">最后</span>的宽度应为：</p>宽度 = width(200px) + padding(10p
哈哈、笑死我了、太搞笑了吧等。
页:
[1]