显示里有显示与隐藏, 裁剪元素, 溢出, 改变鼠标形状处理相对应的属性.
- <!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;
- }
来源: http://www.bubuko.com/infodetail-3360221.html