乐趣区

关于css:CSS基础总结01

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

退出移动版