HTML——css--盒子模型与布局

--JR

已于 2024-08-06 15:28:06 修改

阅读量789

点赞数 19

分类专栏： HTML前端 Java 文章标签： html css 前端

于 2024-08-06 14:46:11 首次发布

本文链接：https://blog.csdn.net/immnature/article/details/140930134

版权

Java 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML前端

3 篇文章 0 订阅

订阅专栏

盒子：

html中任何一个元素如div、span等都可以看作盒子，每个元素本质属性都会存在一些区别

而这种现象则被称为盒子模型

盒子模型种类

1.块级盒子（标签、元素）：div ul li h1~h6

独占一行，对宽度高度支持

2.内联级盒子：span a

不独占一行，对宽度高度不支持

3.内联块级盒子：img input

不独占一行，对宽度高度支持

4.弹性盒子：

不论父级能不能放下子元素，子元素始终横向布局

盒子模型分区

内容区：

width:200px;

height:100px;

填充区：

padding:50px;

padding:50px,20px;上下，左右

padding:50px,20px，10px;上，左右，下

padding:50px,20px，10px，100px;上，左,右，下

单独一边设置:

padding-top: 10px;

padding-left: 10px;

padding-right: 10px;

padding-bottom: 10px;

边框区：

组成：

border-style:边框样式

border-color:边框的颜色

border-width:边框宽度

例：

1.分开写

border-color: black;

border-style: dashed;

border-width: 5px;

2.合着写

border:solid 10px blue;//不用区分顺序，也可以加 -方向来设置一条边

外边距：//调整元素和元素之间的间距

margin: 50px;

margin:50px,20px;上下，左右

margin:50px,20px，10px;上，左右，下

margin:50px,20px，10px，100px;上，左,右，下

水平方向上可以用 auto 来居中

注意：如果两个相邻元素都设置了间距，不是累加计算，而是按照大的走

例子：

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/盒子模型.css">
</head>
<body>
    <div>
        <p id="x">aaa</p>
        <p id="y">bbb</p>
    </div>
</body>
</html>

.css

p{
    background: yellow;
    width: 200px;
    height: 100px;
    padding: 50px;
    border: solid 10px blue;
    margin: 100px auto;
}

运行结果：

为了更好的直观理解其分区，我们可以右键单击，选中检查用于查询

盒子模型布局

1.传统布局 float

需要向横向布局的元素添加float属性:

float: right;右浮动

float: left;左浮动

如在刚才的.css的p标签的样式中添加

    float: right;

存在的问题：

使用float之后，所在的父级元素无高度，会导致下方元素向上移动

例子：

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/盒子模型.css">
</head>
<body>
    <div>
        这是第一个div
        <p id="x">aaa</p>
        <p id="y">bbb</p>
    </div>
    <div>
        这是第二个div
    </div>
</body>
</html>

.css

div{
    background: gray;
}
div p{
    background: yellow;
    width: 200px;
    height: 100px;
    padding: 50px;
    border: solid 10px blue;
    margin: 100px auto;
    float: right;
    
}

运行：

解决办法：

1.给父级元素设置高度（需要根据子级元素的大小设置，并不推荐）

2.父级不设高度，添加,使得父级高度随着自己高度变化而变化

div{
    background: gray;
    overflow:hidden
}

无法解决：

1.元素之间的均匀分布计算，而且不一定能均匀分布（有除不开的情况）

2.或均匀父级也需要计算，而且不一定均分

3.书写繁琐代码冗余

2.传统布局 display:inline-block 内联块级元素

向需要横着布局的元素添加 display:inline-block 变为内联块级元素，内联块级元素不独占一行，对宽高支持

存在的问题：

使用之后产生莫名其妙的空隙，对整体的布局有影响

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/盒子模型.css">
</head>
<body>
    <div>
        这是第一个div
        <p id="x">aaa</p>
        <p id="y">bbb</p>
    </div>
    <div>
        这是第二个div
    </div>
</body>
</html>

div{
    background: gray;
    overflow:hidden;
     
}
div p{
    background: yellow;
    width: 200px;
    height: 100px;
    padding: 50px;
    border: solid 10px blue;
    display: inline-block;
  
}

产生原因：

换行产生的空隙

解决办法：

1.让元素标签首尾相接（不推荐）

<p id="x">aaa</p><p id="y">bbb</p>

2.字体大小设置：给使用display:inline-block的父级元素设置字体大小font-size: 0;，并且元素本身设置一个有效字体大小

div{
    background: gray;
    overflow:hidden;
    font-size: 0;
}
div p{
    font-size: 20px;
    background: yellow;
    width: 200px;
    height: 100px;
    padding: 50px;
    border: solid 10px blue;
    display: inline-block;
  
}

无法解决：

1.元素之间的均匀分布计算，而且不一定能均匀分布（有除不开的情况）

2.或均匀父级也需要计算，而且不一定均分

3.书写繁琐代码冗余

3.现代布局 display:flex 弹性盒子

让多个元素横向布局，只需要给这些元素的父级元素添加 display:flex

div{
    background: gray;
    display: flex;
    
}
div p{
    background: yellow;
    width: 200px;
    height: 100px;
    padding: 50px;
    border: solid 10px blue;
}