巩固前端08--css布局

CSS布局

display属性

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是block或inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素：header 、 footer 、 section等等。

inline

span 是一个标准的行内元素。一个行内元素可以在段落中 < span> 像这样 </ span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

none

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如script。display:none通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

其他 display 值

还有很多的更有意思的 display 值，例如list-item和table
就像之前讨论过的，每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过我们可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

margin：auto

main {
  width: 600px;
  margin: 0 auto; 
}

设置块级元素的width可以防止它从左到右撑满整个容器。然后就可以设置左右外边距为auto 来使其水平居中。元素会占据我们所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案：

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

在这种情况下使用max-width替代width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！
顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。

box-sizing

我们都知道css中是以盒模型来进行设计的，那么如果我们要设计网页应该怎么确定那些尺寸呢？以前的一些老办法是通过计算每一个边距的像素值，再把它们相加起来就是我们最后所得到的尺寸，现在有了新的办法可以更好的解决这个问题。
们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个例子，两个元素都设置了 box-sizing: border-box;

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

这样可以确保所有的元素都会用这种更直观的方式排版。

不过box-sizing是个很新的属性，目前还应该像上面例子中那样使用 -webkit-和-moz-前缀。

position

position的属性值以及他们的含义我在第六天的博客里面有写到，如果想要继续了解可以点击这里

float

一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片，如下：

img {
  float: right;
  margin: 0 0 1em 1em;
}

具体的属性介绍在我的这篇博文里面。

百分比宽度

百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。

article img {
  float: right;
  width: 50%;
}

甚至还能同时使用min-width和max-width来限制图片的最大或最小宽度！

媒体查询

Design” ```是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！

媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：
~~~
@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}
~~~
使用 ```meta viewport```之后可以让布局在移动浏览器上显示的更好。

## inline-block
以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。让我们看下使用这两种方法的例子：
比较困难的方式，使用浮动：
~~~
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}
~~~
用容易的方式（使用 inline-block）来达到跟上述代码相同的效果：
~~~
.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}
~~~
有一些事情需要牢记：
<b>vertical-align 属性会影响到 inline-block 元素，可能会把它的值设置为 top 。
需要设置每一列的宽度</b>
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
~~~
nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}
~~~
## flexbox
弹性盒子[在我的这边博文里有详细介绍](../../../../2019/02/28/巩固7/#more)如果想要了解，点击即可。

## 对齐方式
### 水平居中：
#### 行内元素的水平居中
如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素

~~~
<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
</div>
<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>
~~~
#### 块状元素的水平居中（定宽）
当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的
~~~
<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
</div>
.child{
           width: 200px;
           margin: 0 auto;
       }
~~~
#### 块状元素的水平居中（不定定宽）
在实际工作中我们会遇到需要为“不定宽度的块级元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。

可以直接给不定宽的块级元素设置```text-align：center```来实现，也可以给父元素加```text-align:center```来实现居中效果。

当不定宽块级元素的宽度不要占一行时，可以设置display 为```inline```类型或```inline-block```（设置为 行内元素 显示或行内块元素）
~~~
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
~~~
### 垂直居中：
和水平居中一样，这里要讲垂直居中，首先设定两个条件即父元素是盒子容器且高度已经设定

#### 子元素是行内元素，高度是由其内容撑开的
这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中
~~~
<div class="wrap line-height">
    <span class="span">111111</span>
</div>

.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }
~~~
#### 子元素是块级元素但是子元素高度没有设定
在这种情况下实际上是不知道子元素的高度的，无法通过计算得到padding或margin来调整，但是还是存在一些解法。
通过给父元素设定```display:table-cell;vertical-align:middle```来解决
~~~
<div class="wrap">
    <div class="non-height ">11111</div>
</div>

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }
~~~
子元素是块级元素且高度已经设定
计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2
~~~
 <div class="wrap ">
    <div class="div1">111111</div>
</div>

.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        }
 ~~~
### 水平垂直居中：
#### 水平对齐+行高
+```text-align + line-height```实现单行文本水平垂直居中
#### 水平+垂直对齐
1、```text-align + vertical-align```在父元素设置```text-align```和```vertical-align```，并将父元素设置为```table-cell```元素，子元素设置为```inline-block```元素
2、若子元素是图像，可不使用```table-cell```，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置```vertical-align:middle

3.3相对+绝对定位
用absolute，利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto.