html整理

---

一、下载visual studio code

点我下载 visual studio code

二、插件

1、One Dark Pro（更换主题颜色）

2、open in browser（用浏览器打开html文件）

该文件下好之后要点击该选项

3、Live Server（实时预览页面）

需要打开要存入的文件夹，从“文件”里找到“打开文件夹”

4、Auto Rename Tag（实现同时修改一对标签）

5、 《会了吧》（将代码中的英文进行翻译）

6、vscode-icons（创建的文件图标）

如：

7、Easy LESS（将less文件导入html，自动生成css）

三、html

1、标题标签<h*><h*> ( 1<= * <= 6)

2、段落标签<p> </p>

3、换行标签<br / >

4、文本格式化标签（使用第一种更加强烈）

1、粗体

2、斜体

3、删除线

4、下划线

5、div 和 span

5、图像标签

alt:图片无法加载时的提示
title：鼠标放到图片上的提示文字
src：是< img >的必须属性，指图像的路径（看6解释）或文件名
width:图像的宽度
height:图像的高度
border:图像的边框，效果是类似于给照片加相框一样
一般的对图像只修改宽度或者高度（不确定修改多少时），否则图像可能会压扁或者变形，只修改高或者宽度时，另一个会自动改变

    <img src="课分.png"> <!-- 基本属性 -->
    <!-- 图片要和页面放到一起 -->
    <br />
    <img src="" alt="图片无法加载时的提示">
    <br />
    <img src="课分.png" title="鼠标放到图片上的提示文字">
    <img src="课分.png" title="鼠标放到图片上的提示文字" width="500" height="500" border="10">
        

---

6、路径

目路文件夹：普通文件夹
根目录： 打开目录文件夹的第一层
相对路路径：以引用文件所在位置为参考的位置
下一级路径：/上一级路径： ../

---

例如：imges/imp.png
imgrs为和当前文件同一级的文件夹（所进行操作的文件所保存的位置即为当前文件），imp.png为imges里面的图片
例如：../imges/imp.png
../为当前文件的上一层文件夹，后面的同理

---

绝对路径：目录下的绝对位置，通常是从磁盘开始

---

注意：绝对路径的符号为\而相对位置为/
在引用时也可用完整的网址

---

---

7、超链接

<a href="跳转目标" target="目标窗口的弹出方式" > 文本或图像 </ a >

target：
_self ：当前页面打开
_blank：新窗口打开

跳转目标：
1、外部链接：目标位值是网址
2、内部链接：目标为根据“相对路径”所获得的文件，这两个文件都是自己所写的保存到磁盘的
3、空连接：还未确定的链接用#代替
4、下载链接：如果是文件或压缩包（.exe zip），会自动下载

5、锚点链接：跳转到当前页面的某个位置用#名字的方式 ，名字自己定义，同时另一边用id照应
例如：

注意：为图像做超链接的时候，“图像” 为图像标签的方式

8、特殊字符

9、表格标签

<table> </table> 定义表格标签的标签，表格的大前提

该标签内的属性：（可以了解，后期可通过css进行设置表格属性）
align=“”定义表格的位置，居中（center），左对齐（left），右对齐（right）
border=“”规定表格是否有边框（1代表有，默认没有也就是不填东西）
cellpadding="" 规定表格中的文字与表格的距离，默认1像素
cellspacing=""规定行列的格子之间的距离，默认2像素
height width高和宽同理

---

<tr> </tr> 定义表格中的行，镶嵌在大前提下
<td> </td> 在行中细分小框框，相当于列
<th> </th>表头单元格，和列相同，但是会自动加粗并居中

---

黑色相当于 <table> <table>
红色相当于<tr> <tr>
绿色相当于<td> <td>

表格结构标签：<thead> </thead>用于表头区域的跨分，里面必须有<tr>标签
<tbody> </tbody>用于表格的主体
其实也没啥表现形式（也不可能hhh），只是为了让代码清晰方便（这个是真的）

---

表格的合并

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

合并的时候可以将多余的单元格删去，合并遵循左、上原则，即以左边跨列合并，向右合并几个包括自身；靠上同理，一般是跨行合并；注意删除的时候别删错！！！

合并的时候先确定是跨行合并还是跨列合并的，然后找到起始的单元格进行合并操作。然后删除多余的单元格
例如：合并以下单元格
合并前代码

<table  align="center" border="1" height="500" width="490" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        
    </table>

合并如图所示的单元格后的代码：

