![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
小小liang
一个在深圳捡破烂的前端
展开
-
弹性盒模型实现两栏布局
思路:首先对html,body设置高度为100%,并且对body设置为相对定位,把头部和底部,用定位的方式固定好,使用弹性盒模型,中间占据剩余的等份,但是由于绝对定位不暂居空间,因此需要设置maging或者padding,距离上下的高度。然后对main里面进行分割,对main使用弹性盒模型,宽设置好,高度为100%,中间占据剩余空间即可。HTML <header>1<...原创 2020-04-28 10:39:16 · 1691 阅读 · 0 评论 -
书写一个line为小于1px的线
需求:就是给一个盒子添加一条细线 <ul class="hot-search"> <li class="line"></li> </ul> .hot-search { position: relative; display: flex; flex-wrap: wrap; width: 100%; height: 166px; backgro原创 2020-09-06 21:04:33 · 218 阅读 · 0 评论 -
关于多行文本省略
目录对于p标签多行文本省略对于p标签多行文本省略height 需要设置高度 一行显示多少高,那么多行就是一行的倍数display: -webkit-box; -webkit-box是一种自适应布局方式 p { height: 20px; display: -webkit-box; overflow: hidden; // 超出隐藏 text-overflow: ellipsis; // 超出的一省略原创 2020-09-05 22:31:35 · 252 阅读 · 0 评论 -
利用边框和圆角属性实现各种三角和圆形
一、边框实现各种三角形思路:1:需要给div添加宽高为0,并且添加边框2:然后看需求,是需要显示那个方向的三角形假如显示左边这个方向的的:于是需要把bottom的边框去掉HTML : <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div>原创 2020-05-12 17:12:52 · 309 阅读 · 0 评论