接着上一篇文章系统学习前端之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>