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,在老的浏览器上支持不好,所以这样的方式没有老技巧那么通用。可是随着浏览器日趋标准,我认为慢慢就不是问题了

时间: 2024-11-08 21:32:34

css笔记(二)——几种经常使用的模式的相关文章

DIV+CSS笔记(二)

1.W3C盒子模型 内容区->padding->border->margin 1 <!doctype html> 2 <html> 3 <head> 4 <title>盒子模型</title> 5 <meta charset='utf-8'/> 6 <style> 7 #box{ 8 width:200px; 9 height:200px; 10 border:5px solid red; 11 padd

CSS笔记二.....

1.选择符: a.关系选择符: 1).E F :包含选择符,选择所有被E包含的F元素.例如: <style> p h1 { color:red; } </style> <body> <p> <h1>嘻嘻</h1> <h1>嘻嘻</h1> </p> </body> 2).子选择符:E > F,选择所有作为E元素的子元素F.例如: <style> p > font {

二十三种设计模式[12] - 代理模式(Proxy Pattern)

前言 代理模式,属于对象结构型模式.在<设计模式 - 可复用的面向对象软件>一书中将之描述为" 为其它对象提供一种代理以控制对这个对象的访问 ". 在代理模式中,通常使用一个类来代表另一个类的功能,并由这个代理对象去控制原对象的引用. 结构 Subjuet(公共接口):代理类和被代理类的公共接口,保证任何使用目标的地方都可以被代理类替换: RealSubject(被代理类):代理类所代表的目标类: Proxy(代理类):包含对目标类的引用,目标类的封装: 场景 在日常生活中

二十三种设计模式[20] - 状态模式(State Pattern)

前言 状态模式,对象行为型模式的一种.在<设计模式 - 可复用的面向对象软件>一书中将之描述为" 允许一个对象在其内部状态改变时改变它的行为,使对象看起来似乎修改了它的类 ". 场景 我们都坐过火车,火车可以简单的分为" 开门 "," 关门 "," 运行 "," 停止 "四个状态.火车在这四个状态下分别可以做不同的事情.比如只有在关门时才行运行.只有在停止时才能开门. 我们在开发类似的业务时,往

二十三种设计模式[21] - 策略模式(Strategy Pattern)

前言 策略模式,对象行为型模式的一种.在<设计模式 - 可复用的面向对象软件>一书中将之描述为" 定义一些列的算法,把它们一个个封装起来,并且使它们可相互替换.使得算法可以独立于使用它的客户而变化 ". 也就是说通过策略模式,我们能够将算法与其调用者分离成相对独立的个体,降低维护成本,使代码更加优雅. 场景 就拿数据的搜索来说,可以简单的分为模糊搜索和精确搜索.在开发这个功能时,可能会写出如下代码. public List<string> Search(stri

二十三种设计模式[23] - 访问者模式(Visitor Pattern)

前言 访问者模式,是一种将数据的结构与其操作分离的类行为型模式.它能够帮助我们解决数据结构稳定但数据操作多变的问题,使我们可以很容易的增加或修改数据的操作. 在<设计模式 - 可复用的面向对象软件>一书中将之描述为" 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作 ". 结构 Visitor(访问者接口):定义了每种元素的访问行为,一般情况下访问行为的个数与元素种类的个数一致: ConcretVisitor(具体访问

二十三种设计模式之原型模式的C#实现

原型模式就是通过拷贝快速创建一个新的对象 本例UML如图 ColorBase [Serializable] public abstract class ColorBase { public int R = 0; public int G = 0; public int B = 0; public virtual ColorBase Clone() { return this; } public virtual void ShowMe() { Console.WriteLine(string.Fo

css笔记(二)——几种常用的模式

文本垂直居中 对于行内元素,height会自动收缩到包裹住文本的高度,所以不存在这个问题.但是对于block和inline-block等盒子元素,如果设置了height属性,则文本默认会在上方显示.如果希望文本在垂直方向上居中,可以设置line-height属性等于height属性,或者大于height属性 <div> hello world </div> div { height: 200px; line-height: 200px; } 文本水平居中,图标分列左右两侧 效果是左

JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程 1.文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器. DOM解析器就是完成结构化文档和DOM树之间的转换关系. DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树 从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档 2.DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的"内容",即返回的某个元素的开始标签.结束标签之间的字符串内容(不包含其它

Ajax学习笔记(二)

二.prototype库详解 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" src="prototype.js"></script> //在自己的js中直接使用Prototype对象 <script type="text/javascript"> document.writeln("Prototype库的版本