关于css:CSS基础总结01

41次阅读

共计 33872 个字符，预计需要花费 85 分钟才能阅读完成。

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-900 400 等同于 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 百分数 \ 由浮点数字和单位标识符组成的长度值
position top \ 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 元素，它包含： 边框 、 外边距 、 内边距 、和 内容。

边框（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>

外边距（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>
嵌套块元素垂直外边距的塌陷

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

解决方案：

  • 能够为父元素定义上边框（比方：能够给一个通明 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>

<!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>

留神：外边距的合并在利用盒子布局页面的时候是常常产生的！

革除内外边距

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

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

留神：行内元素为了关照兼容性，尽量只设置左右内外边距，不要设置高低内外边距（某些时候，行内元素对高低内外边距不失效）。然而转换为块级和行内块元素就能够了。

案例

<!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>

<!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>

留神：

  • 参数值能够为数值或百分比的模式

  • 该属性是一个简写属性，能够跟多个值

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

  • 同时能够对特定角独自设置

    • 左上角：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 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>

三边暗影、双边暗影、单边暗影

<!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

正文完
css
发表至： css
2022-08-05
 0
关于css:2022年推荐6个有意思的CSS-tools
关于css:CSS盒子模型基本介绍和用法
关于css:Sass混合的使用
关于css:CSS进阶巧用伪元素before和after制作绚丽效果