内容简介:做豆瓣的时候模仿豆瓣的正在热映的列表做的一个样式,效果及代码如下最主要的就是要在在父元素设置
浮动元素不换行
做豆瓣的时候模仿豆瓣的正在热映的列表做的一个样式,效果及代码如下
.item-lists { overflow-x: auto; white-space: nowrap; font-size: 0; padding: 15px 0 30px 0; /*no*/ /*去掉滚动条*/ &::-webkit-scrollbar { display: none; } .item { display: inline-block; width: 100px; /*no*/ margin-left: 40px; vertical-align: top; &:nth-of-type(1) { margin-left: 0; } }
最主要的就是要在在父元素设置 white-space: nowrap; 来保证子元素强制不换行
设置子元素与父元素等大小
之前我们写这样的了能就是为子元素设置width:100%;height:100%;,其实也可以使用如下的写法
.parent{ position:relative; width:200px; height:200px; .child{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: red; } } /*也就是说子元素不设置高度和宽度,通过absolute的属性将子元素‘撑开’到父元素的大小*/ /*如果我们设置了如left:20px; right:20px;那么就相当于设置父元素padding:0 20px;子元素设置width:100%;*/
元素等大小左右浮动
之前如果我们想要实现一个这样的效果,可能会使用浮动,现在可以考虑使用如下的写法
ul{ width: 100%; padding:0 18px;/*no*/ box-sizing: border-box; margin-top: 30px;/*no*/ >li{ width: 50%; padding: 3px;/*no*/ float: left; box-sizing: border-box; text-align: center; font-size: 15px;/*no*/ background-color: #ffffff; a{ display: block; padding: 12px 0;/*no*/ width: 100%; height: 100%; background-color: #f6f6f6; color: #333; } } }
元素向上/向左拉伸
CSS默认情况下盒子的长度变化是由上向下的方向进行变化,宽度变化是由左向右,有时候需要实现盒子由底层弹出,或者盒子由右侧向左弹出的效果,可以使用如下代码,由右向左同理
.test { position: absolute; bottom: 0; width: 100px; height: 10px; background-color: red; }
测试效果
$(".test").animate({"height": "100px"}, 2000)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Python实用技巧,你不知道的7个好玩的Python技巧
- CSS实用技巧干货
- Kubernetes 实用技巧: 使用 ksniff 抓包
- 七个 JavaScript 实用小技巧
- 你可能不知道的 npm 实用技巧
- 一些实用的 Laravel 小技巧
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Unix/Linux编程实践教程
Bruce Molay、杨宗源、黄海涛 / 杨宗源、黄海涛 / 清华大学出版社 / 2004-10-1 / 56.00元
操作系统是计算机最重要的系统软件。Unix操作系统历经了几十年,至今仍是主流的操作系统。本书通过解释Unix的工作原理,循序渐进地讲解实现Unix中系统命令的方法,让读者理解并逐步精通Unix系统编程,进而具有编制Unix应用程序的能力。书中采用启发式、举一反三、图示讲解等多种方法讲授,语言生动、结构合理、易于理解。每一章后均附有大量的习题和编程练习,以供参考。 本书适合作为高等院校计算机及......一起来看看 《Unix/Linux编程实践教程》 这本书的介绍吧!