Front-end Summary·Basics·CSS Layout

This is the first article in the series "Front-end Summary·Basics·CSS", which mainly summarizes the basic knowledge of layout.

一、显示（display）
    1.1 盒模型（box-model）
    1.2 行内元素（inline） & 块元素（block）
    1.3 行内块元素（inline-block IE8+ IE6-7/tools）
    1.4 flex（IE11+ IE10/-ms-）
    1.5 none
二、位置（position）
三、补充
    3.1 浮动（float）
    3.2 层叠（z-index）
    3.3 溢出（overflow）
    3.4 resize（notIE）（CSS3）
    3.5 分栏（column）（IE10+ notOperaMini）（CSS3）

1. Display

1.1 Box-model

Look at the picture to understand the box model

The box model includes content, padding, border, and margin. The height we set for the element is the height of the content. Add padding to the element to make it appear taller.

The following is a demonstration example of a box model. To view the box model in Google Chrome, you can use the right-click>Properties>Computed method to view it.

<p>box-model</p>

.box-model {
    border: 1px solid red;
    padding: 20px;
}

Box model bounded by borders

Sometimes, we don’t want the height of the element to change when adding padding to it, which is not conducive We do the layout. You can set the element's box model to a box model bounded by a border (box-sizing: border-box;). In IE's weird mode, this box model is used by default.

Here is an example.

<p>box-model</p>

.box-model {
    box-sizing: border-box;  /* 设置成以边框为界的盒模型 */
    border: 1px solid red;
    height: 80px;
    padding: 10px;
}

1.2 Inline elements (inline) & block elements (block)

Block elements are generally used for layout

The block element can set the width and height, and occupies one line by default. The width and height of inline elements cannot be set, and the width is determined by its content.

Block elements have no height by default and will only have height if there is content. Inline elements have no height and width by default, they will only be there if there is content. Although the width and height cannot be set for inline elements, the width and height can be set after they are set to absolute positioning. (Positioning is discussed in the second section)

块元素：p p ul li table form html5(header section footer)。
行内元素：a font(em strong i) img span。

Block elements can be turned into inline elements

We usually turn li into inline elements Element to create navigation bar.

    
• 首页
    
• 文章
    
• 留言

.nav li {     display: inline; }

There is only one block element per line

However, there can be multiple inline elements.

The empty block element will disappear in the layout

When debugging the page and want to display the position of the element in the layout, we usually add a height to the element .

If the inline element content is empty, it will disappear in the layout (empty is not recommended).

1.3 Inline-block IE8+ IE6-7/tools)

Compatibility is supported >= IE8, IE6-7 please refer to Focus on WEB front-end development.

Clear the gap between two elements

The gap between two elements comes from the space between elements, and can be eliminated by splicing the elements together. You can also use templates to eliminate them. For more discussion, please see Zhihu.

    
• 首页
•     文章
•     留言

Alignment of elements under special circumstances

Three li's are juxtaposed and set to inline-block. When display:none; is set to the leftmost element, the other two li will sink to the bottom of the container. At this time, you need to set top alignment (vertical-align:top;) for these two li.

    

• 首页

    

• 文章

    

• 留言

.hidden {display: none;} .left {height: 50px;} .center,.right {vertical-align: top;}

1.4 Flexible box (flex IE11+ IE10/-ms-)

Compatibility is to support >=IE11, IE10 needs to add the browser private prefix (-ms-).

Use elastic layout

If elastic layout is used, float clear vertical will be invalid. For more information, please see Ruan Yifeng’s blog.

display:flex;  // 块元素用
display:inline-flex;  // 行内元素用

Flexible Layout Settings

Let’s just treat these as a reference manual for now.

flex-direction:row/row-reverse/column/column-reverse;  // 方向
flex-wrap:nowrap/wrap/wrap-reverse;  // 换行
flex-flow:direction/wrap;  // 方向和换行的简写，默认为flex-flow:row nowrap;
justify-content:flex-start/center/flex-end/space-between/space-around;  // 主轴（默认为水平轴）
align-items：flex-start/center/flex-end/baseline/stretch;  // 交叉轴
align-contents:flex-start/center/flex-end/space-between/space-around/stretch;  // 多条轴线的对齐方式（单条无效）
order:number;  // 顺序（默认为0）
flex-grow:number;  // 宽度有余时放大比例（默认为0）
flex-shrink:number;  // 宽度有余时缩小比例（默认为1）
flex-basis:number/auto;  // 分配多余空间前，项目占据的主轴空间（默认auto）
flex:grow/shrink/basis;  // grow shrink basis三个属性的缩写
align-self:auto/flex-start/center/flex-end/baseline/stretch;;  // 单个项目的对齐方式，可覆盖align-items（默认auto）

The main axis (justify-content) can only center single-line elements

What about multiple lines? We can nest multiple rows in a p to construct a single row element.

The following is an example of horizontal and vertical centering.

<p>
    </p><p>
        </p><p>两行都会</p>
        <p>居中</p>
    


