欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML连载40-盒子宽度和高度的练习、box-sizing属性

程序员文章站 2023-11-18 21:44:04
一、判断方法 1.判断是否元素宽高为200的盒子 只需要看:边框+内边距+内容宽度/内容高度的值是否等于200 2.判断是否内容宽高为100的盒子 只需要看:width和heght的值是否等于100 3.判断是否元素空间宽高为300的盒子 只需要看:外边距+边框+内边距+内容宽度/内容高度的值是否等 ......

一、判断方法

1.判断是否元素宽高为200的盒子

只需要看:边框+内边距+内容宽度/内容高度的值是否等于200

2.判断是否内容宽高为100的盒子

只需要看:width和heght的值是否等于100

3.判断是否元素空间宽高为300的盒子

只需要看:外边距+边框+内边距+内容宽度/内容高度的值是否等于300

二、使用方法

我们拿到对元素、元素空间、内容的大小的要求的时候,我们需要按照公式进行计算来达到我们的需求。

三、box-sizing属性

 

div.content>div.aside+div.article然后按下table会自动填充成

<div class="content">

    <div class="aside"></div>

    <div class="article"></div>

</div>

下面我们讲解box-sizing属性

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>d113_height_and_width_of_box</title>

    <style>

        .content{

            width:300px;

            height:300px;

            background-color: red;

        }

        .aside{

            width: 100px;

            height:200px;

            background-color: blue;

            float:left;

        }

        .article{

            width:200px;

            height:200px;

            background-color: yellow;

            float:right;

        }

</style>

</head>

<body>

<div class="content">

    <div class="aside"></div>

    <div class="article"></div>

</div>

</body>

</html>

 

HTML连载40-盒子宽度和高度的练习、box-sizing属性

我们在类article中加一个属性

border:20px solid black;

HTML连载40-盒子宽度和高度的练习、box-sizing属性

这种情况溢出了,这在后面编辑网页的时候会经常遇到,需要已经写好了,但是又在该需求,这种牵一发而动全身,因此我们引入box-sizing属性

效果可见下面的属性值

   box-sizing: border-box;

HTML连载40-盒子宽度和高度的练习、box-sizing属性

解释:

我们的属性值:

content-box   表示里面的元素的宽高 = 边框 + 内边距 + 内容宽高

border-box   表示里面的元素恒等于width属性

四、源码:

d114_attribute_of_box-sizing.html

地址:

https://github.com/ruigege66/html_learning/blob/master/d114_attribute_of_box-sizing.html

2.csdn:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取java大数据学习视频礼包

 HTML连载40-盒子宽度和高度的练习、box-sizing属性