HTML&CSS实验(6)---学习文本格式化和盒模型的样式定义
【实验题目】HTML&CSS实验(6)
【实验目的】学习文本格式化和盒模型的样式定义。
----------------------个人作业，如果有后辈的作业习题一致，可以参考学习，一起交流，请勿直接copy
【实验内容】
1、把hide.html中的p元素(id=test)分别加上display:none、visibility:hidden后，用浏览器运行并分别保存网页（hide1.html，hide2.html）和截屏。
（hide1.html）截屏：
（hide2.html）截屏：
说明上面两个属性的区别：
l display:none 属性值不显示在页面上，同时也不占用空间，仿佛在页面和排版中消失了；
l visibility:hidden 属性则仅仅为不显示在页面上，但是原有的位置和空间依旧保存，它在那里，但是看不见了。
2、设置p和div的样式得到类似下图的两个网页（参考网页：background.html; 图像:bk1.jpg,bk2.jpg）：
完成后保存网页（background1.html和background2.html）并截屏：
样式（background1.html）：
样式（background2.html）：
3、自己设计一个网页 (box.html)，在设置宽度的情况下，分别设置box-sizing为两个取值(content-box，border-box)，观察它们引起的变化。
截屏：
设置为content-box时，盒模型的宽度会略宽于border-box；
box.html文件内容(box-sizing只要取其中一个值)：
4、设计一个类似下面的页面(wgw.html，logo.jpg，main.jpg，wgw.jpg)：
标题：宋体 正文：隶书
滚动后logo部分不变：
浏览器变窄变宽时中间的内容始终对中（中间部分采用定宽的方法）。诗词图像使用img元素显示，并用opacity（取值0~1）的CSS属性模糊化。
要求只修改样式（给出的部分内容仅供参考），不要修改body的内容。
完成后保存源程序(wgw.html)并截屏:
样式：
//fixed默认不设置（top：0；left：0）时，会以之后设置的img元素的position的top为标准
5、设计一个和以下图片类似的网页（上、下、略缩窄、缩窄），用bk.png做背景得到三列式，给出的lv.html仅做参考，可以*修改。
完成后截屏（上、下、略缩窄、缩窄）：
样式表：
【完成情况】
是否完成了这些步骤？(√完成 ×未做或未完成)
1 [√] 2 [√] 3 [√] 4 [√ ] 5[√ ]
【实验体会】
写出实验过程中遇到的问题，解决方法和自己的思考；并简述实验体会（如果有的话）。
在完成最后一题时，调整#main部分的width时，按照比例计算，总是不按照预期的排版出现，并没有实现float的排版，将width比例调整为极限“1%”时，出现了很窄的一列，如下图：
通过在浏览器检查元素，发现并没有设置margin，但是却出现了这样的显示，仔细查找，发现是在有内联样式表，设置了margin；删除后，即可正常排版。
l 关于三列式排版，两边背景随中间内容延长，暂时并没有找到十分可行的办法，按照老师所给的方法，尝试了较为简单的设置height：100%和margin:-10000px;padding:10000px;overflow:hidden，效果只能随两侧内容的延长延伸背景图；
暂时设置了两边较长的height，设置固定的两侧保证不会短于中间部分，基本可以实现理想中的功能。但是并没有根本解决问题。
l 为了保持响应式设计，大多采用了百分比形式的布局，同样的，因此在不同缩放比例下显示会有些微的差别，本次实验所使用的浏览器为edge和chrome（以缩放比例为100%为准）。
l （头部的“注册、退出、登录”等）单纯设置float：right，并不会实现预期中的排版，需要额外使用position，最好使用right这一属性。