CSS布局
关注
分享
扫一扫
Fimooo
这个作者很懒，什么都没留下…
展开
-
三栏布局的五种实现方式及衍生实现类似的“圣杯布局”
圣杯布局的四种实现方式实现的效果图Float布局实现Position：absolute实现Flex实现Grid实现实现的效果图Float布局实现 <style> html *{ padding: 0px; margin: 0px; } .la...原创 2019-02-17 21:59:29 · 302 阅读 · 0 评论 -
实现带Icon的Input登录框布局
带Icon的Input登录框布局效果思路细节问题如何将icon放入input？如何在input聚焦前后，精准完成嵌套如何制作圆角如果遇到了对齐的问题input聚焦后，修改div-icon样式实现效果思路基本思路细节问题如何将icon放入input？——position:relative\absolute注意position:relative脱离文档流，但是其本身的位置是在文档中占...原创 2019-04-02 14:17:25 · 3392 阅读 · 0 评论 -
table布局的对齐问题
table布局的对齐问题理想基本布局实际效果找问题总结理想基本布局实际效果找问题放大n倍观察然后天真的开始找padding的问题…可是我的代码里没有设置padding粗暴!important去掉padding试试…只是试验一下是不是padding引起的OK，不是看着这么错落有序的…排列（隐隐的是另一种有序…）有没有可能是table布局的隐形设置呢？我拿出了…ve...原创 2019-04-01 09:52:26 · 3357 阅读 · 0 评论 -
问题杂记
问题杂记汇总实用杂记chrome跨域，在chrome属性中加上：方法① --enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files --args --disable-web-security --user-data-dir –allow-file-access-from-files方法②–disable-web-...原创 2019-02-15 10:52:30 · 342 阅读 · 0 评论 -
flex在IE 10-11的内容溢出表现
今天在调页面的自适应，将页面的骨架用flex布局了，然后在IE中出现了溢出的现象。布局如下:结果在main主题中，left\center\right，怎么拉伸IE11浏览器都不换行，而且出现内容溢出的效果。经搜查…发现…IE11对flex子元素的flex属性不像其他浏览器（chrome、Firefox等）一样。flex:1在chrome、Firefox等浏览器下，会默认成flex...原创 2019-03-26 09:32:41 · 2055 阅读 · 0 评论 -
CSS背景颜色透明度兼容
chrome（ 73.0.3683.86）和Firefox(66.0.1 )中调试 rgb(255,255,255,0.1) 可以只使背景色透明360浏览器，IE11，IE6、7、8 均不行360浏览器获取与当前IE同版本的内核，所以调好IE即可。IE11中设置rgba(255,255,255,0.8)即可IE6、7、8 中用IE专属滤镜 filter:Alpha(opacity=x)，...原创 2019-03-25 10:21:00 · 1408 阅读 · 0 评论 -
都在同一行为啥对不齐？（vertial-align）
今天遇到一个问题，模拟list-type的div实心方块和标题对不齐…（放大n倍看效果！！哈哈）我朋友教我，在“需要”前面加个x试试然后…我发现了，x和div能对齐，但中文却不行。是因为对准基线的问题，vertial-align的默认值，是底部基线对齐，但中文的基线不在底部，所以出现误差。设置vertical-align: middle;统一基线后，再来看效果okkkk！完工！...原创 2019-03-20 13:51:21 · 598 阅读 · 0 评论 -
整个页面使用背景图
整个页面使用背景图 <style> body{ background-image:url("../BTU.png"); background-repeat:no-repeat ; background-size:100% 100%; background-attachme...原创 2019-03-20 10:17:02 · 855 阅读 · 0 评论 -
CSS选择器比较
CSS选择器比较[attribute^=value]和[attribute*=value]和[attribute$=value][attribute^=value]a[class^="a-icon"] (demo)a[class^="a-icon"] (效果)a[class^="a-icon"] (小结)[attribute*=value]a[class*="a-icon&q原创 2019-03-11 14:35:19 · 288 阅读 · 0 评论 -
左右两栏布局方法之一——计算属性
左右两栏布局方法之一——计算属性思路：代码：效果：思路：右侧固定宽度左侧使用width：clac（）计算属性动态计算视图宽度，如100%-300（百分百视图宽度下-右侧固定宽度）设置左浮动清除浮动带来的布局影响代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2019-06-26 09:31:37 · 256 阅读 · 0 评论