浮动介绍和定位注意点
程序员文章站
2022-03-26 22:56:00
18年元月24日，一如既往的写了一会，外面下着雪，我在屋内叼着烟，上班好辛苦，成人的世界哪有容易二字，慢慢来，少年你还年轻，重在坚持，不要灰心。 ......
18年元月24日，一如既往的写了一会，外面下着雪，我在屋内叼着烟，上班好辛苦，成人的世界哪有容易二字，慢慢来，少年你还年轻，重在坚持，不要灰心。
<!DOCTYPE html> <html> <head> <title>浮动，清浮动及定位的理解</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } li{ float: left; width: 20px; height: 20px; margin-left: 10px; text-align:center; line-height: 20px; background-color: red; } /*对于浮动的元素，他们有以下特性： 1，浮动的元素排在同一排 2，浮动的元素支持所有的css样式（这句话可以给行标签加上浮动， 那么可以不用来转换标签的样式了。一样支持所有的css样式。） 3，浮动的元素脱离文档流 4，浮动的元素提升层级半级。*/ /*那么我们为什么来清除浮动呢，就是用来处理浮动元素脱离文档流的 问题（父级的盒子高度变为0，下面元素挤上去，影响布局效果） 常见的清除浮动有6中方式 1，父级也浮动 2，父级加高度（比如height写死） 等*/ /*最常用的方式就是为伪类清浮动*/ .clear:after{ content: ""; display: block; clear: both; } clear{ zoom:1; } /*伪类：向选择器定义样式（可以添加特定效果） :link ,:hover,:nth-child等*/ /*这只是我对一个知识点的理解，关于为什么会这样，有这样的效果 便没有过多的测试*/ /*接下来便是一些定位问题了 相对定位*/ div{ position: relative; top: 20px; } /*相对定位是针对自己本身的位置进行定位*/ /*1，他不影响本身的一些特性 2，不使文档脱离文档流*/ /* 绝对定位（值得注意的一点） 它是针对最近的的一层有定位的父级进行定位 *不一定要和relative一起使用（没有定位父级，针对document进行偏移）*/ /*固定定位（不兼容ie6），针对窗口进行定位*/ /*如果绝对定位或固定定位的子级有浮动，可以省略清浮动操作（ 相对定位无法触发bfc）*/ </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div style="width: 100px;height: 100px;background-color: yellow;"></div> </body> </html>