CSS布局总览(1)

2019年9月6日 221次阅读 来源: penouc

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

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

display属性

在html中每一个元素都有默认的’display’属性。这与元素的类型有关，对于大多数元素，它们的默认值是inline和block。一个‘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;
}

小屏幕下效果如图《CSS布局总览(1)》

大屏幕下效果如下《CSS布局总览(1)》

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)》

css布局(1)就介绍到这里。

原文同步于 http://penouc.com

资料来自： http://http://zh.learnlayout.com/toc.html和《精通css:高级Web标准解决方案》一书的布局章节。

    原文作者：penouc
    原文地址: https://segmentfault.com/a/1190000000518513
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