![](https://img-blog.csdnimg.cn/20210116214208116.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
css UI 类代码
爱吃鸡蛋的程序员
努力学习 muscle up
展开
-
css: visibility:hidden 和 display:none 相同点和不同点
相同点:如果元素上有点击事件, 都不会响应了, 不会响应了他们都会被插入 dom tree 中不同点 :visibility:hidden仍然占据文档流’’display:none 则不会有文档流里面, 当我们用 chorme inspec 的时候, 当我们在 dom tree 点击该元素的时候, 是无法有对应的显示出来的...原创 2021-02-07 14:40:13 · 226 阅读 · 0 评论 -
css: transform(2d, 3d转换) 与 transition(过度), Animation(一次性全弄懂)
注意:1. transform 属性中, 如果有同名属性则是覆盖 而不是合并例子:main { transform: translate(300px, 400px);}main:hover { transform: rotateX(45deg);}在上面的例子中, 带有 hover的 main 标签在做第下面的变换的时候, 并不会把上面的 translate(300px , 400px) 给带上, 而是直接覆盖2. transform 中的 值定义的先后有区别div { t原创 2021-01-23 23:21:20 · 459 阅读 · 1 评论 -
position:sticky 粘性定位 (sticky) 与 固定定位
position:sticky是css定位新增属性;可以说是static(没有定位) 和 固定定位fixed 的结合;它主要用在对 scroll 事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top:100px);position:sticky这时的效果相当于fixed定位,固定到适当位置position 的其他定位absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过"left",.原创 2021-01-21 14:40:17 · 5939 阅读 · 1 评论 -
css:图形绘制
clip-path() 可以绘制各种类型的 div, 默认是矩形,clip-path( 50% 0, 0 100% , 100% 100%). 绘制等边三角形原创 2021-01-20 21:50:52 · 67 阅读 · 0 评论 -
css:文本环绕
文本环绕方式shape-outside 可以控制该 div 与 其同级的文字的环绕方式, 是环绕 div 的外边框, 内边框 还是 content具体可以查看 shape-outside原创 2021-01-20 21:46:49 · 631 阅读 · 0 评论 -
css: 浮动特性(高度塌陷)(BFC: overflow)
浮动类型原创 2021-01-20 18:19:26 · 176 阅读 · 0 评论 -
css 文本
div { text-align:center; //left, right, justify vertical-align: middle; // top, bottom ...}原创 2021-01-19 19:07:00 · 95 阅读 · 0 评论 -
css:table
table 标签table 标签中常用的子元素:<tr>代表行<td>代表行中的单行格子table 常用技巧1. 单元格边框合并table { border-collapse:collapse;}这样单元格与单元格之间就是看上去合并的效果, 中间没有空隙2. 空单元没有数据单元格不展示<table> <tr> <td>1</td> <td>2</td> <td&原创 2021-01-19 19:54:47 · 152 阅读 · 0 评论 -
css: 渐变技巧
css: 渐变处理线性渐变辐射渐变(从中间到四周)渐变标志位**1. 渐变起止位置****2. 渐变点定位**线性渐变1. css3 之前的处理渐变技巧截取图像渐变 1 px 大小, 然后 background-image: url(1px.png) repeat2. css3 自带background: linear-gradient(rgba) 实现渐变 div { background:linear-gradient(90deg, red, green, blue)原创 2021-01-15 18:58:55 · 446 阅读 · 0 评论