likes
comments
collection
share

CSS基础总结01

作者站长头像
站长
· 阅读数 282

CSS简介

CSS 是 层叠样式表 的简称。也会称之为 CSS样式表 或 级联样式表。

CSS 是一种 标记语言。

语法规范

CSS 规则由两个主要的部分构成：选择器 以及 声明。

  • 选择器 是用于选出需要设置 CSS 样式的 HTML 标签，选择器后跟的花括号内是对该对象设置的具体样式
  • 属性 和 属性值 以 “键值对” 的形式出现 属性: 属性值;
  • 属性是对指定的对象设置的样式属性，例如：字体大小、文本颜色等
  • 属性和属性值之间用英文 : 分开
  • 多个 “键值对” 之间用英文 ; 进行区分（末尾的键值对可以不加 ;）

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 <head> 里。

<head>
    <style type="text/css">
        h4 {
            color: bule;
            font-size: 100px;
        }
    </style>
</head>

注：

  • <style> 标签可以写到其他标签内部并作用与该标签区域内，但是强烈不推荐这种写法！
  • type="text/css" 可以省略。

代码风格

  • 样式格式推荐展开

    h3 {
    color: deeppink;
    font-size: 20px;
}

  • 样式大小推荐小写：样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

    h3 {
    color: pink;
}

  • 空格保留

    • 属性值前面，冒号后面，保留一个空格
    • 选择器（标签）和前花括号中间，保留一个空格
    h3 {
    color: pink;
}

基础选择器

选择器就是根据不同的需求把不同的标签选出来，选择器就是选择标签用的。

选择器分为 基础选择器 和 复合选择器 两个大类。

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

作用：

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。

优点：

能快速为页面中同类型的标签统一设置样式。

缺点：

不能设计差异化样式，只能选择全部的当前标签。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之标签选择器</title>
    <style type="text/css">
        /* 会对所有的该标签元素运用样式，优点：快速统一，缺点：无法差异化设置 */
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>

<body>
    <p>男</p>
    <p>男</p>
    <p>男</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用 类选择器 。

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个 . 号显示。

<div class="red">变红色</div>

注意：

  • 类选择器使用 .（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
  • 可以理解为给这个标签起了一个别名来表示
  • 长名称或词组可以使用中横线 - 来为类命名
  • 不能使用已有的关键字作为类名
  • 不要使用纯数字、中文等命名，尽量使用英文字母来表示
  • 命名要有意义，尽量使别人一眼就知道这个类名的目的（可读性第一，长度第二，推荐使用英语，如果是使用拼音请使用全拼）
  • 命名规范：见附件（CSS 命名规范.md）

记忆口诀：样式点定义，结构类调用，一个或多个，开发最常用。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之类选择器</title>
    <style type="text/css">
        /* 类选择器口诀：样式 . 定义，结构 class 调用，一个或多个，开发最常用 */
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

</html>

