前端基础练习---5

请说明盒子模型的组成部分！
块状元素和行内元素的默认宽度是多少？
块状元素和行内元素的默认高度是多少(auto)？
1. 完成如下操作：
  1）. 定义一个div，宽度为200px，高度为200px。
  2）. 整体的内边距为10px。
  3）. 边框宽度为1像素、绿色、实线。
  4）. 计算出整个盒子模型的宽度和高度。

有如下HTML结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<style>
			div{
       
       
				background-color:yellow;
			}
			h1{
       
       
				margin:1em;
			}
		</style>
    </head>
    <body>
		<div>
			<h1>hello world!</h1>
		</div>
    </body>
</html>

推算出会出现什么问题，应该如何解决？

有如下HTML结构，请推算出最后的样子!

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        #f {
       
       
            width: 500px;
            height: 500px;
            border: 1px solid blue;
        }

        #z {
       
       
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

有如下HTML结构，子元素width值应该是多少？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        #f {
       
       
            width: 500px;
            height: 500px;
            border: 1px solid blue;
        }

        #z {
       
       
            width: auto;
            height: 200px;
            margin: 0 50px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

有如下HTML，其div的宽度为多少？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        #f {
       
       
            width: 500px;
            height: 500px;
            border: 10px solid blue;
            padding-left:10px;
            padding-right:10px;
            margin-left:10px;
            margin-right:10px;
        }
    </style>
</head>

<body>
    <div id="f">
    </div>
</body>

</html>

加上box-sizing:border-sizing之后宽度是多少？

猜你喜欢