Css3盒子模型-css学习之旅(5)

主要内容:

盒子模型内边距,外边距,边框,外边距合并

主要包括: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; }

效果图

Css3盒子模型-css学习之旅(5)_第1张图片

外边距:接收任何单位,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; }

Css3盒子模型-css学习之旅(5)_第2张图片

你可能感兴趣的:(html5,css3,合并)