摘要:布局定位浮动外边距操纵的好处之一是,它能够控制页面布局而不需要使用表现性标记。但是布局被误认为是难以理解的,在初学者当中,这种想法相当普遍。是一个标准的行内元素,行内元素可以在段落中包裹文字而不打乱段落的布局。
css 布局 定位 浮动 外边距操纵 display flex
CSS的好处之一是,它能够控制页面布局而不需要使用表现性标记。但是CSS布局被误认为是难以理解的,在初学者当中,这种想法相当普遍。造成这种情况的主要原因是浏览器对CSS的解析不一致导致的。
所有的CSS布局技术的根本都是3个基本概念:定位,浮动和外边距操纵。这些布局技术其实没有本质的差异。要掌握它们也不用花很长的时间。
在html中每一个元素都有默认的"display"属性。这与元素的类型有关,对于大多数元素,它们的默认值是inline和block。一个‘block’通常被称作‘块级元素’,而一个‘inline’通常被称作‘行内元素’。
blockdiv是最常见的标准块级元素。一个块级元素会新开始一行并尽可能的铺满整行的屏幕。其他的常见块级元素有p,form。html5的新元素有header,footer,section等等。inline
span是一个标准的行内元素,行内元素可以在段落中包裹文字而不打乱段落的布局。a元素是最常用的行内元素,它通常被用作链接。
eg:把li元素改成inline,制作水平菜单。
另一些常用的标记比如script,它的属性就是none。display:none通常被Javascript用来在不删除元素的情况下隐藏或者显示元素。
它和visibility属性不一样。display:none不会保留显示本该元素的空间。而visibility:hidden;则会保留该元素的空间。
很多情况你可能会使用到很多的box填满整个网格,过去我们使用的方法是float属性,但现在使用inline-block,如下两种方法:
/*使用float属性进行浮动元素*/ .box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }
/*使用inline-block值将盒子定义inline-block,相比于上面的float法进行浮动元素减少了对后面元素的清除浮动*/ .box { display: inline-block; width: 200px; height: 100px; margin: 1em; }
在使用inline-block进行布局的时候要注意以下三点:
vertical-align会影响到inline-block属性。你可以把它的值设为top。
你需要设置每一列的宽度
如果html源代码中标签之间有空格,那么列于列之间会产生间隙。
如下代码
nav { display: inline-block; vertical-align: top width: 25%; } .column { display: inline-block; vertical-align: top; width: 75%; }flex
新的flex通常被用来使用flex布局,非常的遗憾最近关于flex的变动太多,很多浏览器的实现也不尽相同。所以我简单的介绍一下他们的使用,下面的例子只能在firefox和chrome中实现。
.container { display: flex; display: -webkit-flex; height: 100px; margin-top: 50px; } .one { -webkit-flex: initial; flex: initial; width: 200px; min-width: 100px; } .two { -webkit-flex: none; flex: none; width: 200px; } .three { -webkit-flex: 1; flex: 1; } .four { -webkit-flex: 2; flex: 2; }
小屏幕下效果如图
大屏幕下效果如下
flex还可以解决原来css中一个比较让人头痛的问题,就是两盒子的垂直居中。
body { margin: 0; padding: 0; } .big { height: 500px; margin-top: 50px; display: -webkit-flex; display: flex; background-color: #0f0; } .small { margin: auto; background-color: #0ff; }
效果如下图所示:
css布局(1)就介绍到这里。
原文同步于 http://penouc.com
资料来自: http://http://zh.learnlayout.com/toc.html和《精通css:高级Web标准解决方案》一书的布局章节。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/110890.html
摘要:写在前面的模板非常多,上有着各种各样的免费及付费模板。概述是一个基于设计的自适应多用途的管理后台模板。下一篇之模板的学习之路源码分析之部分 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板。Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者。觉得贵的,想必不用我说,你也会找到途径。:b ...
摘要:中文网上线了历经一个多月的整理翻译测试。现在中文网正式上线。中文网是目前中文文档资源最全的交流学习平台,致力于打造中文开发社区。 showImg(https://segmentfault.com/img/bV8xQf?w=1020&h=800); Flutter中文网上线了 历经一个多月的整理、翻译、测试。现在 Flutter中文网 正式上线。 Flutter中文网 是Flutter官...
阅读 3342·2021-11-22 13:53
阅读 3343·2021-10-11 11:11
阅读 915·2019-08-30 14:12
阅读 1196·2019-08-29 17:16
阅读 621·2019-08-29 16:45
阅读 3323·2019-08-29 12:56
阅读 650·2019-08-28 17:55
阅读 2048·2019-08-26 13:24