CSS盒子模型练习

练习1
在网页中制作一个div,要求:宽度为100px;高度为300px;边框为5px,红色;内边距为15px;外边距为20px。制作完成后,请思考回答,该div元素分别占用了多少宽度和高度呢?

练习2

要求新建3个div
第1个:
边框为1px红色,宽度90%,高度100px,外边距5px。
第2个:
边框为1px蓝色,宽度95%,高度300px,外边距0px。
第3个:
边框为1px黑色,宽度90%,高度50px,外边距5px。

练习3
在一个div后面插入一个ul标签,要求div边框为蓝色,高宽都为100px,边框、边距自定义;ul为红色边框,高宽度都为100px,请查看效果。

练习4
使用标签包裹一段文字,接着在后面插入一个< span >标签,里面也包裹一些文字,要求边框为蓝色,高宽都为100px,边框、边距自定义; < span >为红色边框,高宽度都为100px,请查看效果。

 

练习5

请设置3个的圆角边框,分别是红、蓝、紫色。其中红色为ul元素,蓝色为p元素,紫色为div元素。

边框图片素材
设置外边距