显示里有显示与隐藏、裁剪元素、溢出、改变鼠标形状处理相对应的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型、显示、定位</title>
<link rel="stylesheet" type="text/css" href="03.css">
</head>
<body>
<div id="Above">
</div>
<div id="CFB">
<div id="BoxModel">盒子模型:盒子的实际宽度为width(内容宽度)+padding*2(左右内边距)+border*2(左右边框)+margin*2(左右外边距)；实际高度为height(内容高度)+padding*2(上下内边距)+border*2(上下边框)+margin*2(上下外边距)。</div>
</div>
<small>在上例中，margin部分为蓝色，数值为10%；border部分为黑色，宽度为1em；padding部分为黄色，数值为3em。</small>
<h3>与盒子相关的属性</h3>
<ul>
<li><a href="#Margin">margin</a> </li>
<li><a href="#Padding">padding</a> </li>
<li><a href="#Border">border</a> </li>
</ul>
<h3>与显示相关的属性</h3>
<ul>
<li><a href="#Display">display</a></li>
<li><a href="#Display">visibility</a></li>
<li><a href="#CE">裁剪元素</a></li>
<li><a href="#OF">溢出处理</a></li>
<li><a href="#MT">改变光标</a></li>
</ul>
<h3><a id="Po" href="#Position">定位</a> </h3>
<div>
<h3>遇到的问题</h3>
<ul>
<li>
<a href="#Questions">两个div(垂直排列的)之间出现了间隙</a>
</li>
</ul>
</div>
<hr>
<div id="Display">
<h4>显示(display):设置一个元素如何显示</h4>
<ul>
<li>进行块内元素和内联元素的转换
<ul>
<li>display:inline;块内元素转内联元素</li>
<li>display:block;内联元素转块内元素</li>
</ul>
</li>
<li>隐藏元素：display:none;元素不占用空间</li>
</ul>
<h4>可见(visibility):性指定一个元素可见还是隐藏</h4>
<ul>
<li>隐藏元素01：visibility:hidden;元素占用空间</li>
<li>隐藏元素02：visibility:collapse;table相关元素不占空间(firefox),占用空间(chrome),元素显示(IE)</li>
</ul>
</div>
<div id="Margin">
<h4>margin</h4>
<ul>
<li>格式
<ul>
<li>单边描述：margin-top、margin-bottom、margin-right、margin-left</li>
<li>简写(margin: ;),规则同<a href="#BS">边框设置单边规则b</a></li>
</ul>
</li>
<li>取值
<ul>
<li>auto</li>
<li>长度值(px、em、pt)</li>
<li>百分比</li>
</ul>
</li>
</ul>
</div>
<div id="Padding">
<h4>padding</h4>
     
