cool hit counter Front End Basics - CSS Box Model_Intefrankly

Front End Basics - CSS Box Model


Copyright: This is an original post by the blogger and may not be reproduced without the blogger's permission. https://blog.csdn.net/huyuyang6688/article/details/40402555

Nowadays, many web pages are made up of many "boxes" that are stitched together and nested, so those who have been in contact with web design must know something about the CSS box model.

To better illustrate, let's start with a general example: in a warehouse there are 10 cartons, each at a certain distance from the other, and inside each carton is a computer and there is a layer of foam between the carton and the computer to isolate it from shocks (here it is assumed that both the carton and the computer are square), using this example as a background to move on to the box model.

In fact, a single image can graphically represent the CSS box model, and a quick search on the web shows a whole bunch of them: the

As shown above: the box model in CSS is usually composed of four parts: content, padding, border, and margin.

Here. elementsIt's the equivalent of a computer in a box. padding It's the equivalent of a bubble. frame It's the equivalent of a cardboard box. frontiers It's the equivalent of the distance between each cardboard box.

Explain these four parts:

Content (content): the content in the box model, which can be text, images, tables, etc..

Padding (padding): the distance between the content and the box border, which can be split into padding-top; padding-right; padding-bottom; padding-left.

border: the border of the box, can be split into border-top; border-right; border-bottom; border-left;

frontiers(margin):The distance between the box and other adjacent elements, It can be split intomargin-top;margin-right;margin-bottom;margin-left;

Here's the picture:

Things to note in the figure are, The dotted line indicates the part of the“ box” stored in elements width(width) and height(height), That is, the width and height of the computer in the above example case。

Typically you can set the width (i.e., thickness) of the fill and border in four directions, and the border is set with several properties for style (style), color (color), and width (width).

In CSS, it is considered that all elements in a web page are packed in a rectangular box, such as the commonly used div, span, ul, li, img, table, etc. All of them can be formatted in CSS for their content (content), padding (padding), border (border) and boundary (margin).

If a box ofmargin because of30px,border because of5px,padding because of20,width because of240,height because of160px, Then this box actually takes up the space of broad:(30+5+20)×2+240=350px, loud(30+5+20)×2+160 =270px

Previously, web pages were laid out in tables, but table layout has many drawbacks, limited to space, the next article will introduce the easy to control and interactive CSS + DIV layout method.


Recommended>>
1、Systematic Understanding of Microservices 2 How to Implement a Microservice Architecture
2、About the course
3、The current situation problems and prospects of intelligent development of urban public transport in China
4、Goodbye invoice Shenzhen just announced No more postit invoices for reimbursement
5、CSMhuan Live TV Platform App is officially launched

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号