随笔分类 -  CSS

CSS 常见 margin 问题解决方法
摘要：父元素 margin 塌陷 只发生在垂直方向，父元素的第一个或最后一个子元素设置了同方向的 margin 值，两个属性之间没有其他内容进行隔离，导致父元素margin-top或margin-bottom塌陷； 当父子元素margin-top均为0px,效果如左图；当橙色父元素margin-top: 阅读全文
posted @ 2022-03-16 18:55 太轻描淡写了 阅读(395) 评论(0) 推荐(0) 编辑
CSS 清除浮动
摘要：为什么需要清除浮动 在一般情况下，一个盒子里使用了 CSS float 属性，导致父级盒子不能被撑开; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>清除浮动</title> <style type="text/css"> 阅读全文
posted @ 2022-03-10 17:50 太轻描淡写了 阅读(48) 评论(0) 推荐(0) 编辑
CSS 中几种常见的垂直居中的方法
摘要：在开发和面试中经常会遇到垂直居中的问题，下面总结了几种常见的实现方法: 几种方法公用的 HTML: <div class="root"> <div class="item"> </div> </div> 通过 display: flex; 实现： .root { width: 500px; heig 阅读全文
posted @ 2022-02-28 19:14 太轻描淡写了 阅读(1473) 评论(0) 推荐(0) 编辑
Flex 布局(弹性盒子、弹性布局)
摘要：简介 Flex 布局（Flexible布局，弹性盒子）是在开发中常用的布局方式； 开启了 flex 布局的元素叫 flex container flex container 里面的直接元素叫做 flex items 设置 display 属性为 flex 或者 inline-flex 的元素可以成为 阅读全文
posted @ 2022-02-28 16:06 太轻描淡写了 阅读(1104) 评论(0) 推荐(0) 编辑
CSS 盒模型
摘要：简单来讲，就是用来装页面元素的一个矩形区域。 CSS 中的盒子模型包括IE盒子模型和标准的W3C盒子模型。 标准盒子模型: IE盒子模型: 从上面的两个图可以看出，这两种盒子模型不同点在于 width 的包含范围。 在标准盒子模型中: css中的宽(width) = content 在IE盒子模型中 阅读全文
posted @ 2022-02-25 19:35 太轻描淡写了 阅读(40) 评论(0) 推荐(0) 编辑
画一条 0.5px 的线
摘要：采用 meta viewport 的方式 <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/> 这样就就能缩放到原来的0.5倍，1px 阅读全文
posted @ 2022-02-25 10:54 太轻描淡写了 阅读(265) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示