cool hit counter HTML Lesson 5 - css box model_Intefrankly

HTML Lesson 5 - css box model


As of today, updates are back, so thank you for your attention and appreciation!


Straight to code.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>cssbox</title>
        <meta name="keywords" content=" byword, byword" />
        <meta name="description" content="" />
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <div> mycss Box test model</div>
    </body>
</html>

The above code is not difficult to write, it just writes adiv The label, as you already know.div Tags are block-level elements, so they take up a full line of.

But we also notice that there are actually some gaps on the left side of the picture: the

This gap is not expected to exist, and this gap is basically where the `margin` or `padding` or `border` comes in.

Let's look at the right side of the developer tools.

There's one on it.element.style{} There is one underneathdiv attribute of the tag, the defaultdisplay: block . What's the top one for? Let's modify the code.

<div style="border: 1px solid red"> mycss Box test model</div>

Then refresh the page to see.

That's how we know that thiselement.style It's the properties that we write in the code. But we don't usually write it that way, which means that people write code that puts all the properties in thecss file for good, don't let thiselement.style There is any content.

There is also a box below.

This box is the specific properties of this current css box, such as width and other information.

  • margin: outer margin
  • border: border
  • padding: inner margin

This means that the size of a complete box model is determined by the values of these three parameters together. Now we modify the code.

lesson4.html

<div id="mydiv"> mycss Box test model</div>

The original code remains the same, just give thediv Add one.id

index.css

*{}

#mydiv{
    width: 100px;
    height: 100px;    
    background-color: #000;    
    color:#fff;
}

We then refresh the page to.

The following box areas will change accordingly.

We see that the content area size has changed to100*100 whereaspadding、border、margin All are 0. Let's modify these three values and see the effect.

*{}

#mydiv{
    width: 100px;    
    height: 100px;    
    background-color: #000;    
    color:#fff;    
    padding: 10px;
}

The size of the box was changed from the original100*100 change into120*120 Up.

paddingfor the inner margin, we see that the text is 10 pixels away from the edge: the

As you can see from the picture above.padding The attributes are also divided into top and bottom, so thispadding It's actually divided intopadding-left、padding-right、padding-top、padding-bottom

If the margins were different in all four directions, it would be a bit too cumbersome for us to write four, so we could write it like this

padding: 10px 20px 30px 40px;

As you can see, the four values represent, from left to right: top, right, bottom, and left, which means counterclockwise Walk the margins. Whenever it is written in this way, it is this clockwise representation.

If you write

padding: 10px 20px;

It would represent 10px up and down and 20px left and right.

You'll see these when you try them.


border Represents the border.

#mydiv{
    width: 100px;    
    height: 100px;    
    background-color: #000;    
    color:#fff;    
    padding: 10px 20px;    
    border: 10px solid red;
}

border: 10px solid red; Represents 10 pixels, solid line, and red for both top and bottom. If you want the four borders to be different you'll have to write them one by one:.

#mydiv{
    width: 100px;    
    height: 100px;    
    background-color: #000;    
    color:#fff;    
    padding: 10px 20px;    
    border-top: 10px solid #f00;    
    border-left: 10px solid #0f0;    
    border-right: 10px solid #00f;    
    border-bottom: 10px solid #bbb;
}

The box size will also change with the addition of the border.


Recommended>>
1、Countdown to human destruction how much time is left before AI destroys humanity
2、CAS Tan Tieu Artificial Intelligence Angel or Devil
3、The bear market is deep Taiwan layout is one step ahead of the others love is deep like the sea Yi Le Live climbs to the top again
4、The original has a perspective microsoft group bullfighting cheat auxiliary general software hang
5、Notes for budding Python3 users

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

    已发送

    朋友将在看一看看到

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

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号