H5/CSS
关注
分享
扫一扫
如题
DanmoSAMA
从零开始的前端工程师之路——
展开
-
CSS改变图标颜色
参考博客：CSS改变图标颜色实现思路：使用filter，在原图标旁边生成它的任意颜色的投影。把图标放入容器，通过相对定位改变它和投影的位置。对容器设置overflow:hidden，隐藏原图，只留投影。 黑色边框为容器，仅作演示，开启overflow:hidden后只保留阴影备注：在Chrome浏览器下(低版本)，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完原创 2021-02-17 10:53:20 · 1283 阅读 · 1 评论 -
Float布局，高度塌陷，Clear详解
何为 float 流式布局？遇到元素塌陷如何解决？将float属性设置为left或right，来实现在水平方向上的布局。如果元素塌陷，两种方式解决：开启父元素的BFC（设置overflow:hidden），由于BFC布局规则：计算BFC的高度时，浮动元素也参与计算，所以父元素的高度不会塌陷。使用伪类after，开启display:block，并且开启clear:both（我的理解是：display只要是块级元素，拥有上外边距的都可以，所以display:table也行，但是不能是inline-.原创 2021-02-13 15:11:23 · 310 阅读 · 0 评论 -
波浪文本动画特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="原创 2020-12-17 23:18:51 · 188 阅读 · 2 评论 -
特效学习之路——HTML/CSS 实现某些效果
旋转立方体强调：要对外层容器设置 transform-style:preserve-3d; 否则不能显示3d效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq原创 2020-11-19 17:00:44 · 435 阅读 · 2 评论 -
HTML/CSS 常见问题的处理
图片之间的缝隙方案：vertical-alignimg{ vertical-align:top; /*只要不是默认值baseline即可，可用top/middle/bottom*/}高度塌陷/外边距重叠高度塌陷问题：父元素不设置高度（靠子元素撑开），子元素浮动后，完全脱离文档流，无法撑起父元素高度，导致父元素的高度丢失。外边距重叠问题：对子元素设置margin时，会和父元素的重在一起，导致不能对子元素使用margin来改变其相对于父元素的垂直位置。方案：（对子元素设置）①原创 2020-11-19 14:49:20 · 140 阅读 · 0 评论 -
HTML/CSS 四种实现子元素在父元素内垂直居中的方法
绝对定位和外边距对元素开启绝对定位（包含块开启相对定位，否则是相对根元素）。.box{width:100px;height:100px;background-color:#bfaposition:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}缺点：要求元素的大小确定（有width和height），如果不设置，默认width和height撑开到整个页面。Table cell和align/*box1是box2的父元素*/原创 2020-11-19 08:29:52 · 2035 阅读 · 0 评论 -
HTML、CSS练习心得
做练习的原则：每个练习至少做5次。（在标题后加“|”表示次数）京东图片列表练习简介：创建一个京东图片列表（三张图片纵向排列）。每两张图片之间有一个小白边。知识点：在父元素中创建子元素，调节图片大小，加白边。 First：None Second: 100%是对img标签设置的，不是a或li。 margin-bottom对li设置，不是对img设置。 要对ul设置背景颜色，否则将大的背景设为其它颜色后，margin-bottom会和图片之间留一条缝隙。 本次试验里没用超链接伪类la原创 2020-11-08 16:41:57 · 310 阅读 · 0 评论