摘要：
html结构 <body> <div class="father"> <div class="son"></div> </div> </body> CSS结构 <style> .father{ position: relative; width: 400px; height: 300px; back 阅读全文
posted @ 2021-12-29 22:06
嘉琦
阅读(28)
评论(0)
推荐(0)
摘要：
1.相对定位：position：relative； 属性名：position 属性值：relative； 特点：1.相对自己的位置移动 2.配合方位名词移动，如：top、left、right，bottom 3.相对定位，位置虽然移动了，但原来的位置还在，并未脱标应用场景： 1.配合绝对定位使用（子绝 阅读全文
posted @ 2021-12-29 21:17
嘉琦
阅读(92)
评论(0)
推荐(0)
摘要：
BFC的作用和创建1.html标签是BFC盒子2.浮动元素是BFC盒子3.行内块元素是BFC盒子4.overflow属性值不为visible，如：auto、hidden。。。作用：1.清除浮动； 2.解决塌陷注意：display:table也可以生成BFC的原因在于Table会默认生成一个匿名的ta 阅读全文
posted @ 2021-12-29 20:13
嘉琦
阅读(77)
评论(0)
推荐(0)
摘要：
1.单伪元素清除法；清除浮动 .clearfix::after{ content: '.'; display: block; clear: both; height: 0; /* 这两行代码是清除content里.的这个内容*/ visibility: hidden; } 清除浮动之前，两个盒子重叠 阅读全文
posted @ 2021-12-29 19:52
嘉琦
阅读(59)
评论(0)
推荐(0)
摘要：
效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li><a href="#">Redmi 手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> </ul> CSS 阅读全文
posted @ 2021-12-29 18:48
嘉琦
阅读(145)
评论(0)
推荐(0)
摘要：
html代码： <body> <div class='red'> </div> <div class='green'> </div> <div class='blue'> </div> </body>浮动特点： 1.使用浮动时会脱标，被脱标的物体会向上空飘去，不占用正常流的位置， 此时用的是 .gr 阅读全文
posted @ 2021-12-29 16:38
嘉琦
阅读(696)
评论(0)
推荐(0)
摘要：
一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> <a herf='#'>导航3</a> </div> /* 匹配第一个子元素，并且为a标签 */ div a:first-child{} 注意：如果第一个元素不 阅读全文
posted @ 2021-12-29 15:10
嘉琦
阅读(563)
评论(0)
推荐(0)
摘要：
场景：两个相互嵌套的块级元素，父子元素相互紧贴margin-top会合并作用在父元素的子元素结果：导致两个盒子同时移动 解决方法： 1.给父元素设置overflow：hidden 2.给父元素设置浮动 /* float:left */ 3.将父元素转为行内块元素 /*display:inline-b 阅读全文
posted @ 2021-12-29 14:20
嘉琦
阅读(179)
评论(0)
推荐(0)
浙公网安备 33010602011771号