<table  align="center" border="1" height="500" width="490" cellspacing="0">

        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- <td></td> 不需要了删去 -->
        </tr>


        <tr>
            <td rowspan="2"> </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td>不需要了删去 -->
            <td></td>
            <td></td>
        </tr>



    </table>

10、列表标签

（1）无序列表

 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

<ul> </ul>无序列表
<li> </li>列表项
使用格式：

    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

呈现效果：

在这里插入图片描述

注意：直接在<ul>标签中的文字是不会被当做列表，即文字前没有小黑点，必须在<li>标签中（有序和自定义同理）

通过css设置属性：

li {  list-style: none;  } //清除前面的小黑点

---

（2）有序列表

 有序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
<ol> </ol> 有序列表
<li> </li>列表项

使用格式：

 <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

呈现形式：

---

（3）自定义列表

 自定义列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
 自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl> </dl>定义列表
<dt> </dt>定义项目或名字
<dd> </dd>描述项目或名字

使用格式：

<dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
        <dt>名词2</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
    </dl>

呈现形式：

---

11、表单标签

目的：为了收集用户信息。
组成：一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成

(1)、表单域（大框架）

表单域是一个包含表单元素的区域。
<form> 标签用于定义表单域（双标签），以实现用户信息的收集和传递，会把它范围内的表单元素信息提交给服务器.。

<form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素
</form>

---

(2)、表单元素

（ⅰ）<input>标签

用于收集用户信息。
在<input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" />

type属性：

radio:效果图（是文字前的小圆圈，用于选择）
checkbox:效果图和radio一样（只不过小圆圈换成了小方块，用于选择）

通过<label>标签可以扩大选择的范围，否则只能精确的点击小圆圈或者小方块选择

<lable>标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验

语法(for 属性应当与相关元素的 id 属性相同)：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

通过这样修改点击“男”也可以选择，或者点击文本框之前的文字光标也会跳转到文本框内

submit 、reset名字可以通过value进行重新命名

 <form>
        submit效果:
        <input type="submit" value="提交提交提交"><br>
        reset:效果
        <input type="reset" value="重置重置"><br>
        file:效果
        <input type="file" value="fsadfsdf"><br>
    </form>

---

其他属性：

name 和value 是每个表单元素都有的属性值,主要给后台人员使用

value:效果

name：后台可以通过这个 name 属性找到这个表单。页面中的表单很多，
name 的主要作用就是用于区别不同的表单。
 其中 radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字 ，否则radio将会变成多选
radio一旦选中无法取消（除非重置）（没有name默认多选），checkbox 可以取消（无论name是否相同都会多选，单选通过 js 设置）

checked:可以使某个单选按钮或者复选框默认是选中状态

<input type="radio" name="sex" value="男" checked="checked" />男

---

（ii）：<select>标签

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>

注意：

1. <select> 中至少包含一对 。
2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项

（iii）：<textarea> 标签

: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea> 标签。
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

<textarea rows="3" cols="20">
 文本内容
</textarea>

cols每行则字数
rows显示的行数
如果超出显示的行数会自动补充
但是：，我们在实际开发中不会使用，都是用 CSS 来改变大小

四、CSS

CSS 的主要使用场景就是美化网页,布局页面的

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

1、CSS语法规范+选择器

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

• 选择器(严格区分大小写) 是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
• 声明不区分大小写，但是一般采用小写
• 属性和属性值以“键值对”的形式出现
• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
• 属性和属性值之间用英文:分开
• 多个“键值对”之间用英文;进行区分

---

所有的样式，都包含在 <style> 标签内，表示是样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <style>
        li {
            color: red;
        }
    </style>
</head>
<body>
    <ul class="size">
        <li class="black">babab</li>
        <li class="red">发生的很快乐</li>
    </ul>
    
</body>
</html>

---

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

• 基础选择器是由单个选择器组成的
• 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

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

（1）标签选择器

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

语法：

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 属性3: 属性值3; 
 ...
} 

作用

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

优点

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

缺点

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

---

（2）类选择器

想要差异化选择不同的标签，单独选一个或者某几个标签

语法：

.类名 {
 属性1: 属性值1; 
 ...
}

结构需要用class属性来调用 class 类的意思
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <style>
        .size {
            height: 100px;
            width: 100px; 
            background-color: rgb(83, 80, 152);
        }
    </style>
</head>
<body>
    <ul class="size">
        <li class="black">babab</li>
        <li class="red">发生的很快乐</li>
    </ul>
    
</body>
</html>

