30
社区成员
发帖
与我相关
我的任务
分享CSS --基础知识摘要
- CSS的全称是：层叠样式表
- CSS也是一种标记语言，用于给HTML结构设置样式，与HTML实现结构与样式的分离
01.CSS的编写位置
1.行内样式
- 写在该行标签的style属性中
- 注意：需要符合CSS的语法，以名值对的方式书写
<h1 style="color=red;font-size=60px;"> - 不推荐使用，不适合大量代码
2.内部样式
- CSS代码均写在style标签中
- style标签应该写在head内部
- 优点：结构清晰，样式可以复用
- 缺点:没有实现结构与样式的完全分离，多个html页面无法复用样式
<head> <style> h1{ color:green; font-size=520px; } img{ width=500px;(一定要写px) } </style> </head>
3.外部样式
- 需要引入才能使用
- 样式文件单独写在一个新的.css文件内
h1{ color=red; font-size=40px; } - 在需要样式的.html文件head标签内添加link标签实现链接
<link rel="stylesheet" href="css文件地址"> - rel：说明引入的文档与当前文档之间的关系
- 优点：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度、实现了结构与样式的完全分离
- 实际开发中，几乎都使用外部样式，这种方式是最推荐使用的
02.样式表的优先级
- 行内样式>内部样式=外部样式
1.规则
- 优先级相同时，后面的样式覆盖前面的
- 同一个样式表中，优先级也和编写顺序有关，后来的样式覆盖前面的
03.CSS 语法规范
组成部分:
- 选择器--找到添加样式的元素
- 声明块--设置具体的样式(声明块是由一个或多个声明组成的),声明的格式为: 属性名:属性值;
- 选择器与声明块之间,属性名和属性值之间,均有一个空格
h1{ color: red; width: 50px; } - 注释的写法:
注释的写法 /*xxx*/ xxx为需要注释的内容
04.CSS代码风格
- 展开风格--建议开发时使用,便于维护和调试
h1{ color: red; width: 50px; } - 紧凑风格--项目上线时推荐,可减小文件体积
h1{color:red;font-size:40px;}
05.CSS基本选择器
基本选择器包括：
- 通配选择器
- 元素选择器
- 类选择器
- id选择器
- 通配选择器
- 作用：可以选中所有HTML元素
- 语法：
```css
*{
属性名：属性值；
}
2. 元素选择器：
- 作用：为页面中某种元素统一设置样式
- 语法：
```css
/*选中所有h1元素*/
h1{
color: orange;
width: 40px;
}
- 但是无法实现差异化控制
- 类选择器：
- 根据元素的class值，选中某些元素--class又称类名
.类名{ 属性名： 属性值; } - 注意：
元素的属性值不带. 但是CSS的类选择器要带.
class值是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，用 - 链接，例如 left-menu ，且命名要有意义，做到见名知意
一个元素不能有多个class属性
一个元素的class属性可以有多个值，值之间用空格隔开
<h1 class="speak big">hello</h1>id选择器
- 根据元素的id属性值，来精准的选中某个元素
- 语法：
#id值{ 属性名： 属性值; } - 注意：
- id属性值：尽量由字母、数字、下划线（ _ ）、短杠（-）组成，最好以字母开头、不要包含空格、区分大小写
- 一个元素智能拥有一个id属性，多个元素的id值不能相同
- 一个元素可以同时拥有 id 和 class 属性
06.复合选择器
- 交集选择器
- 作用：同时选中多个符合条件的元素
- 语法：
/*选中类名为beauty的p元素，写法很多，展示一个最常用的*/ p.beauty { color= blue; } /*选中包含rich和beauty标签的元素*/ .rich.beauty { color= pink; } - 注意：
1.有标签名，标签名必须写在前面
2.id选择器理论上可以作为交集选择条件，但实际上基本不用，无意义
3.交集选择器中不可能出现两个元素选择器，因为一个元素不可能有两个不同的元素类型
4.用的最多的交集选择器是：元素名配合类选择器，例如：p.beauty{xx}
- 并集选择器
- 作用：选中多个选择器对应的元素，又称：分组选择器
- 语法：
/*例如选中id为reimi，或者类名为carrot，或者类名为citizen的元素*/ #reimi, .carrot, .citizen { font-size= 50px; color= pink; width= 40px; } - 注意：
1.并集选择器一般竖着写
2.任何形式的选择器，都可以作为并集选择器的一部分
3.并集选择器，常用于集体声明，可以缩小样式表体积
07.元素间的关系
- 父元素：直接包裹某个元素的元素，就是该元素的父元素
<ul> <li>前端</li> </ul> <!--此时ul是li的父元素--> - 子元素：被父元素直接包裹的元素
- 祖先元素：父亲的父亲的父亲...，一直向外照，都是祖先
- 后代元素：儿子的儿子的儿子....，一直向里找，都是后代（子元素也是一种后代元素）
- 兄弟元素：具有相同父亲元素的元素，互为兄弟元素
08.后代选择器
- 作用：选中指定元素中，符合要求的后代元素
- 注意：元素中间用空格隔开
- 语法：
/*选中ul中所有的li*/ ul li { color: red; } /*选中ul中所有li中的a*/ ul li a { color: green; } /*选中类名为subject的元素中的所有li*/ .subject li { color: orange; } /*选中类名为subject元素中所有类名为front-end的li*/ .subject li.front-end { width= 20px; } - 注意：
1.后代选择器，最终选择的是后代，不选中祖先
2.儿子，孙子，重孙子，都算作后代
3.结构要符合HTML要求，不能违规嵌套
09.子代选择器
- 作用:选中指定元素中，符合要求的儿子元素
- 语法：
/*div中的子代a元素*/ div>a { color: red; } /*类名是person的元素中的子代a元素*/ .person>a { color: skyblue; } - 注意：
1.子代选择器选中的是直接子代，也就是儿子元素
2.选择器可以是我们之前学过的任意一种选择器
10.兄弟选择器
- 相邻兄弟选择器
- 作用：选中指定元素后，符合条件的相邻兄弟元素
- 语法：
/*选中div后相邻的兄弟p元素*/ div+P { color: blue; }
- 通用兄弟选择器
- 作用：选中指定元素后，符合条件的所有兄弟元素
- 语法:
/*选中div后所有的兄弟p元素*/ div~p { color: yellow; }
- 注意：两种兄弟选择器，选择的都是下面的兄弟而不是自己
11.属性选择器
- 选中属性值符合一定要求的元素
- 语法：
- [属性名]选中具有某个属性的元素
div[title]{ color: red; }
- div和[title]没有空格，意思是选中div元素中具有title的属性的内容；如果用空格隔开，意思是选中div后代中有title属性的内容
- [属性名=“值”]选中包含某个属性，且属性值等于指定值的元素
div[title="reimi"]{ color: pink; } - [属性名^="值"]选中包含某个属性，且属性值以指定值开头的元素
div[title^="re"]{ color: pink; } - [属性名$="值"]选中包含某个属性，且属性值以指定字母结尾的元素
div[title$="mi"]{ color：pink; } - [属性名*="值"]选中包含某个属性，且属性值包含指定值的元素
div[title*="reimi"]{ color: pink; }
- [属性名]选中具有某个属性的元素
12.伪类选择器
- 作用:选中特殊状态的元素
- 伪类：很像类（class），但不是类，是元素的一种特殊状态
- ：前省略*，冒号前不写元素，意味着此类伪类选择器的判断域永远是自身的父元素
一、动态伪类
- ：link 超链接未被访问的状态
- ：visited 超链接访问过的状态
- ：hover 鼠标悬停在元素上的状态
- ：active 元素激活的状态
- 激活：按下鼠标不松开——遵循LVHA的顺序：link，visited,hover,active
- ：focus （input输入，单选复选，select,option）才能使用：focus 类
- 当用户：点击元素、触摸元素、或通过键盘的”tab“键等方式选择元素时，就是获取焦点
input:focus,select:focus { color:red ; background:blue ; }
二、结构伪类
常用结构伪类：
- :first-child 所有兄弟元素中的第一个
- : last-child 所有兄弟元素中的最后一个
- :nth-child(序号) 所有兄弟元素中的第n个
- :first-of-type 所有同类型兄弟元素中第一个
- :last-of-type 所有同类型兄弟元素中最后一个
- :nth-of-type（序号） 所有同类型兄弟元素中第n个
注意：关于n的值
- 0或不写：什么都不选中--几乎不用
- n：选中所有的子元素--几乎不用
- 1~正无穷的整数：选中对应序号的子元素
- 2n或even：选中序号为偶数的子元素
- 2n+1或odd：选中序号为奇数的子元素
- -n+3：选中前三个
注意：关于选择条件
- 选择器选择的是全部筛选条件都满足的元素 e.g.
/*选中的元素即是既是div的直接子代p，并且是子代中的第二个元素*/ div>p:nth-child(2){ color:red ; }
不常用结构伪类：
- :nth-last-child 所有兄弟元素的**倒数第n个
- :last-of-type(n) 所有同类型兄弟元素的倒数第n个
- :only-child 选择没有兄弟元素的元素
- :only-of-type 选择没有同类型兄弟的元素
- :root (=html) 根元素
- xx:empty 选中的是没有内容的xx元素（空格也算内容）
三、否定伪类
- :not(选择器) 排除满足括号中条件的元素
/*选中div的儿子元素p,但是排除第一个子元素*/ div>p:not(:first-child){ color: red; }
四、UI伪类
- :checked 被选中的复选框或单选按钮
- :enable 可用的表单元素（没有disabled属性）
- :disabled 不可用的表单元素(有disabled属性)
input:checked { width：50px; height:50px; }
五、目标伪类
- ：target 选中锚点指向的元素
div:target { color:red ; }
六、语言伪类
- :lang(语言缩写) 选中指定语言的元素
:lang(en) { color:red ; }
13.伪元素选择器
- 作用：选中元素中的一些特殊位置
- 常用伪元素：
- ::first-letter 选中元素中的第一个文字
- ::first-line 选中元素中的第一行文字
- ::selection 选中被鼠标选中的文字
- ::placeholder 选中输入框的提示文字
<style> input::placeholder{ color:red ; } </style> <body> <input type="text" placeholder="请输入您的用户名"> </body> - ::before 在元素最开始的位置，创建一个子元素（必须用cotent属性指定内容）
p::before { content:"$" ; } - ::after 在元素最后的位置，创建一个子元素（必须用cotent属性指定内容）
14.选择器优先级
行内>ID选择器>类选择器>元素选择器>通配选择器
优先级表示的格式 （a , b , c）
a：ID选择器的个数
b：类，伪类，属性 选择器的个数
c：元素，伪元素 选择器的个数
从前到后依次比较
行内样式大于其他样式
!important 大于所有样式，一旦出现即使用important标记的元素
<p style="color:red " !important></p>
15.CSS三大特性
1.层叠性
- 概念：如果发生了样式冲突。那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。
- 样式冲突：元素的同一个样式名，被设置了不同的值，这就是冲突。
2.继承性
- 概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。 E.G.例如color，font-size可以继承，但是background-color不能继承
- 规则：优先继承离得近的
- 常见的可继承属性：
text-xxx ; font-xxx ; line-xxx ; color ...... - 备注：参照MCN网站，可查询属性是否能被继承
- 样式的继承
有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离的近的祖先元素）- 会继承的CSS属性
字体属性、文本属性（除了 vertical-align）、文字颜色 等- 不会继承的CSS属性
边框、背景、内边距、外边距、宽高、溢出方式 等 - 规律：能继承的属性，都 是不影响布局的，简单地说：都是和盒模型无关的
3. 优先级
- !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式
- 计算权重
- 注意：并集选择器的每一个部分是分开计算的！
16.颜色
一、颜色名
- 编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：
1.红色：red
2.绿色：green - 颜色名这种表达方式，表达的颜色比较单一，所以使用不广泛
- 具体颜色名参考MDN官方文档
二、RGB & RGBA
- 编写方式：使用红、绿、蓝这三种光的三原色进行组合
- r 表示 红色
- g 表示 绿色
- b 表示 蓝色
- a 表示 透明度（0表示透明,看不见; 1表示不透明）
.css{ color: rgb(255,255,0) /*or color:rgb(100%,0%,0%) or color:rgba(100,100,0,1)*/ }
- 规律：
- 若三种颜色的值相同，呈现的是灰色，值越大，灰色越浅
- rgb(0,0,0)是黑色，rgb(255,255,255)是白色
- 对于rgba来说，前三位的rgb形式要保持一致，要么都是数字，要么都是百分比
三、HEX & HEXA
HEX 的原理和 rgb 一致，依然是通过：红、绿、蓝进行颜色组合，区别是需要用6个数字，分成三组来表达，格式为：#rrggbb
- 每一位数字的取值范围是：0~f——即最小值是00，最大值是ff
- color:#ff0000; 红色
- color:#000000; 黑色
- color:#ffffff; 白色
- 如果每种颜色的两位都相同，可以简写为 color：#f00；但要注意，如果前三位简写，那么透明度也要简写，如color：#ff998866； 简写为 color：#f986
- 注意：IE浏览器不支持 HEXA ，但支持 HEX
四、HSL & HSLA
- color：hsl（色相，饱和度，亮度）
- HSL是通过：色相、饱和度、亮度来表示一个颜色的
- 色相：取值范围是0~360度，具体度数对应范围如下图：
- ![[Pasted image 20260727144308.png|277]]
- 饱和度：取值范围是 0%~100%。（像色相中对应颜色**添加灰色**，0%全灰，100%没有灰）
- 亮度：取值范围是0%~100%。（0%没有亮度，所以是黑色。100%亮度太强，所以是白色）
- HLSA 其实就是在HSL的基础上，添加了透明度
17.字体
一、字体大小
- 属性名：font-size
- 语法：
div { font-size:30px; } - 注意点：
- Chrome浏览器支持的最小文字大小为12px，默认文字大小为16px，0px自动消失
- 不同浏览器默认的字体大小可能不一致，最好给一个明确的值，不要使用默认大小
- 通常给 body 设置 font-size 属性，这样 body 中其他元素可以继承
- 可以借助控制台查看样式
- 实际上
- 由于字体设计原因，文字最终呈现的大小，不一定与 font-size 的值一致，可能大，也可能小。
- 通常情况下，文字相对于字体设计框，并不是垂直居中的，通常都靠下一些
二、字体族
- 属性名：font-family
- 语法：
div { font-family:"STCcaiyun","Microsoft YaHei",sans-serif; } - 注意：
- 使用字体的英文名兼容性会更好，具体的英文名可以自行查询
- 如果字体名包含空格，必须使用引号包裹
- 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif(衬线字体) 或 sans-serif(非衬线字体)
- Windows系统中，默认的字体就是微软雅黑
三、字体风格
- 属性名：font-style
- 常用值：
- normal：正常（默认值）
- italic：斜体（使用字体自带的斜体效果）
- oblique：斜体（强制倾斜产生的斜体效果）
- 语法：
div{ font-style:italic; }
四、字体粗细
- 属性名：font-weight
- 常用值：
- 关键词：
- lighter：细
- normal：正常
- bold：粗
- bolder：很粗（多数字体不支持）
- 数值：
- 100~1000且无单位，数值越大，字体越粗(具体看字体设计时的精度)
- 100
300 等同于lighter，400500 等同于normal，600及以上等同于bold
- 语法：
div { font-weight:lighter; } div { font-weight:200; }
五、字体复合属性
- 属性名：font ， 可以把上述字体样式合并成一个属性。
- 编写规则：
- 字体大小，字体族必须写
- 字体族必须是最后一位，字体大小必须是倒数第二位
- 各个属性间用空格隔开
- 实际开发中更推荐复合写法，但是也不绝对，比如只想设置字体大小，直接用font-size属性即可
18.文本
一、文本颜色
- 属性名：color
- 可选值：
- 颜色名
- RGB / RGBA
- HEX / HEXA
- HSL / HSLA
开发中常用rgb/rgba 或hex/hexa
举例：div{ color:rgb(112,15,30); }
二、文本间距
- 字母间距：letter-spacing
- 单词间距：word-spacig（通过空格识别词）
- 属性值为像素（px），正值让间距增大，负值让间距缩小
三、文本修饰
- 属性名：text-decoration
- 可选值：
- none：无装饰线（常用）
- underline：下划线（常用）
- overline：上划线
- line-through：删除线
- 可搭配如下值使用：
- dotted：虚线
- wavy：波浪线
- 也可以指定颜色
- 举例：
div{ text-decoration:green underline dotted red; }
四、文本缩进
- 属性名：text-indent
- 属性值：css中的长度单位，例如：px
- 举例：
div{ text-indent:40px; }
五、文本对齐
- 属性名：text-align（水平对齐）
- 常用值：
- left：左对齐（默认值）
- right：右对齐
- center：居中对齐
- 举例：
div{ text-align:center; } - 文本对齐——垂直
- 顶部：无需任何属性，在垂直方向上，默认就是顶部对齐
- 居中：对于单行文字，让 height=line-height 即可
- 底部：对于单行文字，目前的一个临时方式：
让 line-height =（height x 2）- font-size - x
备注：x 是根据字体族，动态决定的一个值
- 更可行的对齐方法是——定位
六、行高
- 属性名：line-height
- 可选值：
- normal：由浏览器根据文字大小决定的一个默认值
- 像素（px）
- 数字：参考自身font-size的倍数
- 百分比：参考自身font-size的百分比
- 备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感
- 举例：
div{ line-height:60px; line-height:1.5; line-height:150%; } - 注意点：
- line-height 过小，文字产生重叠，且 line-height 最小值为0，不能为复数
- line-height 是可以继承的，且为了能更好的呈现文字，最好写数值
- line-height 和 height 的关系：
- 设置了 height ，那么高度就是 height 的值
- 没有设置 height 的时候，会根据 line-height 计算高度
- 应用场景：
- 对于多行文字：控制行与行之间的距离
- 对于单行文字：让 height 等于 line-height ，可以实现文字垂直居中
七、vertical-align
- 属性：vertical-align
- 作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式
- 可选值：
- baseline：基线对齐（默认）
- top：使元素的顶部与所在行的顶部对齐
- middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐
- bottom：使元素的底部和所在行的底部对齐
- 特别注意： vertical-align 不能控制块元素
19.列表相关属性
列表相关的属性，可以作用在 ul , ol , li 元素上
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| list-style-type | 设置列表符号 | 常用值如下： |
| ^^ | ^^ | none：不显示前面的标识（常用） |
| ^^ | ^^ | square：实心方块 |
| ^^ | ^^ | disc：圆形 |
| ^^ | ^^ | decimal：数字 |
| ^^ | ^^ | lower-roman：小写罗马字母 |
| ^^ | ^^ | upper-roman：大写罗马字母 |
| ^^ | ^^ | lower-alpha：小写字母 |
| ^^ | ^^ | upper-alpha：大写字母 |
| list-style-position | 设置列表符号的位置 | inside：在 li 的里面 |
| outside：在 li 的外面 | ||
| list-style-image | 自定义列表符号 | url 图片地址 |
| list-style | 复合属性 | 没有数量、顺序的要求 |
20.表格相关属性
一、边框相关属性（其他元素也可以使用）
- border-width：边框宽度（CSS中可用的长度值）
- border-color：边框颜色（CSS中可用的颜色值）
- border-style：边框风格
- none：默认值
- solid：实线
- dashed：虚线
- dotted：点线
- double：双实线
- border：边框复合属性（没有数量、顺序的要求）
二、表格独有属性（只有table属性才能使用）
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| table-layout | 设置列宽度 | auto:自动，根据列宽内容计算（默认值） |
| fixed：固定列宽，平均分 | ||
| border-spacing | 单元格间距； 生效前提：单元格边框不能合并 | CSS中可用的长度值 |
| border-collapse | 合并单元格边框 | collapse：合并 |
| separate：不合并 | ||
| empty-cells | 隐藏没有内容的单元格； 生效前提：单元格不能合并 | show：显示，默认 |
| hide：隐藏 | ||
| caption-side | 设置表格标题的位置 | top：上面（默认值） |
| bottom：在表格下面 |
table {
table-layout:auto;
border-spacing:5px;
empty-cells:hide;
caption-side:top;
}
21.背景属性
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| background-color | 设置背景颜色（默认背景颜色是transparent） | 复合CSS中颜色规范的值 |
| background-image | 设置背景图片 | url（图片地址） |
| background-repeat | 设置背景重复方式 | repeat：重复，铺满整个元素，默认值 |
| ^^ | repeat-x：只在水平方向重复 | |
| ^^ | repeat-y：只在垂直方向上重复 | |
| ^^ | no-repeat：不重复 | |
| background-position | 设置背景图片位置 | 通过关键字设置位置（写两个值，用空格隔开） |
| ^^ | ^^ | 水平：left，center，right |
| ^^ | ^^ | 垂直：top，center，bottom |
| ^^ | ^^ | 如果只写了一个值，另一个方向上的值取默认center |
| ^^ | ^^ | 通过长度指定坐标位置 |
| ^^ | ^^ | 以元素左上角为坐标原点，设置图片左上角的位置。 |
| ^^ | ^^ | 取两个值，分别是x坐标和y坐标 |
| ^^ | ^^ | 只写一个值，会被当作是x坐标，y坐标取center |
| background | 复合属性 | 没有数量和顺序要求 |
22.鼠标相关属性
- 属性名：cursor
- 功能：设置鼠标光标的样式
- 属性值：
- pointer：小手
- move：移动图标
- text：文字选择器
- crosshairs：十字架
- wait：等待
- help：帮助
- 扩展：自定义鼠标图标
cursor:url(图片地址)，pointer；
23.盒模型
一、常用的长度单位
- px：像素
- em：相对元素 font-size 的倍数
- rem：相对根字体大小，html标签就是根
- %：相对父元素计算
- 注意：CSS中设置长度，必须添加单位，否则无效
二、元素的显示模式
- 块元素（块级元素）
- 特点：
- 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的
- 默认宽度，撑满父元素（即撑满该行）
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
- 显示模式：
- 主体结构标签：html , body
- 排版标签：h1 , h6 , hr , p , pre, div
- 列表标签：ul , ol , li , dl , dt, dd
- 表格相关标签：table , tbody , thead , tfoot , tr , caption
- form 与 option
- 行内元素（内联元素）
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行一句从左到右排列
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 无法通过CSS设置宽高
- 显示模式：
- 文本标签：br , em , strong , sup , sub , del , ins
- a 与 label
- 行内块元素（内联块元素）
- 特点：
- 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行一句从左到右排列
- 默认宽度：由内容撑开
- 默认高度：由内容撑开
- 可以通过CSS设置宽高
- 例如：img
- 显示模式：
- 图片：img
- 单元格：td , th
- 表单控件：input , textarea , select , button
- 框架标签：iframe
三、修改元素的显示模式
通过CSS中的 display 属性可以修改元素的默认显示模式，常用值如下：
| 值 | 描述 |
|---|---|
| none | 元素会被隐藏 |
| block | 元素将作为块级元素显示 |
| inline | 元素将作为行内元素显示 |
| inline-block | 元素将作为行内块元素显示 |
四、盒模型的组成部分
CSS 会把所有 HTML 元素都看成一个盒子，所有的样式也都基于这个盒子
- margin（外边距）：盒子与外界的距离
- border（边框）：盒子的边框
- padding（内边距）：紧贴内容的补白区域
- content（内容）：元素中的文本或后代元素都是它的内容
![[Pasted image 20260728170253.png]]
盒子的大小 = content + 左右 padding + 左右border
- 注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置
关于默认宽度：
所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度
总宽度=父的 content -自身左右 margin
内容区的宽度=父的 content - 自身左右margin - 自身左右 border - 自身左右 padding
五、内容区 content
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| width | 设置内容区域宽度 | 长度 |
| max-width | 设置内容区域最大宽度 | 长度 |
| min-width | 设置内容区域最小宽度 | 长度 |
| height | 设置内容区域高度 | 长度 |
| max-height | 设置内容区域最大高度 | 长度 |
| min-height | 设置内容区域最小高度 | 长度 |
- 注意：
- max-width、min-width 一般不与 width 一起使用
- max-height、min-height 一般不与 height 一起使用
六、内边距 padding
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| padding-top | 上内边距 | 长度 |
| padding-right | 右内边距 | 长度 |
| padding-bottom | 下内边距 | 长度 |
| padding-left | 左内边距 | 长度 |
| padding | 复合属性 | 长度，可以设置1~4个值 |
- padding复合属性使用规则
- padding：10px；四个方向内边距都是10px
- padding：10px 20px；上下10px，左右20px（上下、左右）
- padding：10px , 20px , 30px ;上10px，左右20px，下30px（上、左右、下）
- padding：10px , 20px , 30px , 40px ; 上10px，右20px，下30px，左40px（上、右、下、左，按照顺时针顺序排列）
- 注意：
- padding 的值不能为负数
- 行内元素的左右内边距没有问题，但是上下内边距不能完美设置
- 块级元素、行内块元素，四个方向的内边距都可以完美设置
七、边框 border
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| border-style | 边框线风格 复合了四个方向的边框风格 | none：默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线 ······ |
| border-width | 边框线宽度 复合了四个方向的边框宽度 | 长度，默认3px |
| border-color | 边框线颜色 复合了四个方向的边框颜色 | 颜色，默认黑色 |
| border | 复合属性 | 值没有顺序和数量的要求 |
| border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color | 分别设置各个方向的边框 | 同上 |
- 边框属性共 20 个
- border-style、border-width、border-color 其实也是复合属性
八、外边距 margin
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| margin-left | 左外边距 | CSS中的长度值 |
| margin-right | 右外边距 | CSS中的长度值 |
| margin-top | 上外边距 | CSS中的长度值 |
| margin-bottom | 下外边距 | CSS中的长度值 |
| margin | 复合属性，可以写1~4个值，规律同 padding | CSS中的长度值 |
一、 margin注意事项：
- 子元素的margin，是参考父元素的content计算的（因为是父亲的content中成装着子元素）
- 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置
- 块级元素、行内块元素，均可以完美的设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效（如span标签）
- margin的值也可以是auto，如果给一个块级元素的左右margin都为auto，该块级元素会在父元素中水平居中
- margin的值可以是负值
二、margin 塌陷问题
什么是 margin 塌陷？
第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上
如何解决 margin 塌陷？
- 方案一：给父元素设置不为0的padding
- 方案二：给父元素设置宽度不为0的border
- 方案三：给父元素设置CSS样式 overflow：hidden（隐藏溢出）
三、margin 合并问题
什么是 margin 合并？
上面兄弟元素的下外边距和下面兄弟元素的上外边距会重合，取一个最大值，而不是相加
如何解决 margin 塌陷？
无需解决，布局时上下兄弟元素，只设置一个上下外边距即可
九、处理内容溢出
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| overflow | 溢出内容的处理方式 | visible：显示，默认值 hidden：隐藏 scroll：显示滚动条，不论内容是否溢出 auto：自动显示滚动条，内容不溢出不显示 |
| overflow-x | 水平方向溢出内容的处理方式 | 同 overflow |
| overflow-y | 垂直方向溢出内容的处理方式 | 同 overflow |
- 注意：
- overflow-x、overflow-y 不能一个是 hidden ，另一个是 visible ，这是两个实验属性，不建议使用
- overflow 常用值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多疑难杂症
十、隐藏元素的两种方式
一、visibility 属性
visibility 属性默认值是 show ，如果设置为 hidden，元素会隐藏
元素虽然看不见，但还是占有原来的位置（元素的大小依然保持）
二、display 属性
设置 display：none ，就可以让元素隐藏
彻底的隐藏，不但看不见，也不占用任何位置，没有大小宽高
十一、元素的默认样式
- 元素一般都有一些默认的样式，例如：
- a 元素：下划线、字体颜色、鼠标小手
- h1~h6 元素：文字加粗、文字大小、上下外边距
- p 元素：上下外边距
- ul、ol 元素：左内边距
- body 元素：8px外边距（4个方向）
- 优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，一定要直接选择器到该元素
十二、布局小技巧
- 行内元素、行内块元素，可以被父元素当作文本处理
- 可以像处理文本对话一样，去处理行内、行内块在父元素中的对齐。
例如：text-align、line-height、text-indent
- 如何让子元素，在父元素中水平居中：
- 若子元素为块元素，给父元素加上：```
margin：0 auto； - 若子元素为行内元素、行内块元素，给父元素加上：```
text-align：center；
- 如何让子元素，在父元素中垂直居中：
- 若子元素是块元素，给子元素加上
margin-top:值为(父元素content-子元素盒子总高)/2- 若子元素为行内元素、行内块元素：
让父元素的 height = line-height ，每个子元素都加上：
vertical-align:middle;补充：若想绝对垂直居中，父元素 font-size 设置为0
- 若子元素为行内元素、行内块元素：
十三、元素之间的空白问题
- 产生原因：
行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符 - 解决方案：
- 方案一：去掉换行符和空格（不推荐）
- 方案二：给父元素设置 font-size=0，再给需要显示文字的元素单独设置字体大小（推荐）
十四、行内块元素之间的幽灵空白问题
- 产生原因：
行内块元素与文本的基线对齐，二文本的基线和文本的最底线之间是有一定距离的 - 解决方案：
- 方案一：给行内块设置 vertical ，值不为 baseline 即可，设置为 middle 、top 、bottom 均可
- 方案二：若父元素中只有一张图片，那么设置图片为
display:block; - 方案三：给父元素设置
·font-size:0;。如果改行内部还有文本，那么单独设置font-size。
24.浮动
一、浮动的简介
最初，浮动是用来实现文字环绕图片效果的，现在浮动是最主流的页面布局方式之一
二、元素浮动后的特点
- 脱离文档流
- 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高
- 不会独占一行，可以与其他元素共用一行
- 不会 margin 合并，也不会 Margin 塌陷，能够完美的设置四个方向的 margin 和 padding
- 不会像行内、行内块元素一样被当成文本处理（没有行内块的空白问题）
三、浮动练习
- 练习一：盒子1右浮动
![[Pasted image 20260730111912.png|425]] - 练习二：盒子1左浮动
![[Pasted image 20260730112110.png|425]] - 练习三：所有盒子都左浮动
![[Pasted image 20260730112233.png|448]] - 练习四：所有盒子浮动后，盒子3落下来
![[Pasted image 20260730112358.png|425]]四、浮动后的影响
- 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素下面；对前面的兄弟元素无影响
- 对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度仍然束缚浮动的元素
五、解决浮动产生的影响
解决方案： - 方案一：给父元素指定高度
- 方案二：给父元素也设置浮动，带来其他影响
- 方案三：给父元素设置
overflow:hidden - 方案四：在所有的浮动元素后，添加一个块级元素，并给该块级元素设置
clear:both - 方案五：给所有浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同（推荐使用）
.parent::after { content:""; display:block; clear:both; }
- 布局原则：设置浮动时，兄弟元素要么全部浮动，要么全部都不浮动
25.定位
一、相对定位
1.如何实现相对定位?
- 给元素设置
position:relative即可实现相对定位 - 可以使用
left、right、top、bottom四个属性调整位置
2.相对定位的参考点在哪里？
- 相对自己原来的位置
3.相对定位的特点：
- 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
规则如下：- 定位元素会盖在普通元素上
- 都发生定位的两个元素，后写的元素会盖在先写的元素上
-
left不能和right一起设置，top不能和bottom一起设置 - 相对定位的元素，也能继续浮动，但不推荐
- 相对定位的元素，也能通过
margin调整位置，但不推荐 - ---注意：大多数情况下，相对定位会和绝对定位配合使用
二、绝对定位
1.如何设置绝对定位？
- 给元素设置
position：absolute即可实现绝对定位 - 可以使用
left、right、top、bottom四个属性调整位置
2.绝对定位的参考点在哪里？
- 参考它的包含块
--什么是包含块？- 对于没有脱离文档流的元素：包含块就是父元素
- 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先元素都没有定位，那包含块就是整个页面
3.绝对定位元素的特点：
- 脱离文档流，会对后面的兄弟元素、父元素产生影响
left不能和right一起设置，top不能和bottom一起设置- 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
- 绝对定位的元素，也能通过
margin调整位置，但是不推荐这样做 - 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素
- *何为定位元素？
默认宽、高都被内容所撑开，且能自由设置宽高*.outer:hover .box2 { left:200px; }
三、固定定位
1.如何实现固定定位？
- 给元素设置
position：fixed即可实现 - 可以使用
left、right、top、bottom四个属性调整位置
2.固定定位的参考点在哪里？
- 参考它的视口
——什么是视口？
对于PC浏览器来说，视口就是我们看网页的“窗户“
3.固定定位元素的特点
- 脱离文档流，会对后面的兄弟元素、父元素产生影响
left不能和right一起设置，top不能和bottom一起设置- 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以定位为主
- 固定定位的元素，也能通过
margin调整位置，但是不推荐这样做 - 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素
四、粘性定位
1.如何实现粘性定位？
- 给元素设置
position：sticky即可实现 - 可以使用
left、right、top、bottom四个属性调整位置
2.粘性定位的参考点在哪里？
- 离它最近的一个拥有“滚动机制”的祖先元素，即使这个祖先不是最近的真实可滚动祖先
3.粘性定位元素的特点：
- 不会脱离文档流，它是一种专门用于窗口滚动的新的定位方式
- 最常用的值是
top - 粘性定位和浮动可以同时设置，但是不推荐
- 粘性定位的元素，也能通过
margin调整位置，但不推荐
——粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定.item { position:sticky; top:0; }五、定位的层级
- 定位元素的层级比普通元素高，无论什么定位，显示层级都是一样的
- 如果位置发生重叠，默认情况是：后面的元素，会显示在前面的元素上
- 可以通过 CSS 属性
z-index调整元素的显示层级 z-index的属性值是数字，没有单位，值越大显示层级越高- 只有定位元素设置
z-index才有效 - 如果
z-index值大的元素，仍然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级 - 定位可以越过 padding
六、定位的特殊应用
注意：
- 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高
- 发生相对定位后，元素依然是之前的显示模式
- 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素`
让定位元素的宽充满包含块
- 块宽想与包含块一致，可以同时设置
left和right为0position:absolute; left:0; right：0; - 高度想与包含块一致，
top和bottom的值设为0position:absolute; top:0; bottom：0;
让定位元素在包含块中居中
- 方案一：
- 使用
margin:xxx时，子元素必须有宽高，不然就是充满父元素position:absolute; top:0; bottom：0; left:0; right:0; margin:auto;
- 方案二：
position:absolute; left:50%; right:50%; margin-left:width/2; margin-right:height/2;
26.布局
一、版心
- 在PC网页中，一般都会有一个固定宽度且水平居中的盒子，用来显示网页的主要内容，这就是网页的版心
- 版心的宽度一般是
960~1200像素之间 - 版心可以是一个，也可以是多个
二、常用类名
| 位置 | < |
|---|---|
| 顶部导航条 | topbar |
| 页头 | header、page-header |
| 导航 | nav、navigator、navbar |
| 搜索框 | search、search-box |
| 横幅、广告、宣传图 | banner |
| 主要内容 | content、main |
| 侧边栏 | aside、sidebar |
| 页脚 | footer、page-footer |
三、重置默认样式
很多元素都有默认样式，例如：
- p 元素有默认的上下 margin
- h1 ~ h6 标题也有上下 margin ，且字体加粗
- body 元素有默认的 8px 外边距
- 超链接有默认文字颜色和下划线
- ul 元素有默认的左 padding
- ·······
在早期，元素默认样式，能够让我们快速绘制网页，但如今网页的设计越来越复杂，内容越来越多，而且很精细，这些默认样式会给我们绘制网页带来麻烦；而且这些默认样式在不同浏览器上呈现出的效果也不同，座椅我们需要重置这些默认样式
方案一：使用全局选择器
* {
margin:0;
padding:0;
}
这种方法在简单案例中可以使用，但是实际开发中不会使用，因为 * 选择的是所有元素，而并不是所有元素都有默认样式；而且我们重置时，有时候是需要做特定处理的，比如，想让 a 元素的文字是灰色，其他元素文字是蓝色
方案二：reset.css
选择到具有默认样式的元素，清空其默认样式经过 reset 后的网页，好似“一张白纸”，开发人员可以根据设计稿，精细的去添加字体的样式
方案三：Normalize.css
Normalize.css 是一种最新方案，他在清除默认样式的基础上，保留了一些有价值的默认样式
相对于 reset.css , Normalize.css 有如下优点：
- 保护了有价值的默认样式，而不是完全去掉它们
- 为大部分 HTML 元素提供一般化的样式
- 新增对 HTML5 元素的设置
- 对并集选择器的使用比较谨慎，有效避免调试工具杂乱
备注：Normalize.css 的重置，和 reset.css 相比，更加的温和，开发时可以根据实际情况进行选择
...全文
请发表友善的回复…
发表回复
