【JavaWeb学习】CSS（布局）

Garcia • Kirlant

已于 2022-05-15 10:10:58 修改

阅读量219

点赞数

分类专栏： web前端学习文章标签： css

于 2022-04-17 11:48:08 首次发布

本文链接：https://blog.csdn.net/WingNebula/article/details/124226442

版权

web前端学习专栏收录该内容

25 篇文章 1 订阅

订阅专栏

高度塌陷和BFC

高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后完全脱离文档流，子元素将会无法撑起父元素的高度，导致父元素高度丢失，父元素下方的元素自动上移，导致页面布局混乱。
$\longrightarrow$ 解决方式：块级格式化环境 ( Block Formatting Context )

BFC

BFC 是 CSS 中的一个隐含的属性，可以为一个元素开启 BFC，让它变成一个独立的布局区域。

元素开启 BFC 后的特点

开启 BFC 的元素不会被浮动元素覆盖
开启 BFC 的元素，子元素和父元素的外边距不会重叠
开启 BFC 的元素可以包含浮动的子元素
通过特殊方式开启
1.设置浮动（不推荐）
2.将元素设置为行内块元素（不推荐）
3.将元素的 overflow 设置为非 visible 的值（常用）overflow: hidden;
4.通过 clear 属性清除浮动元素对当前元素的影响
可选值：
left 清除左侧浮动的影响
right 清除右侧浮动的影响
both 清除影响较大的那侧的影响
原理：设置清楚元素以后，浏览器自动为元素添加一个上外边距，以使其位置不受其他元素影响。
5.使用 after 伪类
对拥有浮动元素的父元素添加 after 伪类，把它转换成块元素并用 clear 清除其他浮动元素对它的影响，固定住这个空的位置。
也就是将伪类沉到所有浮动元素的下面，用它撑起父元素。

*{
    margin: 0px;
    padding: 0px;
}
.head,.main,.foot{
    width: 96%;
    margin: 2% 2%;  
}
.head{
    height: 10%;
    background-color: beige;   
}
.main{
     
    background-color: azure;
}
.main .left,.middle,.right{
    float: left;
}
.main .left{
    width: 20%;
    background-color: rgb(171, 241, 217);  
}
.main .middle{
    width: 58%;
    margin: 0% 1%; 
    background-color: rgb(199, 227, 252);
}
.main .right{
    width: 20%;
    background-color: rgb(248, 218, 242);
}
.main::after{
    content: '';
    display: table;
    clear:both;
}
.foot{
    height: 10%;
    background-color: bisque;
}

<html lang="en">
    <head>
        <meta charset="UTF-8">
		<meta name="keywords" content="kirlant">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>learn</title>
		<link rel="shortcut icon" href="../imgs/kirlant_logo.jpg" />
        <link rel="stylesheet" href="learn.css" />
    </head>
    <body>
        <div class="head">
            <p>this is head.</p>
        </div>
        <div class="main">
            <div class="left"><p>This is the left part of the body.</p></div>
            <div class="middle"><p>This is the middle part of the body.</p></div>
            <div class="right"><p>This is the right part of the body.</p></div>
        </div>
        <div class="foot">
            <p>this is foot.</p>
        </div>
    </body>
</html>

clearfix

同时解决高度塌陷和外边距重叠的问题；在标签的class属性中加上clearfix。

.clearfix::before,.clearfix::after{
	content:'';
	display: table;
	clear: both;
}

定位

定位是一种更加高级的布局手段，通过定位可以将元素摆放在页面的任意位置。
使用 position 属性来设置定位，可选值：

static 默认值，元素静止，没有开启定位
relative 开启相对定位
absolute 开启绝对定位
fixed 开启固定定位
sticky 开启粘滞定位

偏移量 offset
当元素开启了定位以后，可以通过偏移量来设置元素的位置，offset包括下面四个属性：

