2021年7月1日

前端基础---绝对定位

摘要：当position属性值设置为absolute时，则开启了元素的绝对定位绝对定位：1.开启绝对定位，会使元素脱离文档流2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对阅读全文

posted @ 2021-07-01 21:04 leiyanting 阅读(805) 评论(0) 推荐(0)

前端基础---绝对定位

摘要： /* * 定位： * - 定位指的就是将指定的元素摆放到页面的任意位置 * 通过定位可以任意的摆放元素 * - 通过position属性来设置元素的定位 * -可选值： * static：默认值，元素没有开启定位 * relative：开启元素的相对定位 * absolute：开启元素的绝对定位 * 阅读全文

posted @ 2021-07-01 20:34 leiyanting 阅读(214) 评论(0) 推荐(0)

前端基础---消除浮动css

摘要： .floatfix::after{ content: ""; display: block; clear: both; } .floatfix{ zoom: 1; } 阅读全文

posted @ 2021-07-01 20:09 leiyanting 阅读(50) 评论(0) 推荐(0)

前端基础---高度塌陷最终方案

摘要： /* 通过after伪类想元素最后添加一个空白的块元素,然后对齐清除浮动这样做和添加一个div的原理一样,可以达到相同的效果而且不会在页面中添加多余的div,这是我们最推荐的使用方式,几乎没有副作用 */ .clearfix::after{ content: ""; display: block 阅读全文

posted @ 2021-07-01 15:48 leiyanting 阅读(69) 评论(0) 推荐(0)

前端基础---导航条练习

摘要： Index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条练习</title> <link rel="stylesheet" type="text/css" href="css/清除默认样式.css"/> <l 阅读全文

posted @ 2021-07-01 14:58 leiyanting 阅读(94) 评论(0) 推荐(0)

前端基础---解决高度塌陷

摘要： 1. overflow: hidden 2. IE8以下 zoom: 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ border: 10p 阅读全文

posted @ 2021-07-01 12:01 leiyanting 阅读(146) 评论(0) 推荐(0)

前端基础---浮动(二) 文字环绕

摘要：浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ mar 阅读全文

posted @ 2021-07-01 10:49 leiyanting 阅读(936) 评论(0) 推荐(0)

前端基础---浮动(一)

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* 如果希望块元素在页面中水平排列,可以使块元素脱离文档阅读全文

posted @ 2021-07-01 10:35 leiyanting 阅读(101) 评论(0) 推荐(0)

前端基础---文档流中的块与内联元素

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 文档流文档流处在网页的最底层,他表示的是一个页面中的位置我们所创建的元素都处在文档流中元素在文档流中的特点块元素阅读全文

posted @ 2021-07-01 10:11 leiyanting 阅读(77) 评论(0) 推荐(0)

前端基础---overflow的使用

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #00 阅读全文

posted @ 2021-07-01 09:52 leiyanting 阅读(753) 评论(0) 推荐(0)