注意：

1. 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
2. 不要使用纯数字、中文等命名
3. 长名称或词组可以使用中横线-来为选择器命名
4. class标签中可以使用多个类名，但是类名之间要用空格隔开！！！！！！！！！！

---

（3） id 选择器

id 属性只能在每个 HTML 文档中出现一次！！！！！！！！！
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以# 来定义

语法：

#id名 {
 属性1: 属性值1; 
 ...
} 

---

（4）通配符选择器

通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）

通配符选择器不需要调用， 自动就给所有的元素使用样式
特殊情况才使用 !!!!!!!!!

语法：

* {
 属性1: 属性值1; 
 ...
}

---

---

复合选择器：

（5）后代选择器

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

语法：

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

元素1 和 元素2 可以是任意基础选择器
元素1 和 元素2 中间用空格隔开

例如：
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

可以多个标签嵌套，即，元素2后仍可写: 元素3…

---

(6)子元素选择器

只能选择作为某元素的最近一级子元素

语法：

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

元素1 和 元素2 中间用 大于号 隔开

例如：
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

可以多个标签嵌套，即，元素2后仍可写: 元素3…

---

（7）并集选择器

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

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

例如；
ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */ 

---

（8）链接伪类选择器

 伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
 伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child

循顺序声明 ，以链接a为例：

a:link   //选择未被访问过的链接
a:visited  //选择已经访问过的链接
a:hover   //  选择鼠标指针位于链接上的链接
a:active //选择活动链接（鼠标点下去但是还未松开）

以上循序不能改变

一般声明：

 /* a 是标签选择器 所有的链接 */ 
 a { 
 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
 color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
 } 

---

(9) :focus 伪类选择器

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

input:focus { 
 background-color:yellow;
} 

---

2、字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

(1)、使用 font-family 属性定义文本的字体系列（一般默认字体）

 li {
   	  font-family: Arial,"Microsoft Yahei", "微软雅黑";
  }

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下,如果有空格隔开的多个单词组成的字体,加引号.

（2）、使用 font-size 属性定义字体大小（一般定义大小）

p { 
 font-size: 20px; 
}

• px（像素）大小是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为16px

（3）使用 font-weight 属性设置文本字体的粗细

p { 
 font-weight: bold;
}

（4）使用 font-style 属性设置文本的风格

p { 
 font-style: normal;
}

（5）字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:
// e....

body { 
 font: font-style font-weight font-size/line-height font-family;
}

• 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
• 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

---

3、文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

（1）color 属性用于定义文本的颜色

div { 
 color: red;
}

开发中最常用的是十六进制

（2）text-align 属性用于设置元素内文本内容的水平对齐方式

div { 
 text-align: center;
}

（3）text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

div { 
 text-decoration：underline；
}

（4）text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

