css学习笔记－盒子的样式

最新推荐文章于 2024-01-04 00:11:38 发布

冬瓜312

最新推荐文章于 2024-01-04 00:11:38 发布

阅读量416

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/tjzhuorui/article/details/73332251

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

display的几种参数

1.inline和block

inline,在一行中不会换行，内联属性不可设置盒子大小，且不会自动换行。

block,不在一行会自动换行，可设置盒子的大小

默认下，span是inline的，div是block的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            background-color: aqua;
        }
        span{
            background-color: crimson;
        }

        h1{
            background-color: yellow;
        }

    </style>
    <title>display</title>
</head>
<body>
    <div>div是block的</div>
    <div>div是block的</div>
    <span>span是inline的</span>
    <span>span是inline的</span>
    <h1>h1也是block的</h1>
    <h1>h1也是block的</h1>
</body>
</html>

效果如下：

默认情况下的确如此，但是可以通过display来进行修正,比如上述代码中的style部分修改为

        div{
            background-color: aqua;
            display: inline;
        }
        span{
            background-color: crimson;
            display: block;
        }

        h1{
            background-color: yellow;
            display:inline;
        }

那么得到的效果是这样的:

确实，div和h1变成inline的了，而span却变成block的了。

2.inline-block

前面说到，inline，是不可以设置大小的，

而inline-block同时具备了inline和block的特性，可以设置其大小，且在一行之中

比如，对于span来说，他本身是inline的，多个span之间是不会自动换行的，且也无法修改大小，inline-bock正可以解决这个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{
            display:inline-block;
            background-color: yellow;
            width: 200px;
        }
    </style>
    <title>inline-bock</title>
</head>
<body>
    <span>span是inline的1</span>
    <span>span是inline的2</span>
    <span>span是inline的3</span>
    <span>span是inline的4</span>
</body>
</html>

效果如下:

3.inline-table

table本身也是block的，如果我用以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-table</title>
    <style>
        span{
            background-color: aquamarine;
        }

        table{
            background-color: crimson;
        }


    </style>
</head>
<body>
<span>header</span>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<span>footer</span>
</body>
</html>

效果如下:

那么我现在有个需求，我需要header和footer和table在一排，header在左边，table在中间，footer在右边

只需要把table设为inline-table即可

        table{
            display: inline-table;
            background-color: crimson;
        }

4.list-item

div的组合也可以展示出list的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list-item</title>
    <style>
        div{
            display: list-item;
            list-style-type: circle;
            margin-left: 30px;
            background-color: aqua;
            width: 300px;
            margin-bottom: 10px;
            padding: 5px;
        }
    </style>
</head>
<body>
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
</body>
</html>

效果:

关键在这三行代码:

       1     display: list-item;
       2     list-style-type: circle;
       3     margin-left: 30px;

第1行和第2行必须同时出现，缺一个都不会有圆圈的效果

第3行代码如果没有，圆圈会被覆盖掉。

冬瓜312

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记－盒子的样式

display的几种参数1.inline和blockinline,在一行中不会换行，内联属性不可设置盒子大小，且不会自动换行。block,不在一行会自动换行，可设置盒子的大小默认下，span是inline的，div是block的 div{ background-color: aqua; }
复制链接

扫一扫

专栏目录