多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之类选择器</title>
    <style type="text/css">
        /* 一个标签可以运用多个类选择器，之间用空格隔开 */
        .red {
            color: red;
        }

        .font35 {
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div class="red font35">zhoujirui</div>
</body>

</html>

多类名开发中使用场景

  • 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
  • 这些标签都可以调用这个公共的类，然后再调用自己独有的类
  • 从而节省 CSS 代码，统一修改也非常方便（模块化、可重用化）
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之类选择器</title>
    <style type="text/css">
        /* 类选择器最大的优势在于：复用 */
        .box {
            width: 100px;
            height: 100px;
        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>

</html>

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。

注意：id 属性只能在每个 HTML 文档中出现一次。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器之id选择器</title>
    <style type="text/css">
        /* id 选择器口诀：样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="pink">zhoujirui</div>
</body>

</html>

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";}
<style type="text/css">
    /* 浏览器会从第一个字体开始进行适配，如果本机可以适配的话，那么就使用该字体，否则看下一个字体，
       如果都不可以，那么浏览器会使用自带的默认字体，所以实际开发中一般建议使用比较标准化的字体 */
    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;
    }
</style>

注意：浏览器字体是依据用户操作系统来调用的。

字体大小

CSS 使用 font-size 属性定义字体大小。

p {
    font-size: 20px;
}
  • px（像素）大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为：16px
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  • 可以给 body 指定整个页面文字的大小
<style type="text/css">
    /* 全局设置时，一般在 body 标签选择器中指定文字大小，谷歌浏览器默认 16px，
       但是最好还是指定一个明确值，以保证在不同浏览器中的效果是一样的 */
    body {
        font-size: 24px;
    }
    /* 标题标签比较特殊，body 中的设置对其是不生效的，需要单独指定文字大小 */
    h2 {
        font-size: 54px;
    }
</style>

字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p {
    font-weight: bold;
}
属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100-900400 等同于 normal，而 700 等同于 bold，其它值一般不使用，注意这个数字后面不跟单位
  • 学会让加粗标签（比如 h 和 strong 等）变为不加粗，或者让其他标签加粗
  • 实际开发时，我们更喜欢用数字表示粗细
<style type="text/css">
    .bold {
        /* font-weight: bold; */
        /* 实际开发中，我们更提倡使用数字来表示加粗的效果 */
        /* 这个 700 的后面不要跟单位 */
        font-weight: 700;
    }
    /* 使文字不加粗 */
    h2 {
        /* font-weight: normal; */
        font-weight: 400;
    }
</style>

文字样式

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 属性将不起作用
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之复合属性</title>
    <style type="text/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'； */
        }
    </style>
</head>

<body>
    <div>三生三世十里桃花，一心一意百行代码</div>
</body>

</html>

字体属性总结

属性表示注意点
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 样式，适合于修改简单样式。

<div style="color: red; font-size: 12px;">
    青春不常在，抓紧谈恋爱
</div>
  • style 其实就是标签的属性
  • 在双引号中间，写法要符合 CSS 规范
  • 可以控制当前的标签设置样式
  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
  • 使用行内样式表设定 CSS，通常也被称为 行内式引入

内部样式表

内部样式表（嵌入样式表）时写到 HTML 页面内部，是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。

<style type="text/css">
    div {
        color: red;
        font-size: 12px;
    }
</style>
  • <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放到文档的 <head> 标签中
  • 目前的浏览器已经支持省略 type 属性
  • 通过此种方式，可以方便控制当前整个页面中的元素样式设置
  • 代码结构清晰，但是并没有实现结构与样式完全分离
  • 使用内部样式表设定 CSS，通常也被称为 嵌入式引入，这种方式是我们练习时常用的方式

外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用。

引入外部样式表分为两步：

  • 新建一个后缀名为：.css 的样式文件，把所有的 CSS 代码都放入此文件中
  • 在 HTML 页面中，使用 <link> 标签引入这个文件
<link rel="stylesheet" type="text/css" href="css文件路径">
属性作用
rel定义当前文档与被链接文档之间的关系，在这里需要指定为 "stylesheet"，表示被链接的文档是一个样式表文件
type定被链接文档的 MIME 类型，该属性最常见的 MIME 类型是 "text/css"，该类型描述样式表，目前的浏览器已经支持省略 "type" 属性
href定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径

复合选择器

复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素（标签）
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器

后代选择器 又称为 包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 { 样式声明 }
  • 元素1 和 元素2 中间用 空格 隔开
  • 元素1 是父级，元素2 是子级，最终选择的是 元素2，即：元素1 是不会生效样式的
  • 元素2 可以是儿子，也可以是孙子等，只要是 元素1 的后代即可
  • 元素1 和 元素2 可以是任意基础选择器
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之后代选择器</title>
    <style>
        /* 把 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;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li><a href="#">我是 ol 的孙子</a></li>
    </ol>
    <ul>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li><a href="#">我是 ul 的孙子，但是我不会变化</a></li>
    </ul>
    <ul class="nav">
        <li><a href="#">我偏要变色！并且只能我一个人色……</a></li>
    </ul>
</body>

</html>

子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。

注意：是最近一级而并非最近一个！

语法：

元素1>元素2 { 样式声明 }

上述语法表示选择元素1 里面的所有直接后代（子元素）元素2。

例如：

div>p { 样式声明 }     /* 选择 div 里面所有最近一级 p 标签元素 */
  • 元素1 和 元素2 中间用 大于号 隔开
  • 元素1 是父级，元素2 是子级，最终选择的是元素2，即元素1 是不会生效样式的
  • 元素2 必须是亲儿子，其孙子、重孙之类都不归他管，你也可以叫：亲儿子选择器
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之子元素选择器</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子1</a>
        <p>
            <a href="#">我是孙子1</a>
            <a href="#">我是孙子2</a>
        </p>
        <a href="#">我是儿子2</a>
    </div>
