CSS学习笔记2-CSS的继承_层叠_类型和CSS盒子模型
<h1 id="1-css属性的继承">1 CSS属性的继承</h1><h2 id="11-css的某些属性具有继承性inherited">1.1 CSS的某些属性具有继承性(Inherited):</h2>
<p>如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;<br>
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);</p>
<h2 id="12-如何知道一个属性是否具有继承性呢">1.2 如何知道一个属性是否具有继承性呢?</h2>
<p>常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;<br>
注意：继承过来的是计算值, 而不是设置值<br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703150237513-157897014.png" alt="img" loading="lazy"></p>
<h1 id="2-css属性的层叠">2 CSS属性的层叠</h1>
<h2 id="21-css的翻译是层叠样式表-什么是层叠呢">2.1 CSS的翻译是层叠样式表, 什么是层叠呢?</h2>
<p>对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;<br>
那么属性会被一层层覆盖上去;<br>
但是最终只有一个会生效;</p>
<h2 id="22-那么多个样式属性覆盖上去-哪一个会生效呢">2.2 那么多个样式属性覆盖上去, 哪一个会生效呢?</h2>
<p>判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;<br>
判断二: 先后顺序, 权重相同时, 后面设置的生效;</p>
<h2 id="23-选择器的权重">2.3 选择器的权重</h2>
<p>按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）<br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703151756452-1063917938.png" alt="img" loading="lazy"></p>
<h1 id="3-html元素的类型">3 HTML元素的类型</h1>
<p>为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:<br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703152858931-1427427878.png" alt="img" loading="lazy"></p>
<h2 id="31-通过css修改元素类型display属性">3.1 通过CSS修改元素类型（display属性)</h2>
<p>CSS中有个display属性，能修改元素的显示类型，有4个常用值<br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703153305894-154743684.png" alt="img" loading="lazy"><br>
事实上display还有其他的值, 比如flex, 后续会专门学习;<br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703153900768-908376766.png" alt="img" loading="lazy"></p>
<h2 id="32-注意">3.2 注意：</h2>
<p>行内非替换元素不可以设置宽高，如：span，a<br>
行内替换元素可以设置宽高，如：img，input</p>
<h2 id="33-编写html时的注意事项">3.3 编写HTML时的注意事项</h2>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703154138661-467411144.png" alt="img" loading="lazy"><br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703154221935-1151237729.png" alt="img" loading="lazy"></p>
<h2 id="34-元素隐藏方法">3.4 元素隐藏方法</h2>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703194751082-138778450.png" alt="img" loading="lazy"></p>
<h1 id="4-css盒子模型">4 CSS盒子模型</h1>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703200605708-366684861.png" alt="img" loading="lazy"></p>
<h2 id="41-内容---width和height">4.1 内容 - width和height</h2>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703200752005-1441490620.png" alt="img" loading="lazy"><br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703201825944-354386359.png" alt="img" loading="lazy"></p>
<h2 id="42-内边距---padding">4.2 内边距 - padding</h2>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703201945566-1287236910.png" alt="img" loading="lazy"><br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703202017499-2068531907.png" alt="img" loading="lazy"></p>
<h2 id="43-边框---border">4.3 边框 - border</h2>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703202133862-1447302168.png" alt="img" loading="lazy"><br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703202254664-695837282.png" alt="img" loading="lazy"></p>
<h2 id="44-外边距---margin">4.4 外边距 - margin</h2>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703202617189-376105628.png" alt="img" loading="lazy"></p>
<h3 id="441-上下margin的传递">4.4.1 上下margin的传递</h3>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703202831788-818977168.png" alt="img" loading="lazy"><br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703203801796-1414077226.png" alt="img" loading="lazy"><br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703204604835-766876463.png" alt="img" loading="lazy"></p>
<h3 id="442-上下margin的折叠">4.4.2 上下margin的折叠</h3>
<p>垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）<br>
水平方向上的margin（margin-left、margin-right）永远不会collapse<br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703204941710-927855383.png" alt="img" loading="lazy"></p>
<h2 id="45-外轮廓---outline">4.5 外轮廓 - outline</h2>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703213352434-355712917.png" alt="img" loading="lazy"><br>
<img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703213952417-1980907923.png" alt="img" loading="lazy"></p>
<h2 id="46-盒子阴影---box-shadow">4.6 盒子阴影 - box-shadow</h2>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703214354265-1801952736.png" alt="img" loading="lazy"><br>
在线制作盒子阴影：https://html-css-js.com/css/generator/box-shadow/</p>
<h2 id="47-文字阴影---text-shadow">4.7 文字阴影 - text-shadow</h2>
<p><img src="https://img2023.cnblogs.com/blog/1074292/202307/1074292-20230703215850224-95782586.png" alt="img" loading="lazy"><br>
在线制作文字阴影： https://html-css-js.com/css/generator/text-shadow/</p><br><br>
来源：https://www.cnblogs.com/falling-maple/p/17522906.html
頁:
[1]