css之盒子模型

最新推荐文章于 2023-10-09 09:49:31 发布

骚小孩呀

最新推荐文章于 2023-10-09 09:49:31 发布

阅读量159

点赞数

分类专栏：前端文章标签： css 盒子模型

本文链接：https://blog.csdn.net/huaixiaohai_1/article/details/95473544

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

cs盒子模型在布局中起到了相当重要的作用。不仅能过灵活的布置界面，而且相当方便。

在了解盒子模型之前首先了解一下什么是行级元素以及块级元素。

常用行级元素：a，input，span，label，img，textarea等等这些

常用块级元素：div，form，h1,h2...,ul,li,table,tbody等等

行级元素与块级元素的区别：

块级元素默认占一行，可以通过css来设置宽和高。

行级元素不会占一行，即使通过css来设置宽和高也不会起作用。

通过div和span两个元素来举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    span{
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
</style>
<body>
    <div>
        div元素
    </div>
    <div>
        div元素
    </div>
    <span>
        span元素
    </span>
    <span>
        span元素
    </span>
</body>
</html>

效果如下：

div元素单独占一行，css宽高对他有作用，而span不单独占一行css宽高没有用。

造成这样的根本原因其实就是因为他们的盒模型不同，行级元素默认盒模型为inline，块级元素默认盒模型为block。

尝试改变他的display，看看效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    div{
        display: inline;
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    span{
        display: block;
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
</style>
<body>
    <div>
        div元素
    </div>
    <div>
        div元素
    </div>
    <span>
        span元素
    </span>
    <span>
        span元素
    </span>
</body>
</html>

效果：

可以看到通过修改他的盒模型就可以让他变成与之前相反的结果。

通过上面的两个例子可以看出，模型设置主要是display这个属性，每一个元素都以一个默认的display属性，但是我们也可以去修改他的display属性达到我们想要的效果。

除了inline和block两个模型外，还有inline-block,inline-table,flex等这些模型。

inline-block模型：

这种模型是inline和block的综合体，他不会占用一行，但是可以通过css来修改宽和高。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    div{
        display: inline-block;
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    span{
        display: inline-block;
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
</style>
<body>
    <div>
        div元素
    </div>
    <div>
        div元素
    </div>
    <span>
        span元素
    </span>
    <span>
        span元素
    </span>
</body>
</html>

效果：

可以看到修改盒模型为inline-block之后，所有元素都在一行（没有超过父级宽度限制），同样支持css设置宽和高。但是也存在几个问题：

1.各个元素之间存在空格：这是因为在html中每个元素之间都有一个空格，可以通过去掉元素之间的空格或者时设置字体为0来去掉空格。

2:如果多个元素的高度不同，那么会默认底部对齐，可以通过vertiacl-align来设置top或者bottom对齐。

inline-table模型

table是块级元素，他是独占一行的，但是很多情况下我们需要其他元素和他共占一行，所以通过inline-table来实现。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    table{
        border: 1px solid black;
        display: inline-table;
    }
    td{
        border: 1px solid black;
    }
</style>
<body>
    我想和你一行
    <table>
        <tr>
            <td>嘻嘻</td>
            <td>嘿嘿</td>
        </tr>
        <tr>
            <td>哈哈</td>
            <td>呵呵</td>
        </tr>
    </table>
对的
</body>
</html>

看下效果：

flex模型

将display设置为flex就是为弹性盒子模型，通过该属性可以更好的实现多栏布局。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
   #container{
       display: flex;
       width: 960px;
       text-align: left;
       flex-direction: row;
   }
    #container>div{
        border: 1px solid #aaf;
        box-sizing: border-box;
        padding: 5px;
    }
</style>
<body>
<div id="container">
    <div style="width: 220px">hahahhahahaha</div>
    <div style="width:500px;">heiheiheieheiheieh</div>
    <div style="width: 240px">xixixixixixixixixi</div>
</div>
</body>
</html>

效果：

那么既然称为弹性布局那他一定是很灵活的，可以通过修改他的flex-direction来设置横着排还是竖着排。以及row-reverse和column-reverse实现横向或纵向的反向。

flex还有其他一些属性来帮助更好的布局，比如通过flex-wrap可以设置在元素宽度之和大于屏幕宽度时是否换行。

还有通过order来设置排列顺序。

骚小孩呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css之盒子模型

cs盒子模型在布局中起到了相当重要的作用。不仅能过灵活的布置界面，而且相当方便。在了解盒子模型之前首先了解一下什么是行级元素以及块级元素。常用行级元素：a，input，span，label，img，textarea等等这些常用块级元素：div，form，h1,h2...,ul,li,table,tbody等等行级元素与块级元素的区别：块级元素默认占一行，可以通过css来设置宽和...
复制链接

扫一扫

专栏目录