CSS页面布局细节问题

CSS页面布局1

1. 盒模型塌陷问题

1.1 塌陷原因

如下图所示，当父元素中的子元素box2设置外间距时，会连带父元素向下，这种情况我们一般称为盒模型塌陷。

1.2 解决方法

a.给父元素加边框

代码如下：

<style>
.box1 {
            background-color: blue;
            width: 400px;
            height: 400px;
            /*通过给父元素加边框解决塌陷问题*/
            border: 1px solid red;
            box-sizing: border-box;
        }
</style>

b.用BFC解决

代码如下：

<style>
.box1 {
            width: 400px;
            height: 400px;
            background-color: blue;
            /* 通过overflow属性把父级元素变成独立元素 */
            overflow: hidden;
        }
</style>

c.给父级元素一个padding-top值

代码如下：

<style>
.box1 {
            width: 400px;
            height: 400px;
            background-color: blue;
            /* 通过给父级元素一个padding-top值解决 */
            padding-top: 1px;
        }
</style>

2. CSS中的overflow属性

overflow属性指定如果内容溢出一个元素的框，会发生什么。

visible
内容不会被修剪，会呈现在元素框之外。（默认值）

hidden
内容会被修剪，并且其余内容是不可见的。

scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit
规定应该从父元素继承 overflow 属性的值。

3. CSS中的display属性

3.1 基本属性
display 属性规定元素应该生成的框的类型。

none
此元素不会被显示。

block
此元素将显示为块级元素，此元素前后会带有换行符。

inline
此元素会被显示为内联元素，元素前后没有换行符。(默认值)

inline-block
行内块元素，行内块元素的大小由内容自动撑开并且可以是设置大小。

table
此元素会作为块级表格来显示，表格前后带有换行符。

list-item
此元素会作为列表显示。

3.2 display:table
table-row
此元素会作为一个表格行显示（类似 tr）。

table-cell
此元素会作为一个表格单元格显示（类似 td 和 th）

table-caption
此元素会作为一个表格标题显示（类似 caption）

3.3 display:inline-block布局

当后面元素有文本时：

当前后元素都有文本时：

当前面元素有文本时：

当前后元素都是用display：inline-block时子元素box中有文本内容，文本内容会遵循inline行级元素自动和上一个元素底部对齐从而影响布局

通常我们使用BFC让两个元素互不影响来解决这个问题，通过给两个元素添加overflow：hidden；来解决这个问题

代码如下：

<style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: blue;
            display: inline-block;
            
            overflow: hidden;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
            display: inline-block;


            overflow: hidden;
        }
    </style>

3.4块元素转化为行级块之后 元素之间默认大概5px的间距

处理方法：
a.给父元素设置字体大小为0
b.把被行级块转化的父元素中的子元素之间的空格删除掉

4. CSS中的float属性

4.1 float基本属性

float属性指定一个盒子（元素）是否应该浮动。
注意： 绝对定位的元素忽略float属性！当元素添加浮动时脱离文本流

left
元素向左浮动。

right
元素向右浮动。

none
默认值。元素不浮动，并会显示在其在文本中出现的位置。

inherit
规定应该从父元素继承 float 属性的值。

4.2 float布局常见问题

子集元素浮动以后脱离文本流（浮动元素不在布局中占位置），不会影响前面的元素，但是会导致后边元素的重排，无法撑开父级元素。

解决方法：

a.通过给父级元素添加height属性

代码如下：

<style>
.box {
            height: 100px;
        }
</style>

b.通过BFC让父级元素独立不影响后面的元素

代码如下：

<style>
.box {
            overflow: hidden;
        }
</style>

c.在浮动元素后面添加一个clear盒子

代码如下：

<div style="clear: both;"></div>

5. CSS中的position属性

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky
粘性定位，该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

inherit 规定应该从父元素继承 position 属性的值。
initial 设置该属性为默认值，详情查看 CSS initial 关键字。

6. CSS中图片模糊的样式

blur
设置模糊程度 blur(10px) 设置像素值

brightness
设置暗和高亮 百分比值

contrast
设置图像的对比度 百分比值

grayscale
设置图像的灰度 百分比值

opacity
设置透明度 百分比

saturate
设置饱和度 百分比

filter:drop-shadow(10px 10px 10px red ) blur(1px); 添加阴影和模糊度

7. CSS样式布局调整

7.1 块元素水平居中

 margin: 0 auto;

7.2 让父元素内部的子集 相对垂直对齐

vertical-align: middle;