无滚动条/lilioverflow:auto;若超出
显示里有显示与隐藏、裁剪元素、溢出、转变鼠标形状措置惩罚惩罚相对应的属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型、显示、定位</title> <link type="text/css" href="http://www.mamicode.com/03.css"> </head> <body> <div> </div> <div> <div>盒子模型:盒子的实际宽度为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 href="#Position">定位</a> </h3> <div> <h3>遇到的问题</h3> <ul> <li> <a href="#Questions">两个div(垂直摆列的)之间呈现了间隙</a> </li> </ul> </div> <hr> <div> <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> <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> <h4>padding</h4>       法则同margin,注意取值没有auto </div> <div> <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>border-style:上 右 下 左 <ul> <li>只有三个值时为：上 摆布 下</li> <li>只有两个值时为：上下 摆布</li> <li>只有一个值时为：上下摆布</li> </ul> </li> </ol> </li> <li>简写：border:width style(required) color;</li> </ol> </div> <div> <h4>轮廓(outline),位于边框边沿外围，不占空间</h4> <ul> <li>outline</li> <li>outline-color</li> <li>outline-style</li> </ul> </div> <div> <h4>垂直div呈现间隙的两种解决要领</h4> <ul> <li>下方div中第一个组件的margin-top设置为0px</li> <li>上方(下方)div添加属性：“margin-bottom(top):-xpx;”,不建议该要领</li> </ul> </div> <div> <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><h5>注意：当元素重叠时，可用z-index属性指定堆叠挨次。若未指定，则凭据代码挨次堆叠</h5></li> </ol> </div> <div> <h4>裁剪元素</h4> <ul> <li>clip:rect(y1,x1,y0,x0); y1x1为图片右上角位置，y0x0为图片左下角位置。</li> </ul> </div> <div> <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> <h4>转变光标(cursor)</h4> <ul> <li>cursor:auto;</li> <li>cursor:crosshair;</li> <li>cursor:default;</li> <li>cursor:e-resize;</li> <li>cursor:help;</li> <li>cursor:move;</li> <li>cursor:n-resize;</li> <li>cursor:nw-resize;</li> <li>cursor:pointer;</li> <li>cursor:progress;</li> <li>cursor:s-resize;</li> <li>cursor:se-resize;</li> <li>cursor:sw-resize;</li> <li>cursor:text;</li> <li>cursor:w-resize;</li> <li>cursor:wait;</li> </ul> </div> </body> </html>
对应的css文件
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32504.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")