【从零开始的Java开发】2-8-3 CSS浮动：DIV、盒子模型、浮动

文章目录

DIV

DIV是层叠样式表中的定位技术，全程DIVision
有时把div称为图层，更多时候称为“块”

DIV设置

DIV溢出处理效果：

超出div宽度高度的文字或图片进行隐藏处理
超出div宽度高度的文字或图片增加滚动条

overflow属性设置

在这里插入图片描述
如：

html文件：

<body>
    <div id="div1">
        一些废话<br>
        一些废话<br>
        一些废话<br>
        一些废话<br>
        一些废话<br>
        一些废话<br>
        一些废话<br>
        一些废话<br>
        一些废话<br>
    div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13

css文件：

#div1 {
    background-color: yellowgreen;
    width: 150px;
    height: 150px;
}
1
2
3
4
5

则：这就是溢出。
在这里插入图片描述
解决方法1：隐藏。
在css代码上加上：

overflow: hidden;
1

则超出的那部分就会被隐藏。
在这里插入图片描述
其他属性同理。

轮廓与边框设置

轮廓outline
作用：绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

dashed：虚线轮廓
dotted：点状轮廓
solid：实线轮廓
double：双线轮廓

边框
作用：设置div边框的边线宽度、颜色、虚线、实线等样式css属性。

有四种属性：

border-left
border-right
border-top
border-bottom

solid，表示有线。

现在做一个这个：
在这里插入图片描述

html文件：

<body>
    <label>姓名：label>
    <div id="div1">
        <input type="text">
    div>
body>
1
2
3
4
5
6

css文件：

#div1 {
    position: absolute;
    left: 150px;
    top: 150px;
    border-bottom: solid;
}

label {
    position: absolute;
    left: 105px;
    top: 150px;
}

input {
    border: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

显示：

在这里插入图片描述

盒子模型

用来设置间距。

元素居中

包括：

文字居中：让自己容器中的元素居中，常作用于文本或图片等内联元素。
对象居中：让容器中的自己居中，常作用于块元素，且需要配合宽度使用。

实现文字居中的代码：

html代码：

<body>
    <div id="div1">一段废话div>
body>
1
2
3

css代码：

div {
    height: 200px;
    width: 200px;

}

#div1 {
    background-color: yellowgreen;
    margin: 20px 0px 0px 20px;

    /*文字：水平居中*/
    text-align: center;

    /*文字：垂直居中：默认居中，所以高度跟跟总体的高度一样*/
    line-height: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

显示：
在这里插入图片描述
对象居中的代码，增加css代码：

/*对象水平居中: 上下 左右*/
    /*对于auto，该对象要有宽度才能使用*/
    margin: 0px auto;
1
2
3

显示：
在这里插入图片描述

浮动

行级元素与块级元素

定位机制

分为：

（标准）文档流
脱标流：脱离标准文档流（float、position:absolute）

文档流特点：

空白折叠现象
高矮不齐，底边对齐
自动换行，一行写满换行写

空白折叠现象演示：

<body>
    <label>一段废话label>
    <label>一段废话label>
    <label>一段废话label>
body>
1
2
3
4
5

显示：有空格——把编辑区里的换行显示成空格。
在这里插入图片描述
改成：

<label>一段废话label><label>一段废话label><label>一段废话label>
1

显示：空白被折叠了。
在这里插入图片描述
文档流：从上到下（块）、从左到右依次布局。

脱标流：让块级元素从上到下，从左到右布局。

脱标流

float的属性：
在这里插入图片描述
演示文档流的情况：
html文件：

<body>
    <div id="div1">第一个div>
    <div id="div2">第二个div>
    <div id="div3">第三个div>
body>
1
2
3
4
5

css文件：

div {
    width: 200px;
    height: 200px;
}

#div1 {
    background-color: yellowgreen;
}

#div2 {
    background-color: lightpink;
}

#div3 {
    background-color: lightblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

显示：div是块级元素，所以会从上到下排列——这是文档流。
在这里插入图片描述

添加float后：

#div1 {
    background-color: yellowgreen;
    float: left;
}

#div2 {
    background-color: lightpink;
    width: 300px;
}
1
2
3
4
5
6
7
8
9

显示：第一个div是盖在第二个div上的。
在这里插入图片描述
若把left改成right：

#div1 {
    background-color: yellowgreen;
    float: right;
}
1
2
3
4

显示：第一个div就到右边了。
在这里插入图片描述
若全都脱离文档流：

div {
    width: 200px;
    height: 200px;

}

#div1 {
    background-color: yellowgreen;
    float: left;
}

#div2 {
    background-color: lightpink;
    width: 300px;
    float: left;
}

#div3 {
    background-color: lightblue;
    float: left;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

