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 Fonts(字体)属性用于定义:字体系列大小粗细、和 文字样式(如:斜体)。
字体系列
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 浏览器会显示斜体的字体样式
注意:平时我们很少给文字加斜体,反而要给斜体标签 (em、i) 改为不倾斜字体。
字体复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码。
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、其中字号和字体必须同时出现
文本属性 CSS Text(文本)属性可定义文本的 外观,比如:文本颜色文本对齐文本装饰文本缩进行间距 等。
文本颜色
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 行高 控制行与行之间的距离
CSS引入方式 按照 CSS 样式书写的位置(或者引入的方式),CSS 样式表可以分为三大类:
  • 行内样式表(行内式)
  • 内部样式表(嵌入式)
  • 外部样式表(外链式)
行内样式表
行内样式表(内联样式表)是在元素标签内部的 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; }
  1. 我是 ol 的孩子
  2. 我是 ol 的孩子
  3. 我是 ol 的孩子
  4. 我是 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 元素一般分为 块元素行内元素 两种类型。
块元素
常见的块元素有 -、、、
    1. 、、、等
      块级元素的特点:
      • 自己独占一行
      • 高度,宽度、外边距以及内边距都可以控制
      • 宽度默认是容器(父级宽度)的 100%
      • 是一个容器及盒子,里面可以放行内或者块级元素
      注意:
      文字类的块级元素(~,等)内不能放置块级元素,会发生语法错误
      行内元素(内联元素)
      常见的行内元素有 等,其中 标签是最典型的行内元素,有的地方也将行内元素称为内联元素。
      行内元素的特点:
      • 相邻行内元素在一行上,一行可以显示多个
      • 高、宽直接设置是无效的
      • 默认宽度就是它本身内容的宽度
      • 行内元素只能容纳文本或其他行内元素(a 除外)
      注意:
      • 链接里面不能再放链接
      • 特殊情况链接 里面可以放块级元素,但是给 转换一下块级模式最安全
      行内块元素
      在行内元素中有几个特殊的标签:CSS基础总结01
      文章图片

      边框(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; }

      边框会影响盒子实际大小 边框会额外增加盒子的实际区域大小。盒子实际区域大小 = 内容区大小 + 内边距大小 + 边框大小 + 外边距大小。
      解决方案:
      1. 测量盒子大小的时候,不量边框
      2. 如果测量的时候包含了边框,则需要 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; }设为首页 手机新浪网 移动客户端 登录 微博 博客 邮箱 网站导航

      CSS基础总结01
      文章图片

      外边距(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; } */里面的文字CSS基础总结01
      文章图片

      外边距合并 使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。
      注意:内边距没有合并一说!浮动的盒子不会发生外边距合并!
      主要有两种情况:
      • 相邻块元素垂直外边距的合并
      • 嵌套块元素垂直外边距的塌陷
      相邻块元素垂直外边距的合并 当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottommargin-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

      嵌套块元素垂直外边距的塌陷 对于两个嵌套关系(父子关系)的块元素,当子元素有上外边距,此时父元素会塌陷较大的外边距值(外边距效果显示在父元素之上)。
      CSS基础总结01
      文章图片

      解决方案:
      • 可以为父元素定义上边框(比如:可以给一个透明 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; }

      CSS基础总结01
      文章图片

      外边距合并-嵌套块级元素垂直外边距塌陷 - 锐客网.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; }

      CSS基础总结01
      文章图片

      注意:外边距的合并在利用盒子布局页面的时候是经常发生的!
      清除内外边距 网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
      * { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }

      注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距(某些时候,行内元素对上下内外边距不生效)。但是转换为块级和行内块元素就可以了。
      案例
      CSS基础总结01
      文章图片

      综合案例-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; }CSS基础总结01
      文章图片
      快递牛,整体不错蓝牙可以说秒连。红米给力
      来自于 117384232 的评价Redmi AirDots真无线蓝...| 99.9元

      CSS基础总结01
      文章图片

      综合案例-快报模板 - 锐客网* { 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; }

      CSS基础总结01
      文章图片

      注意:
      • 参数值可以为数值或百分比的形式
      • 该属性是一个简写属性,可以跟多个值
        • 四个值:左上角、右上角、右下角、左下角(从左上开始顺时针)
        • 三个值:左上、右上+左下、右下(对角为一组)
        • 两个值:左上+右下、右上+左下(对角为一组)
      • 同时可以对特定角单独设置
        • 左上角: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基础总结01
      文章图片

      ## 盒子阴影
      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); }

      CSS基础总结01
      文章图片

      三边阴影、双边阴影、单边阴影
      盒子阴影 三边阴影、双边阴影、单边阴影 - 锐客网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

        推荐阅读