布局的技巧

元素的居中对齐

行内元素、行内块元素可以被父元素当作文本处理，文本相关的属性可以生效。比如： text-align、vertical-align、text-indent
如何让子元素在父元素中水平居中：
- 如果子元素是块元素可以给子元素加上一个 margin: 0 auto;
- 如果子元素是行内元素或者行内块元素, 可以使用 text-align:center;
如何让子元素在父元素中垂直居中：
- 若子元素为块元素，可以设置一个margin-top, 值为 (父元素的height-自己的height-自己的border*2)➗2
- 若子元素是行内或者行内块元素，可以设置子元素行高等于父元素的height(或者直接让父元素的行高等于自己的高),同时在子元素使用vertical-align:middle;,想要绝对居中可以让父元素的font-size:0;

行内元素和行内块元素之间的空白

产生原因： 行内元素和行内块元素之间的换行会被浏览器解析为空格，存在一定程度的空白

解决方案：

给父元素加一个font-size:0;
删掉换行。

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>
        .container {
            height: 300px;
            width: 500px;
            background: skyblue;
        }
        div span:nth-child(2n+1){
            background: orange;
            font-size: 20px;
        }
        div span:nth-child(2n){
            background: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <span class="span1">Lorem.</span>
    <span class="span2">Rock</span>
    <span>study</span>
    <span>test1</span>
    <span>span</span>
    <span>ha</span>
</div>
</body>
</html>

行内块元素的有幽灵空白问题

产生原因： 行内块元素的默认是采用基线对齐的方式进行对齐的,基线就是X的最下方，但是像g这种字体会超出X最下方，所以基线对齐默认会为下方留出一定的空白。

常见的行内块元素： img input textarea select button th td iframe

解决方案：

不要采用基线对齐的方式。选中行内块元素，改变对齐方式。

/*也可以写 top middle 就是不能写baseline*/
img{
   vertical-align: bottom; 
}

把行内块元素改为块元素。

img{
   display: block;
}

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>
        .container{
            background: #ff4a7b;
            font-size: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <img src="../../images/yellow-bg.png" alt="yellow-bg">
</div>
</body>
</html>

十四、CSS布局技巧

布局的技巧

元素的居中对齐

行内元素和行内块元素之间的空白

行内块元素的有幽灵空白问题