</body>

</html>

并集选择器

并集选择器 可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。 并集选择器 是各选择器通过英文逗号 , 连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1, 元素2, 元素3 { 样式声明 }
元素1,
元素2,
元素3 {
    样式声明
}
/* 推荐写法，编码风格 */

上述语法表示选择元素1、元素2 和 元素3。

例如：

ul, div { 样式声明 }         /* 选择 ul 和 div标签元素 */
  • 元素1 和 元素2 中间用逗号隔开（最后一个不加逗号）
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之并集选择器</title>
    <style>
        /* 要求1：请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2：请把熊大和熊二改为红色，还有小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
        /* 语法规范：并集选择器通常竖着写 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

伪类选择器

伪类选择器 用于向某些选择器添加特殊的效果，比如：给链接添加特殊效果（链接伪类），或选择第 n 个元素（结构伪类）。 伪类选择器 书写最大的特点是用冒号 : 表示，比如：:hover、:first-child。 因为伪类选择器很多，比如：链接伪类、结构伪类 等，所以这里先讲解常用的链接伪类选择器。

伪类的由来：因为在页面中并没有这个真实存在的类，所以称为 “伪类”。

链接伪类选择器

链接伪类选择器注意事项：

  • 为了确保生效且不冲突，请按照 LVHA 的顺序声明 :link :visited :hover :active
  • 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        /* 注意：要学会触类旁通，这里不只是可以改变颜色，当链接为图片时还可以改图片 */
        /* 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;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
</body>

</html>

注意：:hover :active 也适用于其他标签元素。

focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {
    background-color: yellow;
}

复合选择器总结

选择器作用特征使用情况隔开符号及用法
后代选择器用来选择后代元素可以是子孙后代较多符号是空格 .nav a
子代选择器选择最近一级元素只选亲儿子较少符号是大于 .nav>p
并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号 .nav, .header
链接伪类选择器选择不同状态的链接跟链接相关较多重点记住 a{} 和 a:hover 实际开发的写法
:focus 选择器选择获得光标的表单跟表单相关较少input:focus 记住这个写法

强调：复合选择器的层级写得越细越好（可读性，可维护性，安全性），同时将复合选择器的层级写得越细，可以提前避免大部分的选择器优先级混乱！

元素显示模式

元素显示模式 就是元素（标签）以什么方式进行显示，比如 <div> 自己占一行，比如一行可以放多个 <span>。

HTML 元素一般分为 块元素 和 行内元素 两种类型。

块元素

常见的块元素有 <h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<table>、<tr>、<form> 等

块级元素的特点：

  • 自己独占一行
  • 高度，宽度、外边距以及内边距都可以控制
  • 宽度默认是容器（父级宽度）的 100%
  • 是一个容器及盒子，里面可以放行内或者块级元素

注意：

文字类的块级元素(<h1>~<h6>,<p>等)内不能放置块级元素，会发生语法错误

行内元素(内联元素)

常见的行内元素有 <a>、<span>、<em>、<strong> 等，其中 <span> 标签是最典型的行内元素，有的地方也将行内元素称为内联元素。

行内元素的特点：

  • 相邻行内元素在一行上，一行可以显示多个
  • 高、宽直接设置是无效的
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素（a 除外）

注意：

  • 链接里面不能再放链接
  • 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签：<img>、<input>、<th>、<td>，它们同时具有 块元素 和 行内元素 的特点，有些资料称它们为 行内块元素。

行内块元素的特点：

  • 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
  • 默认宽度就是它本身内容的宽度（行内元素特点）
  • 高度，行高、外边距以及内边距都可以控制（块级元素特点）

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性 比如：想要增加链接 <a> 的触发范围。

  • 转换为块元素：display: block;（由于经常需要设置宽高，所以通常会将行内元素转换为块元素）
  • 转换为行内元素：display: inline;
  • 转换为行内块：display: inline-block;（常用）

侧边栏案例

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简洁版小米侧边栏案例</title>
    <style>
        /* 1、把 a 转换为块级元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            /* 一个小技巧：单行文字垂直居中的代码，让文字的行高等于盒子的高度 */
            line-height: 40px;
        }

        /* 2、鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <!--
    说明：在实际开发中，为了避免链接堆叠，从而降低浏览器排名
    开发中一般都将这些链接放在无序列表中，这里只是为了方便演示才这样使用
    -->
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

单行文字垂直居中

解决方案：让 文字的行高 等于 盒子的高度 就可以让文字在当前盒子内垂直居中。

a {
  height: 40px;
  line-height: 40px;
}

注意点：块级元素不会自动换行

当块级元素的宽度超过其父元素宽度时，其不会发生换行。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>块级元素不会自动换行</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        div {
            background-color: #FFFF00;
            width: 600px;
            height: 300px;
            color: #FFFFFF;
            font-size: 24px;
        }

        .div {
            background-color: #000;
            width: 730px;
            height: 100px;
            margin: 20px 0;
        }

        span {
            background-color: #000;
            width: 700px;
            height: 100px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
<div class="clearfix">
    <div class="div">块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素</div>
    <span>行内元素 行内元素 行内元素 行内元素 行内元素 行内元素 行内元素 行内元素</span>
</div>
</body>
</html>

CSS 的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。 背景属性可以设置 背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定 等。

背景颜色

background-color: 颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color: transparent;

目前 CSS 还支持丰富的渐变色，但是某些浏览器不支持

/* 浏览器不支持时显示 */
background-color: red;
/* 线性渐变 - 从上到下（默认情况下）*/
background-image: linear-gradient(#e66465, #9198e5);

背景图片

background-image 属性描述了元素的背景图像，实际开发常用于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置（精灵图也是一种运用场景）。

background-image : none | url(url)
参数值作用
none无背景图（默认的）
url使用绝对或相对地址指定背景图像

注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

background-color: pink;
background-image: url(../images/logo.png);
/* 1、背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 2、默认情况下，背景图片是平铺的 */
/* background-repeat: repeat; */ /* 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片区域会覆盖背景颜色 */

背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

注：平铺可以简单的理解为“重复”。

background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值作用
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向上平铺

背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x坐标 y坐标;

参数代表的意思是：x 坐标 和 y 坐标，可以使用 方位名词 或者 精确单位。

参数值说明
length百分数 \由浮点数字和单位标识符组成的长度值
positiontop \center \bottom \left \rigth 方位名词

  • 参数是方位名词

    • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
    • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

  • 参数是精确单位

    • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
    • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

  • 参数是混合单位

    • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作 视差滚动 的效果。

background-attachment : scroll | fixed
参数作用
scroll背景图像是随对象内容滚动的（可见区域取决于背景图像的高度）
fixed背景图像固定
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超大背景图片</title>
    <style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
</body>

</html>

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中，从而节约代码量。 当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为： background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

background: transparent url(image.jpg) no-repeat fixed top;

这是实际开发中，我们更提倡的写法。

背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

background: rgba(0, 0, 0, 0.3);
  • 最后一个参数是 alpha 透明度，取值范围在 0~1 之间
  • 习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
  • CSS3 新增属性，是 IE9+ 版本浏览器才支持的
  • 但是现在实际开发，我们不太关注兼容性写法了，可以放心使用

背景总结

属性作用值
backgroud-color背景颜色预定义的颜色值 / 十六进制 / RGB代码
backgroud-image背景图片url（图片路径）
backgroud-repeat是否平铺repeat / no-repeat / repeat-x / repeat-y
backgroud-position背景位置length / position 分别是 x 和 y 坐标
backgroud-attachment背景附着scroll（背景滚动）/ fixed（背景固定）
背景简写书写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明背景颜色半透明background: rgba(0, 0, 0, 0.3); 后面必须是4个值

背景图片：实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）。

CSS三大特性

CSS 有三个非常重要的特性：层叠性、继承性、优先级。

层叠性

给同一个选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。

层叠性原则：

  • 样式冲突，遵循的原则是 就近原则，哪个样式距离结构近，就执行哪个样式
  • 样式不冲突，不会层叠

注：就近的标准是：后 > 前

div {
     color: red;
}
div {
     color: pink; /* 有效 */
}

继承性

现实中的继承：我们继承了父亲的姓。

CSS 中的继承：子标签会继承父标签的某些样式，如：文本颜色和字号，简单的理解就是：子承父业。

  • 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
  • 子元素可以继承父元素的样式（ text-、font-、line-、color ） 文本、字体、段落、颜色
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三大特性之继承性</title>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>周吉瑞</p>
    </div>
</body>

</html>

行高的继承

body {
    font: 12px/1.5 'Microsoft YaHei';
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为 1.5
  • 此时子元素的行高是：当前元素的文字大小 * 1.5
  • body 行高 1.5 这样写法最大的优势就是里面的子元素可以根据自己文字的大小自动调整行高
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三大特性之继承性——行高的继承</title>
    <style>
        body {
            color: pink;
            /* font: 12px/18px; */
            font: 12px/1.5;        /* 12 + 12 * 0.5 = 18 */
        }

        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个 1.5 就是当前元素文字大小 font-size 的 1.5 倍 */
            /* 所以当前 div 的行高就是：14 + 14 * 0.5 = 21px */
            font-size: 14px;
        }

        p {
            /* 1.5 * 16 = 24 当前行高 */
            font-size: 16px;
        }

        /* li 没有手动指定文字大小，则会继承父亲（此处的父亲可以层层向上推）的文字大小  */
        /* 即：body 12px 所有 li 的文字大小为 12px */
        /* 当前 li 的行高就是 12 * 1.5 = 18  */
    </style>
</head>

<body>
    <div>周吉瑞</div>
    <p>JERRY</p>
    <ul>
        <li>没有指定文字大小</li>
    </ul>
</body>

</html>

优先级

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行

选择器权重如下表所示：

规则：比较位级别，位级别相同时比较位大小。

选择器选择器权重
继承 或 *0,0,0,0
元素选择器0,0,0,1
类选择器、伪类选择器0,0,1,0
ID 选择器0,1,0,0
行内样式 style=""1,0,0,0
!important 重要的∞ 无穷大
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三大特性之优先级</title>
    <style>
        div {
            color: pink;
        }

        .test {
            color: red;
        }

        #demo {
            color: green;
        }
    </style>
