时间：2023-07-02 20:09:02 | 来源：网站运营
时间：2023-07-02 20:09:02 来源：网站运营
轻松学：网页设计11-网页布局CSS +盒子：盒子模型是CSS网页布局的基础，它替代了传统的表格布局。只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果
在线咨询
<!doctype html><html><head><meta charset="utf-8"><title>认识盒子模型</title><style type="text/css">.box{ width:200px; /*盒子模型的宽度*/ height:50px; /*盒子模型的高度*/ border:15px solid red; /*盒子模型的边框*/ background:#CCC; /*盒子模型的背景颜色*/ padding:30px; /*盒子模型的内边距*/ margin:20px; /*盒子模型的外边距*/ display:block; /*k块级元素显示*/}</style></head><body><p class="box">盒子中包含的内容</p><div class="box">div盒子内容</div><span class="box">span盒子内容</span></body></html>这里写了<p>、<div>、<span>的不同 span是行元素使用 display:block; /*块级元素显示*/.box{ margin:10px; padding:10px; width:200px; /*设置段落的宽度*/ height:80px; /*设置段落的高度*/ background:#CCC; /*设置段落的背景颜色*/ border:8px solid #00f; /*设置段落的边框*/}h2{border-style:double;} /*4条边框相同——双实线*/.one{border-style:dotted solid;} /*上下为点线左右为单实线*/ .two{border-style:solid dotted dashed;} /*上实线、左右点线、下虚线*/ .three{border-style:dashed dotted double solid; border-width:5px 15px; border-color:#6FF #0000CC;}注意：宽度、样式、颜色顺序任意，不分先后<style type="text/css"> img{ border:8px solid #6C9024; border-radius:100px/50px; /*设置水平半径为100像素，垂直半径为50像素*/ }</style>*{ padding:0; /*清除内边距*/ margin:0; /*清除外边距*/}3.box-shadow属性<style type="text/css">img{ padding:20px; border-radius:50%; border:1px solid #ccc; box-shadow:5px 5px 10px 2px #999 inset; }</style>box-shadow:5px 5px 10px 2px #999 inset;body{background-color:#CCC; background-image:url(images/jianbian.jpg);} 5.3背景与图片不透明度的设置<style type="text/css">#boxwrap{width:330px; margin:10px auto; border:solid 1px #FF6666;}img:first-child{opacity:1;}img:nth-child(2){opacity:0.8;}img:nth-child(3){opacity:0.5;}img:nth-child(4){opacity:0.2;}</style>5.4设置背景图像平铺关键词：布局,盒子,设计
