HTML+CSS
「已注销」
这个作者很懒,什么都没留下…
展开
-
HTML+CSS06 Grid布局
文章目录与Flex的比较兼容性基本概念容器属性改变容器划分网格`fr`关键字`repeat`函数`auto-fill`关键字网格线名称网格间距划分区域网格填充顺序单元格内容对齐容器对齐缩写项目属性分配网格分配区域指定项目位置实例两栏布局圣杯布局参考与Flex的比较Flexbox是一维布局系统,适合做局部布局,比如导航栏组件。Grid是二维布局系统,通常用于整个页面的规划。二者从应用场景来说并不冲突。虽然Flexbox也可以用于大的页面布局,但是没有Grid强大和灵活。二者结合使用更加轻松。兼容性兼原创 2020-07-21 17:09:07 · 425 阅读 · 0 评论 -
文字05 自定义字体
自定义字体相关知识整理原创 2019-12-06 11:09:39 · 1385 阅读 · 0 评论 -
HTML+CSS40 CSS matrix函数
matrix()是CSS的transform的一个基础属性,用它可以实现很多高级、复杂的效果,实际上transfrom的translate、rotate等都是在matrix的基础上实现的简化版的语法。原创 2019-12-02 11:17:51 · 272 阅读 · 0 评论 -
HTML+CSS39 渐变效果
CSS中的渐变效果,学习笔记。原创 2019-10-21 14:47:46 · 380 阅读 · 0 评论 -
HTML+CSS38 两列布局
面试的时候经常遇到一个比较基础的问题,如何实现一列定宽、一列自适应的两列布局?我实际工作中一般都会使用flex来进行布局,但是有的时候想简单一点,就直接用float布局,结果阴沟里翻了船,手写代码除了错误。所以需要好好总结一下,都有哪些常用的方式。准备工作HTML结构:<body><div class="left left1">固定宽度200px</div&g...原创 2019-10-18 10:12:47 · 532 阅读 · 0 评论 -
HTML+CSS33 关于居中的总结
准备工作HTML结构:<div class="container"> <span class="text">你好</span></div>公共样式:.container { width: 300px; height: 300px; background: royalblue;}.text { background:...原创 2019-06-20 19:44:22 · 224 阅读 · 0 评论 -
HTML+CSS34 1px边框问题的解决方案
现象及原因在移动端开发时,设计图中的1px的边框,如果我们直接在CSS中设置边框的宽度为1px,实际上在设备上显示的并不是1px。这是因为不同的手机有着不同的像素密度,即window.devicePixelRatio属性,它反应的是物理像素与逻辑像素的比值,IPhone6的dpr是2,也就是说,对于IPhone6来说,CSS的1px显示时会显示为2px的像素当设置为1px的边框时,移动端的显示...原创 2019-07-11 10:45:11 · 2798 阅读 · 0 评论