资讯专栏INFORMATION COLUMN

CSS布局总览(1)

YuboonaZhang / 649人阅读

摘要:布局定位浮动外边距操纵的好处之一是,它能够控制页面布局而不需要使用表现性标记。但是布局被误认为是难以理解的,在初学者当中,这种想法相当普遍。是一个标准的行内元素,行内元素可以在段落中包裹文字而不打乱段落的布局。

css 布局 定位 浮动 外边距操纵 display flex

CSS的好处之一是,它能够控制页面布局而不需要使用表现性标记。但是CSS布局被误认为是难以理解的,在初学者当中,这种想法相当普遍。造成这种情况的主要原因是浏览器对CSS的解析不一致导致的。
所有的CSS布局技术的根本都是3个基本概念:定位,浮动和外边距操纵。这些布局技术其实没有本质的差异。要掌握它们也不用花很长的时间。

display属性

在html中每一个元素都有默认的"display"属性。这与元素的类型有关,对于大多数元素,它们的默认值是inlineblock。一个‘block’通常被称作‘块级元素’,而一个‘inline’通常被称作‘行内元素’。

block
div是最常见的标准块级元素。一个块级元素会新开始一行并尽可能的铺满整行的屏幕。其他的常见块级元素有p,form。html5的新元素有header,footer,section等等。
inline

span是一个标准的行内元素,行内元素可以在段落中包裹文字而不打乱段落的布局。a元素是最常用的行内元素,它通常被用作链接。
eg:把li元素改成inline,制作水平菜单。

none

另一些常用的标记比如script,它的属性就是none。display:none通常被Javascript用来在不删除元素的情况下隐藏或者显示元素。
它和visibility属性不一样。display:none不会保留显示本该元素的空间。而visibility:hidden;则会保留该元素的空间。

inline-block

很多情况你可能会使用到很多的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 之 Metronic 模板的学习之路 - (1总览

    摘要:写在前面的模板非常多,上有着各种各样的免费及付费模板。概述是一个基于设计的自适应多用途的管理后台模板。下一篇之模板的学习之路源码分析之部分 写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板。Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者。觉得贵的,想必不用我说,你也会找到途径。:b ...

    stackfing 评论0 收藏0
  • Flutter中文网上线了

    摘要:中文网上线了历经一个多月的整理翻译测试。现在中文网正式上线。中文网是目前中文文档资源最全的交流学习平台,致力于打造中文开发社区。 showImg(https://segmentfault.com/img/bV8xQf?w=1020&h=800); Flutter中文网上线了 历经一个多月的整理、翻译、测试。现在 Flutter中文网 正式上线。 Flutter中文网 是Flutter官...

    cc17 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<