-
请说明盒子模型的组成部分!
-
块状元素和行内元素的默认宽度是多少?
-
块状元素和行内元素的默认高度是多少(auto)?
- 完成如下操作:
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
之后宽度是多少?
前端基础练习---5
猜你喜欢
转载自blog.csdn.net/qq_42592823/article/details/114534781
今日推荐
周排行