.parent {
    display: flex;  /* 使用flex布局 */
    align-items: center;  /* 交叉轴居中 */
    justify-content: center;  /* 主轴（默认为水平轴）居中 */
    background: red;
    height: 200px;
}

1.5 none

Hide elements

The following two methods can hide elements, but display:none; will clear the originally occupied layout space .

visibility:hidden;  // 隐藏元素
display:none;  // 隐藏元素并清除原本占用的布局空间

2. Position

Absolute, relative and fixed positioning can all use top, right, left and bottom elements. But the meanings expressed are different.

Clear the positioning of the layout space (absolute fixed)

Fixed positioning (fixed) will not change position as the mouse scrolls. It really fixes a certain position on the screen. The more common one is the advertisement in the lower right corner of the web page.

The positioning origin of absolute positioning (absolute) is the parent node of non-default positioning (static). It can be absolute fixed relative. If the parent node does not have these, the positioning origin is the body. Using one of these two positionings, the layout space originally occupied by the element will disappear (taken out of the document flow).

The following is an example of absolute positioning. The picture on the left is the default layout, and the picture on the right is after using absolute positioning (the original layout space of the element is cleared).

<p>I'm in front of you.</p>
<p>Hello</p>
<p>I'm next to you.</p>

.border {
    border: 1px solid blue;
}
.parent {
    position: absolute;
    left: 20px;
    top: 20px;
    background-color: red;
    padding: 5px;
}

保留布局空间的定位（relative）

元素原本占用的布局空间依旧保留在文档流中。

相对定位（relative）相对原有位置定位。把上例中的absolute改成relative即可看到效果。使用这种方法，元素原本占用的布局会保留。

默认定位

默认定位为static。

巧用relative+absolute定位

父级采用relative，子代采用absolute。则子代的定位原点变为父级元素的左上角。

三、补充

3.1 浮动（float）

刚开始做页面的时候，还不知道浮动用了之后得清除，只气的想要砸键盘。现在好多了，知道了点技巧。更多技巧请见Tomson。

清除浮动（.clear）

这种方法需要在浮动元素后面添加一个空的节点，然后写上clear属性。兼容IE6需要添加zoom:1;。

    
• 首页
    
• 文章
    
• 留言

 

我是另外一行

.nav li {     background-color: red;     float: left;     list-style-type: none; } .clear {     clear: both;     zoom:1;  /* IE 6 */ }

清除浮动（overflow:hidden;）

使用这种方法意味着，浮动元素得有一个父元素，并给父元素添加overflow:hidden;属性。

    
• 首页
    
• 文章
    
• 留言

我是另外一行

.nav li {     background-color: red;     float: left;     list-style-type: none; } .nav {     overflow: hidden; }

文字环绕

浮动元素的另外一个妙用是实现文字环绕。

<p>
    </p><p></p>
    <p>这段文字很长，是用来测试文字环绕的。图片的占位将用p块来模拟。这段文字很长，是用来测试文字环绕的。图片的占位将用p块来模拟。</p>


.article {
    width: 200px;
}
.photo {
    width: 60px;
    height: 60px;
    background-color: red;
    float: right;
}

3.2 层叠（z-index）

层叠可以控制元素的上下放置关系。值越大越上面。

<p></p>
<p></p>

.z {
    position: absolute;
    top: 200px;
    left: 200px;
    width: 60px;
    height: 60px;
    background-color: red;
    opacity: .5;  /* 设置透明度为0.5 */
}
.zTwo {
    top: 220px;  /* 和第一个块错开以看到效果 */
    left: 220px;
    background-color: blue;
    opacity: .5;
}

3.3 溢出（overflow）

当页面内存在多个业内选项卡的时候，从一个没有右边滚动条的页面达到一个有滚动条的页面，将会产生页面跳动。解决办法是默认设置显示右边的滚动条。

overflow-x:visibility;

3.4 resize（notIE）（CSS3）

定义用户是否可调整当前元素的边框大小。

resize: horizontal（水平）/vertical（垂直）/both/none/inherit;

3.5 分栏（column）（IE10+ notOperaMini）（CSS3）

兼容性是IE>=10，不支持opera mini。更多请见菜鸟教程。

<p>这一段文字用来测试分栏。这一段文字用来测试分栏。这一段文字用来测试分栏。</p>

p {
    width: 200px;  /* 把段落的宽度设短一点，便于效果的展现 */
    column-count: 3;  /* 设定需要分几栏 */
    column-gap: 20px;  /* 设定两栏间隔 */
}

结语

这一节主要参考了学习CSS布局，阮一峰的博客，Tomson，专注WEB前端开发，菜鸟教程，知乎和我在看的一本书《CSS设计指南》。

第一次写前端方面的长文章。写了改，改了写，然后继续改，又继续写。如此循环往复，只为让用词用句更加恰当一些。文中有什么不恰当的地方，还望指出。

更多前端总结·基础篇·CSS布局 相关文章请关注PHP中文网！