学习JavaScript之css详解

作者: 付凯强 | 来源:发表于2018-03-25 17:37 被阅读0次

1. CSS简介

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
示例代码：

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
<style type="text/css">
p{
   font-size:20px;/*设置文字字号*/
   color:red;/*设置文字颜色*/
   font-weight:bold;/*设置字体加粗*/
}
</style>
</head>
<body>
<p>慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS样式的优势</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

2. CSS代码语法

CSS样式由选择符和声明组成，而声明又由属性和值组成。

p{
   font-size:12px;
   color:red;
}

3. CSS注释代码

<style type="text/css">
p{
   font-size:12px;/*设置文字字号为12px*/
   color:red; /*设置文字颜色为红色*/
}
</style>

4. 内联式CSS样式

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式：

<span style="color:blue">超酷的互联网</span>

<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
    color:blue;
}
</style>
</head>
<body>
    <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

外部式

<link href="base.css" rel="stylesheet" type="text/css" />

注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p>
</body>
</html>

span{
   color:red;
   font-size:20px;
}

5. CSS样式优先级

内联式 > 嵌入式 > 外部式
注意：

嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。

总之：就近原则（离被设置元素越近优先级别越高）

6. 选择器

body{
    font-size:12px;
    color:red;  
}
在{}之前的部分就是“选择器",比如右侧代码编辑器中第7行代码中的“body”就是选择器.

7. 标签选择器

<h1>勇气</h1>

去掉默认粗体：
<style type="text/css">
h1{
    font-weight:normal;
    color:red;
}
</style>

8. 类选择器

.stress{
    color:red;
}

<span class="stress">勇气</span>

1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文）

1. <span>胆小如鼠</span>
2. <span class="stress">胆小如鼠</span>
3. .stress{color:red;}/*类前面要加入一个英文圆点*/

1. 
<span class="setGreen">公开课</span>
2. 
<style type="text/css">
.stress{
    color:red;
}
.setGreen{
    color:green;
}
</style>

9. ID选择器

1. 为标签设置id = “ID名称”，而不是class=“类名称”。
2. ID选择符的前面是“#”号，而不是英文圆点"."

<span id="stress">胆小如鼠</span>
#stress{
    color:red;
}

10. 类和ID选择器的关系

相同点：

可以应用于任何元素

不同点：

1. ID选择器只能在文档中使用一次，而类选择器可以使用多次。
2. 类选择器可以同时给一个元素设多个样式，而ID选择器不可以。

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

子选择器

1. 大于符号(>),用于选择指定标签元素的第一代子元素.
2. 这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

.food>li{border:1px solid red;}

包含（后代）选择器

1. 加入空格,用于选择指定标签元素下的后辈元素.
2. 代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色.

.first span{color:red;}

 <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

后含（后代）选择器与自选择器的区别

1. 子选择器（child selector）仅是指它的直接后代.
2. 后代选择器是作用于所有子后代元素
3. 后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择

>  作用于元素的第一代后代，空格作用于元素的所有后代

通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色

* {color:red;}
* {font-size:20px;}

伪类选择器

它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{
    color:red;
    font-size:20px;
}
<a href="http://www.imooc.com">胆小如鼠</a>

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红

关于伪类选择器

关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

分组选择符

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

下边代码编辑器中的第一段全部文字颜色设置为绿色同时把第二段文字中的“简单”文字颜色设置为绿色

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
h1,span{color:red;}
.first,#second span{color:green;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

继承

继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p{color:red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

有一些css样式是不具有继承性的.

p{border:1px solid red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的

19. 特殊性（权值规则）

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
继承的权值最低，可理解为0.1

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*/

20. 层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

21. 重要性

有些特殊的情况需要为某些样式设置具有最高权值。这时候我们可以使用!important来解决。

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

p 段落中的文本会显示的red红色

!important要写在分号的前面

22. 特别注意

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

23. CSS格式化排版

字体

微软雅黑：且兼容性特别好
body{font-family:"Microsoft Yahei";}

字号颜色

.stress{
    font-size:20px;
    color:red;
}

<span class="stress">胆小如鼠</span>

粗体

a{font-weight:bold;}
<a href="http://www.imooc.com">批评</a>

斜体

p a{font-style:italic;}

下划线

p a{text-decoration:underline;}

删除线

.oldPrice{text-decoration:line-through;}

缩进

p{text-indent:2em;}

行间距

p{line-height:1.5em;}

中文字间距、字母间距

h1{letter-spacing:20px;}

单词间距

h1{word-spacing:50px;}

对齐

居中:text-align:center;
居左:text-align:left;
居右:text-align:right;

24. 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>

25. 内敛元素变块状元素

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

每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

a{display:block;}

26. 块状元素变内联元素

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

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

特点：

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

27. 其他元素变内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
元素特点：

和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。

练习：

在右边的代码编辑器中大家可以看到我们为 a 元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。

display:inline-block;

a{
    display:inline-block;
    width:20px;/*在默认情况下宽度不起作用*/
    height:20px;/*在默认情况下高度不起作用*/
    background:pink;/*设置背景颜色为粉色*/
    text-align:center; /*设置文本居中显示*/
}

<a>1</a>

28. 盒模型-边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)

div{
    border:2px  solid  red;
}

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

border-style（边框样式）常见样式有:

dashed（虚线）| dotted（点线）| solid（实线）

border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

29. 盒模型-边框（二）

css 样式中允许只为一个方向的边框设置样式。

div{border-bottom:1px solid red;}

30. 盒模型-宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px.png
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

30. 盒模型-填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

div{padding:10px;}

div{padding:10px 20px;}

31. 盒模型-边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

div{ margin:10px;}

div{ margin:10px 20px;}

padding和margin的区别，padding在边框里，margin在边框外.

32. CSS布局模型

布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上。
CSS 布局模型是布局模型的外在表现形式。
在网页中，元素有三种布局模型：

流动模型（Flow）
浮动模型 (Float)
层模型（Layer）

33. 流动模型

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

块状元素都会以行的形式占据位置。

三个块状元素标签(div，h1，p)宽度显示为100%

内联元素都会在所处的包含元素内从左到右水平分布显示。

内联元素标签a、span、em、strong都是内联元素

<a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
<strong>强调</strong>

34. 浮动模型

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示,设置元素浮动就可以实现.

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

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

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

35. 层模型

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样。
CSS定义了一组定位（positioning）属性来支持层布局模型。
形式：

绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)

