前言
深入了解css三大特性会给予我们在布局的时候极大的便利
一、css的三大特性都有什么？
应该包括三点（概念） 一、盒子模型 web页面的每一个元素都好像一个盒子,将其他的东西可以装进盒子 二、浮动 每一个盒子,可以添加浮动的属性,让其更好的浮现在某盒子旁边 三、定位 将盒子直接定位在某一位置
二、盒子模型
1.盒子属性
更清楚地看到盒子的边界,并且可以对盒子的边界样式加以设定。 盒子属性包括三部分：
①盒子边框border
盒子模型的三大属性：边框类型,边框属性,边框颜色 • 1
代码如下：
<!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布局有极大的帮助,好看的页面底层实现就靠这点,点赞收藏没毛病。如有疑问可在评论区提出。
