本文介绍了CSS的基础知识，包括CSS的概念、语法格式、选择器、盒模型等内容，并提供了多个实例帮助理解。
接着上一篇文章系统学习前端之HTML基础，这篇文章对
CSS基础部分进行总结
看完本文，做个练习来及时巩固一下。
css基础练习
文章目录：
css是什么css基础概念css引入的三种方式css选择器css继承、特殊性和层叠css文字排版css元素分类css盒模型css布局模型css设置小技巧
css是什么？
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。- 使用
CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
语法格式
- css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
- 选择符：又称选择器，指明网页中要应用样式规则的元素.
- 声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;} - 注意：
- 1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
- 2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{
font-size:12px;
color:red;
}代码注释
- 就像在
Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用 )。就像下面代码：
CSS基础
- 类和ID选择器的区别
- 相同点：可以应用于任何元素
- 不同点：
- 1、ID选择器只能在文档中使用一次。
- 2、可以使用类选择器词列表方法为一个元素同时设置多个样式。
- 文字排版–字体
body{font-family:"宋体";}
- 文字排版–字号、颜色
body{font-size:12px;color:#666}
- 文字排版–粗体
p span{font-weight:bold;}
- 文字排版–斜体
p a{font-style:italic;}
- 文字排版–下划线
span{text-decoration:underline;}
- 文字排版–删除线
.oldPrice{text-decoration:line-through;}
- 段落排版–缩进
p{text-indent:2em;}
- 段落排版–行间距（行高）
p{line-height:2em;}
- 段落排版–中文字间距、字母间距
- 中文字间隔、字母间隔设置：
h1{
letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>- 段落排版-
- 单词间距设置：
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>- 段落排版–对齐,居右，居左
h1{
text-align:center;
/*fight,left*/
}
<h1>了不起的盖茨比</h1>引入CSS的三种方式
内联式
- css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
<p style="color:red">这里文字是红色。</p>
- 注意：css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
<p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式
- 把
css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把<span>标签中的文字设置为红色：
<style type="text/css">
span{
color:red;
}
</style>- 注意：嵌入式
css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
外部式（外联式）
- 把
css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />- 注意：
- 1、
css样式文件名称以有意义的英文字母命名，如main.css。 - 2、
rel="stylesheet" type="text/css"是固定写法不可修改。 - 3、
<link>标签位置一般写在<head>标签之内。
- 1、
三种方式的优先级
- 记住他们的优先级：内联式 > 嵌入式 > 外部式
- 注意：
- 嵌入式>外部式有一个前提：嵌入式
css样式的位置一定在外部式的后面
- 嵌入式>外部式有一个前提：嵌入式
CSS选择器
- 什么是选择器？
- 每一条css样式声明（定义）由两部分组成，形式如下：
选择器{
样式;
}- 在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
标签选择器
- 标签选择器其实就是
html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：
p{font-size:12px;line-height:1.6em;}类选择器
- 类选择器在
css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。 - 语法：
.类选器名称{css样式代码;}ID选择器
- 在很多方面，
ID选择器都类似于类选择符，但也有一些重要的区别：
- 1、为标签设置
id="ID名称"，而不是class="类名称"。 - 2、
ID选择符的前面是井号（#）号，而不是英文圆点（.）。
- 1、为标签设置
ID选择器与类选择器区别
- 相同点：可以应用于任何元素
- 不同点：
- 1、
ID选择器只能在文档中使用一次。 - 2、可以使用类选择器词列表方法为一个元素同时设置多个样式。
- 1、
子选择器
- 即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
.food>li{border:1px solid red;}包含(后代)选择器
- 即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}- 注意：与子选择器的区别，子选择器（
child selector）仅是指它的直接后代，即作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
通用选择器
- 通用选择器是功能最强大的选择器，它使用一个（
*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
伪类选择符
- 为什么叫做伪类选择符，它允许给
html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}- 注意：
CSS3中还有好多伪类选择符，以后总结到CSS3时再详细描述
分组选择符
- 当你想为
html中多个标签元素设置同一个样式时，可以使用分组选择符“，“，如下代码为h1、span标签同时设置字体颜色为红色：
h1,span{color:red;} - 它相当于下面两行代码：
h1{color:red;}
span{color:red;}css继承、特殊性和层叠
继承
- 继承是一种规则，它允许样式不仅应用于某个特定
html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>特殊性
- 如果为一个元素设置了不同的
CSS样式，那么元素会启用哪一个样式呢？我们来看一下面的代码：
p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，
- 这种情况下浏览器是根据权值来判断使用哪种
css样式的权值高的就使用哪种css样式。
下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/- 注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
层叠
- 这是针对特殊情况下的解决办法，当一个元素有多个
css样式，且权值相同时会按照样式出现的先后顺序来决定，处于最后边的css样式会被启用。 - ##### 重要性：特殊情况下用
!important来指定样式的最高权值
css文字排版
- ###### 字体
body{font-family:"宋体"}可选“微软雅黑”或”Microsoft Yahe“(兼容性更好一些) - ###### 字号、颜色
body{font-size:12px;color:#666;} - ###### 粗体
p{font-weight:bold;} - ###### 斜体
p{font-style:italic;} - ###### 下划线
p{font-derection:underline;} - ###### 删除线
.span{text-decoration:line-through;} - ###### 缩进
p{text-indent:2em;} - ###### 行间距（行高）
p{line-height:1.5em;} - ###### 中文字、字母间距
- 中文字间距
p{letter-spacing:50px;} - 字母间距
p{word-spacing:50px;}
- 中文字间距
对齐
div{text-align:center;}可取：left/center/right
css元素分类
在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
- 常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>- 常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>- 常用的内联块状元素有：
<img>、<input> 元素分类–块级元素
- 什么是块级元素？
- 在
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、元素的宽度就是它包含的文字或图片的宽度，不可改变。
元素分类–内联块状元素
- 内联块状元素（
inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。 - (css2.1新增)，
img、input标签就是这种内联块状标签。 inline-block元素特点：
- 1、和其他元素都在一行上；
- 2、元素的高度、宽度、行高以及顶和底边距都可设置。
CSS盒模型
盒模型–边框（一）
- 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
- 如下面代码为
div来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：div{border:2px solid red;} - 上面是
border代码的缩写形式，可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}注意：
- 1、
border-style（边框样式）常见样式有：
dashed（虚线）|dotted（点线）|solid（实线）。
- 2、
border-color（边框颜色）中的颜色可设置为十六进制颜色，
- 如：
border-color:#888;//前面的井号不要忘掉。
- 如：
- 3、
border-width（边框宽度）中的宽度也可以设置为：
thin|medium|thick（但不是很常用），最常还是用象素（px）。
盒模型–边框（二）
- 如果有想为
p标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
- 同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;盒模型–宽度和高度
- 盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，
css内定义的宽（width）和高（height），指的是填充以里的内容范围。 - 因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
- 元素的高度也是同理。
比如：
css代码：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}html代码：
<body>
<div>文本内容</div>
</body>- 元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：
盒模型–填充
- 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}
- 顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}- 如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
- 如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}
盒模型–边界
- 元素与其它元素之间的距离可以使用边界（
margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}- 也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}- 如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}- 如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}总结一下：padding和margin的区别，最主要的不同是padding在边框里，margin在边框外。
css布局模型
- 清楚了
CSS盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是CSS最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的CSS布局样式或CSS布局模板。如果说布局模型是本，那么CSS布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
- 在网页中，元素有三种布局模型：
- 1、流动模型（
Flow） - 2、浮动模型 (
Float) - 3、层模型（
Layer）
- 1、流动模型（
流动模型(flow)
- 先来说一说流动模型，流动（
Flow）是默认的网页布局模式。也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。 - 流动布局模型具有2个比较典型的特征：
- 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
- 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
浮动模型(float)
- 块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。
- 任何元素在默认情况下是不能浮动的，但可以用
CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>层模型
- 什么是层布局模型？
- 层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。
- 但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下
html中的层布局。 CSS定义了一组定位（positioning）属性来支持层布局模型。
- 层模型有三种形式：
- 1、绝对定位(
position: absolute) - 2、相对定位(
position: relative) - 3、固定定位(
position: fixed)
- 1、绝对定位(
层模型–绝对定位
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>
层模型–相对定位
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组合使用
- 1、参照定位的元素必须是相对定位元素的前辈元素：
<style type="text/css">
div{border:2px red solid;}
#box1{
width:200px;
height:200px;
position:relative;
}
#box2{
width:99%;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<h1>下面是任务部分</h1>
<div id="box1">
//box1是box2的父元素
<div id="box2">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
CSS代码缩写，占用更少带宽
CSS中的字体缩写
- 网页中的字体
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;
}- 只是有字号、行间距、中文字体、英文字体设置。
css设置小技巧
水平居中
水平居中设置-行内元素
- 这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？
- 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置
text-align:center来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 ) - 如下代码：
<style>
div{
border:1px solid red;
margin:20px;
text-align:center;
}
.txtCenter{
text-align:center;
}
</style>
</head>
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
<div class="imgCenter"></div>
</body>水平居中设置-定宽块状元素
- 当被设置元素为 块状元素 时用
text-align：center就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。 - 先来看定宽块状元素。(定宽块状元素：块状元素的宽度
width为固定值。) - 满足定宽和块状两个条件的元素是可以通过设置“左右
margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
<style>
div{
border:1px solid red;
width:200px;
margin:20px auto;
}
</style>
<body>
<div>我是定宽块状元素，我要水平居中显示。</div>
</body>水平居中总结-不定宽块状元素方法（一）
- 在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度
width不固定。) - 不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
- 加入
table标签 - 设置
display: inline方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置 - 设置
position:relative和left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
- 加入
- 加入
table标签
- 是利用
table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。 - 第一步：为需要设置的居中的元素外面加入一个
table标签 ( 包括<tbody>、<tr>、<td>)。 - 第二步：为这个
table设置“左右margin居中”（这个和定宽块状元素的方法一样）。
- 是利用
举例如下：
<style>
table{
margin:0 auto;
}
/*下面是任务区代码*/
.wrap{
background:#ccc;
display:table;
margin:0 auto;
}
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
<div class="wrap">
设置我所在的div容器水平居中
</div>
</body>第二种方法：
- 改变块级元素的
display为inline类型（设置为 行内元素 显示），然后使用text-align:center来实现居中效果。 - 如下例子：
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>
</head>
<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>方法三：
- 通过给父元素设置
float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left: -50%来实现水平居中。
<style>
.wrap{
float:left;
position:relative;
left:50%;
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>垂直居中
垂直居中-父元素高度确定的单行文本
- 为了用户体验性好，往往需要给元素设置垂直居中
- 分两种情况：
- 父元素高度确定的单行文本
- 父元素高度确定的多行文本
父元素确定的单行文本
- 父元素高度确定的单行文本的垂直居中的方法是通过设置父元素的
height和line-height高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。 line-height与font-size的计算值之差，在CSS中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。- 这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<style>
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
</style>
</head>
<body>
<div class="wrap">
<h2>hi,imooc!</h2>
</div>
</body>父元素高度确定的多行文本（方法一）
- 父元素高度确定的多行文本、图片等的垂直居中的方法有两种：
- 方法一：使用插入
table(包括tbody、tr、td)标签，同时设置vertical-align：middle。
- 方法一：使用插入
css中有一个用于垂直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
下面看一下例子：
<style>
.cc{height:300px;background:#ccc;}
</style>
</head>
<body>
<table><tbody><tr><td class="cc">
<div>
</div>
</td></tr></tbody></table>
</body>父元素高度确定的多行文本（方法二）
- 但这种方法兼容性比较差，只是提供大家学习参考。
- 在
chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性，但注意IE6、7并不支持这个样式, 兼容性比较差。 - 这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容
IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
<style>
#cc{
display:table-cell;
height:300px;
background:#ccc;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="cc">
</div>
</body>隐性改变display类型
- 当为元素（不论之前是什么类型元素，
display:none除外）设置以下 2 个句之一： -
position : absolute
-
float : left或float:right
- 也就是说，只要
html代码中出现以上两句之一，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
</head>
<body>
<div class="container">
<a href="#" title="">hello my name is money，what is your name?</a>
</div>
</body>
扫一扫
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
