css学习二
<h2 id="css-学习二">CSS 学习二</h2><p>继续</p>
<h3 id="css-单位">CSS 单位</h3>
<h4 id="相对长度">相对长度</h4>
<ul>
<li><code>em</code>：当前元素的字体尺寸</li>
<li><code>ex</code>：英文字母小x的高度</li>
<li><code>ch</code>：数字0的高度</li>
<li><code>vw</code>：视窗宽度，1vm=视窗宽度的1%</li>
<li><code>vh</code>：视窗高度，1vm=视窗高度的1%</li>
<li><code>vmin</code>：vm和vh中较小的那个</li>
<li><code>vmax</code>：vm和vh中较大的那个</li>
<li><code>%</code>：😁😁😁</li>
</ul>
<h4 id="绝对长度">绝对长度</h4>
<ul>
<li><code>cm</code>：厘米</li>
<li><code>mm</code>：毫米</li>
<li><code>in</code>：英寸</li>
<li><code>px</code>：像素</li>
<li><code>pt</code>：1pt = 1/72in</li>
<li><code>pc</code>：1pc = 12 pt</li>
</ul>
<h3 id="css-text">CSS Text</h3>
<ul>
<li>
<p><code>color</code>：设置文本颜色</p>
</li>
<li>
<p><code>direction</code>：设置文字方向</p>
<ul>
<li><code>ltr</code>：从左向右（默认）</li>
<li><code>rtl</code>：从右向左</li>
<li><code>ingerit</code>：继承父元素</li>
</ul>
</li>
<li>
<p><code>letter-spacing</code>：设置字符间距</p>
<ul>
<li><code>noraml</code>：字符间没有额外的空间</li>
<li><code>length</code>：使用固定空间（可以为负值）</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li>
<p><code>line-height</code>：设置行间距</p>
<ul>
<li><code>normal</code>：默认</li>
<li><code>number</code>：设置数字，会与字体尺寸相乘得到行间距</li>
<li><code>length</code>：固定值</li>
<li><code>%</code>：字体尺寸的百分比为行间距</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li>
<p><code>text-align</code>：文本的水平对齐方式</p>
<ul>
<li><code>left</code>：左对齐（默认）</li>
<li><code>right</code>：右对齐</li>
<li><code>center</code>：居中</li>
<li><code>justify</code>：两端对齐</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li>
<p><code>text-decoration</code>：添加文本修饰</p>
<ul>
<li><code>none</code>：无修饰（默认）</li>
<li><code>underline</code>：下划线</li>
<li><code>overline</code>：上划线</li>
<li><code>line-through</code>：删除线</li>
<li><code>blink</code>：闪烁效果</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li>
<p><code>text-indent</code>：首行缩进</p>
<ul>
<li><code>length</code>：固定缩进</li>
<li><code>%</code>：基于父元素宽度的百分比缩进</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li>
<p><code>text-shadow</code>：文本阴影</p>
<ul>
<li><code>h-shadow</code>：必需，允许负值，水平阴影位置</li>
<li><code>v-shadow</code>：必需，允许负值，垂直阴影位置</li>
<li><code>blur</code>：模糊的距离</li>
<li><code>color</code>：阴影的颜色</li>
</ul>
</li>
<li>
<p><code>text-transform</code>：字母样式</p>
<ul>
<li><code>none</code>：默认</li>
<li><code>capitalize</code>：每个单词以大写字母开头</li>
<li><code>uppercase</code>：全部大写</li>
<li><code>lowercase</code>：全部小写</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li>
<p><code>unicode-bidi</code>：是否重写文本，需要配合<code>direction</code>使用</p>
<ul>
<li><code>normal</code>：默认</li>
<li><code>embed</code>：创建一个附加的嵌入层面</li>
<li><code>bidi-override</code>：创建一个附加的嵌入层面，按照<code>direction</code>属性重新排序</li>
<li><code>initial</code>：设置默认值</li>
<li><code>inherit</code>：继承父元素<br>
这里<code>embed</code>属性和<code>normal</code>属性如果单独使用，最终样式看来是没有区别的。<br>
但是<code>embed</code>会创建一个附加的嵌入层面，因为在<code>bidi-override</code>属性值里面，<code>normal</code>是不会起作用的，因为<code>bidi-override</code>也创建了一个嵌入层面，这个时候就可以使用<code>embed</code>了</li>
</ul>
</li>
<li>
<p><code>vertical-align</code>：文本的垂直对齐方式</p>
<ul>
<li><code>baseline</code>：默认</li>
<li><code>sub</code>：垂直对齐文本下标</li>
<li><code>super</code>：垂直对齐文本上标</li>
<li><code>top</code>：元素顶端与行中最高元素的顶端对齐</li>
<li><code>text-top</code>：元素顶端与父元素字体的顶端对齐</li>
<li><code>middle</code>：元素放于父元素的中部</li>
<li><code>bottom</code>：使元素及其后代元素的底部与整行的底部对齐</li>
<li><code>text-bottom</code>：元素底端与父元素字体的底端对齐</li>
<li><code>length</code>：使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。</li>
<li><code>%</code>：使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
<li>
<p><code>white-space</code>：空白处理方式</p>
<ul>
<li>
<p><code>noraml</code>：连续的空白符会被合并，换行符会被当作空白符来处理</p>
</li>
<li>
<p><code>nowwrap</code>：和 normal 一样，连续的空白符会被合并。但文本内的换行无效</p>
</li>
<li>
<p><code>pre</code>：连续的空白符会被保留。在遇到换行符或者<code><br></code>元素时才会换行</p>
</li>
<li>
<p><code>pre-wrap</code>：连续的空白符会被保留。在遇到换行符或者<code><br></code>元素时才会换行</p>
</li>
<li>
<p><code>pre-line</code>：连续的空白符会被合并。在遇到换行符或者<code><br></code>元素时会换行</p>
</li>
<li>
<p><code>inherit</code>：继承父元素</p>
<table>
<thead>
<tr>
<th></th>
<th>换行符</th>
<th>空格和制表符</th>
<th>文字换行</th>
<th>行尾空格</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>normal</code></td>
<td>合并</td>
<td>合并</td>
<td>换行</td>
<td>删除</td>
</tr>
<tr>
<td><code>nowwrap</code></td>
<td>合并</td>
<td>合并</td>
<td>不换行</td>
<td>删除</td>
</tr>
<tr>
<td><code>pre</code></td>
<td>保留</td>
<td>保留</td>
<td>不换行</td>
<td>保留</td>
</tr>
<tr>
<td><code>pre-wrap</code></td>
<td>保留</td>
<td>保留</td>
<td>换行</td>
<td>挂起</td>
</tr>
<tr>
<td><code>pre-line</code></td>
<td>保留</td>
<td>保留</td>
<td>换行</td>
<td>换行</td>
</tr>
</tbody>
</table>
</li>
</ul>
</li>
<li>
<p><code>word-spacing</code>：字间距</p>
<ul>
<li><code>normal</code>：默认，使用标准空间</li>
<li><code>length</code>：使用指定空间</li>
<li><code>inherit</code>：继承父元素</li>
</ul>
</li>
</ul>
<p>瑞了瑞了！！！</p>
<h3 id="有垣曰苑无垣曰囿">有垣曰苑，无垣曰囿😉😉</h3>
<p><strong><font size="4">临江仙</font></strong> <font size="1">夜归临皋</font> <font size="2">苏轼</font></p>
<p><strong>夜饮东坡醒复醉，</strong></p>
<p><em>归来仿佛三更。</em></p>
<p><strong>家童鼻息已雷鸣。</strong></p>
<p><em>敲门都不应，</em></p>
<p><strong>倚杖听江声。</strong></p>
<p><em>长恨此身非我有，</em></p>
<p><strong>何时忘却营营？</strong></p>
<p><em>夜阑风静彀纹平。</em></p>
<p><strong>小舟从此逝，</strong></p>
<p><em>江海寄余生。</em></p><br><br>
来源：https://www.cnblogs.com/GardenofEden/p/16100085.html
頁:
[1]