top 定位元素与定位位置上方的距离
bottom 定位元素与定位位置下方的距离
left 定位元素与定位位置左边的距离
right定位元素与定位位置右边的距离

top 和 bottom 都用于控制垂直距离，通常情况下只使用其中之一；
left 和 right 都用于控制水平距离，通常情况下只使用其中之一。

相对定位（相对于自己的定位）

元素开启相对定位以后，如果不设置偏移量，元素不会发生任何变化；
定位位置 没开启定位时，元素本身在文档流中的位置；
相对定位会提升元素的层级（就像PPT中的“置于顶层”）；
相对定位不会使元素脱离文档流；
相对定位不会改变元素的性质：块元素还是块元素，行内元素还是行内元素。

.main{ 
    background-color: azure;
    position: relative;
    top: -100px;
    left: 100px;
}

<body>
    <div class="head"><p>this is head.</p></div>
    <div class="main"><p>this is main.</p></div>
    <div class="foot"><p>this is foot.</p></div>
</body>

绝对定位（相对于包含块的定位）

开启绝对定位后，元素的位置不会发生变化；
定位位置 绝对定位元素是相对于其包含块进行定位的；
元素会从文档流中脱离 $\rightarrow$ 导致下方元素上移，有点像 float；
绝对定位会改变元素的性质，行内元素变成块元素，块元素的宽、高被内容撑开；
绝对定位会提升元素的层级；

包含块 containing block

正常情况下，包含块是距离当前元素最近的祖先元素；
对于开启了绝对定位的元素，包含块是离它最近的开启了定位（position 的值不是 static） 的祖先元素。如果所有的祖先元素都没有开启定位，那么根元素就是它的包含块，它相对于根元素进行定位 $\rightarrow$ html 也被称为根元素、初始包含块；

.main{ 
    background-color: azure;
    position: absolute;
    left: 100px;
}
/*
脱离文档流 --> foot上移
相对于根元素html进行定位 --> 右移 100px
*/

元素的位置
水平布局需要满足 left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区宽度
发生过度约束（上述等式不成立）时，规则与之前一样，只是多添加了 left 和 right：

如果9个值中没有 auto，那么自动调整 right 值以使等式满足；
如果有 auto，那么自动调整 auto 的值 $\rightarrow$ 可以设置 auto 的值： margin、width、left、right；
由于 left 和 right 的值默认是 auto，所以在未设置 left 和 right 且等式不满足时，会自动调整这两个值；

垂直布局需要满足 top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块的内容区高度
发生过度约束（上述等式不成立）时，规则与之前一样，只是多添加了 top 和 bottom：

如果9个值中没有 auto，那么自动调整 bottom 值以使等式满足；
如果有 auto，那么自动调整 auto 的值 $\rightarrow$ 可以设置 auto 的值： margin、height、top、bottom；
由于 top 和 bottom 的值默认是 auto，所以在未设置 top 和 bottom 且等式不满足时，会自动调整这两个值；

$\rightarrow$ 一个同时水平居中和垂直居中的方法：
在这里插入图片描述

.main{ 
    background-color: azure;
    position: relative;
}
.main .mid{
    width: 20px;
    height: 20px;
    background-color: rgb(234, 200, 245);
    position: absolute;
    margin: auto;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

<div class="main">
    <div class="mid"><p>mid</p></div>
</div>

固定定位

固定定位也是一种绝对定位，大部分特点和绝对定位一样；
定位位置 相对于浏览器的视口进行定位（比如盗版小说网页上的奇怪小广告，往下翻小说的时候小广告永远都在那里）；

粘滞定位

粘滞定位和相对定位的特点基本一样，只是在元素到达设定的位置时可以将其固定；
兼容性不好，一般不用；

body{
    height: 3000px;
}
.nav{
    width: 1205px;
    height: 48px;
    background-color: #E8E7E3;
    margin:  100px auto;
    position: sticky;
    top: 20px;
}