css box model description and examples

1. What is a box:

1. The box model is also called the box model. All elements on the page can be regarded as boxes

2. The box is a container for elements. It is also the carrier of elements. In human terms, the box is the home of elements

2. Types and functions of boxes:

1. There are two types of elements: block-level elements and inline elements, so Their corresponding home: boxes, of course, there are two types: block-level boxes and in-line boxes

2. Block-level boxes are usually used as containers for other elements, and content is always placed in in-line boxes. Usually in-line boxes are placed

in block-level boxes 3. Arrangement of boxes:

1. Boxes are the arrangement order on the page. The chief scheduler: document flow has the final say, unless the box runs away from home. Breaking away from document flow

2. Document flow is both the way elements are arranged and the action of arranging them, so it is both a noun and a verb

4. Components of the box model:

1. Because boxes are mostly used as element containers, we mainly use block-level boxes as an example to introduce

2. The four major components of a box: content, padding, border (border), margin (outer margin)

5. We use four beauties to quickly memorize the box model:

1. Content: Our own wife or girlfriend, this is to see Something visible and tangible

2.Padding: It is transparent, just like your wife’s best friend, it always affects the relationship between you and your wife

3.border Border: It is visible, it is varied, charming, the most sultry and coquettish, just like your confidante, dream lover or little lover

4.margin outer margin: and padding inner edge The distance is also transparent, just like the boss's woman or your buddy's wife, they will always live in your imagination

6. Content content:

1. Support width and height settings

2. The interior can be a block element or an inline element

3. Supports background settings

7. Padding inner margin:

1. Supports setting size in four directions, arranged clockwise: top, right, bottom, left

2. You can also set it separately

padding-top: top margin

padding -right: right margin

padding-bottom: bottom margin

padding-left: left margin

3. Support abbreviation:

padding: 10px 5px 10px 5px; top 10px, right 5px, bottom 10px, bottom 5px

padding: 10px 20px 30px; top 10px, left and right 20px, bottom 30px

padding: 10px 20px; top and bottom 10p x, left and right 20px

padding: 10px; top, right, bottom and left are all 10px

8. Margin:

1. Support setting size in four directions, clockwise Arrangement: top, right, bottom, left

2. You can also set it individually

margin-top: top margin

margin-right: right margin

margin-bottom: bottom margin

margin-left: left margin

3. Support abbreviation:

margin: 10px 5px 10px 5px; top 10px, right 5px, bottom 10px, bottom 5px

margin: 10px 20px 30px; top 10px, left and right 20px, bottom 30px

margin: 10px 20px; top and bottom 10px, left and right 20px

margin: 10px; Top, right, bottom and left are all 10px

9. Border:

1. The inner and outer margins are transparent and invisible, so only the width can be set

2 The border is visible, so it has three sub-properties that can be set: width, style, color

3. Setting order: top, right, bottom, left

Set the top border:

border-top-width: 5px; //Set the width

border-top-style: solid; //Set the style

border-top-color: #f60; // Set the foreground color/color

border-top: 5px solid #f60; //Abbreviation

Set the right border:

border-right-width: 10px;

border-right-style: dashed;

border-right-color: #888;

border-right: 10px dashed #888;

Set the lower border :

          border-bottom-width: 10px;

            border-bottom-style: solid; border-bottom: 10px solid #555;

Set left border:

border-left-width: 8px;

border-left-style: dotted;

                                                                                      use   using the same setting with           using using using the same border using - border-left-color: #333;

            border-left: 8px dotted #333;  ; //Set the width of the four borders uniformly

Border-style: solid; //Set the style of the four borders uniformly

Border-color: gray; //Set the color of the four borders uniformly

                                                                                                                                      using   use of pictures with                    . Implementation can now be done through code

2: The border has four vertices, which can be set for each vertex

2.1: The upper left corner border-top-left-radius:20px;

2.2: Upper right corner border-top-right-radius:20px;

2.1: Lower right corner border-bottom-right-radius:20px;

2.1: Lower left corner border- bottom-left-radius:20px;

