21、float浮动
文档流：文档流是文档中可显示对象在排列时所占用的位置
float特性：加浮动的元素会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
float取值：left、right、none（默认）
浮动元素不会撑开父容器的大小，只有同属于文档流才可以撑开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ border: 1px black solid; } #box1{ width: 100px; height: 100px; background-color: yellow; float: left; } #box2{ width: 200px; height: 200px; background-color: red; float: left; } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
由于浮动，此时body高度为0
如果将box2的浮动去掉，则body的高度会被box2撑开到200px
float注意点
1.只会影响后面的元素
如果只给box2设置浮动，则如下
2.内容默认提升半层
- 蓝色块为1层，蓝色块上的文字为1.5层，红色为2层，所以实现文字环绕浮动效果
3.默认宽根据内容决定
如果没设置宽时，本身div容器会和父容器宽相同，然而设置浮动之后宽会由内容决定
4.换行排列
5.主要给块元素添加，但也可以给内联元素添加
块元素原本按照上下排列，添加浮动后可以实现左右排列而方便布局
清除浮动
上下排列：clear
left、right、both
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1{width: 100px; height: 100px; background-color: red; float: left;} #box2{width: 200px; height: 200px; background-color: #4CC9FF; /* clear: left; */} </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html>
加上clear: left;–>
嵌套排列：
1,固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
2.父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
3.overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响
4.display：inline-block，不推荐，父容器会影响到后面的元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* #box1{width: 100px; height: 100px; background-color: red; float: left;} #box2{width: 200px; height: 200px; background-color: #4CC9FF; clear: left;} */ #box1{width: 200px; border: 1px black solid; /* overflow: hidden */ display: inline-block} #box2{width: 100px; height: 200px; background-color: red; float: left} </style> </head> <body> <!-- <div id="box1"></div> <div id="box2"></div> --> <div id="box1"> <div id="box2"> </div> </div> aaa </body> </html>
5.设置空标签：不推荐，会多添加一个标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1{width: 200px; border: 1px black solid;} #box2{width: 100px; height: 200px; background-color: red; float: left} #clearfloat{clear: both} /*使得clearfloat不受box2的浮动影响，即这两个div上下排列 又因为clearfloat与box1都属于文档流，可以撑开box1*/ </style> </head> <body> <div id="box1"> <div id="box2"></div> <div id="clearfloat"></div> </div> aaa </body> </html>
- 6.after伪类：推荐，是空标签的加强版，目前各大公司的做法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> #box1{width: 200px; border: 1px black solid;} #box2{width: 100px; height: 200px; background-color: red; float: left} .clear::after{content:""; clear: both; display: block;} /* clear标签只会对块起作用，而content内容是内敛，所以需要先display换为块*/ </style> <body> <div id="box1" class="clear"> <div id="box2"> </div> </div> aaa </body> </html>
22、position定位
css中position属性用于指定一个元素在文档中的定位方式，top、right、bottom、left属性则决定了该元素的最终位置
取值
1.static（默认）
2.relative
3.absolute
4.fixed
5.sticky
relative相对定位
1.如果没有定位偏移量，对元素本身没有任何影响
2.不使元素脱离文档流
3.不影响其他元素布局
4.left、top、right、bottom是相对于当前元素自身进行偏移的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1{width: 100px; height: 100px; background-color: red;} #box2{width: 100px; height: 100px; background-color: yellow; position: relative; left: 100px; top: 100px;} #box3{width: 100px; height: 100px; background-color: blue;} </style> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> </body> </html>
absolute绝对定位
1.使元素完全脱离文档流
2.使内联元素支持宽高（让内联具备块特性）
3.使块元素默认的宽根据内容决定（让块具备内联的特性）
4.如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{width: 300px; height: 300px; border: 1px black solid; margin: 50px;} #box2{width: 100px; height: 100px; background-color: red;} </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> </body> </html>
效果为：
如果给box2加上绝对定位position: absolute; left: 10px; top: 10px
则变为：
如果给box1加上定位position: relative
则变为：
即定位是相对于最近一个有定位的元素，如果没有则相对于整个文档
fixed固定定位
1,使元素完全脱离文档流
2.使内联元素支持宽高（让内联具备块特性）
3.使块元素默认的宽根据内容决定（让块具备内联的特性）
4.相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，即无论怎么滚动都在那个位置，且与祖先元素无关
可以用于做返回顶部功能
sticky黏性定位
在指定的位置，进行黏性操作
div{background：red；position：sticky; top: 0
拖动前（无区别）：
拖动滚动条后：
z-index定位层级
- 默认层级为0
如果没有设置层级时，两个容器重叠时，默认后设置的图层会在上面，此时可以通过设置容器的层级来更改。 - 嵌套时候的层级问题
- 比较层级时通过外层比较，一个嵌套结构如果外层的层级低，里层的再高也不起作用，只有当外层没有设置层级时，里层的层级才会起作用
导航栏的实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{margin: 0; padding: 0;} ul{list-style: none;} #menu{width: 100px; height: 24px; border: 1px black solid; margin: 20px auto; text-align: center; position: relative;} #menu ul{width: 100px; border: 1px black solid; position: absolute; left: -1px; top: 24px; display: none; background-color: white;} #menu:hover ul{display: block;} #menu li:hover{background-color: antiquewhite;} p{text-align: center;} </style> </head> <body> <div id="menu"> 卖家中心 <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </div> <p>测试段落</p> </body> </html>
23、CSS添加省略号
- width 必须有一个固定的宽
- whit-space：nowrap 不让内容折行
- overflow：hidden 隐藏溢出的内容
- text-overflow：ellipsis 添加省略号
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #content{width: 100px; height: 20px; border: 1px black solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} </style> </head> <body> <div id="content"> 再没更卑微oh no，即使唉声叹气还要当趣味 </div> </body> </html>
该操作只能实现单行的省略
24、CSS Sprite
特性：CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载
好处：可以减少图片的质量，网业的图片加载速度快
减少图片的请求次数，加快网页的打开
25、CSS圆角设计
border-radius：20px
border-radius：20px
取值实际表示的是相切圆的半径
当取值等于块的宽和高的一半时（或50%），则得到一个圆
写两个值时，前一个代表左上和右下，后一个代表左下和右上
写四个值时，表示从左上开始顺时针到左下
取值为20px/40px时，代表相切的是一个宽为20px，高为40px的椭圆
height：100px；width：50px；border-radius：100px 100px 0 0则得到半圆
