![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
词不达意zn
这个作者很懒,什么都没留下…
展开
-
等高布局实现
等高布局实现方法:table方法flex布局同时等宽效果:只需加入flex:1;grip布局padding和margin 思路:首先把左侧的内边距的底部设置为一个很大的数值,比如9999px,左边的底部就被拉长了。接下来再把左边的外边距设置一个-9999px,父元素的边框就被拉了回来,只不过左边的内容依旧被拉长了,那是因为内边距是会把背景颜色进行延伸;正常来说我们设置正外边距会把边框往外推,设置负外边距会把边框往里推,我们要做的就是正是把原来的往外推的边框再往里推,做原创 2021-06-29 10:58:20 · 121 阅读 · 0 评论 -
三栏布局的8种方案
1、双飞翼布局html结构:<div class="container"> <div class="column center"> <div class="center_inner">Main</div> </div> <div class="column left"></div> <div class="column right"></div&g原创 2021-05-19 15:40:55 · 202 阅读 · 0 评论 -
浮动特点及高度塌陷问题
浮动的简介通过浮动可以使一个元素向其父元素的左侧或者右侧移动 使用float属性来设置元素的移动 可选值:none left right注意,元素设置浮动以后,水平布局的等式便不需要强制成立 元素设置浮动以后,会完全从文档流中脱离,不再占用文档流中的位置,所以下边的还在文档流中的元素会自动向上移动浮动的基本特点1.浮动元素会完全脱离文档流,不在占据文档流中的位置2.设置浮动以后的元素会向父元素的左侧或者右侧移动,默认不会从父元素总移出3.浮动元素向左或者向原创 2021-06-27 17:13:34 · 79 阅读 · 0 评论 -
如何解决1px问题
1px问题指的是:在一些Retina屏幕 的机型上,移动端页面的 1px 会变得很粗,呈现出不止 1px 的效果。 原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描 述: 设备像素比 window.devicePixelRatio = 设备的物理像素 / CSS像素。 打开 Chrome 浏览器,启动移动端调试模式,在控制台去输出这个 devicePixelRatio 的值。这里选中 iPhone6/7/8 这系列的机型,输出的结果就原创 2021-06-28 16:09:44 · 2178 阅读 · 0 评论 -
css不使用border创建边框
box-shadow详解box-shadow:x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 inset(内阴影)要求:点击表单时,显示边框<form action=""> <input type="text" placeholder="请输入内容"> input{ border: none; outline: none; border-bottom: 1px solid burlywood; padding-b原创 2021-06-28 17:34:05 · 451 阅读 · 0 评论