css核心观念

块级元素在浏览器显示时，通常会以新行来开始（和结束）。内联元素不会以新行开始（和结束）。
块级元素:div （

,

,

, ）
内联元素:span（,
, , ）


display:
block 块元素，前后有换行，可设定宽高。
inline 内联元素，如果没有文字内容，就会缩称一个点。设定宽高不起作用。
inline-block 前后没有换行的block，可设定宽高。


多个element变成一行:
1. 多个block 元素，float: left; width: 50px; height: 20px;
2. 多个inline 元素，然后加入margin；
3. 两个inline-block 元素，设定每个element的width: 50%; text-align: center; 最tricky的

多个inline-block 之间不能有“空格”（html里面把多个空格、换行解析为一个空格），否则只能把width设定为小于49%（spaceless in django）

清除浮动:
父元素div下面有a,b两个div元素，a元素float left后，父元素就缩成一条(collapsing折叠起来)。
1. 在b元素后加入

设置.clear { clear: both; }
2. 在父元素上应用overflow(auto或hidden)，并不会清除浮动，而是清除自己(self-clear)。父元素会扩展到它需要的大小，以包围它里面的浮动的子元素。


position:（top, right, bottom, right的属性生成位置信息）
relative: 相对于本身位置定位（相对定位），移动位置后，原来的位置仍被占用。
absolute: 相对于上一个有定位的父元素的定位（绝对定位），移动位置后，原来的位置被后面的元素使用
fixed: 相对浏览器窗口定位（绝对定位）
static: 默认，无定位


定宽、溢出的一行文本（标题）显示省略号:
width: 40px;
text-overflow: ellipsis;
white-space: nowrap; /*强制文本在一行内显示*/
overflow: hidden; /*溢出内容为隐藏*/
用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。


块级元素居中：
width: 500px;
margin: auto;
内敛元素居中：
父级元素text-align: center;


阅读(1125) | 评论(0) | 转发(0) |

0

上一篇：ElasticSearch的python使用--pyes

下一篇：ruby第一次亲密接触

给主人留下些什么吧！~~

评论热议

请登录后评论。

登录 注册

关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6