CSS盒模型
1.指定元素的总宽度为250像素
img { margin: 5px; } div { margin: 1px 5px; width: 250px; border: 2px solid slategray; } div p { padding: 15px; }
<body> <img src="fun.jpg" height="250px" width="250px"> <div> <p>上面的图片是250px宽度。这个元素的总宽度也是250px</p> </div> </body>
2.使用跨浏览器的解决方案指定元素的总宽度为250像素的
div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; }
<body> <img src="250x250px.gif" width="250" height="1" /><br /><br /> <div class="ex">上面线的宽度为 250px 。<br /> 现在本元素的整体宽度也为 250px。</div> <p><b>注意:</b> 在这个例子我们加上了 DOCTYPE 声明(在 html元素前面), 所以它将在任何浏览器中都将正常显示。</p> </body>
CSS边框
1.设置四个边框的宽度
p.one { border: 3px solid gray; } p.two { border: 2px solid gray; } p.three { border: 1px solid black; }
<body> <p class="one">一些文本</p> <P class="two">一些文本</P> <P class="three">一些文本</P> <p><b>注意:</b>"border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p> </body>
2.设置四个边框的样式
p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;}
<body> <p class="none">无边框。</p> <p class="dotted">虚线边框。</p> <p class="dashed">虚线边框。</p> <p class="solid">实线边框。</p> <p class="double">双边框。</p> <p class="groove"> 凹槽边框。</p> <p class="ridge">垄状边框。</p> <p class="inset">嵌入边框。</p> <p class="outset">外凸边框。</p> <p class="hidden">隐藏边框。</p> </body>
3.设置四个边框的颜色
p.one { border-style:solid; border-color:#0000ff; } p.two { border-style:solid; border-color:#ff0000 #0000ff; } p.three { border-style:solid; border-color:#ff0000 #00ff00 #0000ff; } p.four { border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255); }
<body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p> <p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p> </body>
4.每边设置不同边框
p.one {border-style:dotted solid dashed double;} p.two {border-style:dotted solid dashed;} p.three {border-style:dotted solid;} p.four {border-style:dotted;}
<body> <p class="one">This is some text in a paragraph.</p> <p class="two">This is some text in a paragraph.</p> <p class="three">This is some text in a paragraph.</p> <p class="four">This is some text in a paragraph.</p> </body>