第五章CSS上机指导02.docx
第五章CSS上机指导02
一、实验目的
1.熟练掌握CSS盒模型的设置与应用。
2.学会使用CSS进行页面布局。
3.掌握CSS定位技术，实现元素的位置调整。
二、实验环境
1.操作系统：Windows/Linux/MacOS
2.浏览器：Chrome/Firefox/Safari/Edge
3.开发工具：VisualStudioCode/Notepad++
三、实验内容
1.CSS盒模型的应用
（1）创建一个HTML文件，设置一个div元素，并为其添加边框、内边距、外边距和宽度。
```html
!DOCTYPEhtml
htmllang=en
head
metacharset=UTF8
metaname=viewportcontent=width=devicewidth,initialscale=1.0
titleCSS盒模型应用/title
style
.box{
width:200px;
height:200px;
border:2pxsolid000;
padding:20px;
margin:20px;
}
/style
/head
body
divclass=box这是一个div元素/div
/body
/html
```
（2）观察并分析盒模型的表现，调整边框、内边距、外边距和宽度的值，观察页面变化。
2.CSS布局实战
（1）创建一个HTML文件，设置一个包含多个子元素的父元素，并使用CSS布局技术进行布局。
```html
!DOCTYPEhtml
htmllang=en
head
metacharset=UTF8
metaname=viewportcontent=width=devicewidth,initialscale=1.0
titleCSS布局实战/title
style
.container{
width:100%;
maxwidth:1200px;
margin:0auto;
display:flex;
flexdirection:row;
justifycontent:spacebetween;
}
.box{
width:200px;
height:200px;
border:2pxsolid000;
margin:10px;
}
/style
/head
body
divclass=container
divclass=box1/div
divclass=box2/div
divclass=box3/div
divclass=box4/div
/div
/body
/html
```
（2）观察并分析布局效果，尝试使用不同的布局技术（如浮动、定位、表格布局等）实现相同的效果。
3.CSS定位实战
（1）创建一个HTML文件，设置一个包含多个子元素的父元素，并使用CSS定位技术进行定位。
```html
!DOCTYPEhtml
htmllang=en
head
metacharset=UTF8
metaname=viewportcontent=width=devicewidth,initialscale=1.0
titleCSS定位实战/title
style
.container{
position:relative;
width:500px;
height:500px;
}
.box1{
position:absolute;
top:20px;
left:20px;
width:100px;
height:100px;
backgroundcolo