36. 绝对定位（相对于父标签或浏览器）

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

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

37. 相对定位（相对于以前位置）

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

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

<body>
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>

以前的位置仍保留.png

38. 固定定位

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

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

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

实现浏览器视图右下角定位div层：
position:fixed;
bottom:0;
right:0;

39. Relative与Absolute组合使用

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位后，还可以相对于其它元素进行定位。
参照定位的元素必须是相对定位元素的前辈元素：

box1是box2的父元素
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了:

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

<div id="box3">
    <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>

#box3{
    width:200px;
    height:200px;
    position:relative;       
}
#box4{
    width:99%;
    position:absolute;  
    top:155px;
    
}

40. 盒模型代码简写

盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左：

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

如果left和right的值相同,可缩写为：

margin:10px 20px 30px;

41. 颜色值缩写

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

p{color:#000000;}
p{color: #000;}
p{color: #336699;}
p{color: #369;}

42. 字体缩写

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;
}

注意：

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

43. 颜色值

英文命令颜色：

p{color:red;}

RGB颜色:

p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}

十六进制颜色:

每一项的值由 0-255 变成了十六进制 00-ff
p{color:#00ffff;}

44. 长度值

像素：
像素指的是显示器上的小点。
em：

给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px

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

当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础:

<p>以这个<span>例子</span>为例。</p>
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）

百分比：

p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）

45. CSS样式设置小技巧

水平居中-行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

<style>
  .txtCenter{
    text-align:center;
  }
</style>

水平居中-定宽块状元素

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/    不可缺少
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
margin-left:auto;
margin-right:auto;

水平居中-不定宽块状元素方法（一）
比如网页上的分页导航。
三种居中方法：

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

table：

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

1. 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
2. 第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

display:inline
改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果

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

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

它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值

给父元素设置[ float]，然后给父元素设置 [position:relative]和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中:

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

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

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

好多报纸的文章标题在左右一侧时，常常会设置为垂直居中。
分为父元素高度确定的单行文本，以及父元素高度确定的多行文本。

单行：
<div class="container">
    hi,imooc!
</div>
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

多行：
1. 使用插入 [table] (包括tbody、tr、td)标签，同时设置 vertical-align：middle
。
2. css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

table td{height:500px;background:#ccc}
td 标签默认情况下就默认设置了 vertical-align 为 middle

46. 隐形改变display类型

只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（[块状元素]的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素：

 a 标签是 [行内元素]，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>

<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

[position : absolute]或者float:left

47.后续

如果大家喜欢这篇文章，欢迎点赞；如果想看更多移动端后端Python方面的技术，欢迎关注！

学习JavaScript之css详解

1. CSS简介

2. CSS代码语法

3. CSS注释代码

4. 内联式CSS样式

5. CSS样式优先级

6. 选择器

7. 标签选择器

8. 类选择器

9. ID选择器

10. 类和ID选择器的关系

19. 特殊性（权值规则）

20. 层叠

21. 重要性

22. 特别注意

23. CSS格式化排版

24. CSS盒模型

25. 内敛元素变块状元素

26. 块状元素变内联元素

27. 其他元素变内联块状元素

28. 盒模型-边框（一）

29. 盒模型-边框（二）

30. 盒模型-宽度和高度

30. 盒模型-填充

31. 盒模型-边界

32. CSS布局模型

33. 流动模型

34. 浮动模型

35. 层模型

36. 绝对定位（相对于父标签或浏览器）

37. 相对定位（相对于以前位置）

38. 固定定位

39. Relative与Absolute组合使用

40. 盒模型代码简写

41. 颜色值缩写

42. 字体缩写

43. 颜色值

44. 长度值

45. CSS样式设置小技巧

46. 隐形改变display类型

47.后续

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程