web —— css(1)-编程知识

Web —— css基础

- - - 1. CSS样式表
    - 2. CSS的三种引入方式
    - 3. CSS 语法
    - 4. CSS 选择器
    - - 4.1 元素选择器
        4.2 类选择器
        4.3 ID选择器
        4.4 属性选择器
        4.5 后代选择器
        4.6 子元素选择器
        4.7 伪类选择器
        4.8 分组选择器
    - 5. 颜色和字体
    - 6. 显示方式display
    - 7. 盒子模型
    - - 7.1 盒子模型 - 外边距塌陷
        7.2 盒子模型 - 父元素消失
        7.3 盒子模型 - 边框和外边距
    - 8. CSS三大特性

1. CSS样式表

CSS： (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的标记型计算机语言，使网页更具吸引力和可读性
作用：将文档的内容与其呈现方式分离，通过将样式应用到HTML元素上，可以改变字体、颜色、大小、间距、边框等各种视觉效果，从而实现对网页的个性化定制
特点
层叠性（Cascading）：多个样式规则可以应用于同一个元素，且具有不同的优先级
继承性（Inheritance）：某些样式属性会被子元素继承，简化了样式定义的工作
选择器（Selectors）：通过选择器来选择要应用样式的元素
盒模型（Box Model）：网页中的每个元素都被看作是一个矩形框，包括内容区、内边距、边框和外边距

2. CSS的三种引入方式

内联样式 ▶
➤ 内联样式将CSS代码直接应用到HTML元素的<style>属性中，不能复用

应用场景：适用于只需在某个具体元素上应用样式，并且不会被其他样式覆盖的情况
   <p style="color: red;">这是一个红色的段落。</p>
内部样式 ▶
➤ 内部样式表将CSS代码直接写在HTML文档头部<head>的<style>标签中，只能当前页面复用

应用场景：适合于只在一个HTML文档中使用的样式，或者在一个小块区域内定义特定的样式
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS引入方式</title><style>/* 标签选择器 */h3 {color: #c4a2a2;}</style>
</head>
外部样式 ▶
➤ 将CSS代码保存在一个独立的.css文件中，并通过<link>标签将其与HTML文档关联起来，支持多页面复用

应用场景：最常用和推荐的方式，全站样式统一，提高页面加载速度，方便样式维护等场景
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS引入方式</title><link rel="stylesheet" href="../css/01-外部css.css">
</head>

3. CSS 语法

css语法的两个主要组成部分 ▶
➤ 选择器，一条或多条声明

属性：CSS声明总是以分号 ; 结束，声明总以大括号{}括起来

4. CSS 选择器

4.1 元素选择器

元素选择器 ▶
➤ 会选取页面中所有匹配元素，所以应该谨慎使用，避免过度通用的选择器
应用场景：对整个页面中某一类型的元素进行样式定义
p { color: red; }

4.2 类选择器

类选择器 ▶
➤ 可以为多个元素设置相同的类名，类名应具有语义化（以反映元素的用途或功能）
应用场景：标记一组具有相同类名的元素进行样式定义
.highlight { background-color: yellow; }

4.3 ID选择器

ID选择器 ▶
➤ 每个页面中的ID应该是唯一的，不能重复使用，ID选择器具有高优先级，应避免滥用ID选择器保持简洁
应用场景：标记唯一的元素进行样式定义
#header { font-size: 24px; }

4.4 属性选择器

属性选择器 ▶
➤ 根据元素的属性值选择特定的元素，属性选择器支持多种匹配方式，精确匹配、包含匹配、开始匹配、结束匹配等
应用场景：根据元素的属性值进行选择进行样式定义
/* 选取所有<input>元素中type属性为"text"的元素，并设置边框样式 */
input[type="text"] { border: 1px solid #ccc; }

4.5 后代选择器

后代选择器 ▶
➤ 后代选择器可以选择父元素内部的所有符合条件的后代元素，不要使用过于具体的后代选择器，以免影响性能
应用场景：选择元素的后代元素进行样式定义
div p { font-weight: bold; }

4.6 子元素选择器

子元素选择器 ▶
➤ 子元素选择器只能选择作为父元素直接子元素的元素，并且不会进一步选择嵌套在子元素内部的元素
应用场景：选择元素的直接子元素进行样式定义
ul > li { list-style-type: none; }

4.7 伪类选择器

伪类选择器 ▶
➤ 伪类选择器的语法以冒号（:）开头，后跟伪类名称；伪类选择器一般用于定义与元素状态相关的样式，例如鼠标悬浮、访问过、选中；不同的伪类选择器可以组合使用，实现更复杂的效果，例如:hover:active可以同时定义鼠标悬浮和鼠标点击时的样式
应用场景：根据元素的状态或特定条件来选择样式
 a:hover {color: red;}/* :nth-child伪类选择器用于按序号选择特定子元素 */ul li:nth-child(odd) {background-color: lightgray;}

4.8 分组选择器

分组选择器 ▶
➤ 将多种选择器合并为一个规则，在样式定义中更加灵活和高效
应用场景：将相同样式应用于多个选择器，减少代码重复
 h1, h2, h3 {color: blue;font-weight: bold;}/* 将类选择器和元素选择器结合使用 */.highlight, p {background-color: yellow;}

练习代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器</title><style>/* 标签选择器 */p {color: #808000;}/* id选择器：选择某一个元素 */#tow {background-color: aquamarine;}/* 类选择器：选择多个不相关的元素 */.content {color: rgb(97, 45, 8);}/* 分组选择器：将多个选择器元素分成一组 */h1,h2,h3 {/* 分组选择器共同设置 */background-color: rgb(140, 169, 159);}/* 属性选择器： */input[type='text'] {/* 根据输入框的属性值‘text’设置其背景 */background-color: rgb(116, 174, 95);}/* 后代选择器：层级关系选择子元素 */body div div {/* 后代选择器容默认选到后台中所有相同的后代 */width: 200px;height: 200px;background-color: #656060;}/* 子元素选择器：层级关系选择子元素（精准选择） */body>div>div>span>p {/* 子类选择器选择子代中特定的元素 */color: #c64343;}/* 伪类选择器：选择元素的状态 *//* 未访问 */a:link {color: rgb(18, 251, 255);}/* 访问过 */a:visited {color: rgb(221, 139, 242);}/* 悬停 */a:hover {color: rgb(255, 173, 20);}/* 点击/激活 */a:active {color: rgb(18, 86, 83);}</style>
</head><body><h1>标题一</h1><h2>标题二</h2><h3>标题三</h3><input type="text" name="user"><div class="sentence"><h4>心灵文案</h4><article><p class="content">1、不负光阴，不负自己，不负被爱</p><p id="tow">2、这个世界上没有人有义务对你好，所以你应该这样想，那些冷漠和刻薄是理所当然，那些温柔相待才更应珍惜</p><p>3、请你一定要对号入座，我说的所有星光月亮、清泉小溪、蘸着糖的奶油和蜂蜜……这世间所有的美好事物，都只是为了形容你</p><p>4、森林不残酷吗？有灾病猎杀，但动物仍美好着。宇宙不残酷吗？荒寂无回应，但星辰仍美好着。社会也残酷，有生死离别，会井干路绝，但人仍美好着</p><!-- <p>5、没有任何事，任何人需要你过了半夜12点还苦想不睡，任何东西都不能以健康做交换，记住，你只能活一辈子</p> --></article></div><div><div><p>后代选择器</p></div><div><span><p>子代代选择器</p></span></div></div><a href="https://www.baidu.com" target="_blank">超链接</a><a href="https://www.baidu.com">超链接</a><a href="https://www.baidu.com">超链接</a><a href="https://www.baidu.com">超链接</a>
</body>
</html>

5. 颜色和字体

RGB颜色：红、绿、蓝三个分量的数值来表示颜色，数值范围是0到255
十六进制颜色：6位16进制数值来表示颜色，前两位：红色，中间两位：绿色，后两位：蓝色
RGBA颜色：和RGB类似，添加了一个透明度分量，取值范围是0到1，表示不透明到完全透明

练习代码

对同一个元素的同一个属性设置多个颜色，前面的颜色会被覆盖

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>颜色</title>
</head>
<style>* {margin: 0;}h1 {/* 字体颜色 *//* 颜色名称 */color: red;/* 三位十六进制 */color: #000;/* 六位十六进制：每两位表示rgb中的一个值 */color: #00ff00;/* rgb */color: rgb(0, 255, 255);/* rgba */color: rgba(200, 180, 0, 0);}#d1 {width: 500px;height: 300px;/* 背景颜色 */background-color: #95d49e;/* 背景图 */background-image: url(../../html/background3.jpg);/* 设置图片大小 */background-size: 500px 280px;/* 设置禁止重复 */background-repeat: no-repeat;/* 图片位置：偏移值（像素/百分比） */background-position: 0 20px;}#d2 {width: 611px;height: 376px;background-color: #e8e8ee;background-image: url(pc.png);background-repeat: no-repeat;background-size: 318px 319px;background-position: 90% 50%;}.font {font-weight: bold;font-size: 28px;color: rgba(216, 28, 28, 0.784);position: absolute;bottom: 200px;left: 100px;}
</style><body><h1>颜色测试</h1><div id="d1">背景颜色</div><div id="d2"></div><div class="font">售价：4999</div>
</body></html>

css字体相关属性 ▶
➤ 设置文本的字体，颜色，样式等

属性：
text-align：控制文本或元素在网页中的水平对齐方式
left：文本左对齐
right：文本右对齐
center：文本居中对齐
justify：文本两端对齐，即两侧呈现完整的直边
text-decoration：文本装饰效果
none：没有任何装饰效果
underline：给文本添加下划线
overline：给文本添加上划线
line-through：给文本添加中划线
/* 在一个段落中同时显示下划线和删除线 */
p {text-decoration: underline line-through;
}
line-height：设置行高（行间距）的大小（决定了文本行与文本行之间的垂直间距）
数字值：指定行高的倍数（值为1.5表示行高为字体大小的1.5倍）
百分比值：相对于父元素字体大小的百分比（值为150%表示行高为父元素字体大小的1.5倍）
长度值：使用绝对单位（如像素、点）指定具体的行高值

行高设置为与容器高度相等，可以实现垂直居中的效果

text-shadow：在文本周围创建阴影效果
text-shadow: h-shadow v-shadow blur-radius color;h1 {text-shadow: 2px 2px 4px #888888;
}
h-shadow：指定阴影的水平偏移量，可以为正数（向右偏移）或负数（向左偏移）
v-shadow：指定阴影的垂直偏移量，可以为正数（向下偏移）或负数（向上偏移）
blur-radius：指定阴影的模糊半径，值越大，阴影越模糊
color：指定阴影的颜色
font-size：设置文本的字体大小
绝对长度：指定一个固定的字体大小，如像素（px）、点（pt）、毫米（mm）
相对长度：相对于父元素或根元素的字体大小进行设置，如em（相对于父元素）和rem（相对于根元素）
百分比：相对于父元素的字体大小进行设置，例如：font-size: 120%
font-weight：设置文本的粗细程度或者字体的粗细属性
normal：默认的字体粗细（相当于400）
bold：较粗的字体（相当于700）
lighter：比父元素更细的字体
bolder：比父元素更粗的字体
数字值：用于指定相对于常规字体粗细的相对值，通常在100到900之间
其他字体样式设置：
指定字体：font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;，
斜体：font-style: italic;，
字体样式和大小一同设置： font: 50px sans-serif;

6. 显示方式display

display显示方式 ▶
➤ 控制元素在页面中的布局和显示行为

属性：
block：将元素显示为块级元素，独占一行，并且默认宽度为父元素的100%；常见的块级元素有<div>、<p>、<h1>到<h6>
inline：将元素显示为内联（行内）元素，不会换行，并且默认宽度由内容决定；常见的内联元素有<span>、<a>、<strong>、<em>等
inline-block：将元素显示为内联块级元素，不会换行，并且保留了块级元素的盒模型特性，可以设置宽高、内边距和外边距等；常见的内联块级元素有<img>、<input>、<button>等
none：将元素隐藏，不占据空间，并且不会影响其他元素的布局（相当于完全删除该元素）
flex：将元素显示为弹性容器；通过flex-direction、flex-wrap等属性来控制子元素的排列方式(常用于响应式布局)
grid：将元素显示为网格容器，通过grid-template-columns、grid-template-rows等属性来定义网格布局（常用于复杂的二维布局）
table：将元素显示为表格，类似于HTML中的<table>元素，使用table-row、table-cell等属性来控制子元素的布局
inline-table：将元素显示为内联表格，类似于HTML中的<table>元素，但是不会独占一行
list-item：将元素显示为列表项，并添加了项目符号（常用于<li>元素）

练习代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示方式</title><style>.page {background-color: antiquewhite;border-radius: 10px;/* 将page中的元素居中 */text-align: center;}p {color: teal;text-align: center;font-weight: bold;}a {background-color: aquamarine;/* 将超链接（行内元素）改为行内块级元素 */display: inline-block;/* 设置宽高 */width: 280px;height: 25px;/* 水平居中 */text-align: center;/* 垂直居中 */line-height: 25px;/* 字体颜色 */color: brown;/* 去除下划线 */text-decoration: none;/* 字体大小 */font-size: 15px;/* 设置原图 */border-radius: 10px;}.inline {background-color: cadetblue;width: 200px;/* height: 200px; *//* 左右居中 */margin: 10px auto;/* 修改为行内元素 */display: inline;border-radius: 5px;}.inline-block {display: inline-block;width: 200px;height: 100px;background-color: darkkhaki;border-radius: 10px;margin-left: 10px;}.none {width: 200px;height: 200px;background-color: coral;/* display: none; */}.flex {width: 200px;height: 200px;background-color: darkmagenta;display: flex;/* 设置文本从右到左 */direction: rtl;}.grid {width: 200px;height: 200px;background-color: #c64a4a;display: grid;/*  */grid-template-columns: max-content;}</style>
</head><body><!-- 元素显示方式：display --><!-- block：块级元素默认值，独占一行，可修改宽高（h，p，viv）inline：行内元素默认值，共占一行，不能修改宽高（常见标签：psan，b，i，s，u，a）inline-block：行内块元素默认值，共占一行，可修改宽高（input,img)none：隐藏元素--><div class="page"><p>将行内元素转化为行内块元素</p><a href="#">超链接属于行内元素</a><div class="inline">将块级元素转为行内元素，宽度由内容决定，</div><span class="inline-block">将行内元素转为行内块级元素，不会换行，能设置宽高</span><div class="none">none：将元素隐藏，不占据空间，并且不会影响其他元素的布局（相当于完全删除该元素）</div><div class="grid">grid：将元素显示为网格容器，可以通过grid-template-columns、grid-template-rows等属性来定义网格布局。常用于复杂的二维布局</div></div><div class="flex">flex：将元素显示为弹性容器，可以通过flex-direction、flex-wrap等属性来控制子元素的排列方式，常用于响应式布局</div>
</body></html>

7. 盒子模型

盒子模型 ▶：一个由指定大小的内容区的自身内边距，边框，外边距所构成的矩形盒子
➤ CSS盒子模型是指在网页布局中，每个HTML元素可以看做一个矩形的盒子（盒子模型是一种设计思想模型）

属性：一个盒子模型包括四个部分
内容区（Content）：包含元素的实际内容（文本、图像或其他嵌套的元素），内容区的宽度和高度可以通过width和height属性进行设置
内边距区（Padding）：内边距是内容区与边框之间的空白区域，内边距的大小可以通过padding属性进行设置，内边距对于元素的背景色和边框不起作用
边框区（Border）：边框是围绕内容区和内边距区的线条，边框的样式、宽度和颜色可以通过border属性进行设置
外边距区（Margin）：外边距是边框与相邻元素之间的空白区域，外边距可以用于调整元素与其他元素之间的距，。外边距的大小可以通过margin属性进行设置

两种盒子模型：（box-sizing属性来指定使用哪种盒子模型）
标准盒子模型 box-sizing: content-box;
➤ 盒子的实际宽度 = 内容的宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度
➤ 盒子的实际高度 = 内容的高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度
IE盒子模型 box-sizing: border-box;
➤ 盒子的实际宽度 = 内容的宽度 + 左边框宽度 + 右边框宽度 + 左内边距 + 右内边距
➤ 盒子的实际高度 = 内容的高度 + 上边框宽度 + 下边框宽度 + 上内边距 + 下内边距
不同的浏览器渲染后的各个属性值可能不一样，此处使用的为QQ浏览器

ban
在这里插入图片描述

盒子模型

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>/* 盒子模型 */.box {width: 200px;height: 200px;background-color: darkseagreen;margin: 10px;border: 3px solid teal;padding: 5px;/* 标准盒子模型（默认） */box-sizing: content-box;/* IE盒子模型 */box-sizing: border-box;}</style>
</head><body><div class="box">盒子模型</div>
</body></html>

7.1 盒子模型 - 外边距塌陷

块级元素外边距塌陷（margin collapsing） ▶
➤ 两个相邻同级块元素的上下外边距会合并（折叠）成单个外边距的现象（即取两个元素中外边距较大的值作为两者的外边距）

解决方法：
inline-block：使用display: inline-block;改为行内块元素
设置为浮动
行内元素上下外边距无效，元素左右不存在塌陷问题（外边距相加） ▶
➤ 两个行内元素不存在上下塌陷问题，但是存在上下外边距失效问题，行内元素的左右外边距为两个元素的外边距值相加
解决方法：
转为块级元素：使用display: block;
padding取代margin
line-height：设置行高，以在行内元素周围创建一定的空间，从视觉上实现上下外边距的效果
父子粘连 ▶
➤ 父元素与其第一个或最后一个子元素之间出现了外边距塌陷（margin collapsing）的情况，导致父元素的外边距与子元素的外边距发生合并，使它们的外边距表现得像是粘在一起一样，称为“父子粘连”
解决方法：
overflow属性：父元素设置为overflow:hidden或者overflow:auto
padding代替margin：将父元素的外边距改为内边距，以避免外边距的合并
border：给父元素添加边框也可以防止外边距的合并

overflow:hidden：创建一个新的块级格式化上下文父元素，并将子元素溢出父元素的部分进行隐藏（即子元素超出部分不可见），从而阻止外边距的塌陷

塌陷问题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>/* 盒子模型 */.box {width: 200px;height: 200px;background-color: darkseagreen;margin: 10px;border: 3px solid teal;padding: 5px;/* IE盒子模型 */box-sizing: border-box;/* 标准盒子模型 */box-sizing: content-box;}.box-1,.box-2 {width: 200px;height: 200px;border: 1px solid rosybrown;}.box-1 {/* 左外边距 */margin-left: 200px;/* 上外边距 */margin-top: 200px;/* 下外边距：如果下方没有元素则显示不出效果 */margin-bottom: 50px;/* 右外边距：如果右边没有元素则显示不出效果 */margin-right: 50px;/* 四个方向的外边距相等 */margin: 50px;/* 上下相等，左右相等 */margin: 20px 40px;/* 设置左右居中 *//* margin: 0 auto; *//* margin: 10px 20px 30px 40px; 上右下左顺时针赋值*/}.box-2 {/* 外边距塌陷：上下相邻添加外边距（取最大值：此处20>10 == 20） */margin-top: 10px;}.line-1 {border: 3px solid tan;/* 行内元素上下外边距无效 */margin-top: 50px;margin-bottom: 50px;/* 左右两元素值相加 */margin-right: 10px;}.line-2 {border: 3px solid rgb(140, 195, 210);/* 行内元素左右不存在塌陷问题 外边距相加 */margin-left: 80px;}.big {width: 200px;height: 200px;background-color: green;/* 1. 解决父子粘连问题：绿色盒子不动，仅移动红色盒子 */overflow: hidden;/* 2. 给父元素设置边框：不会隐藏子元素内容 *//* border: 1px solid darkgoldenrod; */}.big>.small {width: 50px;height: 50px;background-color: #9f2a2a;/* 上下外边距塌陷（父元素中没有其他同级元素）：父子粘连（对子元素设置外边距时会取最大值：0<10,导致父元素向下移动60px） */margin-left: 20px;/* 超出部分将被隐藏 */margin-top: 170px;}</style>
</head><body><!-- 盒子模型 --><div class="box">盒子模型</div><!-- 塌陷问题 --><div class="box-1">盒子-1</div><div class="box-2">盒子-2</div><span class="line-1">行-1（设置了上外边距50px，失效）</span><span class="line-2">行-2（左右距离相加）</span><!-- 内部盒子 --><div class="big"><div class="small">小盒子</div></div></body></html>

7.2 盒子模型 - 父元素消失

父元素消失 ▶
➤ 父元素没有指定高度，子元素设置了浮动，父元素会消失（父元素因为内部浮动（float）、外边距折叠（margin collapsing）等原因导致高度塌陷或消失）

解决方法：
overflow：使用overflow: hidden;

7.3 盒子模型 - 边框和外边距

border边框样式 ▶
➤ border: [border-width] [border-style] [border-color];

边框样式：
none：无边框
hidden：隐藏边框
solid：实线边框
dashed：虚线边框
dotted：点线边框
double：双线边框
groove：凹槽边框
ridge：脊状边框
inset：内嵌边框
outset：外嵌边框

border-radius边框圆角 ▶
➤ 设置元素的边框圆角效果

特点：当圆角半径大于等于（宽高的最小值时）形状不再改变
/* 设置所有四个角的圆角半径 */
border-radius: 10px;/* 设置水平方向的圆角半径和垂直方向的圆角半径 */
border-radius: 5px 10px;/* 依次设置左上角、右上角、右下角和左下角的圆角半径 */
border-radius: 5px 10px 15px 20px;
margin外边距 ▶
➤ margin 是 CSS 中用来设置元素外边距的属性

使用特性：1. 块级元素居中：margin: 0 center;
2. 行内元素/行内块级元素居中：在上级元素中加text-align: center;
/* 设置所有四个方向的外边距 */
margin: 10px;/* 设置上下方向的外边距为 10px，左右方向的外边距为 20px */
margin: 10px 20px;/* 依次设置上、右、下、左方向的外边距 */
margin: 10px 15px 20px 25px;
body：自带8px的外边距
p标签，列表标签，h标签自带上下边距
文本框自带边框和内边距
列表标签自带外边距和内边距
	 	body{margin: 0;}p,ul,h1{margin: 0;}input{border: 0;}ul{padding: 0;}

边框和外边距

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边框和外边距</title><style>#d1 {width: 200px;height: 200px;/* 
none：无边框
hidden：隐藏边框
solid：实线边框
dashed：虚线边框
dotted：点线边框
double：双线边框
groove：凹槽边框
ridge：脊状边框
inset：内嵌边框
outset：外嵌边框*//* 边框样式 */border: 20px inset teal;/* 大于宽高后不再改变 */border-radius: 100px;}/* body：自带8px的外边距p标签，列表标签，h标签自带上下边距文本框自带边框和内边距列表标签自带外边距和内边距body{margin: 0;}p,ul,h1{margin: 0;}input{border: 0;}ul{padding: 0;}*/#d2 {width: 200px;height: 200px;border: 5px solid cornflowerblue;/* 给元素添加内边距时，默认影响元素大小 */padding-left: 50px;padding-top: 50px;/* 需要添加相应元素：去除影响 */box-sizing: border-box;}/* 练习 */body {margin: 0;}#id1,#id3 {width: 100px;height: 100px;}#id1 {background-color: red;margin-left: 20px;overflow: hidden;}#id3 {border: 3px solid goldenrod;margin-left: 120px;box-sizing: border-box;padding-left: 60px;padding-top: 50px;border-radius: 5px;}#id2 {width: 50px;height: 50px;background-color: green;margin: 0 auto;}/* 块级元素居中：margin:0 center;行内元素/行内块级元素：在上级元素中加text-align:center*/</style>
</head><body><div id="d1">边框测试</div><div id="d2">内边距</div><!-- 练习 --><p>练习</p><div id="id1">框1<div id="id2">框2</div></div><div id="id3">框3</div>
</body></html>

8. CSS三大特性

层叠性（Cascading） ▶：利用多个选择器对同一元素设置相同属性的不同样式（冲突时会被覆盖）
➤ 多个选择器对同一个元素添加不同的样式，元素样式效果层叠显示（如果样式相同会由优先级决定）

层叠性原则：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

继承性（Inheritance） ▶：子元素可以继承父元素的某些 CSS 属性值
➤ 如果子元素自身带效果则不受影响（超链接）

作用：继承可以简化代码，降低CSS样式的复杂性

优先级（Specificity） ▶多个 CSS 规则应用到同一个元素
➤ !important>内联>ID选择器>类选择器、属性选择器、伪类选择器>标签选择器>继承

优先原则：选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行

CSS三大特性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS三大特性</title><!-- CSS层叠性：多个选择器对同一个元素添加不同的样式，元素样式效果层叠显示（如果样式相同会由优先级决定）CSS继承：在子元素的属性会继承父元素的属性：如果子元素自身带效果则不受影响（超链接）CSS优先级：!important>内联>ID选择器>类选择器、属性选择器、伪类选择器>标签选择器>继承--><style>/* CSS层叠性 */p {color: aquamarine;font-size: 18px;}/* 不冲突：层叠 */.cascading {background-color: bisque;}/* 冲突：覆盖 */#bg-color {/* ID选择器优先级高于类选择器 */background-color: rgb(61, 84, 76);}/* 继承 */div {/* 此时超链接自带颜色：不受继承影响 */color: blueviolet;}/* 优先级 */span {/* 覆盖继承的颜色（继承的优先级低） */color: #000;}#link {/* 去除超链接的下划线 */text-decoration: none;}/* 产生冲突：ID选择器优先级高于元素选择器优先级 */a {/* 添加!important最高优先级 */text-decoration: underline !important;}</style>
</head><body><div>div盒子<p class="cascading" id="bg-color">p标签</p><span>span行标签（颜色继承自div标签）</span><a href="" id="link">超链接</a></div>
</body></html>