随笔分类 -  css

css布局-中间内容居中，右侧内容可隐可显(看剩余宽度显示)
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-11-10 00:08 abcdefgab 阅读(82) 评论(0) 推荐(0)
margin_BFC
摘要：BFC解决的问题 两列浮动布局 父元素高度塌陷 margin重叠 display:block和display:table在处理BFC时的区别 //在父元素和子元素之间没有内容的情况下，当父元素、子元素都设置margin-top，子元素margin-top将不再起作用 <head> <meta cha 阅读全文
posted @ 2021-04-17 22:14 abcdefgab 阅读(55) 评论(0) 推荐(0)
css实现九宫格
摘要：1.grid布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co 阅读全文
posted @ 2021-04-10 10:38 abcdefgab 阅读(138) 评论(0) 推荐(0)
开始记录看到的好文章(CSS)
摘要：-1.flex布局在线练习 -2.饥人谷在线练习 1.CSS布局奇淫巧计之-强大的负边距 2.负margin的原理及应用 3.10 分钟理解 BFC 原理 4.CSS学习笔记——深入理解BFC 这个挺好的，就是看到最后一点点有点懵 5.CSS Grid 网格布局教程 阮一峰老师的博客,真不错 6.C 阅读全文
posted @ 2021-04-10 10:10 abcdefgab 阅读(51) 评论(0) 推荐(0)
display:none和visibility:hidden区别
摘要：这两个的区别常常容易忘记，做下笔记： 1.display:none会引起回流，而visibility：hidden不会引起回流 2.display：none不会在页面上显示，不会占据页面布局，但是存在html中，visibility：hidden会在页面显示，只不过看不到，也不可操作，也存在于htm 阅读全文
posted @ 2021-03-30 22:39 abcdefgab 阅读(87) 评论(0) 推荐(0)
CSS实现三点色子
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-03-09 20:43 abcdefgab 阅读(647) 评论(0) 推荐(0)
CSS圣杯和双飞翼布局
摘要：圣杯布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten 阅读全文
posted @ 2021-03-09 20:34 abcdefgab 阅读(46) 评论(0) 推荐(0)
设置元素居中
摘要：.page_palybar>.playbar_btns>.btn { /* float: left; */ display: inline-block; width: 40px; height: 40px; background-color: #C52F30; border-radius: 50%; 阅读全文
posted @ 2020-10-03 22:25 abcdefgab 阅读(119) 评论(0) 推荐(0)
设置滚动区域的解决方法
摘要：1.设置父元素如body的宽高，并设置overflow:hidden 2.设置上一级父元素的box-size：border-box； 阅读全文
posted @ 2020-10-03 21:08 abcdefgab 阅读(136) 评论(0) 推荐(0)
清除浮动
摘要：.clearfix:after { content:""; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ /*IE6、7专用*/ *zoom:1; } 给父元素添加 阅读全文
posted @ 2020-08-18 16:10 abcdefgab 阅读(87) 评论(0) 推荐(0)