css 布局

1.实现左右布局

简单来说就是让一些子元素float：left，另外一些float：right，然后给它们的父级元素加class=clearfix

clearfix::after{
content:"";
display:block;
clear:both;
}

2.实现左中右布局

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7                 *{
 8                     margin: 0;
 9                     padding: 0;
10                 }
11             #left{
12                 width: 200px;
13                 height: 200px;
14                 float: left;
15                 background-color: red;
16             }
17             #right{
18                 width: 150px;
19                 height: 200px;
20                 float: right;
21                 background-color: mistyrose;
22             }
23             #middle{
24                 height: 200px;
25                 margin: 0 150px 0 200px;
26                 background-color: saddlebrown;            
27                 word-break: break-word;    
28             }
29         </style>
30     </head>
31     <body>
32         <div id="content">
33             <div id="left">我是左侧内容我是左侧内容我是左侧内容我是左侧内容我是左侧内容</div>
34             <div id="right">我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容</div>
35             <div id="middle">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
36         </div>
37     </body>
38 </html>

运用float,左右浮动,中间内容不浮动
效果图：

986547-20160816160408015-971919522.png

3.水平居中

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
通过给父元素设置float：left，然后给父元素设置 position:relative和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="a">
  <div class="b">123456123</div>
</div>
</body>
</html>

css

.a{
  border:2px solid red;
  float:left;
  position:relative;
  left:50%
  
}
.b{
  position:relative;
  left:-50%;
  border:2px solid blue;
}

QQ截图20190628164348.png

或者是第二种方法：改变块级元素的 display 为 inline 类型设置为行内元素，然后使用 text-align:center 来实现居中效果。

4.垂直居中

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块

多行文本把它放进表格里可以实现垂直居中，使用插入 [table] (包括tbody、tr、td)标签

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

5.隐形display属性改变

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

position : absolute
float : left 或float:right

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

最后编辑于：2019.06.28 17:04:03