CSS基础总结01
CSS简介
CSS 是 层叠样式表 的简称。也会称之为 CSS样式表 或 级联样式表。
CSS 是一种 标记语言。
语法规范
CSS 规则由两个主要的部分构成：选择器 以及 声明。
选择器是用于选出需要设置 CSS 样式的 HTML 标签，选择器后跟的花括号内是对该对象设置的具体样式属性和属性值以 “键值对” 的形式出现属性: 属性值;- 属性是对指定的对象设置的样式属性，例如：字体大小、文本颜色等
- 属性和属性值之间用英文
:分开 - 多个 “键值对” 之间用英文
;进行区分（末尾的键值对可以不加;）
h4 {
color: bule;
font-size: 100px;
}注：
标签可以写到其他标签内部并作用与该标签区域内，但是强烈不推荐这种写法！type="text/css"可以省略。
- 样式格式推荐展开
h3 { color: deeppink; font-size: 20px; }
- 样式大小推荐小写：样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
h3 { color: pink; }
- 空格保留
- 属性值前面，冒号后面，保留一个空格
- 选择器（标签）和前花括号中间，保留一个空格
h3 { color: pink; }
选择器分为
基础选择器 和 复合选择器 两个大类。标签选择器
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。作用：
标签选择器可以把某一类标签全部选择出来，比如所有的
【CSS基础总结01】优点：
能快速为页面中同类型的标签统一设置样式。
缺点：
不能设计差异化样式，只能选择全部的当前标签。
基础选择器之标签选择器 - 锐客网 /* 会对所有的该标签元素运用样式，优点：快速统一，缺点：无法差异化设置 */
p {
color: green;
}
div {
color: pink;
}男
男
男
女生
女生
女生
类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用
类选择器 。类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个
. 号显示。变红色注意：
- 类选择器使用
.（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的） - 可以理解为给这个标签起了一个别名来表示
- 长名称或词组可以使用中横线
-来为类命名 - 不能使用已有的关键字作为类名
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示
- 命名要有意义，尽量使别人一眼就知道这个类名的目的（可读性第一，长度第二，推荐使用英语，如果是使用拼音请使用全拼）
- 命名规范：见附件（CSS 命名规范.md）
基础选择器之类选择器 - 锐客网 /* 类选择器口诀：样式 . 定义，结构 class 调用，一个或多个，开发最常用 */
.red {
width: 100px;
height: 100px;
background-color: red;
}.green {
width: 100px;
height: 100px;
background-color: green;
}多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。
基础选择器之类选择器 - 锐客网 /* 一个标签可以运用多个类选择器，之间用空格隔开 */
.red {
color: red;
}.font35 {
font-size: 35px;
}
zhoujirui
多类名开发中使用场景
- 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
- 这些标签都可以调用这个公共的类，然后再调用自己独有的类
- 从而节省 CSS 代码，统一修改也非常方便（模块化、可重用化）
基础选择器之类选择器 - 锐客网 /* 类选择器最大的优势在于：复用 */
.box {
width: 100px;
height: 100px;
}.red {
background-color: red;
}.green {
background-color: green;
}id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以
# 来定义。注意：id 属性只能在每个 HTML 文档中出现一次。
基础选择器之id选择器 - 锐客网 /* id 选择器口诀：样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用 */
#pink {
color: pink;
}
zhoujirui
id 选择器和类选择器的区别：
- 类选择器 (class) 可以重复,id 选择器不可重复（同一个 id 选择器只能调用一次）
- 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用
在 CSS 中，通配符选择器使用
* 定义，它表示选取页面中所有元素（标签）。- 通配符选择器不需要调用，自动就给所有的元素使用样式
- 特殊情况才使用
// 利用通配符选择器清除所有的元素标签的内外边距
* {
margin: 0;
padding: 0;
}选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如：p | 不能差异化选择 | 较多 | p {color: red;
} |
| 类选择器 | 可以选出 1 个或者 多个 标签 | 可以根据需求选择 | 非常多 | .nav {color: red;
} |
| id 选择器 | 一次只能选择 1 个标签 | ID 属性只能在每个 HTML 文档中出现一次，也只能调用一次 | 一般和 js 搭配 | #nav {color: red;
} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color: red;
} |
字体系列、大小、粗细、和 文字样式（如：斜体）。字体系列
CSS 使用 font-family 属性定义文本的字体系列。
p {
font-family: "Microsoft YaHei";
}div {
font-family: Arial, "Microsoft YaHei";
}- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
- 最常用的字体：
body {font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB"; }
/* 浏览器会从第一个字体开始进行适配，如果本机可以适配的话，那么就使用该字体，否则看下一个字体，
如果都不可以，那么浏览器会使用自带的默认字体，所以实际开发中一般建议使用比较标准化的字体 */
h2 {
/* font-family: '微软雅黑';
可以使用中文，但不建议 */
font-family: "Microsoft YaHei", Arial, sans-serif;
}p {
font-family: "Times New Roman", Times, serif;
}
/* 一些情况下，如果要全局设置字体可以直接在 body 标签选择器中指明 */
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
}
注意：浏览器字体是依据用户操作系统来调用的。
字体大小
CSS 使用 font-size 属性定义字体大小。
p {
font-size: 20px;
}- px（像素）大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为：16px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- 可以给 body 指定整个页面文字的大小
/* 全局设置时，一般在 body 标签选择器中指定文字大小，谷歌浏览器默认 16px，
但是最好还是指定一个明确值，以保证在不同浏览器中的效果是一样的 */
body {
font-size: 24px;
}
/* 标题标签比较特殊，body 中的设置对其是不生效的，需要单独指定文字大小 */
h2 {
font-size: 54px;
}
字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细。
p {
font-weight: bold;
}| 属性值 | 描述 |
|---|---|
normal |
默认值（不加粗的） |
bold |
定义粗体（加粗的） |
100-900 |
400 等同于 normal，而 700 等同于 bold，其它值一般不使用，注意这个数字后面不跟单位 |
- 学会让加粗标签（比如 h 和 strong 等）变为不加粗，或者让其他标签加粗
- 实际开发时，我们更喜欢用数字表示粗细
.bold {
/* font-weight: bold;
*/
/* 实际开发中，我们更提倡使用数字来表示加粗的效果 */
/* 这个 700 的后面不要跟单位 */
font-weight: 700;
}
/* 使文字不加粗 */
h2 {
/* font-weight: normal;
*/
font-weight: 400;
}
文字样式
CSS 使用 font-style 属性设置文本的风格。
p {
font-style: normal;
}| 属性值 | 作用 |
|---|---|
normal |
默认值，浏览器会显示标准的字体样式 font-style: normal; |
italic |
浏览器会显示斜体的字体样式 |
字体复合属性
字体属性可以把以上文字样式综合来写，这样可以更节约代码。
body {
font: font-style font-weight font-size/line-height font-family;
}body {
font: normal 400 font-size/line-height "Microsoft YaHei", Arial, sans-serif;
}- 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
- 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
CSS字体属性之复合属性 - 锐客网 /* 想要 div 文字变倾斜、加粗、字号设置为 16 像素，并且是微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft YaHei';
*//* 复合属性：简写的方式，里面的顺序不能打乱 以空格隔开 */
/* font: font-style font-weight font-size/line-height font-family;
*/
font: italic 700 16px 'Microsoft YaHei';
/* 注意：不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用 */
/* font: 20px 'Microsoft YaHei'； */
}
三生三世十里桃花，一心一意百行代码
字体属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
font-size |
字号 | 我们通常用的单位是 px 像素，一定要跟上单位 |
font-family |
字体 | 实际工作中按照团队约定来写字体 |
font-weight |
字体属性 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
font-style |
字体样式 | 记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal |
font |
字体连写 | 1、字体连写是有顺序的不能随意换位置，2、其中字号和字体必须同时出现 |
外观，比如：文本颜色、文本对齐、文本装饰、文本缩进、行间距 等。文本颜色
color 属性用于定义文本的颜色。div
color: deeppink;
/* color: #FF1493;
最常用 */
/* color: rgb(255, 20, 147);
*/
}| 表示方式 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，black，white，gray |
| 十六进制 | #FF0000，#FF6600，#29D794（每两位对应：#红R绿G蓝B） |
| RGB 代码 | rgb(255, 0, 0) 或 rgb(100%, 0%, 0%) |
text-align 属性只能作用于 块级元素，并让该块级元素内的 行内元素 实现居中（不一定是文字）。div {
text-align: center;
}| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| rigth | 右对齐 |
| center | 居中对齐 |
text-decoration 属性规定添加到文本的修饰，可以给文本添加 下划线、删除线、上划线 等。div {
text-decoration: underline;
}| 属性值 | 描述 |
|---|---|
none |
默认，没有装饰线（最常用） |
underline |
下划线，链接 a 自带下划线（常用） |
overline |
上划线（几乎不用） |
line-through |
删除线（不常用） |
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
div {
text-indent: 10px;
}
p {
font-size: 24px;
/* em 为相对于当前元素的大小单位 */
text-indent: 2em;
}行间距（行高）
line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。- 行间距 = 上间距 + 文本高度 + 下间距
- 上下间距 = （行间距 - 文本高度）/ 2
- 文本高度 = font-size
p {
line-height: 26px;
}注：上一行文字的底部与本行文字的底部之间的距离就是行间距。
文本属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
color |
文本颜色 | 我们通常用 十六进制 而且通常是简写形式 #fff（6 个一样可以简写） |
text-align |
文本对齐 | 可以设定文字水平的对齐方式 |
text-indent |
文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
text-decoration |
文本修饰 | 牢记 添加下划线 underline 取消下划线 none |
line-height |
行高 | 控制行与行之间的距离 |
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（外链式）
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式。
青春不常在，抓紧谈恋爱
style其实就是标签的属性- 在双引号中间，写法要符合 CSS 规范
- 可以控制当前的标签设置样式
- 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
- 使用行内样式表设定 CSS，通常也被称为
行内式引入
内部样式表（嵌入样式表）时写到 HTML 页面内部，是将所有的 CSS 代码抽取出来，单独放到一个
div {
color: red;
font-size: 12px;
}
标签理论上可以放在 HTML 文档的任何地方，但一般会放到文档的标签中- 目前的浏览器已经支持省略
type属性 - 通过此种方式，可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式完全分离
- 使用内部样式表设定 CSS，通常也被称为
嵌入式引入，这种方式是我们练习时常用的方式
实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用。
引入外部样式表分为两步：
- 新建一个后缀名为：
.css的样式文件，把所有的 CSS 代码都放入此文件中 - 在 HTML 页面中，使用
标签引入这个文件
| 属性 | 作用 |
|---|---|
rel |
定义当前文档与被链接文档之间的关系，在这里需要指定为 "stylesheet"，表示被链接的文档是一个样式表文件 |
type |
定被链接文档的 MIME 类型，该属性最常见的 MIME 类型是 "text/css"，该类型描述样式表，目前的浏览器已经支持省略 "type" 属性 |
href |
定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径 |
- 复合选择器可以更准确、更高效的选择目标元素（标签）
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等
后代选择器 又称为 包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。元素1 元素2 { 样式声明 }- 元素1 和 元素2 中间用 空格 隔开
- 元素1 是父级，元素2 是子级，最终选择的是 元素2，即：元素1 是不会生效样式的
- 元素2 可以是儿子，也可以是孙子等，只要是 元素1 的后代即可
- 元素1 和 元素2 可以是任意基础选择器
复合选择器之后代选择器 - 锐客网 /* 把 ol 里面的小 li 选出来改为 pink */
ol li {
color: pink;
}/* 把 ol 里面的小 a 选出来改为 red */
ol a {
color: red;
}/* 把 ul 里面的小 li 选出来改为 green */
ul li {
color: green;
}/* 把 nav 类中的 li 里面的 a 选出来改为 yellow */
.nav li a {
color: yellow;
}
- 我是 ol 的孩子
- 我是 ol 的孩子
- 我是 ol 的孩子
- 我是 ol 的孙子
- 我是 ul 的孩子
- 我是 ul 的孩子
- 我是 ul 的孩子
- 我是 ul 的孙子，但是我不会变化
子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。
注意：是最近一级而并非最近一个！
语法：
元素1>元素2 { 样式声明 }上述语法表示选择元素1 里面的所有直接后代（子元素）元素2。
例如：
div>p { 样式声明 }/* 选择 div 里面所有最近一级 p 标签元素 */- 元素1 和 元素2 中间用 大于号 隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2，即元素1 是不会生效样式的
- 元素2 必须是亲儿子，其孙子、重孙之类都不归他管，你也可以叫：亲儿子选择器
复合选择器之子元素选择器 - 锐客网 .nav>a {
color: red;
}我是儿子1我是孙子1
我是孙子2
我是儿子2并集选择器
并集选择器 可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。 并集选择器 是各选择器通过英文逗号 , 连接而成，任何形式的选择器都可以作为并集选择器的一部分。语法：
元素1, 元素2, 元素3 { 样式声明 }
元素1,
元素2,
元素3 {
样式声明
}
/* 推荐写法，编码风格 */上述语法表示选择元素1、元素2 和 元素3。
例如：
ul, div { 样式声明 }/* 选择 ul 和 div标签元素 */- 元素1 和 元素2 中间用逗号隔开（最后一个不加逗号）
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
复合选择器之并集选择器 - 锐客网 /* 要求1：请把熊大和熊二改为粉色 */
/* div,
p {
color: pink;
} *//* 要求2：请把熊大和熊二改为红色，还有小猪一家改为粉色 */
div,
p,
.pig li {
color: pink;
}
/* 语法规范：并集选择器通常竖着写 */
熊大熊二
光头强
- 小猪佩奇
- 猪爸爸
- 猪妈妈
伪类选择器
伪类选择器 用于向某些选择器添加特殊的效果，比如：给链接添加特殊效果（链接伪类），或选择第 n 个元素（结构伪类）。 伪类选择器 书写最大的特点是用冒号 : 表示，比如：:hover、:first-child。 因为伪类选择器很多，比如：链接伪类、结构伪类 等，所以这里先讲解常用的链接伪类选择器。伪类的由来：因为在页面中并没有这个真实存在的类，所以称为 “伪类”。链接伪类选择器
链接伪类选择器注意事项：
- 为了确保生效且不冲突，请按照
LVHA的顺序声明:link:visited:hover:active - 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
复合选择器之链接伪类选择器 - 锐客网 /* 注意：要学会触类旁通，这里不只是可以改变颜色，当链接为图片时还可以改图片 */
/* 1、a:link 把没有点击过的（访问过的）链接选出来 */
a:link {
color: #333;
text-decoration: none;
}/* 2、a:visited 选择点击过的（访问过的）链接选出来 */
a:visited {
color: orange;
}/* 3、a:hover 选择鼠标经过（停留）的那个链接 */
a:hover {
color: skyblue;
}/* 4、a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
小猪佩奇
注意：
:hover :active 也适用于其他标签元素。focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况
input:focus {
background-color: yellow;
}复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
:focus 选择器 |
选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |
元素显示模式
元素显示模式 就是元素（标签）以什么方式进行显示，比如 HTML 元素一般分为
块元素 和 行内元素 两种类型。块元素
常见的块元素有
-、、、、、- 、
、- 、
- 、、、等
块级元素的特点：
- 自己独占一行
- 高度，宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的 100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注意：
文字类的块级元素(~,等)内不能放置块级元素，会发生语法错误
行内元素(内联元素)
常见的行内元素有
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素（a 除外）
注意：
- 链接里面不能再放链接
- 特殊情况链接
行内块元素
在行内元素中有几个特殊的标签：
文章图片
边框（border）
border 可以设置元素的边框。
边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色。
语法：
border: border-width || border-style || border-color
属性
作用
border-width定义边框粗细，单位是 px
border-style边框的样式
border-color边框颜色
边框样式 border-style 可以设置如下值：
none：没有边框，即忽略所有边框的宽度（默认值）solid：边框为单实线（最为常用的）dashed：边框为虚线dotted：边框为点线
边框简写：
border: 1px solid red;
/* 没有顺序 */
边框分开写法：
border-top: 1px solid red;
/* 只设定上边框，其余同理 */
表格的细线边框
表格中两个单元格相邻的边框会重叠在一起，呈现出加粗的效果。
border-collapse 属性控制浏览器绘制表格边框的方式。
语法：
border-collapse: collapse;
collapse 单词是合并的意思border-collapse: collapse;
表示相邻边框合并在一起
table,
td,
th {
border: 1px solid black;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
边框会影响盒子实际大小
边框会额外增加盒子的实际区域大小。盒子实际区域大小 = 内容区大小 + 内边距大小 + 边框大小 + 外边距大小。
解决方案：
- 测量盒子大小的时候，不量边框
- 如果测量的时候包含了边框，则需要 width、height 减去边框宽度（注意减单边还是双边）
边框会影响盒子的实际大小 - 锐客网 /* 我们需要一个 200*200 的盒子, 但是这个盒子有 10 像素的红色边框 */
div {
width: 180px;
height: 180px;
background-color: pink;
border: 10px solid black;
}
内边距（padding）
padding 属性用于设置内边距，即边框与内容之间的距离。
如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子区域！
属性
作用
padding-left左内边距
padding-rigth右内边距
padding-top上内边距
padding-bottom下内边距
padding 属性（简写属性）可以有一到四个值。
值的个数
表达意思
padding: 5px;
1 个值，代表上下左右都有 5 像素内边距
padding: 5px 10px;
2 个值，代表上下内边距是 5 像素，左右内边距是 10 像素
padding: 5px 10px 20px;
3 个值，代码上内边距 5 像素，左右内边距 10 像素，下内边距 20 像素
padding: 5px 10px 20px 30px;
4 个值，上是 5 像素，右 10 像素，下 20 像素，左是 30 像素（顺时针）
如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子区域！
解决方案：
- 如果保证盒子跟效果图大小保持一致，则让 width、height 减去多出来的内边距大小即可
- 如果盒子本身没有指定 width、height 属性，则此时 padding 不会撑开盒子区域大小
padding 撑大盒子 - 锐客网 div {
background-color: #000;
width: 100px;
height: 100px;
/* padding: 30px;
*/
}
使用技巧
新浪导航案例-padding影响盒子的好处 - 锐客网 .nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}.nav a {
/* a 属于行内元素，要指定高度，必须要转换为行内块元素 */
display: inline-block;
height: 41px;
/* 没有指定宽度，此时设置 padding 会使盒子内容之间的距离相同 */
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}.nav a:hover {
background-color: #eee;
color: #ff8500;
}设为首页
手机新浪网
移动客户端
登录
微博
博客
邮箱
网站导航
文章图片
外边距（margin）
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
属性
作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
margin 简写方式代表的意义跟 padding 完全一致。
外边距典型应用：
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度
width
- 盒子左右的外边距都设置为
auto
.header { width: 960px;
margin: 0 auto;
}
常见的写法，以下三种都可以：
margin-left: auto;
margin-right: auto;
margin: auto;
margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可。
案例：
盒子模型之外边距margin - 锐客网 div {
width: 200px;
height: 200px;
background-color: pink;
}/*
.one {
margin-bottom: 20px;
}
*/.two {
margin-top: 20px;
}
1
2
块级盒子水平居中对齐 - 锐客网 .header {
width: 900px;
height: 200px;
background-color: pink;
/* 上下 100 左右 auto */
margin: 100px auto;
}
行内元素、行内块元素水平居中对齐 - 锐客网 .header {
width: 900px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可 */
text-align: center;
}/* 这样是不起作用的 */
/*
span {
margin: 0 auto;
}
*/里面的文字
文章图片
外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
注意：内边距没有合并一说！浮动的盒子不会发生外边距合并！
主要有两种情况:
- 相邻块元素垂直外边距的合并
- 嵌套块元素垂直外边距的塌陷
相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并（准确的描述应该是：大的外边距覆盖小的）。
解决方案：尽量只给一个盒子添加 margin 值。
相邻块元素垂直外边距的合并 - 锐客网 .one {
width: 200px;
height: 200px;
background-color: hotpink;
margin-bottom: 100px;
}.two {
width: 200px;
height: 200px;
background-color: skyblue;
margin-top: 100px;
}
one
two
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，当子元素有上外边距，此时父元素会塌陷较大的外边距值（外边距效果显示在父元素之上）。
文章图片
解决方案：
- 可以为父元素定义上边框（比如：可以给一个透明 transparent 边框）
- 可以为父元素定义上内边距
- 可以为父元素添加
overflow: hidden
- 其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题
案例：
外边距合并-嵌套块级元素垂直外边距塌陷 - 锐客网 .father {
width: 400px;
height: 400px;
background-color: black;
margin-top: 50px;
}.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
文章图片
外边距合并-嵌套块级元素垂直外边距塌陷 - 锐客网 .father {
width: 400px;
height: 400px;
background-color: black;
margin-top: 50px;
/* border: 1px solid transparent;
*/
overflow: hidden;
}.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
文章图片
注意：外边距的合并在利用盒子布局页面的时候是经常发生的！
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
padding:0;
/* 清除内边距 */
margin:0;
/* 清除外边距 */
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（某些时候，行内元素对上下内外边距不生效）。但是转换为块级和行内块元素就可以了。
案例
文章图片
综合案例-MI产品模块 - 锐客网 * {
margin: 0;
padding: 0;
}body {
background-color: #f5f5f5;
}a {
color: #333;
text-decoration: none;
}.box {
width: 298px;
height: 415px;
background-color: #fff;
/* 让块级的盒子水平居中对齐 */
margin: 100px auto;
}.box img {
/* 图片的宽度和父亲一样宽 */
width: 100%;
}.review {
height: 70px;
font-size: 14px;
/* 因为这个段落没有 width 属性，所以 padding 不会撑开盒子的宽度 */
padding: 0 28px;
/* 因为这个段落有 height 属性，所以 padding-top 会撑大盒子，所以我们用 margin-top */
/* 其实用 padding-top 也可以，但是需要手动减去 top 值，麻烦且不规范 */
margin-top: 30px;
}.appraise {
font-size: 12px;
color: #b0b0b0;
padding: 0 28px;
margin-top: 20px;
}.info {
font-size: 14px;
padding: 0 28px;
margin-top: 15px;
}.info h4 {
display: inline-block;
font-weight: 400;
}.info span {
color: #ff6700;
}.info em {
/* 不倾斜 */
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
文章图片
快递牛，整体不错蓝牙可以说秒连。红米给力
来自于 117384232 的评价Redmi AirDots真无线蓝...|
99.9元
文章图片
综合案例-快报模板 - 锐客网 * {
margin: 0;
padding: 0;
}li {
/* 去除列表前的圆点 */
/* 之所以把这条语句单独写，是因为整个页面都需要把 li 的圆点去除 */
list-style: none;
}.box {
width: 248px;
height: 163px;
border: 1px solid #ccc;
margin: 100px auto;
}.box h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
/* 由于该盒子带有一个下边框，所以缩进不能使用 margin，否则下边框也会一同缩进，
此处就用 padding。并且此处没有设置 width，所以 padding-left 也不会撑大盒子 */
padding-left: 15px;
}.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}.box ul li a:hover {
text-decoration: underline;
}.box ul li {
height: 23px;
line-height: 23px;
padding-left: 20px;
}.box ul {
margin-top: 7px;
}品优购快报
- 【特惠】爆款耳机5折秒！
- 【特惠】母亲节，健康好礼低至5折！
- 【特惠】语音折叠台灯99元！
- 【特惠】9.9元3D打印！
- 【特惠】格力智能空调立省1000元！
总结
a、布局为啥用不同盒子，我只想用 div？
标签都是有语义的，合理的地方用合理的标签。比如产品标题就用 h，大量文字段落就用 p。
b、为啥用辣么多类名？
类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也更方便。
c、到底用 margin 还是 padding？
大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
一般来说，盒子与盒子之间统一用 margin，内容与边框之间用 padding。
d、自己做没有思路？
布局有很多种实现方式，可以开始先模仿大牛的写法，然后再做出自己的风格。
最后一定多运用辅助工具，比如屏幕画笔，PS 等等。
边框和阴影
圆角边框
CSS 3 新增了圆角边框样式。border-radius 属性用于设置元素的外边框圆角。
圆角边框 - 锐客网 div {
width: 300px;
height: 150px;
background-color: pink;
border-radius: 24px;
}
文章图片
注意：
- 参数值可以为数值或百分比的形式
- 该属性是一个简写属性，可以跟多个值
- 四个值：左上角、右上角、右下角、左下角（从左上开始顺时针）
- 三个值：左上、右上+左下、右下（对角为一组）
- 两个值：左上+右下、右上+左下（对角为一组）
- 同时可以对特定角单独设置
- 左上角：
border-top-left-radius
- 右上角：
border-top-right-radius
- 右下角：
border-bottom-right-radius
- 左下角：
border-bottom-left-radius
案例：
圆角边框常用写法 - 锐客网 .yuanxing {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px;
*/
/* 50% 就是宽度和高度的一半等价于 100px */
border-radius: 50%;
}.juxing {
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
}.radius {
width: 200px;
height: 200px;
/* border-radius: 10px 20px 30px 40px;
*/
/* border-radius: 10px 40px;
*/
border-top-left-radius: 20px;
background-color: pink;
}
1. 圆形的做法:2. 圆角矩形的做法:3. 可以设置不同的圆角:
文章图片
## 盒子阴影
CSS 3 新增了盒子阴影。box-shadow 属性用于为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
值
描述
h-shadow必须。水平阴影的位置，允许负值。
v-shadow必须。垂直阴影的位置，允许负值。
blur可选。模糊距离（虚实程度）。
spread可选。阴影的尺寸（大小）。
color可选。阴影的颜色，请参阅 CSS 颜色值（阴影多为半透明颜色）。
inset可选。将外部阴影（outset）改为内部阴影（outset 不能指定，默认为空即可）。
盒子阴影 - 锐客网 div {
width: 200px;
height: 200px;
background-color: salmon;
margin: 100px auto;
/* box-shadow: 10px 10px;
*/
}/* 伪类不仅仅可以用于 a 链接，还能用于其他标签 */
/* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
文章图片
三边阴影、双边阴影、单边阴影
盒子阴影 三边阴影、双边阴影、单边阴影 - 锐客网 div {
width: 100px;
height: 100px;
background-color: #000;
margin: 25px auto;
color: white;
}.a {
box-shadow: 0 0 25px 5px red;
}/* 三边阴影就是直接把整个阴影部分往下边移 */
.b {
box-shadow: 0 6px 10px 0 red;
}/* 两边阴影要用盒子嵌套来解决 */
.c1 {
box-shadow: 0 10px 10px -5px red;
}.c2 {
width: 100%;
box-shadow: 0 -10px 10px -5px red;
}/* 单边阴影就是直接把整个阴影部分往下边移，并且减小阴影大小 */
.d {
box-shadow: 0 10px 10px -5px red;
}
四边阴影
三边阴影两边阴影一边阴影
文字阴影
CSS 3 新增了文字阴影。text-shadow 属性用于为文本添加阴影。
语法：
text-shadow: h-shadow v-shadow blur color;
值
描述
h-shadow必须。水平阴影的位置。允许负值。
v-shadow必须。垂直阴影的位置。允许负值。
blur可选。模糊的距离（虚实程度）。
color可选。阴影的颜色。参阅 CSS 颜色值。
文字阴影 - 锐客网 div {
font-size: 50px;
color: salmon;
font-weight: 700;
text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
}你是阴影,我是火影
参考
黑马程序员pink老师前端入门教程
HTML CSS
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-