规则同margin,注意取值没有auto
</div>
<div id="Border">
<h4>边框</h4>
<ol>
<li>边框样式(border-style)
<ul>
<li>border-style:none;无边框</li>
<li>border-style:dotted;点线边框</li>
<li>border-style:dashed;虚线边框</li>
<li>border-style:solid;实线边框</li>
<li>border-style:double;双边框，两条边框宽度和border-width的值相同</li>
<li>border-style:groove;3D沟槽边框</li>
<li>border-style:ridge;3D脊边框</li>
<li>border-style:inset;3D嵌入边框</li>
<li>border-style:outset;3D突出边框</li>
</ul>
</li>
<li>边框宽度(border-width),可选定长或关键字(thick\medium(默认)\thin)作为值</li>
<li>边框颜色(border-color),值可为颜色名称、RGB、16进制值;需先设置border-style才能设置该属性</li>
<li>单独设置各边的两种方法(style、color、width均适用)
<ol type="a">
<li>
<ul>
<li>border-top-style</li>
<li>border-right-style</li>
<li>border-bottom-style</li>
<li>border-left-style</li>
</ul>
</li>
<li id="BS">border-style:上 右 下 左
<ul>
<li>只有三个值时为：上 左右 下</li>
<li>只有两个值时为：上下 左右</li>
<li>只有一个值时为：上下左右</li>
</ul>
</li>
</ol>
</li>
<li>简写：border:width style(required) color;</li>
</ol>
</div>
<div id="OL">
<h4>轮廓(outline),位于边框边缘外围，不占空间</h4>
<ul>
<li>outline</li>
<li>outline-color</li>
<li>outline-style</li>
</ul>
</div>
<div id="Questions">
<h4>垂直div出现间隙的两种解决方法</h4>
<ul>
<li>下方div中第一个组件的margin-top设置为0px</li>
<li>上方(下方)div添加属性：“margin-bottom(top):-xpx;”,不建议该方法</li>
</ul>
</div>
<div id="Position">
<h4>五种定位(position)方式</h4>
<ol>
<li>static
<ul>
<li>静态定位。默认值，没有定位，不受top、bottom、right影响</li>
</ul>
</li>
<li>fixed
<ul>
<li>元素位置相对于浏览器窗口固定</li>
<li>该定位使元素位置与文档流无关，不占空间</li>
<li>使用该定位的元素和其他元素重叠</li>
</ul>
</li>
<li>relative
<ul>
<li>相对其正常位置进行移动</li>
</ul>
</li>
<li>absolute
<ul>
<li>绝对定位。相对于最近的父元素，若没有则相对于html(fixed灵活版)</li>
<li>该定位使元素位置与文档流无关，不占空间</li>
<li>使用该定位的元素和其他元素重叠</li>
</ul>
</li>
<li>sticky
<ul>
<li>粘性定位。在跨越特定阈值之前相对定位，后固定定位</li>
</ul>
</li>
<li style="list-style-type: none;"><h5>注意：当元素重叠时，可用z-index属性指定堆叠顺序。若未指定，则按照代码顺序堆叠</h5></li>
</ol>
</div>
<div id="CE">
<h4>裁剪元素</h4>
<ul>
<li>clip:rect(y1,x1,y0,x0); y1x1为图片右上角位置，y0x0为图片左下角位置。</li>
</ul>
</div>
<div id="OF">
<h4>溢出处理(overflow)</h4>
<ul>
<li>overflow:scroll;添加水平和竖直方向的滚动条</li>
<li>overflow:hidden;超出部分不显示，无滚动条</li>
<li>overflow:auto;若超出，添加竖直方向的滚动条</li>
<li>overflow:visible;默认，超出部分在区域外继续显示</li>
<li>overflow:inherit;在父元素继承该属性的值</li>
</ul>
</div>
<div id="MT">
<h4>改变光标(cursor)</h4>
<ul>
<li style="cursor:auto;">cursor:auto;</li>
<li style="cursor:crosshair;">cursor:crosshair;</li>
<li style="cursor:default;">cursor:default;</li>
<li style="cursor:e-resize;">cursor:e-resize;</li>
<li style="cursor:help;">cursor:help;</li>
<li style="cursor:move;">cursor:move;</li>
<li style="cursor:n-resize;">cursor:n-resize;</li>
<li style="cursor:nw-resize;">cursor:nw-resize;</li>
<li style="cursor:pointer;">cursor:pointer;</li>
<li style="cursor:progress;">cursor:progress;</li>
<li style="cursor:s-resize;">cursor:s-resize;</li>
<li style="cursor:se-resize;">cursor:se-resize;</li>
<li style="cursor:sw-resize;">cursor:sw-resize;</li>
<li style="cursor:text;">cursor:text;</li>
<li style="cursor:w-resize;">cursor:w-resize;</li>
<li style="cursor:wait;">cursor:wait;</li>
</ul>
</div>
</body>
</html>
对应的css文件
a{
text-decoration: none;
}
a#Po:link{
color: black;
}
a#Po:hover{
color: blue;
}
a#Po:visited{
color: darkblue;
}
#Above{
height: 2em;
background-color: brown;
border-style: outset;
border-color: gray;
/*margin-bottom: -30px;*/
}
#CFB{
/*margin-top: -75px;*/
border: 0;
background-color: deepskyblue;
}
#BoxModel{
margin: 0 10%;
border: 1em solid black;
padding: 3em;
background-color: yellow;
color: brown;
text-align: center;
}
浙公网安备 33010602011771号