Css3盒子模型-css学习之旅（5）
2015-10-06 16:33
656 查看
主要内容：
盒子模型内边距，外边距，边框，外边距合并
主要包括：margin（外边距）padding（内边距） border（边框）centent（内容）
内边距：padding，paddingleft，paddingright，paddingtop，paddingbottom
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First html</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <table border = "1"> <tr><td> 内边距 </td></tr> </table> </body> </html>
td{
padding: 100px;
}效果图
边框：1.可以创建出任何的边框并且应用于任何格式；2.border-style：定义了包括10种样式，包括none3.边框的单边框样式：border-top-style，border-bottom-style：border-style-right：border-left-style
同样还有border-width和border-color等属性 ，同样有top，bottom，和right和right四个属性
css3的行的边框属性：border-radius：边框圆角；box-shsdow：边框阴影；border-image：边框图片
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First html</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>css边框样式</p> </body> </html>
p{
border-radius: 10px;
width:100px;
background-color: aquamarine;
border: 2px solid blue;
}效果图
外边距：接收任何单位，cm，px，百分数
属性值：margin以及top等四个方位的属性
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First html</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="mg">边框</div> </body> </html>
body{
margin: 0;
}
.mg{
margin:100px;
width: 100px;
height: 100px;
background-color: brown;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 