cool hit counter HTML Lesson 5 - css box model [2_Intefrankly

HTML Lesson 5 - css box model [2


First of all, I want to thank those of you who still sent me appreciation for my lack of updates during this time! Thanks @NLJY for the drink, selenium framework I'll send you later ha~~~ Thanks @zuz5 for the appreciation! If people can learn a little something here, I haven't written in vain. Thank you all for your interest!


Moving on to our box model

Since it is now possible for browsers to automatically add your code tomargin perhapspadding , we are often incss The file starts by setting the value of these two attributes to 0.

html, body{
    margin: 0px;
    padding: 0px;
}

At this point, let's take another look at the style (and paste the last code again for you).

lesson4.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css Box model</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div id="mydiv"> mycss Box test model</div>
</body>
</html>

index.css

*{
}

html, body{
    margin: 0px;    
    padding: 0px;
}

#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;
}

At this point, the style will be right up against the edge of the browser: the

Sometimes we also write like this.

index.css

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    width: 100%;
    height: 100%;
}

#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;
}

This way, the size of our box model adapts to the size of the browser window. One more thing. Outer Margin - margin , we modify our code to read.

lesson4.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css Box model</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div class="mydiv"> mycss Box test model1</div>
    <div class="mydiv"> mycss Box test model2</div>
</body>
</html>

index.css

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    width: 100%;
    height: 100%;
}

div.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;
}

Let's see the effect.

The two boxes appear on two separate rows, so if I want to put the two boxes on one row, what do I do? My first thought was to putdisplayProperties readinline but found that the style changed to.

This is because in-line elements cannot modify width and height, which is when we usedisplay: inline-block That's it.

Now there's another problem, which is that people have noticed that there's an extra blank space in the middle of the two boxes above, and the blank space can't be checked, and to be honest if you useinline-block Then the spacing in the middle is self contained by default (if you have to remove it you have to addfloat: left perhapsmargin: -10;)。

Now we have no spacing between the box and the edge of the browser, now we want it to be some distance away from the browser and we add amargin: 10px; Properties, then see.

We see that it has a margin between it and the browser, and we look at the size of the box now: the

The size of the box is now 160*140

You can see that the size of the box is not calculated for the outermost layermargin attribute is also the

160=100+20*2+10*2;140=100+10*2+10*2

that's whymargin It's the outer margin of the box, on the outside of the box, that doesn't count as making the box size.

Now you will have all the basic concepts of the box model.


Recommended>>
1、Interconversion of WKT and GEOMETRY for Arcgisforjs
2、10Flask Context
3、Blockchain World Survival Guide
4、Automated deployment framework design in DevOps platforms
5、ArcgisforJSs Object Capture

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

    已发送

    朋友将在看一看看到

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

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号