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 元素，它包含：边框、外边距、内边距、和 内容。

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