提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
前面我们介绍了关于CSS的选择器和一些基础属性，对于CSS的相关知识有了一些了解，本篇文章中，主要给大家介绍一下CSS剩下的关于定位以及布局等的相关知识
一、定位
定位是对标签的位置进行设置，可以让被设置的标签出现在我们想要出现的位置，使得网页整体布局更加简洁美观，以达到我们预设的效果
定位常用的四个位置属性:
left,right,top,bottom
1、相对定位
<style>
* {
padding: 0;
margin: 0;
}
.box1 {
width: 200px;
height: 200px;
background: orange;
}
.box2 {
/*
position属性可以设置定位方式
relative:相对定位
相对定位的元素,可以设置其在标准流中的位置,
但是原来占据的空间仍然存在!!!
因此相对定位未脱离标准流.
*/
position: relative;
left: 200px;
width: 200px;
height: 200px;
background: red;
}
.box3 {
width: 200px;
height: 200px;
background: skyblue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
2、绝对定位
2.1、绝对定位
绝对定位:
子元素相对于最近的已经定位的上级元素进行定位
注意:
1.子元素如果想相对于父元素定位,父元素一般要设置为相对定位relative,如果父元素没有设置定位,那么子元素就会继续向上级寻找已经定位的元素, 一直找下去直到body;
2.绝对定位的元素会脱离标准流布局,它在标准流中的占据的位置不会保留!!!
标准流布局:
在不使用css样式干预布局的情况下,html元素默认的布局方式,即块级元素会独占一行,行内元素会在一行显示.在标准流布局中每个元素都会占据一个空间(坑位),一个元素一般不能占用另一个元素的空间!!!
脱离标准流布局(脱标):
元素脱离了标准流,自然在标准流中占据的空间就不存在了!!!
子元素绝对定位记忆口诀:
父相子绝:子元素绝对定位需要设置父元素相对定位
<style>
*{
padding: 0;
margin: 0;
}
.box{
position: relative;
width: 300px;
height: 300px;
margin-top: 20px;
margin-left: 20px;
background: skyblue;
}
.box>.son{
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background: orange;
}
.box>.son1{
background: red;
width: 100px;
height: 100px;
}
</style>
<body>
<div class="box">
<div class="son"></div>
<div class="son1"></div>
</div>
</body>
2.2、绝对定位的盒子居中
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
background: skyblue;
width: 300px;
height: 300px;
}
.box>.son{
position: absolute;
width: 100px;
height: 100px;
background: orange;
/*
距离左边父元素宽的50%
距离上边父元素高的50%
*/
left: 50%;
top: 50%;
/*
将元素向左,向上移动自身宽高的一半距离
*/
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
3、固定定位
fixed:固定定位
1.相对于浏览器窗口进行定位,不会随着滚动条滚动;
2.脱离标准流,它在标准流中的位置不会保留
3.固定定位和父元素无关
<style>
* {
margin: 0;
padding: 0;
}
.box {
background: skyblue;
width: 500px;
height: 500px;
}
.box1{
margin-top: 20px;
background: red;
width: 500px;
height: 500px;
}
.fix {
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: orange;
}
</style>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="fix"></div>
</body>
黄色方格为设置了固定定位的效果，两张图片对比可以看出，设置了固定定位的盒子不会随着滚动条滚动，而是处于相对固定的位置
4、sticky定位(粘性定位):
可以实现"动态固定"的效果
相当于 position:relative（相对定位）与 position:fixed（固定定位）相结合，在用户滚动到边界时变成relative，在没有滚动到边界时又变成fixed。 粘性和固定都可以将元素固定在某一处，但粘性定位更加灵活。
注意:
1.必须指定top,bottom,left,right4个值之一;
2.父元素的高度不能低于sticky元素的高度;
5、堆叠顺序z-index
z-index:
可以对定位元素设置堆叠的优先级,
值越大越在上面显示,
默认z-index是0,z-index可以写正数,0,负数
注意:
1.只能对设置了定位的元素设置z-index,标准流的元素不能设置;
2.后面的数字是优先级大小,不能加单位!
<style>
* {
margin: 0;
padding: 0;
}
.box {
background: skyblue;
width: 200px;
height: 200px;
}
.box1 {
position: absolute;
top: 0;
left: 0;
z-index: -10;
background: orange;
width: 300px;
height: 300px;
}
</style>
<body>
<div class="container">
<div class="box"></div>
<div class="box1"></div>
</div>
</body>
二、元素的显示隐藏
1、display显示隐藏元素
display:
block:显示
none:隐藏
display隐藏元素,元素原来占据的位置不会被保留
<style>
* {
padding: 0;
margin: 0;
}
.box {
display: none;
width: 300px;
height: 300px;
background: skyblue;
}
.box1 {
width: 300px;
height: 300px;
background: orange;
}
</style>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
这里box的display属性被设为none，所以box被隐藏起来，并且不会占据位置，所以只有box1且显示在顶部
2、visibility显示隐藏元素
visibility:
visible:显示
hidden:隐藏
visibility隐藏元素,元素原来占据的位置会被保留下来
<style>
* {
padding: 0;
margin: 0;
}
.box {
visibility: hidden;
width: 300px;
height: 300px;
background: skyblue;
}
.box1 {
width: 300px;
height: 300px;
background: orange;
}
</style>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
这里box的visibility属性被设为hidden，所以box被隐藏起来，但是不会占据位置，所以只有box1但是因为前面的位置被box占了，所以并不会和display隐藏一样在顶部显示
三、浮动
1、浮动简介
html语言当中另外一个相当重要的概念:标准流或者普通流.
标准流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,
比如块级元素会独占一行,行内元素会按顺序依次前后排列,
按照这种大前提的布局排列之下绝对不会出现例外的情况叫做标准流布局
标准流中想让div横向排列比较困难,我们可以使用浮动float属性,
让div脱离标准流漂浮到标准流文档上面,来实现多个div在同一行的功能
如何让元素浮动?
设置float:left(right),浮动只有左浮动和右浮动
浮动元素的位置如何确定?
一旦元素设置为浮动,它就会脱离标准流,浮动元素的位置是这样确定的:
浮动元素的排列位置,跟上一个块级元素有关系,
如果上一个块级元素有浮动,则浮动元素顶部会和上一个块级元素的顶部对齐;
如果上一个块级元素是标准流,则浮动元素的顶部会和上一个块级元素的底部对齐
注意:
一般会对所有的兄弟元素设置浮动,这样它们就会在一行显示,并且和第一个元素的顶部对齐.
<style>
* {
padding: 0;
margin: 0;
}
.box1 {
width: 100px;
height: 50px;
background: red;
float: left;
}
.box2 {
width: 150px;
height: 50px;
background: blue;
float: left;
}
.box3 {
width: 300px;
height: 50px;
background: orange;
float: left;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
2、清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题
清除浮动的方法:
1.父元素设置overflow:hidden,开启BFC
2.在浮动元素末尾添加一个空的块级元素,并设置clear:both
例如:
<div style="clear:both"></div>
3.使用after伪元素清除浮动,原理就是在浮动元素末尾添加一个块级元素并设置clear:both
例如:
.box:after{
content:'';
display: block;
clear: both;
}
四、BFC
BFC是什么?
BFC:Block Formatting Context(块级格式化上下文),
指一个独立的隔离的容器,该容器里面的子元素不会对容器外元素产生影响.
如何给一个元素开启BFC?
overflow:hidden
display:flex(非inline)
position:absolute/fixed(非relative)
BFC的作用?
给元素容器开启BFC,那么它里面的元素就不会影响其他的元素,
我们利用这个特性可以解决很多css问题,如外边距合并问题.
下面的布局中,子元素设置的上外边距与父元素的外边距产生了合并,
导致父元素距离顶部30px,我们可以给父元素开启BFC,这样子元素就不会对外产生影响了.
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background: skyblue;
overflow: hidden;
}
.box>.son {
width: 100px;
height: 100px;
background: orange;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
五、flex布局（重点）
1、flex布局概念
采用 Flex 布局的元素,我们称为"容器".
它的所有子元素自动成为容器成员.容器存在两根轴主轴和侧轴
默认情况下主轴是水平的侧轴是垂直的 也就是说div的style中写了display:flex
这行代码 div里面的元素就会从左往右排列
容器的属性:
0.display:flex,开启flex布局
1.flex-direction：控制主轴的方向有四个值
row 主轴水平 子元素从左往右排列
row-reverse 主轴水平 子元素从右往左排列
column 主轴竖直 子元素从上往下排列
column-reverse 主轴竖直 子元素从下往上排列
2.justify-content：控制主轴线上子元素的对齐方式 主要有6个值
(这里我们用主轴是水平方向来举例子)
center 子元素水平居中用的多
flex-start 子元素从左往右排列
flex-end 子元素从右往左排列
space-around 子元素距离左右间距相等是中间的一半
space-between 子元素左右紧贴用的多
space-evenly 子元素等间隔分配用的多
3.align-items：侧轴线上子元素的对齐方式 主要有一个属性
center 子元素居中
4.flex-wrap:设置wrap表示自动换行
子元素的属性
flex：子元素宽占主轴剩余宽的份数
将所有子元素的flex值相加得到总份数,
每个子元素的flex值除以总份数得到子元素占主轴剩余宽度的比例
注意:
这里主轴剩余的宽度=主轴总宽度-没有设置flex属性的子元素宽度
flex布局三步走
1.确定容器,给容器元素开启flex布局 display:flex
2.确定主轴方向以及子元素的排列方向 设置flex-direction：
row：主轴水平 容器内子元素从左往右排列
row-reverse：主轴水平 容器内子元素从右往左排列
column:主轴竖直 容器内子元素从上往下排列
column-reverse:主轴竖直 容器内子元素从下往上排列
3.使用justify-content调整主轴上子元素对齐方式使用align-items调整侧轴上子元素对齐方式
如center
2、flex布局演示
<style>
*{
padding: 0;
margin: 0;
}
.container{
/* 开启flex布局之后 子元素默认从左往右排列 */
display: flex;
height: 90px;
width: 400px;
background-color: red;
}
.item1{
flex: 1;
height: 30px;
width: 120px;
background-color: green;
}
.item2{
flex: 1;
height: 30px;
width: 130px;
background-color: blue;
}
.item3{
flex: 2;
height: 30px;
background-color: yellow;
}
</style>
<body>
<div id="app">
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</div>
<script>
</script>
</body>
总结
CSS（层叠样式表）是一种用于定义HTML文档中呈现方式的标记语言。它的作用可以总结为以下几点：
- 样式规则：CSS通过样式规则描述页面元素的呈现风格，如颜色、字体、边框、背景等。
- 可维护性：将CSS样式规则和HTML文档分离，使得页面的样式和内容分离，方便后期的维护和修改。
- 网页性能：使用CSS可以减少HTML文档的体积，提高页面的加载速度。
- 布局控制：CSS可以控制页面元素的位置、大小和布局，从而实现更灵活的页面设计。
- 响应式设计：CSS可以根据不同的屏幕尺寸和设备类型来适应不同的显示方式，实现响应式设计。
- 浏览器兼容性：CSS可以使得网页在不同的浏览器和设备上保持一致的样式效果，从而提高用户体验。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
