HTML+CSS基础课程 笔记

其实我也知道，自己的基础不好，很多知识没有学牢固。所以，那么就不断总结，不断积累，不断沉淀吧~保持战斗力！关于html+CSS的一些笔记

html 标签

给div命名，使逻辑更加清晰

<div id="版块名称">…</div>

table标签，认识网页上的表格

<tbody>…</tbody>

当表格内容非常多时，表格会下载一点显示一点，但如果加上``标签后，这个表格就要等表格内容全部下载完才会显示。

使用<pre>标签为你的网页加入大段代码

<pre>语言代码段</pre><pre>var message="欢迎";for(var i=1;i&lt;=10;i++){alert(message);}</pre>

W3School原文：如果您希望使用<pre>标签来定义计算机源代码，
比如 HTML 源代码，请使用符号实体来表示特殊字符，
比如 "<" 代表 “<”，">" 代表 “>”，"&"代表 “&”。

加入一行代码，使用<code>标签

<code>var i=i+300;</code>

<q>标签，短文本引用

双引号是写给人看的，<q>是写给机器看的。
注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如
自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。

table标签，认识网页上的表格

<th>…</th>：表格的头部的一个单元格，表格表头。
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示

caption标签，为表格添加标题和摘要

<table summary="摘要">    <caption>标题文本</caption>    <tr>        <td>…</td>        <td>…</td>        …    </tr>…</table>

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，
使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
又是给机器看的~

使用<a>标签，链接到另一个页面

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>例如：<a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），href=”#”无跳转

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。如下代码：<a href="目标网址" target="_blank">click here!</a>

_blank – 在新窗口中打开链接
_parent – 在父窗体中打开链接
_self – 在当前窗体打开链接,此为默认值
_top – 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 – 在对应框架页中打开

<a href="目标网址" target="_blank">click here!</a>

target之前一定要加空格！！！

用css样式，为表格加入边框

table tr td ,th表示选择所有table标签里的所有tr标签里的所有td标签和th标签。

xx bb表示选择xx标签里嵌套的bb标签；aa，cc表示同时选择了aa标签和cc标签。

属性的值是包括在双引号里的。像这样border=”1px ，solid， #000” 而属性与属性之间是用空格隔开的，所以完整是这样

使用mailto在网页中链接Email地址

如果：A 发送邮件给B1、B2、B3，抄送给C1、C2、C3，密送给D1、D2、D3。
那么：
A知道自己发送邮件给了B1、B2、B3，并且抄送给了C1、C2、C3，密送给了D1、D2、D3。
B1知道这封是A发送给B1、B2、B3的邮件，并且抄送给了C1、C2、C3，但不知道密送给了D1、D2、D3。
C1知道这封是A发送给B1、B2、B3的邮件，并且抄送给了C1、C2、C3，但不知道密送给了D1、D2、D3。
D1知道这封是A发送给B1、B2、B3的邮件，并且抄送给了C1、C2、C3，而且密送给了自己，但不知道密送给了D2、D3。

使用mailto在网页中链接Email地址
<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者
发送电子邮件。如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，
后面的参数每一个都以“&”分隔。

<a href="mailto:[e-mail];[e-mail]? " cc= "[e-mail]" &bbc="[e-mail]" &subject="观了不起的盖茨比有感。" &body="你好，对此评论有些想法。">对此影评有何感想，发送邮件给我</a>

认识<img>标签，为网页插入图片

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用标签来插入图片。

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">举例：<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解：

1、src：标识图像的位置;

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

使用表单标签，与用户交互

<form method="传送方式" action="服务器文件">

讲解：

1.<form> ：<form>标签是成对出现的，以开始，以结束

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ： 数据传送的方式（get/post）

在input标签中，name和id的意思都差不多，name就是名称咯类似于你的变量名，
id是唯一标识这个标签，name和id在之后的JS中都会用到，用来定位具体某个标签；
但value含义就不同了要看你使用的是哪个类型的标签，譬如type=text文本框，
value是显示在文本框中的初始语句；但是在type=radio单选框中，value的含义
是你所选的值，然后提交给服务器的；

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。语法：<form><input type="text/password" name="名称" value="文本" /></form>

