6.html&css实验6.文本格式化和盒模型的样式定义。

来源：互联网发布：java 查看class文件编辑：程序博客网时间：2024/05/06 16:54

【实验目的】学习文本格式化和盒模型的样式定义。

1、把hide.html中的p元素(id=test)分别加上display:none、visibility:hidden后，

说明上面两个属性的区别：
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"，这两种方法会产生不同的结果：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

2、设置p和div的样式
(1):

div{margin-left:50px; margin-right:50px; text-align:left; text-indent:2em;}h1{text-align:center}#test{ margin:1em;  padding:38px; border:5px dashed blue; border-radius:20px; color:red;background-image:url('bk1.jpg'); background-clip:padding-box; }<!-- background-clip规定背景的绘制区域。-->

（2）：

div{ margin-left:50px; margin-right:50px; text-align:left; text-indent:2em;}h1{text-align:center}#test{ margin:1em; padding:38px;    border:1px dotted blue;border-radius:30px;   background-image:url('bk2.jpg'); background-clip:content-box; }

3、设计一个盒模型实验(box.html)，分别设置box-sizing为三个取值(content-box，padding-box，border-box)，观察它们引起的变化。
* 很多浏览器不支持padding-box。

<style type="text/css">    .content-box{        box-sizing:content-box;        -moz-box-sizing:content-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px dashed #E6A43F;        background: blue;    }    .padding-box{        box-sizing:padding-box;        -webkit-box-sizing:padding-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px dashed #E6A43F;        background: blue;                  }    .border-box{        box-sizing:border-box;        -moz-box-sizing:border-box;        width: 100px;        height: 100px;        padding: 20px;        border: 5px dashed #E6A43F;        background: blue;    }</style>   <!-- 改变box的height和width的计算方法： box-sizing -->

注意：box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。
content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内

4. 滚动时Logo图片，浏览器变窄变宽时中间的内容始终对中（中间部分采用定宽的方法）
样式：

  <style>        html {font-family:宋体;font-size:20px;}        h1 {font-size:36px;}        body {background: rgb(243, 243, 243);}        #header {background: black;height: 40px; width: 100%;            top: 0;font-size: 宋体;z-index: 2;position:fixed;}<!-- z-index越大越显示在最上层,position:fixed表示相对浏览器窗口位置不变，比如我们经常看到的小广告-->        #header_inner {width:  100%;margin:  20%;}        #header_inner img {height: 30px;margin-top:5px;margin-left:10%;}        #header_inner .nav {float: right;margin-top: 5px;margin-right:10%;}        #title_inner {width:81%;margin: 5px;margin-top: 45px;margin-left:10%;            border: 1px dotted blue; padding: 0 0 1px 0;position: relative; background: white;}        #title_inner .bk {width:100%; opacity: 0.5;/* 透明度 */}        #title_inner h1 {position: absolute;top:25%;margin-left:40%;line-height:10px;z-index = 1;}        #title_inner .author { position: absolute;            top:50%;left:45%;width:10%;            z-index: 1;box-shadow: 3px 3px 3px gray;}        #article_inner {width: 77%;margin-left:10%;margin-right:10%;            margin-top:10px;border:1px dotted gray;            padding: 2%;background:white;}        #article_inner p {text-indent:2em;            font-family:隶书;line-height: 2em;}    </style>

0 0