随笔分类 -  HTML/css

display: inline-block;
摘要：display常设置的几个值：block，inline，inline-block，none等。 inline-block特性： 1.具有行内元素的特性，元素均在一行显示； 2.具有块级元素的特性，可以设置width,height,padding,margin等； 3.元素之间会留有空隙，因为会解析代 阅读全文
posted @ 2020-07-14 16:05 苏小落 阅读(873) 评论(0) 推荐(0)
css的float，浮动
摘要：之前页面布局经常使用的是float+position，但是有个问题就是，给元素设置float会脱离文档流，就相当于是在页面中不再占有位置，只是飘在该位置上面。 原理与position类似。 页面效果： 期望效果： 实现代码： 1.html： <div class="contrainer"> <div 阅读全文
posted @ 2020-06-01 18:16 苏小落 阅读(186) 评论(0) 推荐(0)
css3的transition及transition-group
摘要：有时候我们经常需要一些动态的过渡，比如列表元素的变化，只是若是只有数据改变显得有些生硬，需要一些过渡的效果。 如果使用v-for获取的所有元素，使用transition-group实现过渡效果。 实现代码： 1.html： <transition-group class="all_net_data 阅读全文
posted @ 2020-05-26 14:09 苏小落 阅读(3425) 评论(0) 推荐(0)
css3属性：box-sizing: border-box;
摘要：margin指外边距，padding指内边距，在盒模型中（暂不考虑部分浏览器兼容问题）： 默认情况下，元素的宽度与高度计算方式如下： width(宽) + padding(内边距) + border(边框) = 元素实际宽度 height(高) + padding(内边距) + border(边框) 阅读全文
posted @ 2020-01-14 12:05 苏小落 阅读(698) 评论(0) 推荐(0)
文本超出用省略号表示或是自动换行
摘要：文本有3种显示办法： 1.默认显示，按照浏览器的默认处理； 2.不换行，用省略号...显示； 3.强制换行，涉及到是否单词内换行； 实现效果： 1.默认显示，按照浏览器的默认处理； 2.不换行，用省略号...显示； 3.强制换行； 单词内不换行： 单词内换行： 实现代码： html: <div cl 阅读全文
posted @ 2019-12-04 17:42 苏小落 阅读(682) 评论(0) 推荐(0)
中间文字，两边横线的css3伪元素的使用
摘要：先介绍下伪类和伪元素： 伪类：操作的是在dom结构中已经存在的元素，可以对它进行一些样式的调整，比如:active,:hover等，一般用单冒号，感觉像是给元素添加一个class，然后设置样式； 伪元素：操作的是在dom结构中不存在的元素，比如::after,::before等，可以对新添加的元素设 阅读全文
posted @ 2019-08-19 15:42 苏小落 阅读(1247) 评论(0) 推荐(0)
浅谈相对定位与绝对定位
摘要：定位： 1.absolute（绝对定位）：绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 absolute经常与relative结合使用。 2.relative（相对定位）：生成相对定位的元素，相对于其正常位置进行定位。 3.stati 阅读全文
posted @ 2018-09-29 14:40 苏小落 阅读(360) 评论(0) 推荐(0)