随笔分类 -  css

css实现水平居中垂直居中总结
摘要：水平居中 1.若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2.若是块级元素, 该元素设置 margin:0 auto即可. 3.若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配 阅读全文
posted @ 2021-05-17 10:27 前端小白狐 阅读(197) 评论(0) 推荐(0)
CSS:清除浮动小技巧
摘要：##什么是CSS清除浮动？ 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出 阅读全文
posted @ 2021-02-21 09:35 前端小白狐 阅读(85) 评论(0) 推荐(0)
CSS：可见格式化模型BFC与应用
摘要：今天是个懒人，不想复制，就贴个链接吧 这篇文章看过了，总结的很全面了，强推！！！ 参考文章： 可见格式化模型BFC与应用 阅读全文
posted @ 2021-02-20 19:34 前端小白狐 阅读(48) 评论(0) 推荐(0)
css-px，rem，em，vw，vh的区别
摘要：##px rem em vw vh有什么区别？ ###px px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的 ###em em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size） 如当前父元素的字体尺寸未设置， 阅读全文
posted @ 2020-11-19 20:33 前端小白狐 阅读(703) 评论(0) 推荐(0)
css-Grid布局
摘要：##Grid布局介绍 属性有点多，直接点链接： Grid布局详解 阅读全文
posted @ 2020-11-19 20:28 前端小白狐 阅读(102) 评论(0) 推荐(0)
css-flex布局 语法篇
摘要：##快速搞懂flex布局(案例在最后链接里，纯语法，方便记忆) ###什么是flex布局？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 Flex 布局。 .box{ display 阅读全文
posted @ 2020-11-19 16:11 前端小白狐 阅读(190) 评论(0) 推荐(0)
css之html标签中常见的的inline、inline-block、block元素
摘要：##HTML中常见的inline、inline-block、block元素 ####display常用属性值 none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline：内联元素 inline-block：内联块级元素 block：块元素 fl 阅读全文
posted @ 2020-11-13 15:39 前端小白狐 阅读(2417) 评论(1) 推荐(0)