内容简介:做豆瓣的时候模仿豆瓣的正在热映的列表做的一个样式,效果及代码如下最主要的就是要在在父元素设置
浮动元素不换行
做豆瓣的时候模仿豆瓣的正在热映的列表做的一个样式,效果及代码如下
.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 小技巧
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Lighttpd源码分析
高群凯 / 机械工业出版社 / 2010-3 / 59.00元
本书主要针对lighttpd源码进行了深度剖析。主要内容包括:lighttpd介绍与分析准备工作、lighttpd网络服务主模型、lighttpd数据结构、伸展树、日志系统、文件状态缓存器、配置信息加载、i/o多路复用技术模型、插件链、网络请求服务响应流程、请求响应数据快速传输方式,以及基本插件模块。本书针对的lighttpd项目版本为稳定版本1.4.20。 本书适合使用lighttpd的人......一起来看看 《Lighttpd源码分析》 这本书的介绍吧!