![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
左岸16
Hello World!
展开
-
常用的清除浮动方式
1.添加一个新元素,添加一个div块,设置clear:both;同时不让它显示.clear { clear: both; font-size: 0; height: 0; line-height: 0;}2.给父元素添加overflow: hidden;当父层没有设置浮动,而子层设置了浮动时,父层很大可能受到浮动的影响缩成一条,这时使用clear: both;清除浮原创 2017-05-18 23:40:21 · 307 阅读 · 0 评论 -
零碎小知识
一个<div>和一个<i>同一个层级使用vertical-align: middle;可以竖直方向对齐原创 2019-01-16 15:27:14 · 297 阅读 · 0 评论 -
H5开发实践-内容总结
盒模型元素宽度的计算方式IE没有标准盒模型元素宽度 = width + padding + border盒子总宽度 = 元素宽度 + marginCSS3中增加了一个计算盒模型的css属性box-sizingbox-sizing: content-box | padding-box | border-box;默认值:content-box为了避免盒模型大小变化造成网页排...原创 2018-06-04 11:54:42 · 2764 阅读 · 0 评论 -
flex布局justify-content属性和align-items,align-self属性
justify-content(在父元素设置) 设置弹性盒子元素在主轴(横轴)的对齐方式。取值:justify-content: flex-start | flex-end | center | space-between | space-around;flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐,后面的元素接着第一个元素进行排列。flex-end: 弹性原创 2017-11-17 15:41:19 · 42973 阅读 · 0 评论 -
CSS实现文本显示部分内容,多余文本显示省略号
1.显示一行文本内容,多余的内容用省略号显示overflow: hidden;text-overflow: ellipsis;white-space: nowrap;2.显示指定行数的文本,多余的内容显示省略号display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;-w原创 2017-09-30 13:32:40 · 2132 阅读 · 0 评论 -
使用CSS实现椭圆,三角形,五角星等图形
使用CSS实现椭圆,三角形,五角星等图形原创 2017-08-20 11:20:46 · 1244 阅读 · 0 评论 -
使用CSS实现垂直居中
垂直居中是页面布局中非常常见的效果,那怎么使用CSS实现垂直居中呢?原创 2017-05-30 10:49:53 · 428 阅读 · 0 评论 -
CSS样式书写规范
CSS样式书写的一些规范,使项目代码更优雅。原创 2017-07-20 23:40:53 · 330 阅读 · 0 评论 -
不同浏览器兼容问题
探讨不同浏览器兼容问题原创 2017-05-17 22:58:07 · 493 阅读 · 0 评论 -
开发PC端页面布局遇到的问题总结
Element.getBoundingClientRect()Element.getBoundingClientRect()方法返回元素的大小及其相对于视口左上角的位置。返回的对象包含一组只读属性——top, bottom, left, right,单位为像素px。const ele = document.getElementById('target')const top = ele.get...原创 2019-06-04 11:58:58 · 914 阅读 · 0 评论