详细介绍：前端学习——CSS - Powered by Discuz! Archiver

首页 › CSS论坛 › 详细介绍：前端学习——CSS

炸辣椒 發表於 2025-9-21 15:37:00

详细介绍：前端学习——CSS

<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }
code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style>

<style>pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; tab-size: 4 !important; -moz-tab-size: 4 !important; max-width: 100% !important; box-sizing: border-box !important }
code { font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; overflow-wrap: normal !important; display: inline !important; background: rgba(0, 0, 0, 0) !important; border: none !important; padding: 0 !important; margin: 0 !important; line-height: inherit !important }
pre code { background: rgba(0, 0, 0, 0) !important; border: 0 !important; border-radius: 0 !important; display: block !important; line-height: 1.6 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; padding: 0 !important; white-space: pre !important; word-wrap: normal !important; word-break: normal !important; color: inherit !important }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(112, 128, 144, 1) !important; font-style: italic !important }
.token.punctuation { color: rgba(153, 153, 153, 1) !important }
.token.atrule, .token.attr-value, .token.keyword { color: rgba(0, 119, 170, 1) !important; font-weight: bold !important }
.token.function, .token.class-name { color: rgba(221, 74, 104, 1) !important; font-weight: bold !important }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: rgba(102, 153, 0, 1) !important }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: rgba(153, 0, 85, 1) !important }
.cnblogs-markdown pre, .cnblogs-post-body pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; background-color: rgba(248, 248, 248, 1) !important; border: 1px solid rgba(225, 228, 232, 1) !important; border-radius: 6px !important; padding: 16px !important; margin: 16px 0 !important }
pre, pre, pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important }</style><div class="htmledit_views atom-one-dark" id="content_views"><p>        前面我们已经学习过来HTML。但是对于前端网页来说，HTML只是网页的骨架。而只是使用HTML的网页是十分简陋的，一般没办法应用于实际应用。因此我们还要学习CSS对网页进行美化。</p><p>        相关代码已经上传至gitee：前端学习代码: 前端学习，喜欢请支持，谢谢。</p><p id="main-toc" name="tableOfContents"><strong>目录</strong></p><p id="CSS%E7%9A%84%E4%BB%8B%E7%BB%8D-toc" name="tableOfContents" style="margin-left: 0">CSS的介绍</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E4%BB%80%E4%B9%88%E6%98%AFCSS-toc" name="tableOfContents" style="margin-left: 40px">        什么是CSS</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95%E8%A7%84%E8%8C%83-toc" name="tableOfContents" style="margin-left: 40px">        基本语法规范</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F-toc" name="tableOfContents" style="margin-left: 40px">        引入方式</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8-toc" name="tableOfContents" style="margin-left: 80px">        内部样式表</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F%E8%A1%A8-toc" name="tableOfContents" style="margin-left: 80px">        行内样式表</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8-toc" name="tableOfContents" style="margin-left: 80px">        外部样式表</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20CSS%E9%80%89%E6%8B%A9%E5%99%A8%E6%A0%87%E7%AD%BE-toc" name="tableOfContents" style="margin-left: 40px">        CSS选择器标签</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E9%80%89%E6%8B%A9%E5%99%A8%E5%8A%9F%E8%83%BD-toc" name="tableOfContents" style="margin-left: 80px">        选择器功能</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20CSS2%E6%A0%87%E5%87%86%E6%94%AF%E6%8C%81%E7%9A%84%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 80px">        CSS2标准支持的选择器</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 80px">       基础选择器</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 120px">        标签选择器</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0id%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 120px">        id选择器</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E9%80%9A%E9%85%8D%E7%AC%A6%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 120px">        通配符选择器</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 120px">        类选择器</p><p id="CSS%20%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%BB%E7%BB%93-toc" name="tableOfContents" style="margin-left: 80px">CSS 基础选择器总结</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 80px">        复合选择器</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 120px">        后代选择器</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%AD%90%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 120px">        子选择器</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%B9%B6%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 120px">        并集选择器</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8-toc" name="tableOfContents" style="margin-left: 120px">        伪类选择器</p><p id="CSS%20%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%BB%E7%BB%93-toc" name="tableOfContents" style="margin-left: 80px">CSS 复合选择器总结</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0CSS%E5%B1%9E%E6%80%A7-toc" name="tableOfContents" style="margin-left: 40px">        CSS属性</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7-toc" name="tableOfContents" style="margin-left: 80px">        字体属性</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%AE%BE%E7%BD%AE%E5%AD%97%E4%BD%93%C2%A0%20%C2%A0%20%C2%A0-toc" name="tableOfContents" style="margin-left: 120px">        设置字体     </p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%A7%E5%B0%8F-toc" name="tableOfContents" style="margin-left: 120px">        大小</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E7%B2%97%E7%BB%86%C2%A0-toc" name="tableOfContents" style="margin-left: 120px">        粗细 </p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E5%AD%97%E6%A0%B7%E5%BC%8F-toc" name="tableOfContents" style="margin-left: 120px">        文字样式</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7%C2%A0%C2%A0%C2%A0-toc" name="tableOfContents" style="margin-left: 80px">        文本属性   </p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2-toc" name="tableOfContents" style="margin-left: 120px">        文本颜色</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E8%AE%A4%E8%AF%86%20RGB-toc" name="tableOfContents" style="margin-left: 160px">        认识 RGB</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E8%AE%BE%E7%BD%AE%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2-toc" name="tableOfContents" style="margin-left: 160px">        设置文本颜色</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0color%20%E5%B1%9E%E6%80%A7%E5%80%BC%E7%9A%84%E5%86%99%E6%B3%95%3A-toc" name="tableOfContents" style="margin-left: 160px">        color 属性值的写法:</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90-toc" name="tableOfContents" style="margin-left: 120px">        文本对齐</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E8%A3%85%E9%A5%B0-toc" name="tableOfContents" style="margin-left: 120px">        文本装饰</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B-toc" name="tableOfContents" style="margin-left: 120px">        文本缩进</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%A1%8C%E9%AB%98-toc" name="tableOfContents" style="margin-left: 120px">        行高</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7-toc" name="tableOfContents" style="margin-left: 40px">        背景属性</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2-toc" name="tableOfContents" style="margin-left: 80px">        背景颜色</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87-toc" name="tableOfContents" style="margin-left: 80px">        背景图片</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%B9%B3%E9%93%BA-toc" name="tableOfContents" style="margin-left: 80px">        背景平铺</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E4%BD%8D%E7%BD%AE-toc" name="tableOfContents" style="margin-left: 80px">        背景位置</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%B0%BA%E5%AF%B8-toc" name="tableOfContents" style="margin-left: 80px">        背景尺寸</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2-toc" name="tableOfContents" style="margin-left: 80px">        圆角矩形</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-toc" name="tableOfContents" style="margin-left: 120px">        基本用法</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E7%94%9F%E6%88%90%E5%9C%86%E5%BD%A2-toc" name="tableOfContents" style="margin-left: 80px">        生成圆形</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E7%94%9F%E6%88%90%E5%9C%86%E5%BD%A2%E7%9F%A9%E5%BD%A2-toc" name="tableOfContents" style="margin-left: 80px">        生成圆形矩形</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%B1%95%E5%BC%80%E5%86%99%E6%B3%95-toc" name="tableOfContents" style="margin-left: 80px">        展开写法</p><p id="%E5%85%83%E7%B4%A0%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F-toc" name="tableOfContents" style="margin-left: 0">元素显示模式</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0-toc" name="tableOfContents" style="margin-left: 40px">        块级元素</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0-toc" name="tableOfContents" style="margin-left: 40px">        行内元素</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E5%92%8C%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E7%9A%84%E5%8C%BA%E5%88%AB-toc" name="tableOfContents" style="margin-left: 40px">        行内元素和块级元素的区别</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%94%B9%E5%8F%98%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0-toc" name="tableOfContents" style="margin-left: 40px">        改变显示模式        </p><p id="%E7%9B%92%E6%A8%A1%E5%9E%8B-toc" name="tableOfContents" style="margin-left: 0">盒模型</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%BE%B9%E6%A1%86-toc" name="tableOfContents" style="margin-left: 40px">        边框</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7-toc" name="tableOfContents" style="margin-left: 80px">        基础属性</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%86%85%E8%BE%B9%E8%B7%9D-toc" name="tableOfContents" style="margin-left: 120px">        内边距</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E7%A1%80%E5%86%99%E6%B3%95-toc" name="tableOfContents" style="margin-left: 160px">        基础写法</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95-toc" name="tableOfContents" style="margin-left: 160px">        复合写法</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%96%E8%BE%B9%E8%B7%9D-toc" name="tableOfContents" style="margin-left: 120px">        外边距</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E7%A1%80%E5%86%99%E6%B3%95-toc" name="tableOfContents" style="margin-left: 160px">        基础写法</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95-toc" name="tableOfContents" style="margin-left: 160px">        复合写法</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E5%9D%97%E6%9E%81%E5%85%83%E7%B4%A0%E5%B1%85%E4%B8%AD-toc" name="tableOfContents" style="margin-left: 80px">        块极元素居中</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E5%8E%BB%E9%99%A4%E6%B5%8F%E8%A7%88%E5%99%A8%E9%BB%98%E8%AE%A4%E6%A0%B7%E5%BC%8F-toc" name="tableOfContents" style="margin-left: 40px">        去除浏览器默认样式</p><p id="%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0-toc" name="tableOfContents" style="margin-left: 0">弹性布局        </p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%88%9D%E4%BD%93%E9%AA%8C-toc" name="tableOfContents" style="margin-left: 40px">        初体验</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20flex%E5%B8%83%E5%B1%80%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5-toc" name="tableOfContents" style="margin-left: 40px">        flex布局基本概念</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7-toc" name="tableOfContents" style="margin-left: 40px">        常用属性</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0justify-content-toc" name="tableOfContents" style="margin-left: 80px">        justify-content</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20align-items-toc" name="tableOfContents" style="margin-left: 80px">        align-items</p><p id="Chrome%20%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7%20--%20%E6%9F%A5%E7%9C%8B%20CSS%20%E5%B1%9E%E6%80%A7-toc" name="tableOfContents" style="margin-left: 0">Chrome 调试工具 -- 查看 CSS 属性</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%89%93%E5%BC%80%E6%B5%8F%E8%A7%88%E5%99%A8-toc" name="tableOfContents" style="margin-left: 40px">        打开浏览器</p><p id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%A0%87%E7%AD%BE%E9%A1%B5%E7%9A%84%E5%90%AB%E4%B9%89-toc" name="tableOfContents" style="margin-left: 40px">        标签页的含义</p><p id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0elements%20%E6%A0%87%E7%AD%BE%E9%A1%B5%E4%BD%BF%E7%94%A8%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0-toc" name="tableOfContents" style="margin-left: 40px">        elements 标签页使用        </p><hr id="hr-toc" name="tableOfContents"><p></p><h2 id="CSS%E7%9A%84%E4%BB%8B%E7%BB%8D" name="CSS%E7%9A%84%E4%BB%8B%E7%BB%8D">CSS的介绍</h2><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E4%BB%80%E4%B9%88%E6%98%AFCSS" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E4%BB%80%E4%B9%88%E6%98%AFCSS">        什么是CSS</h3><p>        CSS是层叠样式表 (Cascading Style Sheets)，能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离</p><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95%E8%A7%84%E8%8C%83" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95%E8%A7%84%E8%8C%83">        基本语法规范</h3><p>        选择器 + {一条/N条声明}</p><p>        选择器决定针对谁修改 (找谁)</p><p>        声明决定修改啥. (干啥)</p><p>        声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">/* CSS代码*/
p{
/* 设置字体颜色 */
color: RED;
/* 设置字体大小 */
font-size: 40px;
}</code></pre>
<p><strong> 注意</strong>:</p><p>        CSS 要写到 style 标签中(后面还会介绍其他写法)</p><p>        style 标签可以放到页面任意位置. 一般放到 head 标签内.</p><p>        CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .</p><p>        添加前：</p><p><img alt="" height="140" src="https://i-blog.csdnimg.cn/direct/e8e32b7bc7f34051bd5c80975919b05c.png" width="303"></p><p>        添加后：</p><p><img alt="" height="289" src="https://i-blog.csdnimg.cn/direct/e0ef00ae7c7c4b9789185539eddfba41.png" width="365"></p><h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F">        引入方式</h3><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8">        内部样式表</h4><p>        写在 style 标签中. 嵌入到 html 内部.</p><p>        理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.</p><p><strong>        优点</strong>: 这样做能够让样式和页面结构分离.</p><p><strong>        缺点</strong>: 分离的还不够彻底. 尤其是 css 内容多的时候</p><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F%E8%A1%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F%E8%A1%A8">        行内样式表</h4><p>        通过 style 属性, 来指定某个标签的样式.</p><p>        只适合于写简单样式. 只针对某个标签生效.</p><p><strong>缺点</strong>: 不能写太复杂的样式.</p><p>        这种写法优先级较高, 会覆盖其他的样式.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">div
{
color: blue;
}
想要生活过的去, 头上总得带点绿</code></pre>
<h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8">        外部样式表</h4><p>        实际开发中最常用的方式.</p><p>        1. 创建一个 css 文件.</p><p>        2. 使用 link 标签引入 css</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-html"></code></pre>
<p><img alt="" height="49" src="https://i-blog.csdnimg.cn/direct/964c4aff212743dbbff869c391d4aef5.png" width="326"></p><p>        注意: 不要忘记 link 标签调用 CSS, 否则不生效.</p><p><strong>        优点</strong>: 样式和结构彻底分离了.</p><p><strong>        缺点</strong>: 受到浏览器缓存影响, 修改之后不一定立刻生效.</p><p><strong>关于缓存</strong>:</p><p>        这是计算机中一种常见的提升性能的技术手段.</p><p>        网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的. 如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了). 从而提高访问效率.</p><p>        可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件</p><p>        下面举例来说明：</p><p>        HTML</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-html">Document
我爱你，世界！</code></pre>
<p>        CSS</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">p
{
color: red;
font-size: 80px;
}</code></pre>
<p>        效果：</p><p><img alt="" height="330" src="https://i-blog.csdnimg.cn/direct/6049ddea069143358436be968411b948.png" width="1071"></p><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20CSS%E9%80%89%E6%8B%A9%E5%99%A8%E6%A0%87%E7%AD%BE" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20CSS%E9%80%89%E6%8B%A9%E5%99%A8%E6%A0%87%E7%AD%BE">        CSS选择器标签</h3><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E9%80%89%E6%8B%A9%E5%99%A8%E5%8A%9F%E8%83%BD" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E9%80%89%E6%8B%A9%E5%99%A8%E5%8A%9F%E8%83%BD">        选择器功能</h4><p>        选中页面中指定的标签元素.</p><p>        要先选中元素, 才能设置元素的属性.</p><p>        就好比 SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位行动.</p><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20CSS2%E6%A0%87%E5%87%86%E6%94%AF%E6%8C%81%E7%9A%84%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20CSS2%E6%A0%87%E5%87%86%E6%94%AF%E6%8C%81%E7%9A%84%E9%80%89%E6%8B%A9%E5%99%A8">        CSS2标准支持的选择器</h4><p>        1. 基础选择器: 单个选择器构成的</p><p>        标签选择器</p><p>        类选择器</p><p>        id 选择器</p><p>        通配符选择器</p><p>        2. 复合选择器: 把多种基础选择器综合运用起来.</p><p>        后代选择器</p><p>        子选择器</p><p>        并集选择器</p><p>        伪类选择器</p><p>        可参考文档：CSS 选择器参考手册</p><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8">       基础选择器</h4><h5 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8">        标签选择器</h5><p>        特点:</p><p>        能快速为同一类型的标签都选择出来.</p><p>        但是不能差异化选择</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">p {
color: red;
}
div {
color: green;
}
咬人猫
咬人猫
咬人猫
阿叶君
阿叶君
阿叶君</code></pre>
<h5 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0id%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0id%E9%80%89%E6%8B%A9%E5%99%A8">        id选择器</h5><p>        和类选择器类似.</p><p>        CSS 中使用 # 开头表示 id 选择器</p><p>        id 选择器的值和 html 中某个元素的 id 值相同</p><p>        html 的元素 id 不必带 #</p><p>        id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">#fe
{
color: blue;
font-size: 30px;
}
#server
{
color: green;
font-size: 30px;
}</code></pre>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-html">Document
前端开发
后端开发</code></pre>
<p>        效果：</p><p><img alt="" height="345" src="https://i-blog.csdnimg.cn/direct/653bfd6cf3df4ad4849a7800d5ae059b.png" width="995"></p><h5 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E9%80%9A%E9%85%8D%E7%AC%A6%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E9%80%9A%E9%85%8D%E7%AC%A6%E9%80%89%E6%8B%A9%E5%99%A8">        通配符选择器</h5><p>        使用 * 的定义, 选取所有的标签<br>         实际应用中多用于针对页面中所有元素进行默认样式的删除，主要用来删除边距</p><p>        效果图：</p><p><img alt="" height="367" src="https://i-blog.csdnimg.cn/direct/cef8032943384ff3a1426f3d4f7bb12d.png" width="1396"></p><h5 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8">        类选择器</h5><p>        特点:</p><p>        差异化表示不同的标签</p><p>        可以让多个标签的都使用同一个标签.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.blue
{
color: blue;
}
咬人猫
咬人猫</code></pre><code class="language-css">
<p>        语法细节:</p><p>        类名用 . 开头的</p><p>        下方的标签使用 class 属性来调用.</p><p>        一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)</p><p>        如果是长的类名, 可以使用 - 分割.</p><p>        不要使用纯数字, 或者中文, 以及标签名来命名类名</p><p>        代码示例: 使用多个类名</p><p>        注意: 一个标签可以同时使用多个类名</p><p>        这样做可以把相同的属性提取出来, 达到简化代码的效果</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.box {
width: 200px;
height: 150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}</code></pre>
<h4 id="CSS%20%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%BB%E7%BB%93" name="CSS%20%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%BB%E7%BB%93">CSS 基础选择器总结</h4><table><thead><tr><th>选择器名称</th><th>作用</th><th>语法</th><th>特点与说明</th></tr></thead><tbody><tr><td><strong>通配选择器</strong></td><td>选择页面上的<strong>所有</strong>元素。</td><td><code>*</code></td><td>1. 权重最低 (<code>0,0,0,0</code>)。<br> 2. 常用于重置所有元素的默认样式（如 <code>margin</code>, <code>padding</code>）。<br> 3. 效率较低，应谨慎使用。</td></tr><tr><td><strong>元素选择器</strong></td><td>选择指定的<strong>HTML标签</strong>元素。</td><td><code>元素名</code><br> 如 <code>div</code>, <code>p</code>, <code>h1</code></td><td>1. 权重为 (<code>0,0,0,1</code>)。<br> 2. 用于设置同一类标签的<strong>基础样式</strong>。</td></tr><tr><td><strong>类选择器</strong></td><td>选择所有带有<strong>指定class属性</strong>的元素。</td><td><code>.类名</code><br> 如 <code>.header</code>, <code>.active</code></td><td>1. 权重为 (<code>0,0,1,0</code>)。<br> 2. <strong>最常用、最灵活</strong>的选择器。<br> 3. 一个元素可以有多个类名（如 <code>class="btn btn-primary"</code>），可实现样式复用和组合。</td></tr><tr><td><strong>ID选择器</strong></td><td>选择带有<strong>指定id属性</strong>的<strong>唯一</strong>元素。</td><td><code>#id名</code><br> 如 <code>#main</code>, <code>#submit-btn</code></td><td>1. 权重较高 (<code>0,1,0,0</code>)。<br> 2. 由于ID在页面中应该是<strong>唯一</strong>的，所以该选择器理论上只针对一个元素。<br> 3. 特异性高，不利于复用，多用于唯一元素的特殊样式。</td></tr><tr><td><strong>属性选择器</strong></td><td>选择带有<strong>指定属性</strong>的元素。</td><td><code></code><br> 或 <code></code></td><td>1. 权重等同于类选择器 (<code>0,0,1,0</code>)。<br> 2. 功能强大，可以根据属性值的不同匹配方式进行选择（如存在、等于、包含、开头/结尾匹配等）。<br> 3. 常用于选择输入框类型 (<code>type</code></td></tr></tbody></table><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8">        复合选择器</h4><h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8">        后代选择器</h5><p>        又叫包含选择器. 选择某个父元素中的某个子元素.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">元素1 元素2 {样式声明}</code></pre>
<p>        元素 1 和元素 2 要使用空格分割</p><p>        元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">ol li
{
color: aqua;
list-style: none;
margin-left: -40px;
}
ol a
{
color: aqua;
text-decoration: none;
}</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%AD%90%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%AD%90%E9%80%89%E6%8B%A9%E5%99%A8">        子选择器</h5><p>        和后代选择器类似, 但是只能选择子标签.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-html">元素1>元素2 { 样式声明 }</code></pre>
<p>        使用大于号分割</p><p>        只选亲儿子, 不选孙子元素</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-html">链接1
链接2
</code></pre><code class="language-html">
<p>        后代选择器的写法, 会把链接1 和 2 都选中</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.two a {
color: red;
}</code></pre>
<p>        子选择器的写法, 只选链接 1</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.two>a {
color: red;
}</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%B9%B6%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%B9%B6%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8">        并集选择器</h5><p>        用于选择多组标签. (集体声明)</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">元素1, 元素2 { 样式声明 }</code></pre>
<p>        通过逗号分割等多个元素.</p><p>        表示同时选中元素 1 和元素 2</p><p>        任何基础选择器都可以使用并集选择器.</p><p>        并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-html">苹果
香蕉
鸭梨
橙子</code></pre>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">/* 把苹果和香蕉颜色改成红色*/
div, h3 {
color: red;
}
/*把鸭梨和橙子也都一起改成红色*/
div,
h3,
ul>li {
color: red;
}
</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8">        伪类选择器</h5><p>        定义元素状态</p><p>        （1）链接伪类选择器</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)</code></pre>
<p>        如何让一个已经被访问过的链接恢复成未访问的状态?清空浏览器历史记录即可. ctrl + shift + delete</p><p><strong>        注意事项</strong></p><p>        按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效. 记忆规则 "绿化"浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.</p><p>        实际开发主要给链接做一个样式, 然后给 hover 做一个样式即可. link, visited, active 用的不多.</p><p>        （2）force 伪类选择器</p><p>        选取获取焦点的 input 表单元素.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.three>input:focus
{
color: red;
}</code></pre>
<p>        此时被选中的表单的字体就会变成红色.</p><h4 id="CSS%20%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%BB%E7%BB%93" name="CSS%20%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%BB%E7%BB%93">CSS 复合选择器总结</h4><table><thead><tr><th>选择器名称</th><th>作用</th><th>语法</th><th>特点与说明</th></tr></thead><tbody><tr><td><strong>后代选择器</strong></td><td>选择位于<strong>指定元素内部</strong>的<strong>所有</strong>后代元素（不限层级）。</td><td><code>祖先后代</code><br> 如 <code>.box p</code></td><td>1. 使用<strong>空格</strong>分隔。<br> 2. 选择所有后代，包括子、孙、曾孙等。<br> 3. 是最常用的复合选择器之一。</td></tr><tr><td><strong>子选择器</strong></td><td>选择作为<strong>指定元素直接子元素</strong>的元素（仅一代）。</td><td><code>父 > 子</code><br> 如 <code>ul > li</code></td><td>1. 使用<strong>大于号 <code>></code></strong> 分隔。<br> 2. 只选择<strong>直接子元素</strong>，范围比后代选择器更精确、更严格。<br> 3. 有助于减少不必要的样式应用，提升性能。</td></tr><tr><td><strong>相邻兄弟选择器</strong></td><td>选择<strong>紧接</strong>在另一个元素<strong>之后</strong>的<strong>第一个</strong>兄弟元素。</td><td><code>前一个 + 下一个</code><br> 如 <code>h2 + p</code></td><td>1. 使用<strong>加号 <code>+</code></strong> 分隔。<br> 2. 它们必须拥有<strong>相同的父元素</strong>。<br> 3. 选择的是“下一个”元素，且必须是<strong>紧邻</strong>的。</td></tr><tr><td><strong>通用兄弟选择器</strong></td><td>选择在另一个元素<strong>之后</strong>的<strong>所有</strong>指定兄弟元素。</td><td><code>兄 ~ 弟</code><br> 如 <code>h2 ~ p</code></td><td>1. 使用<strong>波浪号 <code>~</code></strong> 分隔。<br> 2. 它们必须拥有<strong>相同的父元素</strong>。<br> 3. 选择的是“之后”的<strong>所有</strong>指定兄弟元素，不要求紧邻。</td></tr><tr><td><strong>交集选择器</strong></td><td>选择<strong>同时满足</strong>多个条件的元素。</td><td><code>选择器A选择器B</code><br> 如 <code>p.special</code></td><td>1. <strong>直接连续书写</strong>，中间无空格。<br> 2. 选择的元素必须同时匹配所有条件。<br> 3. 常用于为特定类的特定元素添加样式（如既是 <code>p</code> 标签又有 <code>.special</code> 类）。</td></tr><tr><td><strong>并组选择器</strong></td><td>同时选择<strong>多组</strong>元素，为它们应用<strong>相同的样式</strong>。</td><td><code>选择器A, 选择器B</code><br> 如 <code>h1, h2, .title</code></td><td>1. 使用<strong>逗号 <code>,</code></strong> 分隔。<br> 2. 可以将不同的选择器分组，实现代码复用，减少重复代码。<br> 3. 任何形式的选择器都可以作为并组列表的一部分。</td></tr></tbody></table><h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0CSS%E5%B1%9E%E6%80%A7" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0CSS%E5%B1%9E%E6%80%A7">        CSS属性</h3><p>        参考资料：CSS 参考手册</p><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7">        字体属性</h4><h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%AE%BE%E7%BD%AE%E5%AD%97%E4%BD%93%C2%A0%20%C2%A0%20%C2%A0" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%AE%BE%E7%BD%AE%E5%AD%97%E4%BD%93%C2%A0%20%C2%A0%20%C2%A0">        设置字体     </h5>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">body {
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
}</code></pre>
<p>        字体可以使用中文，不过推荐英文</p><p>        多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )</p><p>        如果字体名有空格, 使用引号包裹.</p><p>        建议使用常见字体, 否则兼容性不好.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
这是微软雅黑
这是宋体</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%A7%E5%B0%8F" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%A7%E5%B0%8F">        大小</h5>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">p {
font-size: 20px;
}</code></pre>
<p>        不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)可以给 body 标签使用 font-size</p><p>        要注意单位 px 不要忘记.</p><p>        标题标签需要单独指定大小</p><p><strong>  注意: 实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮</strong></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.font-size .one {
font-size: 40px;
}
.font-size .two {
font-size: 20px;
}
大大大
小小小</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E7%B2%97%E7%BB%86%C2%A0" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E7%B2%97%E7%BB%86%C2%A0">        粗细 </h5>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">p {
font-weight: bold;
font-weight: 700;
}</code></pre>
<p>        可以使用数字表示粗细.        </p><p>        700 == bold, 400 是不变粗, == normal</p><p>        取值范围是 100 -> 900</p><h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E5%AD%97%E6%A0%B7%E5%BC%8F" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E5%AD%97%E6%A0%B7%E5%BC%8F">        文字样式</h5>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;</code></pre>
<p>        很少把某个文字变倾斜.</p><p>        但是经常要把 em / i 改成不倾斜.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.font-style em {
font-style: normal;
}
.font-style div {
font-style: italic;
}
放假啦
听说要加班</code></pre>
<h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7%C2%A0%C2%A0%C2%A0" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7%C2%A0%C2%A0%C2%A0">        文本属性<br></h4><h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2">        文本颜色</h5><h6 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E8%AE%A4%E8%AF%86%20RGB" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E8%AE%A4%E8%AF%86%20RGB">        认识 RGB</h6><p>        我们的显示器是由很多很多的 "像素" 构成的. 每个像素视为一个点, 这个点就能反映出一个具体的颜色.</p><p>        我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.</p><p>        计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).</p><p>        数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色</p><h6 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E8%AE%BE%E7%BD%AE%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E8%AE%BE%E7%BD%AE%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2">        设置文本颜色</h6>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">color: red;
color: #ff0000;
color: rgb(255, 0, 0);</code></pre>
<h6 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0color%20%E5%B1%9E%E6%80%A7%E5%80%BC%E7%9A%84%E5%86%99%E6%B3%95%3A" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0color%20%E5%B1%9E%E6%80%A7%E5%80%BC%E7%9A%84%E5%86%99%E6%B3%95%3A">        color 属性值的写法:</h6><p>        预定义的颜色值(直接是单词)</p><p>        [最常用] 十六进制形式RGB 方式</p><p>        十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示.</p><p>        #ff00ff => #f0f</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.color {
color: red;
/* color: rgb(255, 0, 0); */
/* color: #ff0000; */
}
这是一段话</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E5%AF%B9%E9%BD%90">        文本对齐</h5><p>        控制文字水平方向的对齐.</p><p>不光能控制文本对齐, 也能控制图片等元素居中或者靠右</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">text-align: [值];</code></pre>
<p>        center: 居中对齐</p><p>        left: 左对齐</p><p>        right: 右对齐</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.text-align .one {
text-align: left;
}
.text-align .two {
text-align: right;
}
.text-align .three {
text-align: center;
}
左对齐
右对齐
居中对齐</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E8%A3%85%E9%A5%B0" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E8%A3%85%E9%A5%B0">        文本装饰</h5>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">text-decoration: [值];</code></pre>
<p>        常用取值:</p><p>        underline 下划线. [常用]</p><p>        none 啥都没有. 可以给 a 标签去掉下划线. overline 上划线. [不常用]        </p><p>        line-through 删除线 [不常用]</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.text-decorate .one {
text-decoration: none;
}
.text-decorate .two {
text-decoration: underline;
}
.text-decorate .three {
text-decoration: overline;
}
.text-decorate .four {
text-decoration: line-through;
}
啥都没有
下划线
上划线
删除线</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B">        文本缩进</h5><p>        控制段落的首行缩进 (其他行不影响)</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">text-indent: [值];</code></pre>
<p>        单位可以使用 px 或者 em.</p><p>        使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.</p><p>        缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.text-indent .one {
text-indent: 2em;
}
.text-indent .two {
text-indent: -2em;
}
正常缩进
反向缩进</code></pre>
<p></p><h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%A1%8C%E9%AB%98" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%A1%8C%E9%AB%98">        行高</h5><p>        行高指的是上下文本行之间的基线距离.</p><p>        HTML 中展示文字涉及到这几个基准线:</p><p>        顶线</p><p>        中线</p><p>        基线 (相当于英语四线格的倒数第二条线)底线</p><p>        内容区：底线和顶线包裹的区域，即下图深灰色背景区域</p><p><img alt="" height="533" src="https://i-blog.csdnimg.cn/direct/4374b6805e12407bbee4ea6a4cefab10.png" width="1172"></p><p>        其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">line-height: [值];</code></pre>
<p><strong> 注意1: 行高 = 上边距 + 下边距 + 字体大小</strong></p><p>        上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px</p><p><strong>注意2: 行高也可以取 normal 等值.</strong></p><p>        这个取决于浏览器的实现. chrome 上 normal 为 21 px</p><p><strong> 注意3: 行高等与元素高度, 就可以实现文字居中对齐.</strong><br></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.line-height .two {
height: 100px;
line-height: 100px;
}
文本垂直居中</code></pre>
<h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7">        背景属性</h3><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2">        背景颜色</h4>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">background-color: [指定颜色]</code></pre>
<p>        默认是 transparent (透明) 的. 可以通过设置颜色的方式修改</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">body {
background-color: #f3f3f3;
}
.bgc .one {
background-color: red;
}
.bgc .two {
background-color: #0f0;
}
.bgc .three {
/* 背景透明 */
background-color: transparent;
}
红色背景
绿色背景
透明背景</code></pre>
<h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87">        背景图片</h4>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">background-image: url(https://blog.csdn.net/2401_89119815/article/details/...);</code></pre>
<p>        比 image 更方便控制位置(图片在盒子中的位置)注意:</p><p>        1. url 不要遗漏.</p><p>        2. url 可以是绝对路径, 也可以是相对路径</p><p>        3. url 上可以加引号, 也可以不加.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.bgi .one {
background-image: url(https://blog.csdn.net/2401_89119815/article/details/rose.jpg);
height: 300px;
}
背景图片</code></pre>
<h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%B9%B3%E9%93%BA" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%B9%B3%E9%93%BA">        背景平铺</h4>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">background-repeat: [平铺方式]</code></pre>
<p>        重要取值:</p><p>        repeat: 平铺</p><p>        no-repeat: 不平铺</p><p>        repeat-x: 水平平铺</p><p>        repeat-y: 垂直平铺</p><p>        默认是 repeat.</p><p>        背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.bgr .one
{
background-image: url(https://blog.csdn.net/2401_89119815/article/details/rose.jpg);
height: 300px;
background-repeat: no-repeat;
}
.bgr .two
{
background-image: url(https://blog.csdn.net/2401_89119815/article/details/rose.jpg);
height: 300px;
background-repeat: repeat-x;
}
.bgr .three
{
background-image: url(https://blog.csdn.net/2401_89119815/article/details/rose.jpg);
height: 300px;
background-repeat: repeat-y;
}
不平铺
水平平铺
垂直平铺</code></pre>
<h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E4%BD%8D%E7%BD%AE" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E4%BD%8D%E7%BD%AE">        背景位置</h4>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">background-position: x y;</code></pre>
<p>        修改图片的位置.</p><p>        参数有三种风格:</p><p>        1. 方位名词: (top, left, right, bottom)</p><p>        2. 精确单位: 坐标或者百分比(以左上角为原点)</p><p>        3. 混合单位: 同时包含方位名词和精确单位</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.bgp .one
{
background-image: url(https://blog.csdn.net/2401_89119815/article/details/rose.jpg);
height: 500px;
background-repeat: no-repeat;
background-color: purple;
background-position: center;
}
背景居中</code></pre>
<p><strong>注意：</strong></p><p>        如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)</p><p>        如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.</p><p>        如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)</p><p>        关于坐标系:</p><p>计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的).</p><p>        如下图所示<img alt="" height="705" src="https://i-blog.csdnimg.cn/direct/99c444a8043e4cc5b113eca9ba61c7f8.png" width="726"></p><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%B0%BA%E5%AF%B8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%83%8C%E6%99%AF%E5%B0%BA%E5%AF%B8">        背景尺寸</h4>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">background-size: length|percentage|cover|contain;</code></pre>
<p>        可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px</p><p>        也可以填百分比: 按照父元素的尺寸设置.</p><p>        cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。</p><p>        把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.bgs .one {
width: 500px;
height: 300px;
background-image: url(https://blog.csdn.net/2401_89119815/article/details/rose.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
背景尺寸</code></pre>
<p>        注意体会 contain 和 cover 的区别. 当元素为矩形(不是正方形) 时, 区别是很明显的.<br>         contain</p><p><img alt="" height="441" src="https://i-blog.csdnimg.cn/direct/7015cdaf0c584e6c8ba4c02edb1a5bfe.png" width="732"></p><p>        cover</p><p><img alt="" height="436" src="https://i-blog.csdnimg.cn/direct/32e5fc971b42492bb19b17fc8539d0bb.png" width="742"></p><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2">        圆角矩形</h4><p>        通过 border-radius 使边框带圆角效果<br></p><h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">        基本用法</h5>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">border-radius: length;</code></pre>
<p>        length 是内切圆的半径. 数值越大, 弧线越强烈<br></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 10px;
}</code></pre>
<p><img alt="" height="351" src="https://i-blog.csdnimg.cn/direct/c4364758ca57408db7c7c119d8b5cd83.png" width="1125"></p><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E7%94%9F%E6%88%90%E5%9C%86%E5%BD%A2" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E7%94%9F%E6%88%90%E5%9C%86%E5%BD%A2">        生成圆形</h4><p>        让 border-radius 的值为正方形宽度的一半即可</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
/* 或者用 50% 表示宽度的一半 */
border-radius: 50%;
}</code></pre>
<h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E7%94%9F%E6%88%90%E5%9C%86%E5%BD%A2%E7%9F%A9%E5%BD%A2" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E7%94%9F%E6%88%90%E5%9C%86%E5%BD%A2%E7%9F%A9%E5%BD%A2">        生成圆形矩形</h4><p>        让 border-radius 的值为矩形高度的一半即可</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px;
}</code></pre>
<p><img alt="" height="262" src="https://i-blog.csdnimg.cn/direct/01a6031a9b374a77a2ab41e1a50fba91.png" width="627"></p><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%B1%95%E5%BC%80%E5%86%99%E6%B3%95" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%B1%95%E5%BC%80%E5%86%99%E6%B3%95">        展开写法</h4><p>        border-radius 是一个复合写法. 实际上可以针对四个角分别设置.<br><strong>等价于</strong></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 10px 20px 30px 40px;</code></pre>
<p><strong>等价于</strong></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;</code></pre>
<h2 id="%E5%85%83%E7%B4%A0%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F" name="%E5%85%83%E7%B4%A0%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F">元素显示模式</h2><p>        在 CSS 中, HTML 的标签的显示模式有很多.此处只重点介绍两个:</p><p>        块级元素</p><p>        行内元素</p><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0">        块级元素</h3><p>        常见的元素:</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">h1 - h6
p
div
ul
ol
li
...</code></pre>
<p>        特点:</p><p>        独占一行</p><p>        高度, 宽度, 内外边距, 行高都可以控制.</p><p>        宽度默认是父级元素宽度的 100% (和父元素一样宽)是一个容器(盒子), 里面可以放行内和块级元素.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.demo1 .parent {
width: 500px;
height: 500px;
background-color: green;
}
.demo1 .child {
/* 不写 width, 默认和父元素一样宽 */
/* 不写 height, 默认为 0 (看不到了) */
height: 200px;
background-color: red;
}
child1
child2</code></pre>
<p><strong> 注意:</strong></p><p>        文字类的元素内不能使用块级元素</p><p>        p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">蛤蛤</code></pre>
<h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0">        行内元素</h3><p>        常见的元素:<br></p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">a
strong
b
em
i
del
s
ins
u
span
...</code></pre>
<p>        特点:</p><p>        不独占一行, 一行可以显示多个</p><p>        设置高度, 宽度, 行高无效</p><p>        左右外边距有效(上下无效). 内边距有效.默认宽度就是本身的内容</p><p>        行内元素只能容纳文本和其他行内元素, 不能放块级元素</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">.demo2 span
{
width: 200px;
height: 200px;
background-color: red;
}
child1
child2
child3</code></pre>
<p><strong>注意:</strong></p><p>        a 标签中不能再放 a 标签 (虽然 chrome 不报错, 但是最好不要这么做).</p><p>        a 标签里可以放块级元素, 但是更建议先把 a 转换成块级元素</p><h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E5%92%8C%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E7%9A%84%E5%8C%BA%E5%88%AB" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E5%92%8C%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E7%9A%84%E5%8C%BA%E5%88%AB">        行内元素和块级元素的区别</h3><p>        块级元素独占一行, 行内元素不独占一行</p><p>        块级元素可以设置宽高, 行内元素不能设置宽高.</p><p>        块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置</p><h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%94%B9%E5%8F%98%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E6%94%B9%E5%8F%98%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0">        改变显示模式<br></h3><p>        使用 display 属性可以修改元素的显示模式.</p><p>        可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.</p><p>        display: block 改成块级元素 [常用]</p><p>        display: inline 改成行内元素 [很少用]</p><p>        display: inline-block 改成行内块元素</p><h2 id="%E7%9B%92%E6%A8%A1%E5%9E%8B" name="%E7%9B%92%E6%A8%A1%E5%9E%8B">盒模型</h2><p>        每一个 HTML 元素就相当于是一个矩形的 "盒子"这个盒子由这几个部分构成：</p><p>        边框 border</p><p>        内容 content</p><p>        内边距 padding</p><p>        外边距 margin</p><p><img alt="" height="677" src="https://i-blog.csdnimg.cn/direct/ab0235c0da3943e5aaa9c8b6ee43a232.png" width="1113"></p><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%BE%B9%E6%A1%86" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E8%BE%B9%E6%A1%86">        边框</h3><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7">        基础属性</h4><p>        粗细: border-width</p><p>        样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框</p><p>        颜色: border-color</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-html">test</code></pre>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
border-color: green;
}</code></pre>
<p>        支持简写, 没有顺序要求</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">border: 1px solid red;</code></pre>
<p>        可以改四个方向的任意边框.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">border-top/bottom/left/right</code></pre>
<p>        以下的代码只给上边框设为红色, 其余为蓝色.利用到的层叠性, 就近原则的生效.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">border: 1px solid blue;
border-top: red;</code></pre>
<p><strong>边框会撑大盒子</strong></p><p>        可以看到, width, height 是 500*250, 而最终整个盒子大小是 520 * 270. 边框10个像素相当于扩大了大小.</p><p><img alt="" height="646" src="https://i-blog.csdnimg.cn/direct/b3e7732de22941d2ab86c503d90600eb.png" width="890"><br><br>         通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">/* * 为通配符选择器. */
* {
box-sizing: border-box;
}</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%86%85%E8%BE%B9%E8%B7%9D" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%86%85%E8%BE%B9%E8%B7%9D">        内边距</h5><p>        padding 设置内容和边框之间的距离.</p><h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E7%A1%80%E5%86%99%E6%B3%95" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E7%A1%80%E5%86%99%E6%B3%95">        基础写法</h6><p>        默认内容是顶着边框来放置的. 用 padding 来控制这个距离可以给四个方向都加上边距</p><p>        padding-top</p><p>        padding-bottom</p><p>        padding-left</p><p>        padding-right</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-html">test</code></pre>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">div {
height: 200px;
width: 300px;
}</code></pre>
<p></p><p>        加上padding后</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">div {
height: 200px;
width: 300px;
padding-top: 5px;
padding-left: 10px;
}</code></pre>
<p><strong> 注意:</strong></p><p>        整个盒子的大小从原来的 300 * 200 => 310 * 205. 说明内边距也会影响到盒子大小(撑大盒</p><p>子).</p><p>        使用 box-sizing: border-box 属性也可以使内边距不再撑大盒子. (和上面 border 类似)</p><h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95">        复合写法</h6><p>        可以把多个方向的 padding 合并到一起. [四种情况都要记住, 都很常见]</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示上5px, 右10px, 下20px, 左30px (顺时针)</code></pre>
<h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%96%E8%BE%B9%E8%B7%9D" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%96%E8%BE%B9%E8%B7%9D">        外边距</h5><h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E7%A1%80%E5%86%99%E6%B3%95" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%9F%BA%E7%A1%80%E5%86%99%E6%B3%95">        基础写法</h6><p>        控制盒子和盒子之间的距离.可以给四个方向都加上边距</p><p>        margin-top</p><p>        margin-bottom</p><p>        margin-left</p><p>        margin-right</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-html">蛤蛤
呵呵</code></pre>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">div {
background-color: red;
width: 200px;
height: 200px;
}
.first {
margin-bottom: 20px;
}</code></pre>
<p><img alt="" height="450" src="https://i-blog.csdnimg.cn/direct/17a76257db2f40098f0ac2c58d66c363.png" width="288"></p><h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95">        复合写法</h6><p>        规则同padding</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40</code></pre>
<h4 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E5%9D%97%E6%9E%81%E5%85%83%E7%B4%A0%E5%B1%85%E4%B8%AD" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E5%9D%97%E6%9E%81%E5%85%83%E7%B4%A0%E5%B1%85%E4%B8%AD">        块极元素居中</h4><p>        前提:</p><p>        指定宽度(如果不指定宽度, 默认和父元素一致)</p><p>        把水平 margin 设为 auto</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;</code></pre>
<p>        注意:</p><p>        水平居中的方式和 text-align 不一样.</p><p>        margin: auto 是给块级元素用得到.</p><p>        text-align: center 是让行内元素或者行内块元素居中的.</p><p>        另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.</p><h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E5%8E%BB%E9%99%A4%E6%B5%8F%E8%A7%88%E5%99%A8%E9%BB%98%E8%AE%A4%E6%A0%B7%E5%BC%8F" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%E5%8E%BB%E9%99%A4%E6%B5%8F%E8%A7%88%E5%99%A8%E9%BB%98%E8%AE%A4%E6%A0%B7%E5%BC%8F">        去除浏览器默认样式</h3><p>        浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别.为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式.使用通配符选择器即可完成这件事情.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">* {
marign: 0;
padding: 0;
}</code></pre>
<h2 id="%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0" name="%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0">弹性布局<br></h2><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%88%9D%E4%BD%93%E9%AA%8C" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%88%9D%E4%BD%93%E9%AA%8C">        初体验</h3><p>        创建一个 div, 内部包含三个 span</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">1
2
3
div {
width: 100%;
height: 150px;
background-color: red;
}
div>span {
background-color: green;
width: 100px;
}</code></pre>
<p>        效果为：</p><p><img alt="" height="129" src="https://i-blog.csdnimg.cn/direct/2c54fbe1604c42948c20d8256d18ace2.png" width="908"></p><p>        当我们给 div 加上 display:flex 之后, 效果为</p><p><img alt="" height="141" src="https://i-blog.csdnimg.cn/direct/1c43cf715f1e4b0391868532c40a7a8c.png" width="888"></p><p>        此时看到, span 有了高度, 不再是 "行内元素了"</p><p>        再给 div 加上 justify-content: space-around; 此时效果为</p><p><img alt="" height="129" src="https://i-blog.csdnimg.cn/direct/2a0e229eb7d94ef897c6126d5f19de4b.png" width="882"></p><p>        此时可以看到这些 span 已经能够水平隔开了.</p><p>        把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在右侧显示了</p><p><img alt="" height="125" src="https://i-blog.csdnimg.cn/direct/e2a21b900b414adf8e44dddf571389bc.png" width="886"></p><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20flex%E5%B8%83%E5%B1%80%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20flex%E5%B8%83%E5%B1%80%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5">        flex布局基本概念</h3><p>        flex 是 flexible box 的缩写. 意思为 "弹性盒子".</p><p>        任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.</p><p>        flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.</p><p><strong>        基础概念:</strong></p><p>        被设置为 display:flex 属性的元素, 称为 flex container</p><p>        它的所有子元素立刻称为了该容器的成员, 称为 flex item</p><p>        flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)</p><p><img alt="" height="672" src="https://i-blog.csdnimg.cn/direct/735631b9efc447068338e680c6252264.png" width="869"></p><p><strong>  注意:</strong></p><p>        当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效.</p><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7">        常用属性</h3><h4 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0justify-content" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0justify-content">        justify-content</h4><p><br>         设置主轴上的子元素排列方式.</p><p>        使用之前一定要确定好主轴是哪个方向</p><p><img alt="" height="308" src="https://i-blog.csdnimg.cn/direct/7aab48bebbcf4b4c932d90d4bf381e5c.png" width="881"></p><p>        示例：</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">1
2
3
4
5
div {
width: 100%;
height: 150px;
background-color: red;
display: flex;
}
div span {
width: 100px;
height: 100px;
background-color: green;
}</code></pre>
<p>        未指定 justify-content 时, 默认按照从左到右的方向布局.</p><p><img alt="" height="105" src="https://i-blog.csdnimg.cn/direct/75703e54d9ed4fa4b817380c93578a85.png" width="884"></p><p>        设置 justify-content: flex-end , 此时元素都排列到右侧了.</p><p><img alt="" height="112" src="https://i-blog.csdnimg.cn/direct/87889b8df8c745558dc77e26bc81dca9.png" width="876"></p><p>        设置 jutify-content: center , 此时元素居中排列<br><img alt="" height="112" src="https://i-blog.csdnimg.cn/direct/fd5e572860e44f0d9bdf893f5888b416.png" width="879"></p><p>        设置 justify-content: space-around;平分了剩余空间.</p><p><img alt="" height="106" src="https://i-blog.csdnimg.cn/direct/5d05d33887e74f4bbcaec592b6a7ab0b.png" width="876"></p><h4 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20align-items" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20align-items">        align-items</h4><p>        设置侧轴上的元素排列方式</p><p>        在上面的代码中, 我们是让元素按照主轴的方向排列, 同理我们也可以指定元素按照侧轴方向排列<img alt="" height="295" src="https://i-blog.csdnimg.cn/direct/4fe832b18f4b462da4e6650e407fac66.png" width="873"></p><p>        取值和 justify-content 差不多.理解 stretch(拉伸):</p><p>        这个是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的高度.</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">1
2
3
div {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: space-around;
}
div span {
width: 150px;
background-color: red;
}</code></pre>
<p><img alt="" height="626" src="https://i-blog.csdnimg.cn/direct/8622ac692251443792c6486b35cccf31.png" width="629"></p><p>可以使用 align-items 实现垂直居中</p>
<pre style="white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important"><code class="language-css">1
2
3
div {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: space-around;
align-items: center;
}
div span {
width: 150px;
height: 100px;
background-color: red;
}</code></pre>
<p><img alt="" height="628" src="https://i-blog.csdnimg.cn/direct/ef33096093f044d8918fb1ec1ec659af.png" width="626"></p><p><strong>        注意:</strong></p><p>        align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents</p><h2 id="Chrome%20%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7%20--%20%E6%9F%A5%E7%9C%8B%20CSS%20%E5%B1%9E%E6%80%A7" name="Chrome%20%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7%20--%20%E6%9F%A5%E7%9C%8B%20CSS%20%E5%B1%9E%E6%80%A7">Chrome 调试工具 -- 查看 CSS 属性<br></h2><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%89%93%E5%BC%80%E6%B5%8F%E8%A7%88%E5%99%A8" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%89%93%E5%BC%80%E6%B5%8F%E8%A7%88%E5%99%A8">        打开浏览器</h3><p>        有两种方式可以打开 Chrome 调试工具</p><p>        直接按 F12 键</p><p>        鼠标右键页面 => 检查元素</p><h3 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%A0%87%E7%AD%BE%E9%A1%B5%E7%9A%84%E5%90%AB%E4%B9%89" name="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E6%A0%87%E7%AD%BE%E9%A1%B5%E7%9A%84%E5%90%AB%E4%B9%89">        标签页的含义</h3><p>        elements 查看标签结构</p><p>        console 查看控制台</p><p>        source 查看源码+断点调试</p><p>        network 查看前后端交互过程</p><p>        application 查看浏览器提供的一些扩展功能(本地存储等)</p><p>         Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究</p><h3 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0elements%20%E6%A0%87%E7%AD%BE%E9%A1%B5%E4%BD%BF%E7%94%A8%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0" name="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0elements%20%E6%A0%87%E7%AD%BE%E9%A1%B5%E4%BD%BF%E7%94%A8%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0">        elements 标签页使用<br></h3><p>        ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.使用左上角箭头选中元素</p><p>        右侧可以查看当前元素的属性, 包括引入的类.</p><p>        右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如字体大小, 可以使用方向键来微调数值.</p><p>        此处的修改不会影响代码, 刷新就还原了~</p><p>        如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)</p><p><img alt="" height="189" src="https://i-blog.csdnimg.cn/direct/abec4d9d85854bddaa420417dab45425.png" width="749"></p><p></p><p>        以上就是前端CSS的内容，喜欢请点个赞支持一下谢谢</p><p>封面图自取：</p><p style="text-align: center"><img alt="" src="https://i-blog.csdnimg.cn/direct/30af3a2b675c490aa6e311e6100cd182.jpeg"></p></code></code></div><br><br>
来源：https://www.cnblogs.com/ljbguanli/p/19103730

頁: [1]

查看完整版本: 详细介绍：前端学习——CSS