CSS Layout
font
line-height
color
margin
padding
border
text-align
background
width
height
float
clear
display
定位属性
属 性 |
描 述 |
Position |
用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定) |
Top |
层距离顶点纵坐标的距离 |
Left |
层距离顶点横坐标的距离 |
Width |
层的宽度,可以用一个长度或“auto”值来指定其宽度,不允许使用负值 |
Height |
层的高度,可以用一个长度或“auto”值来指定其高度,不允许使用负值 |
z-index |
决定层的先后顺序和覆盖关系,值高的元素会覆盖值比较低的元素 |
Display |
是一个显示属性,设定block值是以块状显示,在元素后面添加换行符,既其他元素不能在其后面并列显示。如果设定inline值则内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示 |
Visibility |
这个属性是针对嵌套层的设置,如果存在嵌套的层(子层)和被嵌套的层(父层)时,可以使用inherit值设置子层继承父层的可见性,如果父层可见,子层也可见。当使用visible值时,无论父层是否可见,子层都可见。而值为hidden时,无论父层是否可见,子层都隐藏 |
Overflow |
用于设置层内的内容超出层所能容纳的范围处理方式,为该属性设置visible值时,无论层的大小,内容都会显示出来。当设置hidden值时,会隐藏超出层大小的内容。当设置值为scroll时,不管内容是否超出层的范围,选中此项都会为层添加滚动条。而值使用auto值时,只在内容超出层的范围时才显示滚动条 |
区块属性(区块模型)
属 性 |
描 述 |
Margin(注) |
是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度、百分比或者auto,百分比值参考上级元素的宽度,允许使用负值边际。如果四个值都给出了,它们分别被应用于上、右、下和左边界。如果只给出一个值,它被应用于所有边界。如果两个或三个值给出了,省略了的值与对边相等。注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值。而水平方向则不会。也可以选择使用上边界margin-top、下边界margin-bottom、左边界margin-left和右边界margin-right属性分别设置与上级元素的外边距。 |
padding |
用于设置区块的内边距属性,是边框和元素内容之间的间隔距离。与margin属性相返,但使用的是相同属性值。是上补白padding-top、右补白padding-right、下补白padding-bottom和左补白padding-left属性的略写。IE和火狐margin冲突可使用此属性代替 |
float |
设置区块漂浮属性,允许网页制作者将文本环绕在一个元素的周围,可以使用左漂浮left值,右漂浮right值 |
clear |
清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面;同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值,和移动元素到其两边的漂浮的元素的下面的both值 |
区块框浮动
虽然使用绝对定位可以实现页面布局,但由于调整某个区块框时其它区块的位置并不会跟随着改变,所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动,直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中,所以文档的普通流中的区块框表现得就像浮动框不存在一样。
行框和清理
在进行页面布局时,经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性,再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时,就会在行框中留出一定的宽度,而下面的某个区块框又恰好满足这个宽度,则很可能会向上提,和上一行并列的区块框在同一行排列。而这不并是我们想要的结果,所以可以使用clear属性解决这一问题,该属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
使用区块框设计页面布局
区块居中设计
高度和宽度固定的区块居中(position)
高度和宽度可变的区块居中(margin)
布局页面局中
设置两列浮动的布局
设置三列浮动的布局
设置多列浮动的布局
CSS Layout的更多相关文章
- CSS ? Layout Module : CSS 布局模型
1 1 1 https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 W3C Working Draft, 19 May 201 ...
- CSS Layout All In One
CSS Layout All In One CSS2 position float % px , rem, em CSS3 flex grid multi column vw / vh 常见布局模式 ...
- CSS layout入门
元素与盒 在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的. 元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为 ...
- css layout入门(转)
元素与盒 在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的. 元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为 ...
- 【Css】Layout布局(二)
css定位(Positioning) 所谓定位,即允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. css提供了三种基本的定位机制:普通流.浮动和 ...
- 【Css】Layout布局(一)
看下图: css框模型(Box Model),也有叫做盒模型的.规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. element元素,也是内容的主体: padding内边距,也右称为填充的 ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- Css中的两个重要概念:块状元素和内联元素
一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
- CSS基本知识4-CSS行模型
display:inline.block.inline-block block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 i ...
随机推荐
- 小结JS中的OOP(上)
前言:大家都知道,OOP有三大特性:封装,继承,多态.下面是自己对这三个特性的理解: 封装:把属性与方法整合到某种数据类型中.目的是让类的使用者按类的编写者的意愿去使用类.在封装过程中会一般会做两件事 ...
- Java并发编程-volatile
一. volatite 简述Java 语言提供了一种稍弱的同步机制,即 volatile 变量.用来确保将变量的更新操作通知到其他线程,保证了新值能立即同步到主内存,以及每次使用前立即从主内存刷新. ...
- Redis 对String数据类型的操作
Redis的 Strings 数据结构是简单的key-value类型,value其实不仅是String,也可以是数字.使用Strings类型,你可以完全实现目前 Memcached 的功能,并且效率更 ...
- SpringMVC 3.1集成Spring Security 3.1
这篇算是一个入门文章,昨天看见有网友提问,spring mvc集成spring security 的时候出错,揣测了一下问题木有解决.我就帮忙给搭建了一个集成框架他说可以,他告诉我这样的文章网上少.今 ...
- B.xml
pre{ line-height:1; color:#1e1e1e; background-color:#f0f0f0; font-size:16px;}.sysFunc{color:#627cf6; ...
- C# int.Parse()、int.TryParse()与Convert.ToInt32()的区别
1.(int)是一种类型转换:当我们觟nt类型到long,float,double,decimal类型,可以使用隐式转换,但是当我们从long类型到int类型就需要使用显式转换,否则会产生编译错误. ...
- [转]32位和64位系统区别及int字节数
一)64位系统和32位有什么区别? 1.64bit CPU拥有更大的寻址能力,最大支持到16GB内存,而32bit只支持4G内存 2.64位CPU一次可提取64位数据,比32位提高了一倍,理论上性能会 ...
- 为网页设计师准备的30个使用的HTML5框架
原文地址:http://www.goodfav.com/zh/html5-framework-8189.html 网页设计师在开始使用一些应用程序之前需要考虑几个事实,以确保在应用Web程序框架时,这 ...
- 【转】webgame前台开发总结--虽然是10年的文章,但是也有参考价值
一.webgame整个游戏流程: 1.预加载(打开游戏页面后,显示进度条,主要加载前期的登陆和创建角色资源,创建角色资源的加载可以放到进入创建角色界面的时候加载,因为玩家除了第一次进入游戏,其他时间基 ...
- SharePoint咨询师之路:设计之前的那些事一:容量
提示:本系列只是一个学习笔记系列,大部分内容都可以从微软官方网站找到,本人只是按照自己的学习路径来学习和呈现这些知识. 咨询师更多的时候是解决方案提供者,那么他们如何能够提供有效的SharePoint ...