Note: Foreigners think differently from us. In the attribute, top, top and bottom are written before the left and right

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>1.盒子模型</title>
    <style>
        .box1 {
            /*在父级盒子.box已经设置过了*/
            /*width: 200px;*/
            /*height:200px;*/
            /*background-color: #f89;*/
            border: 2px solid #363636;
            /*通过计算,设置内边距40px,可实现图片居中*/
            padding:40px;
            /*结果并未实现居中,这是为什么呢?因为内边距会撑开盒子,这与我们生活中的盒子是不一样的*/
            /*解决方法有二个:1.修改盒子大小,宽高减去padding值,2.为该盒子套一个父级盒子,单独设置宽高*/
            /*第一种方案:修改当前盒子大小*/
            /*width: 120px;*/
            /*思考:为什么要减去80px?因为边距是成对的,40px的2倍就是80px*/
            /*height:120px;*/
        }
        /*.box是.box1的父级盒子,在这里设置了宽高,子盒子就不必设置了*/
        /*我这里忽略了边框宽度的影响*/
        .box {
            width: 200px;
            height:200px;
        }
        .box2{
            width: 200px;
            height:200px;
            background-color: lightskyblue;
            borer: 2px solid #333;
            margin-bottom: 20px;
        }
        .box3{
            width: 200px;
            height:200px;
            background-color: lightgreen;
            borer: 2px solid #333;
            /*margin-top: 20px;*/
            /*上下外边距的二个特征:*/
            /*1.如果上下外边距相等,并不会相加,而是相互叠加在了一起;*/
            /*2.如果上下外边距不相待,则会产生塌陷,最终数值大的外边距胜出,以它为准*/
            margin-top: 30px;
            /*注意:左右外边距不会产生叠加和塌陷,仍是各自相加为最终结果*/
        }
        /*边框设置*/
        .box4 {
            width: 200px;
            height:200px;
            background-color: lightskyblue;
            /*设置上边框:*/
            /*设置宽度*/
            /*border-top-width: 5px;*/
            /*设置样式*/
            /*border-top-style: solid;*/
            /*设置前景色/颜色*/
            /*border-top-color: #f60;*/
            /*简写*/
            /*border-top: 5px solid #f60;*/
            /*设置右边框:*/
            /*border-right-width: 10px;*/
            /*border-right-style: dashed;*/
            /*border-right-color: #888;*/
            /*border-right: 10px dashed #888;*/
            /*设置下边框:*/
            /*border-bottom-width: 10px;*/
            /*border-bottom-style: solid;*/
            /*border-bottom-color: #555;*/
            /*border-bottom: 10px solid #555;*/
            /*设置左边框:*/
            /*border-left-width: 8px;*/
            /*border-left-style: dotted;*/
            /*border-left-color: #333;*/
            /*border-left: 8px dotted #333;*/
            /*所有边框使用统一设置:*/
            /*统一设置宽度*/
            /*border-width: 10px;*/
            /*统一设置样式*/
            /*border-style: solid;*/
            /*统一设置颜色*/
            /*border-color: gray;*/
            /*统一设置的简写*/
            /*border: 10px solid gray;*/
        }
        /*圆角盒子设置技巧*/
        .box5 {
            width: 200px;
            height:200px;
            background-color: #f89;
            border-top-left-radius: 20px;
            border-top-right-radius: 40px;
            border-bottom-right-radius: 60px;
            border-bottom-left-radius: 80px;
            /*如果每个角的圆度是一样的,可以简化*/
            border-radius: 20px;
            /*如果原盒子是一个正方形的话,只需要把角度设置为宽度的一半即可得到一个正圆*/
            border-radius: 100px;
            /*为了适应外部盒子变化,建议设置为百分比,例如:50%,效果完全一样*/
            /*border-radius: 50%;*/
        }
        /*创建有阴影盒子的技巧*/
        .box6 {
            width: 200px;
            height:200px;
            background-color: lightskyblue;
            /*设置圆角*/
            border-radius:50%;
            /*设置内边距并重新调整盒子大小*/
            padding: 10px;
            width: 180px;
            height: 180px;
            /*设置盒子的阴影*/
            /*box-shadow:  X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 ;*/
            /*外发光:模糊8px,阴影到边框为3px*/
            box-shadow:0 0 8px 3px #888;
            /*内发光:模糊8px,阴影到边框为3px*/
            box-shadow:0 0 8px 3px #888 inset;
            /*向右下投影*/
            box-shadow:8px 8px 8px 3px #888;
            /*向左上投影*/
            box-shadow:-8px -8px 8px 3px #888 ;
        }
    </style>
</head>
<body>

The above is the detailed content of css box model description and examples. For more information, please follow other related articles on the PHP Chinese website!