
html/css
文章平均质量分 77
XBQ0510Qi
这个作者很懒,什么都没留下…
展开
-
浮动流的半脱标性
浮动流是一种半脱离标准流的排版方式,之所以这么说,是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置,跟标准流还是有一定的关系,比如说浮动的元素在浮动之前处于标准流的第二行,那么他浮动之后也是处于浮动流的第二行,不会去找其他行的浮动元素去贴靠,打一个比方就是:浮动流就是在标准流上面覆盖的一层透明薄膜,元素浮动之后就会被从标准流中扔到浮动流这个薄膜上,他在这个薄膜上的位置还是以前在标准流原创 2018-01-10 21:38:32 · 849 阅读 · 1 评论 -
通过transition实现手风琴效果
手风琴是我们在前端设计中经常看到的一种图片的展示方式,其中最浅显易懂就是通过css的过渡属性(transition)来处理,首先我们脑补一下transition的用法,那就是经常被提到的动画三步骤,我们这里就以width为例来简单的介绍一下,我们实现一个100px宽度的div在鼠标悬停两秒之后开始发生过渡效果,并在两秒完成过渡,最后宽度过渡为500px1、编写过渡前的样式;比如div{原创 2018-01-15 15:46:12 · 1106 阅读 · 0 评论 -
如何使一个绝对定位的元素居中显示
首先,我们说一下标准流中的元素如何水平居中,很简单margin:0 auto但是在绝对定位的,这个属性就失效了,这个时候我们该怎么解决这个问题呢?首先这里声明,绝对定位的居中显示,前提条件是在有定位流的祖先元素的情况下,即有绝对或相对或固定定位的父级元素,这个时候才有讨论的必要,因为绝对定位元素的参考点是离他最近一层的定位元素,否则是body,body的绝对定位有很多的不可控因素,比如它并原创 2018-01-11 20:22:35 · 2117 阅读 · 1 评论 -
2d转换——transform
其实css的设计也是源于日常,首先我在这里简单的介绍一下transform,其实就是旋转,在我们的现实生活中,一个物体可以在一个空间坐标系中任意旋转,css的设计也是如此,我们就以一个简单的div为例来做一下解释,在css2d转换中,其实也是将元素放在一个空间坐标系里面进行的旋转的,其中x是水平方向(箭头向右),y是屏幕的垂直方向(箭头向下),而z是面对我们的这个方向,明白这个坐标系之后我们就开始原创 2018-01-15 22:04:41 · 425 阅读 · 0 评论 -
css三大特性
一、继承:祖先元素设置的一些样式可以被后代元素使用1、只有color/font/text/line开头的样式可以继承2、css继承的一些特殊情况:(1)、a标签的颜色和下划线不能继承的(2)、h标签的字体大小是不能继承的二、层叠性:css处理冲突的一种能力层叠性只有多个选择器选中了同一个标签,然后设置了相同的属性,这个时候就会发生层叠,那么层叠是怎么解决冲突的,这个时候就用原创 2018-01-09 17:01:36 · 196 阅读 · 0 评论