css笔记(二)——几种经常使用的模式
文本垂直居中
对于行内元素,height会自己主动收缩到包裹住文本的高度,所以不存在这个问题。
可是对于block和inline-block等盒子元素。假设设置了height属性,则文本默认会在上方显示。
假设希望文本在垂直方向上居中,能够设置line-height属性等于height属性。或者大于height属性
<div>
hello world
</div>
div {
height: 200px;
line-height: 200px;
}
文本水平居中。图标分列左右两側
效果是左側一个小箭头,右側一个小箭头,日期显示在中间
<div id="wrapper">
<span><</span>
<span>2014年5月11日</span>
<span>></span>
</div>
#wrapper{
text-align: center;
position: relative;
width: 200px;
} #wrapper > span:first-child{
float: left;
} #wrapper > span:last-child{
float: right;
}
假设给2个float元素设置width(比方为了增大点击区域的目的),则width应该设置成一样,否则会破坏日期水平居中的效果
为float元素设置width
一般来说。行内元素(如span)。会自己主动收缩以适应文本宽度,为其设置width属性是无效的。可是当span元素被float了之后。就能够为其设置width属性了
盒子有多大
对于块元素,如block和inline-block。假设不设置其width。则会自己主动扩展到父容器的宽度。此时设置它的padding和border,不会改变盒子的大小(还是和父容器一样宽),可是会缩小content的宽度
<div id="parent">
<div id="son">abc</div>
</div>
#parent {
widht: 200px;
} #son {
padding: 1px;
border: 1px solid black;
}
son的width自己主动扩展到200px。然后因为padding和border占了4px,内容区域就是196px
假设设置了son的width。实际上设置的是content的width。加上border和padding后,实际的宽度会超过父容器
#son {
width: 200px;
padding: 1px;
border: 1px solid black;
}
content的宽度是200px。加上border和padding的4px。最后盒子的宽度是204px
可是,假设设置box-sizing为border-box。则设置的width就变成了整个盒子的宽度,此时再设置border和padding。又会缩小content的宽度了
#son {
box-sizing: border-box;
width: 200px;
padding: 1px;
border: 1px solid black;
}
实践中,在全局设置box-sizing为border-box挺不错的。这样设置padding和border时,就不用操心造成盒子宽度的变化了
水平排放li
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
ul{
font-size: 0;
} li{
font-size: 1rem;
display: inline-block;
width: 20%;
}
这里的一个技巧是设置ul的font-size为0。由于</li>和<li>之间有空隙,在大部分浏览器上都会造成1px的间隙。造成一行无法容纳5个li,于是最后一个li元素就会掉到下一行。因此把ul的font-size设置成0,在li中再恢复,能够避免此1px问题。用inline-block方式实现水平布局,大多都会有这个问题
N列固定比例水平布局
有点类似上面的li平铺
<div>
<nav></nav>
<div></div>
<aside></aside>
</div>
div {
font-size: 0;
} div > * {
display: inline-block;
font-size: 1rem;
vertical-align: top;
} div > nav {
width: 30%;
} div > div {
width: 50%;
} div > aside {
width: 20%;
}
基本上和li平铺的模式全然一样,差别是设置全部的子元素vertical-align: top。
否则当各子元素的高度不一致时。看起来似乎没有在同一行。其有用dev tools能够看出来,3个子元素还是在同一行,仅仅是在垂直方向上没有对齐。设置vertical-align能够解决此问题
某些列宽度固定,其它列宽度比例固定的水平布局
<div>
<nav></nav>
<div></div>
<aside></aside>
</div>
div {
display: -webkit-box;
} div > nav {
width: 200px;
} div > div {
-webkit-box-flex: 1;
} div > aside {
-webkit-box-flex: 2;
}
长处是不会出现1px问题。也不须要设置子元素为inline-block。非常方便。另外。设置display: box之后,子元素会自己主动变成等高。
这在某些场景下非常方便,可是也不适用于另外一些场景。最后display: box,在老的浏览器上支持不好,所以这样的方式没有老技巧那么通用。可是随着浏览器日趋标准,我认为慢慢就不是问题了
css笔记(二)——几种经常使用的模式的更多相关文章
- CSS 笔记二(Text/Fonts/Links/Lists)
CSS Text 1> Text Color used to set the color of the text 2> Text Alignment used to set the hor ...
- 二十三种设计模式之原型模式的C#实现
原型模式就是通过拷贝快速创建一个新的对象 本例UML如图 ColorBase [Serializable] public abstract class ColorBase { public int R ...
- amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules
amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...
- Webpack4 学习笔记二 CSS模块转换
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX
<CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...
- Mastering Web Application Development with AngularJS 读书笔记(二)
第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...
- webpy使用笔记(二) session/sessionid的使用
webpy使用笔记(二) session的使用 webpy使用系列之session的使用,虽然工作中使用的是django,但是自己并不喜欢那种大而全的东西~什么都给你准备好了,自己好像一个机器人一样赶 ...
- HTML5样式和列表、CSS链接的四种状态
一.HTML5样式 1.标签: <style>:样式定义: <link>:资源引用: 2.属性: type="text/css":引入文档类型: rel=& ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
随机推荐
- Object-C,循环语句for,while,do-while
演示循环语句,for,while,do-while,和C系列的语言,语法基本一致1到10,求和 // // main.m // for-while // // Created by fansunion ...
- UITextView自己定义键盘和系统键盘
UITextView有inputView 和 inputAccessoryView 两个属性,都指定了对应的视图. inputAccessoryView 对象显示在 inputView 对象的上面.与 ...
- [Android随笔]内存泄漏以及内存溢出
名词解释 内存泄漏:memory leak,是指程序在申请内存后,无法释放已申请的内存空间,一次内存泄漏危害能够忽略,但内存泄漏堆积后果非常严重,不管多少内存,迟早会被占光. 内存溢出:out of ...
- ReactNative之Flux框架的使用
概述 流程图 项目结构 View Components actions Dispatcher Stores 感谢 概述 React Native 能够说非常火,非常多bat的项目都在使用.不用发版就能 ...
- WordPress改动新用户注冊邮件内容--自己定义插件
有些开放用户注冊功能的WordPress站点,可能有这么一项需求,就是用户注冊成功后,系统会分别给站点管理员和新用户发送一封通知邮件.给管理员发送的是新用户的username和Email,给刚刚注冊的 ...
- legend---七、jquery如何选中select的selected的选择上的自定义属性
legend---七.jquery如何选中select的selected的选择上的自定义属性 一.总结 一句话总结:用冒号属性选择器 var type=$(this).children('option ...
- 12.ng-switch
转自:https://www.cnblogs.com/best/tag/Angular/ 根据作用域表达式动态切换把那个DOM元素包含在已经编译的模板中. 示例代码: <!DOCTYPE htm ...
- Can’t connect to local MySQL server through socket ‘/tmp/mysql/mysql.sock’解决方法
原因在于/tmp/mysql/mysql.sock不存在,为/usr/local/mysql/mysql.sock建立一个软连接到/tmp/mysql/mysql.sock即可. ln -s /usr ...
- 利用Eventlog Analyzer分析日志
利用EventlogAnalyzer分析日志 ManageEngineEventLogAnalyzer是一个基于Web技术.实时的事件监控管理解决方案,能够提高企业网络安全.减少工作站和服务器的宕机事 ...
- UESTC 1599 wtmsb
这天,AutSky_JadeK看到了n张图片,他忍不住说道:“我TM社保!”. 每张图片有一个社保值,他可以合并两张图片,合并所得的图片的社保值是原来两张图片的社保值之和. 每次合并需要消耗的体力也是 ...