1、type：
当type=”text”时，输入框为文本输入框;

当type=”password”时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

举例：

<form>姓名：<input type="text" name="myName"><br/>密码：<input type="password" name="pass"></form>

文本域，支持多行文本输入

语法：

文本

1、标签是成对出现的，以开始，以结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在标签之间可以输入默认值。

举例：

<form method="post" action="save.php"><label>联系我们</label><textarea cols="50" rows="10" >在这里输入内容...</textarea></form>

使用下拉列表框进行多选

下拉列表标签：select
实现选中的标签为：selected = “selected”
实现多个选中的标签为：multiple = “multiple”

下拉列表也可以进行多选操作，在<select>标签中设置multiple=”multiple”属性
，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行
单击（在 Mac下使用 Command +单击），可以选择多个选项

使用提交按钮，提交数据

在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：
当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

<input type="submit" value="提交">type：只有当type值设置为submit时，按钮才有提交作用value：按钮上显示的文字

form表单中的label标签

不加label的话鼠标一定要点击小圆点才能激活条目,加了label可以直接点击对应的文字来激活条目

label的作用就是获得焦点，在列子中，把鼠标移动到文字上（男、女、输入你的邮箱地址）
，同样可以激活控件进行选择，输入。但是如果不加label的话，鼠标就必须移动到控件上面。

css

CSS注释代码

就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->

引入CSS的三种方式

内联式适用情况:局部特殊化<span style="color:red; font-size:18px;">text</span>嵌入式适用情况:统一标签样式格式<style type="text/css">span{color:bule; font-size:19px;}</style>外联式适用情况:方便代码重用和管理<link herf="kkk.css" rel="stylesheet" type="text/css">rel属性用于定义链接的文件和HTML文档之间的关系。stylesheet，的意思就是样式调用，

css选择器

CSS 优先级法则：

A 选择器都有一个权值，权值越大越优先

B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置

C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式

D 继承的CSS 样式不如后来指定的CSS 样式

E 在同一组属性设置中标有“!important”规则的优先级最大

1. 内联样式表的权值最高 1，0，0，0
2. ID 选择器的权值为 0，1，0，0
3. Class 类选择器的权值为 0，0，1，0
4. HTML 标签选择器的权值为0，0，0， 1

标签选择器，标签名{}，作用于所有此标签。

类选择器， .class{}，在标签内定义class=”“，属图形结构。

ID选择器，#ID{}, 在标签内定义id=”“，有严格的一一对应关系。

子选择器， .span>li{}，作用于父元素span类下一层的li标签。

包含选择器，.span li{}，作用于父元素span下所有li标签。

通用选择器，*{}，匹配所有html的标签元素。

伪类选择符：它允许给html不存在的标签(标签的某种状态)设置样式，比如说我们给html中的一个标签元素的鼠标滑过的状态来设置字体颜色。

a:hover{color:red;}

分组选择符

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}

它相当于下面两行代码：

h1{color:red;}
span{color:red;}

继承、特殊性，层叠，重要性的区分。

继承
是指标签的样式可以由子代继承，但有些标签是不能继承的，eg：border。

CSS样式的继承性
样式默认下可以应用于其后代。
1.后代没有样式标注；
2.border边框样式不继承

特殊性 指用用权重来确定最后起作用的样式，id=100，class=10，标签=1，继承=0.1；

层叠 指当权重相同时，后面的样式覆盖前面的样式。

重要性 ！important的使用。

p{color:red !important;}

这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式

css排版

现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}

注意：第一种方法比第二种方法兼容性更好一些。段落排版–缩进中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：

p{text-indent:2em;}

em与px之间怎么换算？

　

