HTML&CSS基础2—

深入了解行高属性
盒模型居中

继续前篇的HTML&CSS1来记录总结百度前端技术学院中的知识点。

深入了解行高属性

参考：深入了解css的行高Line Height属性

有5种方式来定义line-height：

1.line-height可以被定义为：body{line-height:normal;}
2.line-height可以被定义为：body{line-height:inherit;}
3.line-height可以使用一个百分比的值body{line-height:120%;}
4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}
5.line-height也可以被定义为纯数字， body{line-height:1.2}

缩写line-height：

那5种line-height写法，可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开，如：<font-size>/<line-height>

实例：body{font:100%/normal arial;} , body{font:100%/120% arial;} ,body{font:100%/1.2 arial;} ,body{font:100%/25px arial;}

一般来说，设置行高为值：纯数字是最理想的方式，因为其会随着对应的 font-size 而缩放。

盒模型居中

水平居中问题

inline和inline-*元素的水平方向居中

text-align: center;

这个方法对inline、inline-block、inline-table、inline-flex元素都有效；

定宽块级元素的水平居中

用两种方法来实现一个背景色为红色、宽度为960px的<DIV>在浏览器中水平居中

(1)margin：0 auto；
(2)绝对定位position：absolute； width：960px； left：50%； margin-left：-480px；

方法一：

使用 margin：0 auto;

html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="task0001-2.css">
    </head>
    <body>
        <div class="center">aaa</div>
    </body>
</html>

css文件

.center {
    width: 960px;
    margin: 0 auto;
    background-color: red;
}

方法二：

绝对定位，左边距离 body 50%，margin-left: -480px

.center {
    width: 960px;
    background-color: red;
    position: absolute;
    left: 50%;
    margin-left: -480px;
}

不定宽块级元素水平居中

我们经常会遇到不定宽度块级元素的使用，如分页导航，因为分页的数目不定，所以不能用宽度限制住。此时对元素进行水平居中主要有以下几种方式：

(1)修改子块级元素的display：inline-block，父级元素 text-align：center；（不需要设定宽度，多个子div是根据内容撑开）
(2)父级div设置 display：flex-box；justify-content：center；（弹性布局，是让子div自动适应，高度都一样；不设定子div宽度时，宽度自适应，多个div）
(3)浮动实现水平居中；通过给父元素设置float，然后父元素设置position：relative和left：50%，子元素设置position：relative和left：-50%来实现居中；优点是可以保留元素的display：block形式，缺点是设置position：relative有一定副作用；
(4)绝对定位实现水平居中；

方法一：

改变块级元素的 dispaly 为 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;
  }
  .container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
  }
  .container li{
    margin-right:8px;
    display:inline;
  }
</style>

这种方法的缺点是将块级元素的display设置为inline，于是少了很多功能，比如盒子模型

方法二：

使用Flexbox来实现：

ul{
	list-style: none;
	display: -webkit-flex;
	-webkit-justify-content: center;
   }
li{
  	margin-right: 8px;
  }

方法三：

浮动实现水平居中：

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

方法四：

绝对定位实现水平居中：

.container{
			position: relative;
		}
ul{
	position: absolute;
	left: 50%;
}
li{
	list-style: none;
	float: left;
	position: relative;
	right: 50%;
}

垂直居中问题

定父高单行文本垂直居中

父元素高度确定的单行文本垂直居中；给父元素设置line-height，值和父元素的高度相同

不定父高块级元素垂直居中

父元素高度不确定的文本、图片、块级元素的垂直居中；给父容器设置相同上下边距

定父高块级元素垂直居中

CSS中vertical-align：middle只有当父元素为td或者th时属性才会生效，如div、p等其他块级元素默认情况下是不支持该属性；

(1)使用table标签，因为td标签默认情况下隐式设置了vertical：middle；很好实现了垂直居中，但是添加了无语义标签，增加了嵌套深度；
(2)对于IE8和FF，给父元素设置display：table；子元素设置display：table-cell； vertical-align： middle；
(3)flexbox；父元素设置display：flex；flex-direction：column； justify-content：center；

对于居中的补充

参考自学习CSS布局。

像下面这样写css代码，使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。

有效的避免了如下问题：
当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。

#main {
    max-width: 600px;
    margin: 0 auto;
}