2-1 CSS布局的补充

发布时间：2020-06-11 07:50:42 作者：代码老兵
来源：网络阅读：168

居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>

    <style>
        div{
            background-color: red;
            width: 400px;
            height: 250px;

            /*水平居中*/
            text-align: center;
        }
        span{
            background-color: green;
        }
    </style>

</head>
<body>
    <div>
        <span>行内标签</span>
    </div>

</body>
</html>

2-1 CSS布局的补充

上图：行内标签在剧中的位置显示


    <div>
<!--        <span>行内标签</span>-->
        <button>行内-块级标签</button>
    </div>

2-1 CSS布局的补充

上图：行内-块级标签也是可以被居中的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>

    <style>
        div{
            background-color: red;
            width: 400px;
            height: 250px;

            /*水平居中*/
            text-align: center;
        }
        span{
            background-color: green;
        }
        p{
            background-color: goldenrod;
            width: 200px;
        }
    </style>

</head>
<body>
    <div>
<!--        <span>行内标签</span>-->
<!--        <button>行内-块级标签</button>-->
        <p>块级标签</p>
    </div>

</body>
</html>

代码：新增块级标签测试居中

2-1 CSS布局的补充

上图：块级标签因为是占据整行的特性，会根据设计的宽度从最左边适应，没有被居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>

    <style>
        div{
            background-color: red;
            width: 400px;
            height: 250px;

            /*水平居中*/
            text-align: center;
        }
        span{
            background-color: green;
        }
        p{
            background-color: goldenrod;
            width: 200px;
            margin: 0 auto;
        }
    </style>

</head>
<body>
    <div>
<!--        <span>行内标签</span>-->
<!--        <button>行内-块级标签</button>-->
        <p>块级标签</p>
    </div>

</body>
</html>

代码：p标签设计新增外边距 margin: 0 auto; 表示上下距离为0，左右的宽度为auto。

2-1 CSS布局的补充

上图：这样p标签根据父级标签（div）来自动适应左右两边的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>

    <style>
        div{
            background-color: red;
            width: 400px;
            height: 250px;
            line-height: 250px;

            /*水平居中*/
            text-align: center;
        }
        span{
            background-color: green;
        }
        p{
            background-color: goldenrod;
            width: 200px;
            margin: 0 auto;
        }
    </style>

</head>
<body>
    <div>
        <span>行内标签</span>
<!--        <button>行内-块级标签</button>-->
<!--        <p>块级标签</p>-->
    </div>

</body>
</html>

代码：div设计新增line-height: 250px; 与height 250px相同；默认标签垂直的距离是字体本身的距离，所以我们将标签的行高（line-height）与height同样高，span标签就居中了（字体居中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>

    <style>
        div{
            background-color: red;
            width: 400px;
            height: 250px;
            line-height: 250px;

            /*水平居中*/
            text-align: center;
        }
        span{
            background-color: green;
        }
        p{
            background-color: goldenrod;
            width: 200px;
            margin: 0 auto;
        }
    </style>

</head>
<body>
    <div>
<!--        <span>行内标签</span>-->
<!--        <button>行内-块级标签</button>-->
        <p>块级标签</p>
    </div>

</body>
</html>

代码：块级标签使用line-height: 250px;

2-1 CSS布局的补充

上图：
该块级标签优先使用了p标签的设计，背景颜色为金色；
宽度为200px（如果没设置会继承父集标签的宽度）；
高度默认为字体的高度（不会继承父级标签的高度height: 250px;），但是却继承了行高line-height: 250px;，所以跟红色部分一样高，这样实现了垂直居中的效果；
最后p标签又设计了外层边距margin: 0 auto;，实现了水平居中的效果。
line-heigth是行高的意思，它决定了元素中文本内容的高度，height则是定义元素自身的高度，行高等于元素高，可将文本内容垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>

    <style>
        div{
            background-color: red;
            width: 400px;
            height: 250px;
            line-height: 250px;

            /*水平居中*/
            text-align: center;
        }
        span{
            background-color: green;
        }
        p{
            background-color: goldenrod;
            width: 200px;
            height: 40px;
            margin: 0 auto;
        }
    </style>