p { 
 text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

或者

div { 
 text-indent: 10px;
}

（5）line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

p { 
 line-height: 26px;
}

4、样式引入

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

1. 行内样式表（行内式）
2. 内部样式表（嵌入式）
3. 外部样式表（链接式）

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

<style>
 div {
 color: red;
 font-size: 12px;
 }
</style>

• < style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
• 通过此种方式，可以方便控制当前整个页面中的元素样式设置
• 代码结构清晰，但是并没有实现结构与样式完全分离
• 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

（2） 行内样式表
是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式

<div style="color: red; font-size: 12px;">
	巴拉巴拉
</div>

（3） 外部样式表
样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用

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

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用< link> 标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css文件路径">//写到这里
</head>
<body>

    <h1>巴拉巴拉</h1>
    
</body>
</html>

• 使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式

---

5.元素显示模式

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

（1）块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素

• 高度，宽度、外边距以及内边距都可以控制。
• 宽度默认是容器（父级宽度）的100%。
• 是一个容器及盒子，里面可以放行内或者块级元素。
• 文字类的元素内不能使用块级元素,例如 < p >,< h1 > ~ < h6 >

---

（2）行内元素

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

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

注意：

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

---

（3） 行内块元素

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

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

---

（4）元素显示模式转换

• 转换为块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块：display: inline-block;

用法：

       .red {
            color: red;
            display: block; //放到这里
        }

---

（以下多用于 “盒子”中）

---

6.CSS 的背景

（1）背景颜色

background-color

默认值是 transparent（透明）

background-color:颜色值;

---

（2） 背景图片

background-image

background-image : none || url (url) 

none：无背景
url(url)：括号里的 url 不加引号

---

（3）背景平铺

background-repeat

background-repeat: repeat | no-repeat | repeat-x | repeat-y 

repeat：在纵向和横向上平铺（默认的）
no-repeat：背景图像不平铺
repeat-x：图像在横向上平铺
repeat-y：图像在总向上平铺

平铺的意思是：图片在一个盒子中，图片的大小小于盒子的大小，平铺的话，会将图像进行多次复制，充满整个盒子；

---

（4）背景图片位置

background-position

background-position: x y; 

x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位，坐标系建立为左上角

1. 参数是方位名词（top | center | bottom | left | right）

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

2. 参数是精确单位

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

3. 参数是混合单位

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

---

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

background-attachment

background-attachment : scroll | fixed  //滚动 固定

---

（6）背景复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

（7）背景颜色半透明

background: rgba(0, 0, 0, 0.3);

• 最后一个参数是 alpha 透明度，取值范围在 0~1之间

例如：这个白色的盒子，是不透明的

---

7.盒子模型（嗯。。。和表格联系起来理解更好，多用在块元素）

所有的网页都可以看做一个个盒子组到一起拼成的
一个盒子由四部分组成：边框、外边距、内边距、和 实际内容

一般盒子都会提前设置大小，以div为例：

   div {
            /* 设置宽 */
            width: 90px;
            /* 设置高 */
            height: 90px;
            
            border-top: 1px solid black;
        }

---

1. border (边框）

写法： border:border-width || border-style || border-color

三者的顺序可以改变

border-width:单位 px
border-style:

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

border-color:边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子</title>
    <style>
        div {
            border-top: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
        测试
    </div>
    
</body>
</html>

border-collapse：合并相邻的边框，实现1+1=1，不然的话，相邻两个单元格并列在一起会使边框变粗

border-collapse:collapse;

补注：

border-top: 1px solid red; /* 只设定上边框， 其余同理 */ 

---

2.padding （内边距）

padding-left：//左内边距
//其他的同理

padding 属性（简写属性）可以有一到四个值。

• 1个值，代表上下左右都有内边距;
• 2个值，代表上下内边距是第一个值左右内边距是第二个值；
• 3个值，代表上内边距是第一个值左右内边距是第二个值下内边距是第三个值；
• 4个值，上是第一右第二下第三左是第四 ,顺时针理解

盒子的大小由盒子大小（w/h）、内外边框一起决定
当某个盒子中的文字不一样多时，可以不规定盒子大小，而是规定内边距大小
盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.

---

3. margin（外边距）

margin-left：//左外边距
//其他的同理，和内边距一样

外边距可以让块级盒子水平居中，但是必须满足两个条件：

① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

(1)外边距的合并

1.相邻：取相邻边框的最大值，较小的则舍去，即：相邻的边框较小的外边距可以理解为0px，较大的不变
2.镶套：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

有些元素本身带有边框，可以先清除，然后再定义边框

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

4.border-radius（圆角边框）

border-radius:length;
length:数子或者百分比的形式

一个角变圆的代价是占用原本方形边框的长宽

可以四个角写一起，将length变为四个值即可；

分开写：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius 
border-bottom-left-radius

5.box-shadow（盒子阴影）

box-shadow: h-shadow v-shadow blur spread color inset;

1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
2. 盒子阴影不占用空间，不会影响其他盒子排列

---

6.text-shadow （文字阴影）

text-shadow: h-shadow v-shadow blur color

8.浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
用法：

选择器 { float: 属性值; }

属性值：

none （默认）：元素不浮动
right：靠右浮动
left：靠左浮动
注：浮动的元素会具有行内块元素的特性，并且浮动只影响后面的内容

---

脱标：脱离标准普通流的控制（浮） 移动到指定位置（动）

就是说：浮动的盒子会覆盖在标准流（简单的布局，比如 span div 盒子等布局，基础的标签布局）盒子上面

注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。

---

布局标准（自认为）：
 1.为了约束浮动元素位置, 我们网页布局一般采取的策略是: 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧
 2.先设置盒子的大小, 之后设置盒子的位置

---

为什么清除浮动？

---

清除浮动的方式

:after 方式是额外标签法的升级版。也是给父元素添加

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 *zoom: 1;
} 

以上代码不能改动，除非清楚自己在干什么.clearfix 是类名，可以改动

双伪元素清除浮动

.clearfix:before , .clearfix:after {
 content:"";
 display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
} 

以上代码不能改动，除非清楚自己在干什么, .clearfix 是类名，可以改动