　任意浏览器的默认字体高度16px（16像素）。
　所有未经调整的浏览器都符合:1em=16px。
　那么12px=0.75em,10px=0.625em。
　　
　　为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
　　
　　注：建议不要使用em作为中文站点的文字单位，会导致文字变形十分严重的。
在中文里，文字输入分为全角和半角，
(中文输入法里，按shift+空格 切换全角半角状态）
全角，段落中所有字符（包括文字和其它符号：逗号、顿号、句号等），
都是占用一个字的位置，这样排版的时候，上下文字能对齐；
半角，段落中所有除文字外的符号，只占用半个字的位置；
打字时，默认是半角，按空格最明显，只有前一个字的一半宽度；
切换全角后，空格刚好是一个字宽度（段落中最明显，上下对齐）
em 就是一个全角占位符；
2em 就是2个全角位置；

段落排版–中文字间距、字母间距

如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing

如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现

段落排版–对齐

原来图片居中，不能直接对img标签使用text-align:center;而是对该img标签所在的div或者其他块级元素使用才会达到这种效果。

对块状元素中的文本、图片设置居中，所以设置不能对文本或图片本身。例如：img{line-align：center;}是错误的。对象本身无法和自己比较位置。只有在更高一级的块区内才可以实现位置设置，所以要设置对象就是设置对象所在的块区而不是对对象本身。

块状元素、内联元素(又叫行内元素)和内联块状元素。

块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有：<img>、<input>

p标签不能包含其它块标签

块级元素、内嵌元素

1、块级元素一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1-h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul2、内嵌元素一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var 

块级元素

属性:display:block;

block:块级元素{
1，块级元素独占一行；
2，可以设置width和height，自动换行

默认宽度为一整行，除非单独设置宽度；
3，可以设置margin和padding属性。
}

内联(行内)元素

定义的是一段内容(文本)这一行内没占用完的空间其他内联元素可以共同使用
属性:display:inline;
没法设置宽高 一行可以有多个

大小由内容决定
内联元素都是定义行内小区域且不换行，但如果没有内容就没有意义，不占空间；
inline:内联元素{
1，不能设置width和height；
2，多个行内元素排成一行，直到一行排不下，才会换新一行；
3，只可以设置水平方向的边距，如：margin-left,margin-right,padding-left,padding-right.
}

内联块状元素(行内块级元素)

属性:display:inline-block;
可以设置宽高
一行能有多个
内联块状元素除了不换行，即使没有内容也会占空间。
inline-block{
简而言之就是让元素既可以在一行内显示，又可以设置宽高边距等。
}

元素分类–块级元素

什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

元素分类–内联元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

div{display:inline;}......<div>我要变成内联元素</div>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内元素之间会产生间隙bug问题的场景：

1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。
如下代码：

<div><a>1</a><a>2</a><span>33333</span><span>44444</span><em>555555</em></div>

解决方法：

1、写在一行，之间不要有空格之类的符号。

2、使用font-size:0
div{font-size:0;}
a,span,em{font-size:16px;}

元素分类–行内块级元素

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒子模型

一些块级标签，都具备盒子标签的特征

内边距：padding
边框：border
外边距：margin（盒子之间的距离
）

盒子模型的内容可以是文字，图片，和标签元素。
月饼盒与月饼之间的距离叫做内填充padding，
月饼盒与另外一个月饼盒之间的距离叫做外边距margin，
盒子的边框叫做border。
内填充，外边距，边框都有四个方向（top,bottom,left,right）。

实际高度=上下内填充的高度+上下边框的高度+内容的高度，实际宽度=左右内填充的宽度+左右边框的宽度+内容的宽度。

块级标签，比如<div><ul><ol><p><h><table>，都具有盒子模型的特征。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

css布局模型

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

流动模型

先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素

浮动模型

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

div{    width:200px;    height:200px;    border:2px red solid;    float:left;}

层模型

CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

层模型–绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{width:200px;height:200px;border:2px red solid;position:absolute;left:100px;top:50px;}<div id="div1"></div>

脱离文档流

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
　　而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

层模型–相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px，向右移动100px;

#div1{width:200px;height:200px;border:2px red solid;position:relative;left:100px;top:50px;}<div id="div1"></div>

层模型–固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。

以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{width:200px;height:200px;border:2px red solid;position:fixed;left:100px;top:50px;}<p>文本文本文本文本文本文本文本。</p>....

Relative与Absolute组合使用

组合使用的意思就是：
用两个组合，可以实现div相对父元素进行偏移。（因为如果只用absolute只能相对于浏览器偏移，如果只用relative只能相对于本身偏移，如果只用fixed只能相对于视图偏移）
扩展一下：
因为absolute这个属性值是受父元素是否有position值影响的。如果父元素没有position值，则以浏览器为基准偏移，如果父元素有position值（无论是relative/absolute/fixed哪一个），则以父元素为基准偏移。

CSS代码缩写

盒模型代码简写

盒子模型尺寸＝边框＋外边距＋内边距＋盒子中内容的尺寸定义顺序：上 右 下 左 （顺时针）定义三个值：1（上）2（左右）3（下）定义两个值：1（上下） 2（左右）

颜色值缩写

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

例子1：

p{color:#000000;}

可以缩写为：

p{color: #000;}

例子2：

p{color: #336699;}

可以缩写为：

p{color: #369;}

颜色值缩写,要么是6个字符要么是3个

CSS中颜色的表示方式有三种：

1：用英文单词直接描述，如：red,green,black等。2：用16进制表示，如：#000000,#FFFFFF等3：用缩写16进制表示，如：#000，#FFF等

字体缩写 网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:"宋体",sans-serif;}

这么多行的代码其实可以缩写为一句：

body{font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{font:12px/1.5em "宋体",sans-serif;}

只是有字号、行间距、中文字体、英文字体设置。

长度值

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

---

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

---

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:<p>以这个<span>例子</span>为例。</p>css:p{font-size:14px}span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

---

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

---

水平居中设置-定宽块状元素

当被设置元素为 块状元素 时用text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：<body><div>我是定宽块状元素，哈哈，我要水平居中显示。</div></body>css代码：<style>div{border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/width:200px;/*定宽*/margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>也可以写成：margin-left:auto;margin-right:auto;注意：元素的“上下 margin” 是可以随意设置的。

水平居中总结-不定宽块状元素方法（一） 在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

 1. 加入 table 标签 2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置 3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

方法一加入table标签

是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例如下：

html代码：<div><table><tbody><tr><td><ul><li>我是第一行文本</li><li>我是第二行文本</li><li>我是第三行文本</li></ul></td></tr></tbody></table></div>css代码：<style>table{border:1px solid;margin:0 auto;}</style>

哈哈，不定非得把要居中的不定宽块状元素放在table里面呢，

直接display:table; margin:0 auto;也是能实现的喔~~

为什么方法一选择table标签 ?

是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法…

---

水平居中总结-不定宽块状元素方法（二）

第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：

html代码：<body><div class="container">    <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul></div></body>css代码：<style>.container{    text-align:center;}/* margin:0;padding:0（消除文本与div边框之间的间隙）*/.container ul{    list-style:none;    margin:0;    padding:0;    display:inline;}/* margin-right:8px（设置li文本之间的间隔）*/.container li{    margin-right:8px;    display:inline;}</style>

水平居中总结-不定宽块状元素方法（三）

除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

我的理解是：先别看wrap,只看containner， 先给div设置float:left;让它水平在左边;left:50%;右移到中间（要知道这里的中间是指div的最左边线,此时是在水平最中间，而不是div中心部分在中间，在这给它做个标记叫 |）;再看ul(假设他里面的内容长度为
- -两条线这么长，还记得刚才我们做的标记 | 么？此时ul的内容是 |- -，在中心的右边),给ul设置left：-50%,指的是让它向左移动他长度的一半，然后后面他里面的内容，,也就是li , 就刚好是在水平中间了，既-|-；

代码如下：<body><div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></div></body>css代码：<style>.container{float:left;position:relative;left:50%}.container ul{list-style:none;margin:0;padding:0;position:relative;left:-50%;}.container li{float:left;display:inline;margin-right:8px;}</style>

垂直居中-父元素高度确定的单行文本

我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。

这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。

本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

如下代码：<div class="container">hi,imooc!</div>css代码：<style>.container{height:100px;line-height:100px;background:#999;}</style>

看了下边问答，发现有很多不当的地方。首先肯定的是教程中没有错误。这里的父元素指的是单行文本的容器。height为父元素的内容高度，line-height为行间距，不是行高。大家可以在例子中通过<br/>再加一行文字就看出来。行间距100px意味着单行文本的上边有50px，下边有50px，当有下一行的时候，当前行的下边50px和下一行的上边50px构成了两行的行间距100px。所以，这里设置父元素height和行间距相等，保证了当行文本垂直居中。