目录
一、在HTML中使用CSS
1.1 行内式——内联样式
在标签内使用 style 属性
<p style="color:red;">内联样式</p>1.2 内嵌式——内部样式表
在文档头部通过 style 标签定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>内部样式表</p>
</body>
</html>1.3 外链式——外部样式表
在文档头部通过 link 链接到样式表
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css1.css">
</head>
<body>
<p>外部样式表</p>
</body>
</html>css1文件：
p {
color: red;
}1.4 优先级
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
若不同样式设置的属性有冲突，内部样式和外部样式谁的位置在后谁生效，后面覆盖前面
1.5 注释
/* 注释 */二、选择器
2.1 基本选择器
① 元素选择器
div {
属性名:值;
}
② ID选择器
#idname {
属性名:值;
}
id名 唯一
③ CLASS选择器
.classname {
属性名:值;
}
不同的元素可以设置相同的类名，一个元素可以设置多个不同的类名
④ 全局选择器
* {
属性名:值;
}
2.2 组合选择器（/符）
① 后代选择器
选择器 选择器 {
}
div h1
② 子元素选择器
选择器>选择器{
}
div>span
③ 交集选择器
选择器1选择器2{
}
.class1#id1
④ 并集选择器
选择器，选择器{
}
h1,h2
2.3 伪类选择器
:link 未访问过的链接
:visited 已访问过的链接
:hover 鼠标悬停在上面的元素
:active 鼠标悬停在上面且鼠标左键按下的元素
需要注意，多个一起用的时候，需要严格按照以上顺序才能有效
2.4 选择器权重（/优先级）
ID选择器 > 类选择器（ class ）、伪类选择器 > 标签名选择器 > 全局选择器
① 后代元素选择器、子元素选择器、交集选择器需要看所包含的单个选择器的数量来确定权重；
② 两个组合选择器，先比ID个数，个数多整个选择器权重大；如果ID数相同，比类、伪类个数，个数多整个选择器权重大；如果还相同，则比标签名数量；
③ 权重相同的选择器，如果设置相同的样式，后面覆盖前面；
④ 并集选择器不能作为一个整体，各部分各自计算自己的权重。
三、盒子模型
3.1 盒子模型的显示模式
①块级元素（ block ）
设置方式：
display:block;
特点：
Ⅰ. 能够独占一行；
Ⅱ. 可以设置宽高。
②行内（/内联）元素（ inline ）
设置方式：
display: inline;
特点：
Ⅰ. 不会独占一行；
Ⅱ. 不可以设置宽高。
③行内块元素（ inline-block ）
设置方式：
display: inline-block;
特点：
Ⅰ. 不会独占一行；
Ⅱ. 可以设置宽高。
④隐藏元素/无显示模式（ none ）
设置方式：
display: none;
无显示模式，隐藏
1. 给元素设置 display:none, 元素隐藏后不占据位置。
2. 给元素设置 visibility: hidden，元素隐藏后仍然占据位置。
注：
如 input 、button 等默认显示模式是行内块的元素，即使设置成 display:inline； 依然能够设置宽高
3.2 盒子模型的组成
3.2.1 盒子模型概念
自内而外，content、padding、border、margin
| 部分 | 说明 |
| content（内容） | 盒子的内容，显示文本和图像 是元素的主要部分，元素的后代以及文本都在内容区域 |
| padding（内边距） | 清除内容周围的区域，内边距是透明的 是元素内容与元素边界的距离 |
| border（边框） | 围绕在内边距和内容外的边框 显示在元素的边界上 |
| margin（外边距） | 清除边框外的区域，外边距是透明的 在元素的边距以外，设置与相邻元素的距离，影响元素的位置 |
3.2.2 宽高计算公式：
总元素的宽度 = (内容)宽度(width) + 左填充(padding-left) + 右填充(padding-right) + 左边框(border-left) + 右边框(border-right) + 左边距(margin-left) + 右边距(margin-right)
总元素的高度 = (内容)高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 上边框(border-top) + 下边框(border-bottom) + 上边距(margin-top) + 下边距(margin-bottom)
3.3 盒子模型的设置
3.3.1 设置内容区域的宽高
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| width | 设置固定宽度 | 长度 |
| max-width | 设置最大宽度 | 长度 |
| min-width | 设置最小宽度 | 长度 |
| height | 设置固定高度 | 长度 |
| max-height | 设置最大高度 | 长度 |
| min-height | 设置最小高度 | 长度 |
注意：
1. 一般最大最小宽高不与固定宽高一起设置；
2. 最大最小款宽高可以对默认宽高进行限制。
3.3.2 元素的默认宽高
①行内元素
默认宽高被内容撑开
②行内块元素
默认宽高被内容撑开
③块级元素
默认高度： 被内容撑开
默认宽度的计算规则：
元素的默认总宽度 = 父元素的内容宽 - 元素自己的左右外边距
元素的默认内容宽度 = 父元素的内容宽 - 元素自己的左右外边距 - 元素自己的左右边框宽度 - 元素自己的左右内边距
3.3.3 padding 与 margin 属性设置：
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| padding-left | 左内边距 | 长度 |
| padding-right | 右内边距 | 长度 |
| padding-top | 上内边距 | 长度 |
| padding-bottom | 下内边距 | 长度 |
| padding | 各个方向内边距 | 1~4个长度 |
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| margin-left | 左外边距 | 长度 |
| margin-right | 右外边距 | 长度 |
| margin-top | 上外边距 | 长度 |
| margin-bottom | 下外边距 | 长度 |
| margin | 各个方外边距 | 1~4个长度 |
复合属性：
padding:10px; 上下左右的内边距均为10px
padding:10px 5px; 上下内边距为10px，左右内边距为5px
padding:10px 15px 5px; 上内边距为10px，左右内边距为15px，下内边距为5px
padding:10px 15px 20px 5px 上内边距为10px，右内边距为15px，下内边距为20px，左内边距为5px
一个值： 所有方向的内边距
二个值： 上下 左右
三个值： 上 左右 下
四个值： 上 右 下 左margin 同理
3.3.4 padding 与 margin设置规则：
padding设置规则
Ⅰ. 使用百分比设置内边距，不论哪个方向，都是参照父元素内容宽度；
Ⅱ. 内边距的值不允许是负值。
margin设置规则
Ⅰ. 使用百分比设置外边距，不论哪个方向，都是参照父元素内容宽度；
Ⅱ. 外边距可以设置负值；
Ⅲ. 块级元素，设置左右外边距为 auto，可以实现在父元素中水平居中。
3.3.5 border设置
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| border-style | 边框风格 | none：无。 solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。 |
| border-color | 边框颜色 | 颜色 |
| border-width | 边框宽度 | 长度 |
| border | 同时设置风格、颜色、边框 | 1~3个值 |
| border-left-style border-left-color border-left-width border-left 其他方向同理 | 设置单个方向边框 |
3.3.6 margin 塌陷与合并
① margin 塌陷
Ⅰ.什么是 margin 塌陷？
1. 第一个子元素的上外边距会塌陷到父元素上，
最后一个子元素的下外边距会塌陷到父元素上；
2. 外边距塌陷只能发生在块级元素的上下外边距上。
Ⅱ.如何解决 margin 塌陷？
方案一： 父元素设置边框
方案二： 父元素设置内边距
方案三： 给父元素设置CSS属性 overflow:hidden;
② margin 合并
Ⅰ.什么是 margin 合并？
1. 上面兄弟元素的下外边距会与下面兄弟元素的上外边距合并，实际距离取两者之间较大的；
2. 外边距合并只能发生在块级元素的上下外边距上。
Ⅱ.如何解决 margin 合并？
无法解决
3.4 内容溢出
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| overflow | 设置溢出的内容的显示方式 | visible：显示，默认值。 hidden：隐藏。 scroll：滚动条。 auto：自动。 |
| overflow-x | 设置横向溢出的内容的显示方式 | visible：显示，默认值。 hidden：隐藏。 scroll：滚动条。 auto：自动。 |
| overflow-y | 设置纵向溢出的内容的显示方式 | visible：显示，默认值。 hidden：隐藏。 scroll：滚动条。 auto：自动。 |
注：scroll 和 auto 的区别？
scroll：不论内容是否溢出都有滚动条
auto：只有内容溢出才有滚动条
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
