![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
zhy前端攻城狮
个人博客:http://zhanghongyublog.com
展开
-
CSS中transition以及时间函数steps()
概念transition:过渡、转变transition 是个简写属性,用于设置四个过渡属性transition-property 规定设置过渡效果的css属性的名称transition-duration 规定完成过渡效果需要多少秒或多少毫秒 必填项 必须带单位transition-timin...原创 2018-03-22 11:43:09 · 5444 阅读 · 0 评论 -
CSS中nth-child和nth-of-type的区别
无空格作用域为冒号前面标签的兄弟节点及其子节点p:nth-child(2):1、表示这是个段落标签;2、这是父标签的第二个孩子元素<div> <p>p1</p> <p>p2 变红 <span>sss变红</span> </p> &原创 2018-02-27 10:53:17 · 287 阅读 · 0 评论 -
flex两列布局,左边固定(可折叠),右边自适应
需求:左边导航栏固定宽200px,并且导航栏可折叠隐藏,右边自适应,填充剩余的宽度. html:&lt;div class="body"&gt; &lt;div class="sidebar"&gt; &lt;div class="bar" id='bar'&g原创 2018-05-31 10:49:47 · 9862 阅读 · 2 评论 -
Flex布局:语法篇
本文转载至阮一峰 Flex布局:语法篇布局的传统解决方案,基于“盒状模型”,依赖“display”属性+‘position’属性+‘float’属性,它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现.一、Flex布局是什么?Flex 是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局.box{ displ...原创 2019-06-04 15:53:07 · 358 阅读 · 0 评论 -
Flex布局:实例篇
本文参考《阮一峰 Flex 布局 实例篇》注:代码稍有改动,原文的宽度刚好够放三个点,有时候,第二个点并未居中,但看起来似乎是居中的,容易引起歧义.本文 demo 源码一、骰子布局骰子的一面,最多可以放置9个点下面,就来看看Flex如何实现,从一个点到九个点的布局。如果不加说明,demo 中的HTML一律如下<div class="box"> <span ...原创 2019-06-04 17:30:38 · 1277 阅读 · 0 评论