text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
作用在块级元素上，使元素内文本居中。
直接把整个text-align属性test一遍把~
text-align：属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。
语法：
值 描述
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
inherit 规定应该从父元素继承text-align属性
基本用法：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
font-family: "微软雅黑";
margin: 0 auto;
margin-top: 30px;
}
.box {
width: 600px;
border: solid 2px black;
text-align: right;
/*
受.box影响的两个元素
1. 由于.inherit中的文本排列方式继承自父元素,所以.box为right,则.inherit中的文本也为right方式排列
2. .box中的inline元素
*/
}
.left {
width: 200px;
height: 80px;
border: solid 2px red;
text-align: left;
}
.right {
width: 200px;
height: 80px;
border: solid 2px blue;
text-align: right;
}
.center {
width: 200px;
height: 80px;
border: solid 2px hotpink;
text-align: center;
}
.justify {
width: 200px;
height: 80px;
border: solid 2px green;
text-align: justify;
}
.inherit {
width: 200px;
height: 80px;
margin-bottom: 30px;
border: solid 2px darkmagenta;
text-align: inherit;
}
.div-box , .div-spa {
border: solid 1px red;
}
.div-box {
text-align: center;
}
.div-spa {
text-align: center; /*对于行内元素不起作用*/
}
</style>
</head>
<body>
<div class="box">
<div class="left">JavaScript it's best language in the world. <strong>Left</strong></div>
<div class="right">JavaScript it's best language in the world. <strong>Right</strong></div>
<div class="center">JavaScript it's best language in the world. <strong>Center</strong></div>
<div class="justify">JavaScript it's best language in the world. <strong>Justify</strong></div>
<div class="inherit">JavaScript it's best language in the world. <strong>Inherit</strong></div>
<div class="div-div">
<div class="div-box">JavaScript it's best language in the world. <strong>block</strong></div><br />
<span class="div-spa"><span class="inline">JavaScript it's best language in the world. <strong>inline</strong></span>
</div>
</div>
</body>
</html>
如图
关于text-align:justify;的用法
text-align:justify的使用 - 泛舟青烟 - 博客园
d_hongran：CSS3总结之： text-align: justify
justify 可以使文本的两端都对齐在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。但是会造成文字间距增大，发现为了两端对齐，有些文字的间距就被拉开了（第二行的英文）。有时候间隔隔得太大会造成阅读困难，所以如果有需要的情况下用letter-spacing收缩字符间距就可以了。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
font-family: "微软雅黑"
}
#p3 {
letter-spacing: -1px;
}
</style>
</head>
<body>
<p style="width:400px;text-align:left;;margin:20px auto;background-color: orange;">
<strong style="color:#000;margin-bottom:10px;">text-align: left:</strong></br>
</br>
Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie 在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
</br>
</br>
</p>
<p style="width: 400px;text-align: justify;margin:20px auto;background-color: deepskyblue;">
<strong style="color:#000;margin-bottom:10px;">text-align: justify:</strong></br>
</br>
Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie 在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
</br>
</br>
</p>
<p style="width: 400px;text-align: justify;margin:20px auto;background-color: darkgray; "id="p3">
<strong style="color:#000;margin-bottom:10px;">text-align: justify:</strong></br>
</br>
Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie 在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
</br>
</br>
</p>
</body>
</html>
text-align:justify
关于vertical-align属性
vertical-align 属性设置元素的垂直对齐方式。
说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
大漠：深入了解CSS字体度量，行高和vertical-align
张鑫旭：我对CSS vertical-align的一些理解与认识（一）
css行高line-height的一些深入理解及应用
垂直对齐：vertical-align属性
IE 盒模型和W3C盒模型有什么区别?
IE盒模型的width包括content、padding、border。
width = content（width） + （padding-left + padding-right）+ （border-left + border-right）
IE.png
W3C盒模型的width只将content盒子里的区域计算进去。
width = content（width）
W3C.png
高度同理。
解决办法：
在代码顶部加如下的 doctype 声明，
<!doctype html>
使页面以W3C盒子模型渲染。
W3C盒子模型和IE盒子模型&box-sizing属性 - GumpYan - 博客园
标准W3C盒子模型和IE盒子模型 - 晨光中的老树 - 博客园
*{ box-sizing: border-box;}的作用是什么？
CSS3 Box-sizing
将文档下的盒模型标准按照怪异模式的标准来表示。
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )e
line-height: 2和line-height: 200%有什么区别?
CSS：line-height
- line-height：2，先将2继承至所有子元素，然后子元素在根据自己的font-size去乘以2计算自己行高
- line-height：200%，先由父元素根据自己字体大小乘以200%计算行高，之后所有子元素的行高都将应用这个计算后的数值。
CSS:line-height:150%与line-height:1.5的真正区别是什么？
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block，顾名思义，结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: inline-block;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>关于</li>
<li>热点</li>
<li>联系我们</li>
</ul>
</body>
</html>
代码所示
可以看到li元素可以横向排列，并且可以设置width属性。
但是我们会发现，他们之间产生了缝隙，这个缝隙是什么呢？
是空白符，在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。
<li>首页</li><li>关于</li><li>热点</li><li>联系我们</li>
代码所示
但是这样也有问题，不美观，且语义性差，有其他的法子吗？
首先我们知道，空白符归根结底是字符，那么我们可以用font-size属性来控制它的大小。
li {
display: inline-block;
border: 1px solid red;
font-size: 16px;
}
ul {
font-size: 0px;
}
或者用一个class包裹住ul，然后对class设置font-size也可以。
另一个问题就是对齐：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.span1 {
border: solid 1px red;
display: inline-block;
padding: 150px 50px;
}
.span2 {
border: solid 1px red;
display: inline-block;
padding: 50px 50px;
}
</style>
</head>
<body>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>
这是就需要设置vertical-align
引用：详解CSS display:inline-block的应用
CSS sprite 是什么?
也叫CSS精灵图，雪碧图。被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。
让一个元素"看不见"有几种方式？有什么区别?
CSS中与元素显示隐藏相关的属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.transparent {
width: 500px;
height: 50px;
background-color: orange;
}
.visibility {
width: 500px;
height: 50px;
background-color: green;
}
.display {
width: 500px;
height: 50px;
background-color: deepskyblue;
}
.opacity {
width: 500px;
height: 50px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="transparent">Transparent</div>
<div class="visibility">Visibility</div>
<div class="display">Display</div>
<div class="opacity">Opacity</div>
</body>
</html>
分别设置各相应的属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.transparent {
width: 500px;
height: 50px;
background-color: orange;
background: transparent;
}
.visibility {
width: 500px;
height: 50px;
background-color: green;
visibility: hidden;
}
.display {
width: 500px;
height: 50px;
background-color: deepskyblue;
display: none;
}
.opacity {
width: 500px;
height: 50px;
background-color: deeppink;
opacity: 0;
}
</style>
</head>
<body>
<div class="transparent">Transparent</div>
<div class="visibility">Visibility</div>
<div class="display">Display</div>
<div class="opacity">Opacity</div>
</body>
</html>
设置后的代码所示
我们用Google开发者工具看看。
显而易见的是，transparent属性用于背景图透明度的设置，只针对背景图（包括背景图片）奇效，但是我还是写上来了加强记忆、区分。
微信截图_20171204010757.png
微信截图_20171204010804.png
-
对于
display：none，这会使元素没有物理空间的占用，不被浏览器绘制。所以goolge开发者工具也没找到它。 -
visibility:hidden和opacity:0即使完全隐藏，但是依旧占用物理空间，只是不被你看到而已，它依旧会被浏览器绘制。
网友评论