</head>

<body>
    <div class="test">你笑起来真好看</div> <!-- red -->
    <div class="test" id="demo">你笑起来真好看</div> <!-- green -->
    <div class="test" id="demo" style="color: blue;">你笑起来真好看</div> <!-- blue -->
<!-- 
    假如在 css 选择器 某一个属性值后面跟上 !important，那么这个属性一定会执行！
    例如：div {
             color: pink !important;  
          }
          ...
    <div class="test" id="demo" style="color: blue;">你笑起来真好看</div> -- pink --
-->

</body>

</html>

优先级注意问题：

  • 权重是由 4 组数字组成的，但是不会有进位！
  • 可以理解为：类选择器 永远大于 元素选择器，ID 选择器 永远大于 类选择器，以此类推！
  • 等级判断 从左到右，如果某一位数值相同，则判断下一位数值
  • 可以简单的记忆：通配符 和 继承 权重为 0，标签选择器 为 1，类（伪类）选择器为 10，ID 选择器为 100，行内样式表 为 1000，!important 无穷大
  • 继承的权重是 0，不管父元素权重多高，子元素得到的权重都是 0 ！
  • a 链接浏览器默认指定了一个样式，所以它不参与继承，所以设置样式需要选中单独设置
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三大特性之优先级——注意问题</title>
    <style>
        /* 父亲的权重是 100 */
        #father {
            color: red !important;
        }

        /* p 继承的权重为 0 */
        /* 所以以后我们看标签到底执行哪一个样式，就先看这个标签有没有直接被选出来
           如果直接被选择出来了，那么就与父亲无关了！*/
        p {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 继承的权重是 0，不管父元素权重多高，子元素得到的权重都是 0 -->
    <div id="father">
        <p>你还是很好看</p> <!-- pink -->
    </div>
    <!-- a 链接浏览器默认指定了一个样式，所以它不参与继承，所以给 a 改样式必须直接把 a 选出来 -->
    <a href="#">我是单独的样式</a>
</body>

</html>

权重的叠加：

如果是复合选择器，则会有权重叠加，需要计算权重。

注意：再次强调！权重虽然会叠加，但一定不会进位！（1万个元素选择器也比不过一个类选择器）。

从左到右逐位比较，只有左一位同样大，才比较右边一位！

例如：

  • div ul li ——> 0,0,0,3
  • .nav ul li ——> 0,0,1,2
  • a:hover ——> 0,0,1,1
  • .nav a ——> 0,0,1,1

如果要对某一元素设置样式，那么就必须给它足够高的权重（注意：是给他，而不是他的父亲！）。

提高选择器权重的技巧之一：多写几层类选择器

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三大特性之优先级——权重叠加</title>
    <style>
        /* 复合选择器会有权重叠加的问题 */
        /* 权重虽然会叠加，但是永远不会有进位 例如：十个 0,0,0,1 相加为 0,0,0,10 而不是 0,0,1,0 */
        /* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
        ul li {
            color: green;
        }

        /* li 的权重是 0,0,0,1 */
        li {
            color: red;
        }

        /* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
        .nav li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>大猪蹄子</li>    <!-- pink -->
        <li>大肘子</li>    <!-- pink -->
        <li>猪尾巴</li>    <!-- pink -->
    </ul>
</body>

</html>

CSS盒子模型

页面布局要学习三大核心：盒子模型、浮动和定位。

网页布局的核心本质： 就是利用 CSS 摆盒子！

盒子模型（Box Model）

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 内容。

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 减去边框宽度（注意减单边还是双边）
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框会影响盒子的实际大小</title>
    <style>
        /* 我们需要一个 200*200 的盒子, 但是这个盒子有 10 像素的红色边框 */
        div {
            width: 180px;
            height: 180px;
            background-color: pink;
            border: 10px solid black;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

内边距（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 不会撑开盒子区域大小
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding 撑大盒子</title>
    <style>
        div {
            background-color: #000;
            width: 100px;
            height: 100px;
            /* padding: 30px; */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

使用技巧

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航案例-padding影响盒子的好处</title>
    <style>
        .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;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">登录</a>
        <a href="#">微博</a>
        <a href="#">博客</a>
        <a href="#">邮箱</a>
        <a href="#">网站导航</a>
    </div>
</body>

</html>

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 即可。

案例：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之外边距margin</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* 
        .one {
            margin-bottom: 20px;
        } 
        */

        .two {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>

</html>
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级盒子水平居中对齐</title>
    <style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            /* 上下 100 左右 auto */
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="header"></div>
</body>

</html>
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素、行内块元素水平居中对齐</title>
    <style>
        .header {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可 */
            text-align: center;
        }

        /* 这样是不起作用的 */
        /* 
        span {
            margin: 0 auto;
        } 
        */
    </style>
</head>

<body>
    <div class="header">
        <span>里面的文字</span>
    </div>
    <div class="header">
        <img src="../image/icon.png" alt="">
    </div>
</body>

</html>

外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

注意：内边距没有合并一说！浮动的盒子不会发生外边距合并！

主要有两种情况:

  • 相邻块元素垂直外边距的合并
  • 嵌套块元素垂直外边距的塌陷
相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并（准确的描述应该是：大的外边距覆盖小的）。

解决方案：尽量只给一个盒子添加 margin 值。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相邻块元素垂直外边距的合并</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: hotpink;
            margin-bottom: 100px;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>

</html>
嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，当子元素有上外边距，此时父元素会塌陷较大的外边距值（外边距效果显示在父元素之上）。

CSS基础总结01

解决方案：

  • 可以为父元素定义上边框（比如：可以给一个透明 transparent 边框）
  • 可以为父元素定义上内边距
  • 可以为父元素添加 overflow: hidden
  • 其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题

案例：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: black;
            margin-top: 50px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

CSS基础总结01

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
    <style>
        .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;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

CSS基础总结01

注意：外边距的合并在利用盒子布局页面的时候是经常发生的！

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
    padding:0;     /* 清除内边距 */
    margin:0;     /* 清除外边距 */
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（某些时候，行内元素对上下内外边距不生效）。但是转换为块级和行内块元素就可以了。

案例

CSS基础总结01

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-MI产品模块</title>
    <style>
        * {
            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;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/img.jpg" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">
            <h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
            <!-- 特殊元素可以用 em 包裹 -->
            <em>|</em>
            <span> 99.9元</span>
        </div>
    </div>
</body>

</html>

CSS基础总结01

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例-快报模板</title>
    <style>
        * {
            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;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】语音折叠台灯99元！</a></li>
            <li><a href="#">【特惠】9.9元3D打印！</a></li>
            <li><a href="#">【特惠】格力智能空调立省1000元！</a></li>
        </ul>
    </div>
</body>

</html>

总结

a、布局为啥用不同盒子，我只想用 div？

标签都是有语义的，合理的地方用合理的标签。比如产品标题就用 h，大量文字段落就用 p。

b、为啥用辣么多类名？

类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也更方便。

c、到底用 margin 还是 padding？

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。

一般来说，盒子与盒子之间统一用 margin，内容与边框之间用 padding。

d、自己做没有思路？

布局有很多种实现方式，可以开始先模仿大牛的写法，然后再做出自己的风格。

最后一定多运用辅助工具，比如屏幕画笔，PS 等等。

边框和阴影

圆角边框

CSS 3 新增了圆角边框样式。border-radius 属性用于设置元素的外边框圆角。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆角边框</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: pink;
            border-radius: 24px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS基础总结01

注意：

  • 参数值可以为数值或百分比的形式

  • 该属性是一个简写属性，可以跟多个值

    • 四个值：左上角、右上角、右下角、左下角（从左上开始顺时针）
    • 三个值：左上、右上+左下、右下（对角为一组）
    • 两个值：左上+右下、右上+左下（对角为一组）

  • 同时可以对特定角单独设置

    • 左上角：border-top-left-radius
    • 右上角：border-top-right-radius
    • 右下角：border-bottom-right-radius
    • 左下角：border-bottom-left-radius

案例：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆角边框常用写法</title>
    <style>
        .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;
        }
    </style>
</head>

<body>
    1. 圆形的做法:
    <div class="yuanxing"></div>
    2. 圆角矩形的做法:
    <div class="juxing"></div>
    3. 可以设置不同的圆角:
    <div class="radius"></div>
</body>

</html>

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 不能指定，默认为空即可）。
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子阴影</title>
    <style>
        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);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS基础总结01

三边阴影、双边阴影、单边阴影

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影 三边阴影、双边阴影、单边阴影</title>
    <style>
        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;
        }
    </style>
</head>

<body>
    <div class="a">四边阴影</div>
    <div class="b">三边阴影</div>
    <div class="c1">
        <div class="c2">两边阴影</div>
    </div>
    <div class="d">一边阴影</div>
</body>

</html>

文字阴影

CSS 3 新增了文字阴影。text-shadow 属性用于为文本添加阴影。

语法：

text-shadow: h-shadow v-shadow blur color;
值描述
h-shadow必须。水平阴影的位置。允许负值。
v-shadow必须。垂直阴影的位置。允许负值。
blur可选。模糊的距离（虚实程度）。
color可选。阴影的颜色。参阅 CSS 颜色值。
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字阴影</title>
    <style>
        div {
            font-size: 50px;
            color: salmon;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>
        你是阴影,我是火影
    </div>
</body>

</html>

参考

黑马程序员pink老师前端入门教程

HTML CSS