float初衷、包裹与崩溃

float的崩溃（破坏、崩塌）

是父一级的块级元素高度发生破坏

ps：如果块级元素没有设置宽度，那么它的宽度就是父一级元素的宽度。

如：
html文件：

<body>
    <div id="div1">
        <div id="div2">div>
    div>
body>
1
2
3
4
5

css文件：

#div1 {
    border: 1px solid black;
    background-color: hotpink;
}

#div2 {
    background-color: lightpink;
    width: 300px;
    height: 300px;
}
1
2
3
4
5
6
7
8
9
10

显示：深粉色是div1的块，它的长度宽度是它的父一级的长度宽度，在这里就是。
在这里插入图片描述
float崩溃：将子元素设置为浮动之后，父元素在没有指定高度的情况下其高度将不存在。

html文件：

<body>
    <div id="div1">
        <div id="div2">div>
        <div id="div3">div>
    div>
body>
1
2
3
4
5
6

css文件：

#div1 {
    border: 1px solid black;
    background-color: hotpink;
}

#div2 {
    background-color: lightpink;
    width: 300px;
    height: 300px;
    float: left;
}

#div3 {
    background-color: deeppink;
    width: 100px;
    height: 200px;
    float: left;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

显示：div1的块没有了——float崩溃。

在这里插入图片描述
float包裹特性

包裹性：当产生了浮动之后，div的宽度会自动地适用于里面的内容。

html代码：

<body>
    <div id="div1">
        <img src="../img/1.jpg">
    div>
body>
1
2
3
4
5

css代码：

#div1 {
    background-color: hotpink;
    float: left;
}
1
2
3
4

显示：在浏览器按F12：
整个div是297x302：
在这里插入图片描述
而img是297x298：

多出来的297x4就是基准线。
img是行级元素，行级元素都会出现基准线的问题。

如何去除基准线？
添加css代码：

img {
    /*垂直对齐方式设置为底边对齐*/
    /*也可以理解为将行级元素转换为块级元素*/
    vertical-align: bottom;
}
1
2
3
4
5

显示：去除成功！
在这里插入图片描述
float的设计初衷

使文字或矩形区域能进行环绕排列。

清除浮动

清除浮动：指的是清除该元素之前的浮动。

为什么要清除浮动：

为了父元素不会出现“高度崩塌”
如果强制规定外层容器的尺寸，则显得不那么灵活，高度就不能自动适应了
从某个元素开始，不再需要浮动效果

未清除浮动：
html：

<body>
    <div id="div1">
        <div id="div2">div>
        <div id="div3">div>
        <div id="div4">div>
    div>
body>
1
2
3
4
5
6
7

css：

#div1 {
    background-color: greenyellow;
}

#div2 {
    background-color: lightpink;
    float: left;
    width: 300px;
    height: 300px;
}

#div3 {
    background-color: lightblue;
    float: left;
    width: 330px;
    height: 330px;
}

#div4 {
    background-color: springgreen;
    width: 500px;
    height: 500px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

显示：左上两个都是浮动的。
在这里插入图片描述

想要清除浮动，在css中的div4中添加：

/*清除浮动：从div4开始就不再浮动了*/
clear: both;
1
2

显示：不再浮动了。
both：表示可以清楚left、right两种浮动。
在这里插入图片描述

清除浮动的第二种方法：
html：

<body>
    <div id="div1">
        <div id="div2">div>
        <div id="div3">div>
        <div id="clearDiv">div>
        <div id="div4">div>
    div>
body>
1
2
3
4
5
6
7
8

css：改变div4，增加clearDiv

#div4 {
    background-color: springgreen;
    width: 500px;
    height: 500px;
}

#clearDiv {
    clear: both;
}
1
2
3
4
5
6
7
8
9

显示效果一样。

清除浮动的第三种方法（主流）：

/*意思是：在clearDiv结束的位置上添加一段内容*/
#clearDiv::after {
    /*有content的存在但不显示任何内容*/
    content: "";
    /*将content内容隐藏*/
    visibility: hidden;
    /*以上两个互为补充*/

    height: 0px;
    /*块级显示*/
    display: block;
    clear: both;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

显示效果一样。

相关阅读:
RK3588 开发者选项中通过“USB DEBUG“按钮实现otg模式切换(二)
前端面试如何回答，这些题目或许可以给你一些提示
 vueRouter 重定向高亮传参嵌套简单示例
 Java全栈工程师：技术与视野的双重拓展
 熵熵的简单理解和实例
 卷积层的输出
 测一测现在的温度
 数据结构算法之——时间复杂度和空间复杂度
 java中比较两个map是否相同
 网络安全态势感知运营中心建设解决方案
原文地址：https://blog.csdn.net/karshey/article/details/126403471