CCS居中总结(上)

CCS居中总结

-因为最近在归纳css 所以其中的内容不仅限于居中-

水平居中

text-align

1.假如现在有一段文字，“我是大帅哥”让你相对于浏览器居中。这时我们想到的第一个方法就是对于行内元素(inline)可以直接设置父元素的text-align属性值为：center就可以实现居中。怎么理解呢？看代码：

.parent{
   
    text-align:center;
}

<div class="parent">
    <span>我是大帅哥</span>
</div>

就可以实现居中了，这是怎么实现的呢？

​ 我们的父级div设置了text-align属性，是对其内部的行级元素有居中效果。span是行级元素(与其相似的还有a、abbr、b、br、em、input、label、select、span、strong、sub、sup、textarea等) 。突然的想法，如果我们添加一个块级元素还会居中吗？

<div class="parent">
    <span>我是大帅哥</span>
    <div>你也是大帅哥</div>
</div>

div没居中，但是这时你会发现div中的内容居中了！！！这是为什么呢？

​ 其实这里有一个误区，都说text-align是对行级元素起作用，为什么div这个明显的块级元素也会居中，其实并不是子级div居中了，而是子级div继承了父级的text-align属性，并且这时的子级div没有设置宽度以及高度，看起来就像是div居中，但事实上只是子级div中的文字居中了。

---

块级元素与内联元素的默认宽高

文档流的概念： 行内元素：从左到右排列，宽度不够时换行 块级元素：从上到下排列，每一个元素另起一行

行内元素宽高的确定：

宽度：不受width的限制 由文字内容决定 padding和margin可以改变宽度

高度：不受height的限制 padding和margin也不能改变 可以通过line-height(行高)和font-size(字体大小)来改变

块级元素宽高的确定

宽度：可以自行设置宽度(width)的值 不设置时值为auto 默认宽度是父元素的宽度-自身border-自身margin

高度：

​ 1、可以自行设置height的值；
　　2、默认值为0；
　　3、由元素内部的文档流中的元素的高度的总和决定的（里面元素的height+padding+margin有合并的可能），当元素脱离文档流时，不能用于父元素高度的计算；
　 4、当块级元素里面是文字时，文字只有一行，高度由line-height决定，文字有多行，会自动换行，但是碰到长度很长的单词时需要手动添加连字符（-）换行，有一个属性与之相关，word-breaking: break all; 超出宽度，不管单词是否结束都换行。

**注意：**如果宽度写成100% 这时元素content的宽度等于父元素的宽度 所以元素的宽度应该等于这个宽度加自身的border 会凸出来一部分

---

所以上面的解释就可以说通了，子级div是没有设置宽度的。默认宽度是父级宽度-border-margin 但是不会超出父级div 所以在浏览器中看到的文字也是居中的。

​ 如果我们设置了子级div：

.child{
   
    width:500px;
    height:200px;
    background-color:red;
}

<div class="parent">
    <span style="background-color: #64c333">我是大帅哥</span>
    <div class="child">你也是大帅哥</div>
</div>

为了截图方便观察，我设置了父级div背景颜色为黄色，子级为红色，span为绿色

这时就清楚的看见第二句话是随着我们的子级div居中而改变位置。

​ 这使我又来突发奇想，如果我将div中的块元素元素全部换成行内元素或者行内块元素，这时对父级div用text-align会发生什么事情呢？

我们设置4个子块：

.parent{
   
    text-align: center;
}
.box{
   
 	width: 200px;
    height: 200px;
    background-color: red;
    border: 5px solid #cccccc;
}

<div class="parent">
    <div class="box">我是块1</div>
    <div class="box">我是块2</div>
    <div class="box">我是块3</div>
    <div class="box">我是块4</div>
</div>

这时我们可以观察到四个子块由上到下排列，每个独占一行并且块中的文字相对于子级块居中，因为这时的子级div继承了父级div的text-align属性。

这时我们通过display属性将块元素分别变成行内元素与行内块级元素观察两个不同的结果

.box{
   
    display: inline/inline-block;
    width: 200px;
    height: 200px;