CSS – W3Schools 学习笔记 (1)
<h2>CSS Color</h2><p>Link to W3Schools</p>
<p>这里讲的是 color 的 value, 它可以用在许多属性上, 比如 background-color, color, border-color 等等</p>
<p>color 值有许多写法, RGB, HSL, HEX, ColorName </p>
<p>通过 VS Code 我们可以任意切换. 它们是等价的</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202204/641294-20220416232946090-639096250.gif"></p>
<p>开发中一般使用 HSL, 因为它比较容易理解和控制. </p>
<p>教程一般时候, ColorName, RGB, HEX 因为比如容易写.</p>
<p>想让颜色透明做法是加上 alpha channel</p>
<p>rgba(0, 0, 0, 0.5) 或者 hsla(0, 0%, 0%, 0.5)</p>
<p>CSS 4 还有一种写法 rgba(0 0 0 / 0.5) 用空格分隔, 用 slash 分割 alpha channel</p>
<p> <img src="https://img2022.cnblogs.com/blog/641294/202204/641294-20220416233451253-1160128075.png"></p>
<p> </p>
<p> </p>
<h2>CSS Backgrounds</h2>
<h3>Color</h3>
<p>Link to W3Schools</p>
<p>opacity 会让整个 div 包括里面的 text 变透明, 如果不希望这样的话, 可以通过 background-color: RGBA 来完成.</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">div </span>{<span style="color: rgba(255, 0, 0, 1)">
background-color</span>:<span style="color: rgba(0, 0, 255, 1)"> green</span>;<span style="color: rgba(255, 0, 0, 1)">
opacity</span>:<span style="color: rgba(0, 0, 255, 1)"> 0.3</span>;
}</pre>
</div>
<h3>Image Repeat & Position</h3>
<p>Link to W3Schools</p>
<p>默认是 repeat, x 和 y 都有. </p>
<p>repeat-x 只 repeat horizontal</p>
<p>repeat-y 只 repeat vertical</p>
<p>no-repeat 不要 repeat</p>
<p>默认 position 是 left top.</p>
<h3>Attachment</h3>
<p>Link to W3Schools</p>
<p>scroll 的时候要跟还是定在原位, fixed or scroll.</p>
<h3>Shorthand</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">body </span>{<span style="color: rgba(255, 0, 0, 1)">
background</span>:<span style="color: rgba(0, 0, 255, 1)"> #ffffff url("img_tree.png") no-repeat right top</span>;
}</pre>
</div>
<p>color, image, repeat, position.</p>
<p>最常见的就是 background: red; 取代 background-color:red</p>
<p> </p>
<h2>CSS Borders</h2>
<p>Link to W3Schools</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">p </span>{<span style="color: rgba(255, 0, 0, 1)">
border</span>:<span style="color: rgba(0, 0, 255, 1)"> 2px solid red</span>; <span style="color: rgba(255, 0, 0, 1)">
border-radius</span>:<span style="color: rgba(0, 0, 255, 1)"> 5px</span>;
}</pre>
</div>
<p>width, style (required), color, radius 是圆角</p>
<p>像上面写成一排叫 Shorthand Property, border 有 4 边, 也可以分开写每一个.</p>
<h3>Border + Transparent</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)"> div</span>{<span style="color: rgba(255, 0, 0, 1)">
border-width</span>:<span style="color: rgba(0, 0, 255, 1)"> 5px</span>;<span style="color: rgba(255, 0, 0, 1)">
border-color</span>:<span style="color: rgba(0, 0, 255, 1)"> red red transparent transparent</span>;<span style="color: rgba(255, 0, 0, 1)">
border-style</span>:<span style="color: rgba(0, 0, 255, 1)"> solid</span>;<span style="color: rgba(255, 0, 0, 1)">
width</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>;<span style="color: rgba(255, 0, 0, 1)">
height</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>;
}</pre>
</div>
<p>效果: (边角是斜的)</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211212133033807-1857598355.png"></p>
<p>于是它可以用来做 tooltip 的对话箭头.</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211212133120167-2124209197.png"></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">div</span>{<span style="color: rgba(255, 0, 0, 1)">
border-width</span>:<span style="color: rgba(0, 0, 255, 1)"> 5px</span>;<span style="color: rgba(255, 0, 0, 1)">
border-color</span>:<span style="color: rgba(0, 0, 255, 1)"> red transparent transparent transparent</span>;<span style="color: rgba(255, 0, 0, 1)">
border-style</span>:<span style="color: rgba(0, 0, 255, 1)"> solid</span>;<span style="color: rgba(255, 0, 0, 1)">
width</span>:<span style="color: rgba(0, 0, 255, 1)"> 1px</span>;
}</pre>
</div>
<p>效果:</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211212133227412-894139942.png"></p>
<p>border-width 越大, 整个箭头就越大.</p>
<p> </p>
<h2>CSS Margins</h2>
<p>Link to W3Schools</p>
<h3>支持的 value</h3>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211209235900557-1955540200.png"></p>
<h3>Auto 可以用来居中</h3>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211209235947993-1034794067.png"></p>
<p>传统写法 </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">margin: 0 auto</span></pre>
</div>
<p>现代写法</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">margin-inline: auto;</span></pre>
</div>
<h3>Collapse 崩溃</h3>
<p>当上下 margin 重叠时, 大的那一个会胜出, 最终只剩下 1 个 margin 高度. 左右则没有 collapse 的概念.</p>
<h3>Top vs Buttom</h3>
<p>参考: </p>
<p>CSS: Margin Top vs Bottom (A Trick You Should Know)</p>
<p>Css margin-top vs margin-bottom (stackoverflow)</p>
<p>大部分情况, 2 个都适用, 文章给出极端情况, top 会比较好, 因为 CSS selector 只能 match next element, prevent 不行, 所以遇到要 override 的话, margin-top 才可以做到.</p>
<p>另一个我自己的想法是, 动机是想分开 2 个 element, 那么一定是第 2 个出现后才需要, 所以让第 2 个有 margin top 比较合理. 要不然用 gap 做也会比较合理一些.</p>
<p> </p>
<h2>CSS Height and Width</h2>
<p>Link to W3Schools</p>
<p>% 是依据 containing block 而不是 parent element. 那 containing block 是哪一个呢. 去 MDN 看吧.</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210003127840-231787306.png"></p>
<p> </p>
<h2>CSS Outline</h2>
<p>Link to W3Schools</p>
<p>Outline 就是框线, 它和 border 有点像. 但 border 是画里面, 它是外面.</p>
<p>它不会把其它 element 弹开, 反而是会覆盖其它 element </p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210090908749-301142928.png"></p>
<p>Outline 不能针对性设置 top, right, buttom, left, 只能统一一起 set 同一个 pattern.</p>
<p>它有一个 border 没有的, 可以调 offset, 就是间隔一个距离后才开始画 outline.</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210091308947-314487087.png"></p>
<p> </p>
<h2>CSS Text</h2>
<p>Link to W3Schools</p>
<h3>Decoration</h3>
<p>overline, line-through, underline</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210123403351-112185720.png"></p>
<h3>Transformation</h3>
<p>uppercase, lowercase, capitalize (注: 并不是 title case 哦)</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210123619020-1254105633.png"></p>
<h3>Text Spacing</h3>
<p>text-indent</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">p </span>{<span style="color: rgba(255, 0, 0, 1)">
text-indent</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>;
}</pre>
</div>
<p>段落前面的空格</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210125100269-1990114621.png"></p>
<p>letter-spacing = 字母左右的间距</p>
<p>line-height = 字母上下的间距</p>
<p>word-spacing = 字 space 的距离</p>
<p>white-space, nowrap 不会因为 width 而往下掉</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">p </span>{<span style="color: rgba(255, 0, 0, 1)">
white-space</span>:<span style="color: rgba(0, 0, 255, 1)"> nowrap</span>;
}</pre>
</div>
<h3>Text Shadow</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">h1 </span>{<span style="color: rgba(255, 0, 0, 1)">
text-shadow</span>:<span style="color: rgba(0, 0, 255, 1)"> 2px 2px 5px red</span>;
}</pre>
</div>
<p>horizontal, vertical, shadow, color</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210130431583-1385248658.png"></p>
<p> </p>
<h2>CSS <span class="color_h1">Fonts</span></h2>
<p><span class="color_h1">Link to W3Schools</span></p>
<p>常见的 Serif, Sans-serif, Monospace, Cursive, Fantasy.</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210132144663-1703197959.png"></p>
<p>sans-serif 会比 serif 好读.</p>
<h3>font-family</h3>
<p>如果 font 超过一个字就要 quote 起来</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">.p1 </span>{<span style="color: rgba(255, 0, 0, 1)">
font-family</span>:<span style="color: rgba(0, 0, 255, 1)"> "Times New Roman", Times, serif</span>;
}</pre>
</div>
<h3>Fallback Fonts</h3>
<p>写多个就会 fallback 了</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">p </span>{<span style="color: rgba(255, 0, 0, 1)">
font-family</span>:<span style="color: rgba(0, 0, 255, 1)"> Tahoma, Verdana, sans-serif</span>;
}</pre>
</div>
<p>几乎肯定支持的 font 有:</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210132801463-1677110683.png"></p>
<h3>Font 特色</h3>
<p>Arial (sans-serif) default font in Google Docs</p>
<p>Verdana (sans-serif) 小字体也 readable</p>
<p>Helvetica (sans-serif) suitable for business</p>
<p>Tahoma (sans-serif) less space between the characters</p>
<p>Times New Roman (serif) most recognizable fonts in the world</p>
<p>Georgia (serif) good candidate for mobile-responsive design</p>
<p>Garamond (serif) timeless look and good readability</p>
<h3>Font Style</h3>
<p>font-style: normal, italic, oblique</p>
<p>italic 就是斜体.</p>
<p>oblique 很像 italic 但是几乎不用</p>
<h3>Font Weight</h3>
<p>font-weight: normal, bold</p>
<h3>Font Variant</h3>
<p>font-variant: normal, small-caps</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210134613518-1765606856.png"></p>
<h3>Font Size</h3>
<p>px vs em</p>
<p>px 就是固定的, user 不能通过 browser 去调. </p>
<p>em 就可以, by defualt 1 em = 16px (推荐使用)</p>
<p>chrome setting:</p>
<p><img src="https://img2022.cnblogs.com/blog/641294/202202/641294-20220222201941491-1864868428.png"></p>
<p>旧 browser 不完全支持 em.</p>
<p> <img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210135347243-2003016181.png"></p>
<p>solution 是在 body 添加 font-size: 100%</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210135324637-934435652.png"></p>
<p>rem 是 root em 的意思, em 是对应当前 element font-size 的</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211211101723823-2015022675.png"></p>
<p>因为 font-size 是 2em = 32px, 所以 margin-bottom 的 1em 变成了 32px</p>
<p>如果 margin-bottom 使用 rem 则会是 16 px</p>
<p>参考: web开发中该用 em 还是 rem 呢？</p>
<p>那要用哪个呢? 答案是看情况, 不太能统一</p>
<p>如果想 override browser 的 rem 可以声明 html</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">html </span>{<span style="color: rgba(255, 0, 0, 1)">
font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 18px</span>;
}</pre>
</div>
<p>这样不管 user 如何改 setting 最终的 1rem 就等于 18px, 通常不会这样设计.</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">html </span>{<span style="color: rgba(255, 0, 0, 1)">
font-size</span>:<span style="color: rgba(0, 0, 255, 1)"> 1.125rem</span>;
}</pre>
</div>
<p>这样的设计就可能会出现. 比如默认情况下 应该是 16px, 但我希望大一些于是在 html 定义了 1.125rem = 18px. 那么我在 body 写 1rem 就等价于 18px 了. 可以用这个方式来设计手机和电脑的 RWD font size.</p>
<p> </p>
<h3>Responsive Font Size</h3>
<p>font-size:10vw</p>
<p>1vw = 1% of viewport width</p>
<h3>Google Fonts</h3>
<p>加一个 link</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">link </span><span style="color: rgba(255, 0, 0, 1)">rel</span><span style="color: rgba(0, 0, 255, 1)">="stylesheet"</span><span style="color: rgba(255, 0, 0, 1)"> href</span><span style="color: rgba(0, 0, 255, 1)">="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong"</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>就可以用了, 记得 set fallback</p>
<div class="cnblogs_code">
<pre>{<span style="color: rgba(255, 0, 0, 1)">
h1.a {font-family</span>:<span style="color: rgba(0, 0, 255, 1)"> "Audiowide", sans-serif</span>;}<span style="color: rgba(128, 0, 0, 1)">
h1.b </span>{<span style="color: rgba(255, 0, 0, 1)">font-family</span>:<span style="color: rgba(0, 0, 255, 1)"> "Sofia", sans-serif</span>;}<span style="color: rgba(128, 0, 0, 1)">
h1.c </span>{<span style="color: rgba(255, 0, 0, 1)">font-family</span>:<span style="color: rgba(0, 0, 255, 1)"> "Trirong", serif</span>;}<span style="color: rgba(128, 0, 0, 1)">
}</span></pre>
</div>
<h3>Font Pairings</h3>
<p>常见搭配组合: Link to W3Schools</p>
<h3>Font Property & Shorthand</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">p.b </span>{<span style="color: rgba(255, 0, 0, 1)">
font</span>:<span style="color: rgba(0, 0, 255, 1)"> italic small-caps bold 12px/30px Georgia, serif</span>;
}</pre>
</div>
<p>style, variant, weight, size/line-height, family</p>
<p>size 和 family are required.</p>
<p> </p>
<h2>CSS Icons</h2>
<p>Link to W3Schools</p>
<h3>Font Awesome Icons</h3>
<p>放一个 script, register code from fontawesome</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="https://kit.fontawesome.com/yourcode.js"</span><span style="color: rgba(255, 0, 0, 1)"> crossorigin</span><span style="color: rgba(0, 0, 255, 1)">="anonymous"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>then 用 <i> 加 class</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">i </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="fas fa-cloud"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">i</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<h3>Google Icons</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">link </span><span style="color: rgba(255, 0, 0, 1)">rel</span><span style="color: rgba(0, 0, 255, 1)">="stylesheet"</span><span style="color: rgba(255, 0, 0, 1)"> href</span><span style="color: rgba(0, 0, 255, 1)">="https://fonts.googleapis.com/icon?family=Material+Icons"</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>一样 <i> 加 class</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">i </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="material-icons"</span><span style="color: rgba(0, 0, 255, 1)">></span>cloud<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">i</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<h2>CSS <span class="color_h1">Links</span></h2>
<p><span class="color_h1">Link to W3Schools</span></p>
<h3><span class="color_h1">Styling Links</span></h3>
<p><span class="color_h1">a:link - unvisited link</span></p>
<p><span class="color_h1">a:visited - visited link</span></p>
<p><span class="color_h1">a:hover - on user hover</span></p>
<p><span class="color_h1">a:active - on user click</span></p>
<p>写的时候要有顺序, 因为 CSS 是 override 概念. link -> visited -> hover -> active</p>
<h3>Text Decoration</h3>
<p>text-decoration: none, underline 默认是有 underline 的</p>
<h3>Link Buttons</h3>
<p>就是通过 style 去弄, 而不是 button + link 哦</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210153424990-978544164.png"> <img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210153445399-1064613119.png"></p>
<h3>Cursor style</h3>
<p>demo link</p>
<p> </p>
<h2>CSS Lists</h2>
<p>Link to W3Schools</p>
<h3>list-style-type</h3>
<p>在 HTML Lists 有说到, List 有分 order 和没有 order 的, 还有 type.</p>
<p>也可以通过 CSS 来调, </p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210161653258-1028423120.png"></p>
<h3>list-style-image</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">ul </span>{<span style="color: rgba(255, 0, 0, 1)">
list-style-image</span>:<span style="color: rgba(0, 0, 255, 1)"> url('sqpurple.gif')</span>;
}</pre>
</div>
<h3>Shorthand property</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">ul </span>{<span style="color: rgba(255, 0, 0, 1)">
list-style</span>:<span style="color: rgba(0, 0, 255, 1)"> square inside url("sqpurple.gif")</span>;
}</pre>
</div>
<p>type, position, image</p>
<p> </p>
<h2>CSS Tables</h2>
<p>Link to W3Schools</p>
<h3>搞 border</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">table, th, td </span>{<span style="color: rgba(255, 0, 0, 1)">
border</span>:<span style="color: rgba(0, 0, 255, 1)"> 1px solid black</span>;
}</pre>
</div>
<p>table, th, td 3 个分别给</p>
<h3>border-collapse</h3>
<p>double border 不好看, 在 table 声明让它 collapse (和 margin collapse 类似)</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">table </span>{<span style="color: rgba(255, 0, 0, 1)">
border-collapse</span>:<span style="color: rgba(0, 0, 255, 1)"> collapse</span>;
}</pre>
</div>
<h3>text-align</h3>
<p>在 td 设置</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">td </span>{<span style="color: rgba(255, 0, 0, 1)">
text-align</span>:<span style="color: rgba(0, 0, 255, 1)"> center</span>;
}</pre>
</div>
<p>还有 vertical-align</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">td </span>{<span style="color: rgba(255, 0, 0, 1)">
height</span>:<span style="color: rgba(0, 0, 255, 1)"> 50px</span>;<span style="color: rgba(255, 0, 0, 1)">
vertical-align</span>:<span style="color: rgba(0, 0, 255, 1)"> bottom</span>;
}</pre>
</div>
<p>th default 是 text-align: center 哦</p>
<h3>斑马线</h3>
<p>其实只是用了 nth-child(even) 的技巧</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">tr:nth-child(even) </span>{<span style="color: rgba(255, 0, 0, 1)">background-color</span>:<span style="color: rgba(0, 0, 255, 1)"> #f2f2f2</span>;}</pre>
</div>
<h3>小总结</h3>
<p>很多 style 就是 table, tr, th, td, 分开去给来. 而不是像 list 那样, 在 parent 负责.</p>
<p> </p>
<h2>CSS Layout - The display Property</h2>
<p>Link to W3Schools</p>
<p>basic 的有 display: none, block, inline, inline block</p>
<p>block 就是占位一整个 line</p>
<p>inline 就不会 start with new line 同时它的 width 就是它 element 的 width (set style width,height,padding,margin 都无效的)</p>
<p>inline block 对比 inline 就可以 set width,height,margin,padding, 对比 block 它不会 start with new line.</p>
<p>none 就是完全不见掉</p>
<p>visibility:hidden 也是看不见，但是它还是会占据位置.</p>
<h3>Block Elements</h3>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211212134221300-1851431314.png"></p>
<h3>Inline Elements</h3>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211212134317597-654012129.png"></p>
<p> </p>
<h2>CSS <span class="color_h1">Layout - width and max-width</span></h2>
<p><span class="color_h1">Link to W3Schools</span></p>
<h3><span class="color_h1">width, max-width, margin: auto 玩法</span></h3>
<p><span class="color_h1">之前有说过, margin: auto 可以让 div 居中</span></p>
<p>借助 div display block 的特性, 它的 width 一定是撑完整个 line 的, 于是 set 一个 max-width 就可以限制它的不要去去到完.</p>
<p>div 有了 width + margin auto 就居中了咯. 之所以用 max-width 而不是用 width 是因为在屏幕小的时候, max-width 依然可以正常工作.</p>
<p>因为它可以小, 相反 width 意味着它不能小, 就会出现 scroll bar 了. 这也是一个 max-width 的技巧</p>
<p> </p>
<h2>CSS Layout - The position Property</h2>
<p>Link to W3Schools</p>
<h3>static</h3>
<p>static 是 default, 就是按照 element flow 位置.</p>
<h3>relative</h3>
<p>relative 就是在原本的位置做偏移, top,right,bottom,left </p>
<p>比如 top:10px 那么这个 element 就会往下移动 10px, 意思是, 从灵魂到躯体 top: 10px, 它是这样理解的.</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210190414094-1695592217.png"></p>
<p>relative 的 element 本身依然占据原来的位置, 它像灵魂出窍那样, 移动后会和其它 element 重叠 (是重叠不是推掉哦)</p>
<h3>absolute</h3>
<p>absolute element 不占据原本位置了, 但它会飘在原本位置上面, (和其它 element 重叠). 然后它和 relative 还有一个定点的不同.</p>
<p>relative 是以原本的位置作为起点, absolute 是以 first ancestor (relative position) 做为起点, 如果没有就用 document.body 作为定点. 当你没有 set top 的时候, 默认的 top 会是它原本的位置.</p>
<p>所以 relative 的 top 一开始一定是 0, 但是 absolute 一开始 top 就不会是 0, set 0 反而会飞上去.</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211210174841435-1990628775.png"></p>
<p>比如 top left 是 absolute 它的默认 top 是 323px, 如果 set to 0 它就会去到上面, 因为它的定点是 first ancestor (relative position).</p>
<h3>fixed</h3>
<p>fixed 和 absolute 是一样的, 唯一的区别是它的定点是 viewport.</p>
<h3>sticky</h3>
<p>参考之前写的 Angular 学习笔记 (Material table sticky 原理)</p>
<p> </p>
<h2>CSS Layout - The z-index Property</h2>
<p>Link to W3Schools</p>
<p>当定位之后就容易产生重叠现象, 这时候就要 set z-index 来比权重了. number 越大就越在上面会被看见.</p>
<p>默认情况下大家都是 0, 就比 html 结构, 越下面的越在上层, 会被看见.</p>
<p>如果不希望这样常见的做法是让定位的 element z-index: -1.</p>
<p> </p>
<h2>CSS <span class="color_h1">Layout - Overflow</span></h2>
<p><span class="color_h1">Link to W3Schools</span></p>
<p><span class="color_h1">只有 block element 才可以 overflow 概念</span></p>
<p>overflow: visible, hidden, scroll, auto</p>
<p>visible 是 default 效果是内容会跑出去</p>
<p>hidden 是内容会被 hide 起来</p>
<p>scroll 是 always 有 scrollbar (but Apple Mac 不会)</p>
<p>auto 就是当内容超过的时候自动有 scroll</p>
<p>overflow-x, overflow-y 分别控制 horizontal 和 vertical.</p>
<p> </p>
<h2>CSS <span class="color_h1">Layout - float and clear</span></h2>
<p><span class="color_h1">Link to W3Schools</span></p>
<p>Float 是最早用于排版的方法, 但其实它的诞生是为了解决 p 和 image 想要左右排的效果. 但后来被发扬光大了.</p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211211113145888-1469409004.png"></p>
<p>Float 就是浮起来, </p>
<p><img src="https://img2020.cnblogs.com/blog/641294/202112/641294-20211211113517028-1888356166.gif"></p>
<p>Float 之后 parent 就不会被撑大了, 但是可以用 overflow hidden 来破, 这个叫 clearfix Hack.</p>
<p>还有一个比较 modern 的 way.</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">.clearfix::after </span>{<span style="color: rgba(255, 0, 0, 1)">
content</span>:<span style="color: rgba(0, 0, 255, 1)"> ""</span>;<span style="color: rgba(255, 0, 0, 1)">
clear</span>:<span style="color: rgba(0, 0, 255, 1)"> both</span>;<span style="color: rgba(255, 0, 0, 1)">
display</span>:<span style="color: rgba(0, 0, 255, 1)"> table</span>;
}</pre>
</div>
<p> </p>
<h2>CSS Layout - Horizontal & Vertical Align</h2>
<p>Link to W3Schools</p>
<p>各种居中技巧.</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/keatkeat/p/15647294.html
頁:
[1]