CSS
Passion is Energy
这个作者很懒,什么都没留下…
展开
-
切换 tabs,记忆滚动条
1. 测试滚动条在那个 tag 的代码function findScroller(element) { element.onscroll = function() { console.log(element)} Array.from(element.children).forEach(findScroller);}findScroller(document.body);2. 记忆滚动条的原理保持每个 tab 下的包裹内容的滚动条是独立的不能是 body 或者 tab 下的内容,公原创 2021-09-18 00:36:21 · 579 阅读 · 0 评论 -
(clientHeight, offsetHeight, scrollHeight), scrollTop
1.clientHeight, offsetHeight, scrollHeight 定义clientHeight:returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or marginoffsetHeight:is a measurement which includes the element borders,原创 2021-09-13 09:02:19 · 122 阅读 · 0 评论 -
外边距合并带来的好处
之前刚接触外边距合并和塌陷,以为他们之后坏处。其实不然,好处大大地。????外边距合并的定义需求?需求:每行产品item之间有间隙,16px,同时第一个item距离上边 16px怎么做?为什么这么做?margin: 0.16rem 0.18rem;一开始怎么做?一开始给每个 item 增加 margin-bottom: 0.16rem; 同时给 盒子装 padding-top: 0.16rem;但是,一旦没有 item. 盒子收下来,padding-top 依然存在(卡住 16p原创 2021-05-25 11:29:51 · 73 阅读 · 0 评论 -
3D展示图片
CSS 和 HTML 代码<!DOCTYPE html><html><head> <style> /* Applying Global CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Centering the content of原创 2021-03-27 15:16:19 · 132 阅读 · 1 评论 -
Flexbox使用
Flexbox使用 align-items Vs align-contents align-items 作用于单行align-contents 作用于多行原创 2019-08-13 18:05:10 · 127 阅读 · 0 评论 -
content-box Vs border-box
box-sizing 的使用没有box-sizing,width and height 的计算方式:width + padding + border = actual width of an elementheight + padding + border = actual height of an element因此,actual width and height 会比实际的大...原创 2019-08-13 19:26:38 · 111 阅读 · 0 评论 -
!important 使用
引用:this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’.class { color:red !important; }.outerClass .class { color:blue;}使用!important具有最大的pri...原创 2019-08-14 19:41:02 · 150 阅读 · 0 评论 -
How to show full size background image and enable it fit with its parent element?
Example in Using Material UIThis is one kind of React UI library.code:const useStyles = makeStyles({card: {maxWidth: 300,},CardMedia: {backgroundSize: “cover”}});It is very important for ...原创 2019-08-15 20:21:20 · 216 阅读 · 0 评论 -
flexwrap 可以设置是否要一行显示还是多行显示?
https://css-tricks.com/snippets/css/a-guide-to-flexbox/翻译 2019-09-06 21:15:04 · 1149 阅读 · 0 评论