</head>
<body>
    <div>
<!--        <span>行内标签</span>-->
<!--        <button>行内-块级标签</button>-->
        <p>块级标签</p>

    </div>

</body>
</html>

代码：p标签设计中新增height: 40px;（元素高度）

2-1 CSS布局的补充

上图：元素的高度改变了，文本的高度没有改变。

        p{
            background-color: goldenrod;
            width: 200px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
        }

代码：在p标签设计中新增line-height: 40px;

2-1 CSS布局的补充

上图：块级标签当前的元素和文本高度都一致了。

2-1 CSS布局的补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input>
</body>
</html>

代码：添加input行内-块级标签

2-1 CSS布局的补充

上图：图中可以看到我们在输入框中输入内容后，内容与边框非常紧凑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        input{
            padding: 5px;
        }
    </style>

</head>
<body>
    <input>
</body>
</html>

代码：设计input标签的内边距

2-1 CSS布局的补充

上图：明显的看到内容与边框之间的距离变大了。

        input{
            width: 500px;
            height: 50px;
            padding: 5px;
        }

2-1 CSS布局的补充

上图：当前的高度和宽度变大了

        input{
            width: 500px;
            height: 50px;
            padding: 5px;
            box-sizing: border-box;
        }

代码：新增box-sizing: border-box;

2-1 CSS布局的补充

上图：可以看到盒子的内容尺寸变小了；在不改变盒子外边距的宽度和高度的情况，把空间往里挤。

浮动

默认情况下，所有的网页标签都在标准流布局中

从上到下，从左到右

脱离标准流的方法有

position属性和 left、right、top、bottom属性

float属性

float属性的常用取值有

left：脱离标准流，浮动在父标签的最左边
right：脱离标准流，浮动在父标签的最右边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        input{
            width: 500px;
            height: 50px;
            padding: 5px;
            box-sizing: border-box;
        }

    </style>

</head>
<body>
    <input>
    <ul>
        <li>123123123</li>
        <li>123123123</li>
        <li>123123123</li>
        <li>123123123</li>
    </ul>

</body>
</html>

2-1 CSS布局的补充

上图：列表的默认样式

        ul li{
            float: left;
        }

代码：让列表脱离标准布局，浮动在页面左边；（右边就改成：float: right;）

2-1 CSS布局的补充

        ul{
            display: inline-block;
            background-color: red;
        }
        ul li{
            float: right;
        }

代码：
将快标签li改成行内-块级标签display: inline-block;
将float: right;改成右侧浮动

2-1 CSS布局的补充

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

position

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

2-1 CSS布局的补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            margin: 50px;

            position: static;
        }
        span{
            background-color: green;
            position: absolute;
            left: 20px;
            top: 20px;
        }
    </style>

</head>
<body>
    <div>
        <span>123123</span>
    </div>
</body>
</html>

代码：想让span标签浮动在父集标签（div）的left: 20px; top: 20px;位置。

2-1 CSS布局的补充

上图：
因为margin: 50px;，我们红色的div标签位置变了；
然后想让span浮动在父标签（div）的left: 20px; top: 20px;位置，但是因为父标签默认position是static，字标签（span）无法定位父标签（div），需要将父标签的position改成relative才可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            margin: 50px;

            position: relative;
        }
        span{
            background-color: green;
            position: absolute;
            left: 20px;
            top: 20px;
        }
    </style>

</head>
<body>
    <div>
        <span>123123</span>
    </div>
</body>
</html>

代码：修改为 position: relative;

2-1 CSS布局的补充

上图：成功浮动到父标签的指定位置。

        span{
            background-color: green;
            position: absolute;
            right: 0;
            bottom: 0;
        }

代码：浮动到右下角

2-1 CSS布局的补充

2-1 CSS布局的补充

居中

浮动

float属性

position

相关阅读