文章目录
- 前言
- 一、css的三大特性都有什么？
- 二、盒子模型
-
- 1.盒子属性
-
- ①盒子边框border
- ②盒子边角border-radius
- ③盒子阴影 box-shadow
- 2.内边距padding
- 3.外边距margin
- 4.清除所有盒子的内外边距
- 三、浮动
-
- 1.盒子浮动float
- 2.浮动的简单应用
- 3.浮动注意点
- 四、定位position
-
- 1.定位的分类与需求分析
- 2.相对定位relative
- 3.绝对定位absolute【子绝父相】
- 4.固定定位fixed
- 5.粘性定位sticky
- 6.定位分层现象 z-index【优先级的设置】
- 7.定位的其他注意点
- 总结
前言
深入了解css三大特性会给予我们在布局的时候极大的便利
一、css的三大特性都有什么？
应该包括三点（概念）
一、盒子模型
web页面的每一个元素都好像一个盒子,将其他的东西可以装进盒子
二、浮动
每一个盒子,可以添加浮动的属性,让其更好的浮现在某盒子旁边
三、定位
将盒子直接定位在某一位置
二、盒子模型
1.盒子属性
更清楚地看到盒子的边界,并且可以对盒子的边界样式加以设定。
盒子属性包括三部分：
①盒子边框border
盒子模型的三大属性：边框类型,边框属性,边框颜色
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<!--
盒子模型的三大属性：边框类型,边框属性,边框颜色
div是最常用的一个盒子模型
-->
<style>
div {
width: 300px;
height: 300px;
/* border-color: aquamarine;
border-style: dashed;
border-width: 2px; */
background-color: blue;
/*
简写模式
不分先后顺序
*/
border: 5px dashed red;
/* 可以使用方位词针对某一位置进行样式设定
会有覆盖效果,可以先统一指定然后再对特殊的进行单独设置
*/
/*
分别代表边界框颜色、粗细、实线还是虚线。
*/
border-top: saddlebrown 5px solid;
border-bottom: magenta 5px dotted;
}
</style>
</head>
<body>
<div>Hello world</div>
</body>
</html>
效果如下：
②盒子边角border-radius
可以通过修改盒子的外观样式,但是盒子占有的位置还是不放弃
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
盒子边角是拿相同长度的圆去截角得到的
如果要得到圆形就拿正方形边长一半做圆或者w50%
椭矩形,就拿矩形的高做圆的半径
盒子的角也遵守顺时针原则,可以分别给参数
或者用方位词
注意,用方位词时上下在前,左右在后
-->
<style>
.div1 {
width: 200px;
height: 200px;
background-color: blueviolet;
border-radius: 50%;
/* 或者width:100px */
}
.div2 {
width: 200px;
height: 50px;
background-color: blueviolet;
border-radius: 25px;
}
.div3 {
width: 200px;
height: 200px;
background-color: blueviolet;
/*左上、右上、右下、左下*/
border-radius: 10px 20px 30px 40px;
}
/*
单独设置
*/
.div4 {
width: 200px;
height: 200px;
background-color: blueviolet;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
</style>
</head>
<body>
<div>圆</div>
<div class="div1"></div>
<div>椭矩形</div>
<div class="div2"></div>
<div>混合使用</div>
<div class="div3"></div>
<div>方位</div>
<div class="div4"></div>
</body>
</html>
效果如下：
③盒子阴影 box-shadow
盒子的阴影,本案例是在鼠标聚焦在盒子上之后,阴影展现出来
盒子阴影有五大部分
水平垂直距离,阴影的深浅，阴影的面积，阴影的颜色，外阴影还是内阴影
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blueviolet;
}
/*
阴影的浮动
*/
div:hover {
/* 阴影一般做成透明的 */
/* 水平垂直距离,阴影的深浅，阴影的面积，阴影的颜色，外阴影还是内阴影*/
box-shadow: 10px 10px 10px rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
2.内边距padding
盒子内的东西距离盒子边框的大小、衡量的单位是px
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 20px;
/* padding: 10px; */
padding: 10px 20px 100px 200px;
border: deeppink 1px dashed;
}
/*
padding可以分方位
一个属性代表所有边距离文字部分的距离
两个属性,第一个指上下,第二个指左右
三个属性上,左右,下
四个属性,上，右，下，左；
*/
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
效果如下：
3.外边距margin
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
外边距与内边距语法一样,可以对单独的某一方位设置,也可以对整体进行设置
方位的使用与padding用法一致
外边距是盒子与外界间隔的距离
如果只是一个属性就是四面外边距均是这个值
如果是两个属性是这个值,那么就是左右上下分别是这两个值。
-->
<style>
div {
width: 300px;
height: 300px;
margin: 100px;
background-color: aquamarine;
border-color: chartreuse;
border-width: 3px;
border-style: dashed;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
</div>
<div>
<p>Hello World</p>
</div>
</body>
</html>
效果如下：
4.清除所有盒子的内外边距
一般哲一步作为项目初始化使用，使用前面讲到过的通配符选择器
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
对于一些自带的盒子模型,通常会有默认的内外边距,而这些不知道的内外边距会对开发带来影响,所以
一般在最开始的部分进行内外边距的清除
-->
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>K</li>
</ul>
<ul>
<li>H</li>
<li>A</li>
<li>B</li>
</ul>
</body>
</html>
效果如下：
三、浮动
在网页布局的时候,往往需要对界面进行灵活的布局,简单的标准流只能满足简单的
需求无法满足网页更加灵活的设计,浮动可以将盒子进行分层布局,使网页布局更加
灵活浮动的盒子自动有行内块元素的属性,并且会主动放弃自己的位置，如果他的
下面有大盒子的话会进行叠加覆盖
1.盒子浮动float
以下案例是将盒子浮动在父类盒子的左边
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 浮动盒子的语法 */
.nav {
float: left;
background-color: aquamarine;
background: rgba(127, 255, 212, 0.7);
width: 300px;
height: 300px;
}
.qwe {
background-color: blueviolet;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="qwe">
Hello
<div class="nav">
Hello
</div>
</div>
</body>
</html>
效果如下：
2.浮动的简单应用
浮动一般用于小大盒子去固定小盒子,使小盒子有更良好的布局
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
盒子浮动一般用于大盒子嵌套小盒子,通过固定大盒子的位置,使得小盒子有较好的位置
-->
<style>
/* 场景1 */
.nav {
background-color: blueviolet;
width: 800px;
height: 600px;
margin: 0 auto;
}
.qwe {
background-color: cadetblue;
width: 200px;
height: 600px;
float: left;
}
.qqw {
background-color: chartreuse;
width: 600px;
height: 600px;
float: left;
}
/* 场景2 */
.qwe1 {
width: 750px;
height: 50px;
background-color: darkblue;
margin: 30px auto;
}
.qwe2 {
width: 50px;
height: 50px;
background-color: darkcyan;
margin-right: 20px;
float: left;
}
.qwe3 {
width: 50px;
height: 50px;
background-color: darkcyan;
float: left;
}
</style>
</head>
<body>
<div class="nav">
<!--
通过将外层的盒子移到中间而将所有的盒子移到中间
-->
<div class="qwe"></div>
<div class="qqw"></div>
</div>
<div class="qwe1">
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe3"></div>
</div>
</body>
</html>
效果如下：
3.浮动注意点
1.浮动和标准流的父盒子搭配
先用标准流的父元素盒子排列上下位置,之后用内部子元素采取浮动排列左右位置
2.一个盒子浮动了,理论上其余的兄弟盒子也要浮动
一个盒子里面有多个盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
四、定位position
1.定位的分类与需求分析
<!--
在板块的排版中,有时需要将标签根据自己的需求进行变换位置,而浮动与标
准流可以满足板块大体的布局对于小模块的灵活布局较为费力,所以可以用
定位进行对小模块的灵活布局
-->
<!--
定位的分类
1.静态定位(基本不用)
2.相对定位(一般用于父模块的定位)
3.绝对定位(一般用于子模块的定位)
4.固定定位(一般用于导航栏的定位)
5.粘性定位(IE浏览器一般不支持,所以用的也很少)
定位时先考虑各个模块的关系,再结合父模块对子模块进行定位
先进行定位类型的选择,再进行定位位置的选择
-->
2.相对定位relative
<!--
相对定位,不会放弃自己的位置,定位时相对于自己的位置进行定位
-->
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
相对定位,不会放弃自己的位置,定位时相对于自己的位置进行定位
-->
<style>
.nav {
/*这里的position将标签添加定位属性后,可以对top、left、right、buttom设置
大小,单位为px，代表在父元素的什么位置
*/
position: relative;
top: 20px;
left: 100px;
margin: auto auto;
width: 300px;
height: 300px;
background-color: blueviolet;
border-color: brown;
border-width: 5px;
border-style: dashed;
}
</style>
</head>
<body>
<div class="nav">Hello World</div>
</body>
</html>
效果如下：
3.绝对定位absolute【子绝父相】
<!--
绝对定位：一般用于子类的定位,相对于父模块而言,所以有子绝父相一说
子绝父相:必须是子类是绝对定位,父类是相对定位类型,
如果子类有定位属性父类没有定位的话,不能实现子类的定位
绝对定位会放弃模块的位置,并且定位后的位置是相对父类位置而言
-->
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
position: absolute;
right: 5px;
top: 5px;
width: 300px;
height: 300px;
background-color: burlywood;
margin: 0 auto;
border-width: 5px;
border-color: chartreuse;
border-style: dashed;
}
.qwe {
position: relative;
width: 800px;
height: 800px;
background-color: darkcyan;
margin: 0 auto;
border-style: dashed;
border-width: 5px;
border-color: darkmagenta;
}
</style>
</head>
<body>
<div class="nav">Hello Word</div>
<div class="qwe">Hello
<div class="nav">World</div>
</div>
</body>
</html>
效果如下：
方块1是相对于背景图进行的定位,方块2是相对于中间方块定的位
4.固定定位fixed
将盒子固定在某一位置,随着页面的下拉盒子在原来的位置不动
<!--
固定定位：模块会放弃自己的位置,然后会在可视窗口固定下来
不会因为页面的变换而移动自己位置
-->
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.root {
background-image: url(../../Snipaste_2021-07-20_15-42-17.png);
display: inline-block;
width: 1908px;
height: 980px;
background-repeat: no-repeat;
}
.nav {
position: fixed;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
background-image: url(../../回到首行.png);
}
</style>
</head>
<body>
<h4 id="head"></h4>
<div class="root">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<a href="#head">
<div class="nav">
</div>
</a>
</body>
</html>
效果如下：
5.粘性定位sticky
<!--
粘性定位是指,面板上沿距离上边缘线一定程度后,会触发小部件的固定
粘性定位,也会让出自己的位置
-->
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
粘性定位是指,面板上沿距离上边缘线一定程度后,会触发小部件的固定
粘性定位,也会让出自己的位置
-->
<style>
.nav {
background-image: url(../../Snipaste_2021-07-20_15-42-17.png);
display: inline-block;
width: 1908px;
height: 980px;
background-repeat: no-repeat;
}
.qwe {
margin: 200px;
position: sticky;
top: 10px;
background-color: darkorchid;
}
</style>
</head>
<body>
<div class="qwe">Hello</div>
<div class="nav"></div>
</body>
</html>
效果如下：
使用粘性定位后,盒子一旦到达设定的位置就会进行定位【不在那个位置就不会】
6.定位分层现象 z-index【优先级的设置】
<!--
定位分层有优先级,优先级越高则越先在眼前展示
优先级语法是z-index: 不带单位的数值
其中不带单位的数值理论可以无限加,显示的时候,谁的大就谁的显示在最上面
-->
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
position: absolute;
width: 300px;
height: 300px;
background-color: skyblue;
z-index: 2;
}
.qwe {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
z-index: 3;
}
.qqw {
position: absolute;
width: 40px;
height: 40px;
background-color: red;
z-index: 5;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="qwe"></div>
<div class="qqw"></div>
</body>
</html>
效果如下：
7.定位的其他注意点
1.如果父类没有使用定位,则子类的定位不会生效
2.使用定位后标签会自动转换成为行内块元素,如果没有指定宽和高
则会根据文字的多少进行标签的大小自我调节
3.定位后各个标签之间不会像浮动一样产生模块塌陷问题
4.浮动不会压住底层标签的文字,定位会将底层标签的文字进行覆盖
总结
css的三大特性需要熟练地使用,对我们进行html布局有极大的帮助,好看的页面底层实现就靠这点,点赞收藏没毛病。如有疑问可在评论区提出。