D5|青训营

用户5304459792601
93 阅读2分钟

布局

第一篇实践笔记（简单粗糙的）关于CSS布局，块级和行级。

image.png

行级

行级元素:生成行级盒子，有span,em,strong,code,cite等，内容分散在多个line-box中。
行级元素默认宽度是由内容撑开的，不能设置宽高，只能容纳文本或者其它行内元素，可以和其他元素在一行显示。

行级排版上下文

image.png

块级

块级元素:生成块级盒子，有body,article,div,ul,li,p,h1-h6等。
块级元素默认的宽是容器的100%，可以设置宽和高，可以容纳其它块级元素或行内元素，并且独占一行。

image.png

块级排版上下文

image.png image.png

行内块元素

在行内元素中有几个特殊的标签， <button> <label> <select>它们同时具有块元素和行内元素的特点。有时称它们为行内块元素。大小取决于它包裹的内容大、宽高。但是高度，行高、外边距以及内边距都可以设置。

疑惑

用到img元素，会给img元素设置高和宽，并且设置的高和宽会生效，但是img元素属于行内元素，按理说行内元素是不能够设置宽和高。后来去查了一下，img textarea属于可替换元素，它们的默认分辨率是由被嵌入的图片的原始宽高来确定的，使其就像 inline-block 一样。在某些情况下，置换元素的尺寸和位置可以受到CSS的控制，例如通过设置宽度和高度属性来控制img元素的大小。

元素类型转换

使用display属性可以转换元素类型。

image.png

乱写，尝试一下：一行有好几个链接块，可以点击上面的文字跳转。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a默认是行内，宽高默认不生效，但是可以把它变成行内块 */
        a{
            text-decoration:none;
            width: 80px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: white;
            text-align: center;
            line-height: 50px;
        }
        a:hover{
            background-color: rgb(27, 90, 90);
        }
    </style>
</head>
<body>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
    <a href="#">链接4</a>
    <a href="#">链接5</a>
</body>
</html>

image.png 这里5被选中了。
其他：浏览器不允许一个盒子内又有块级又有行级，会创建一个匿名的盒子包裹。

avatar
文章
阅读
粉丝