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

来源:互联网 发布:淘宝小二删除中差评 编辑:程序博客网 时间:2024/06/07 00:33

主要内容:

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

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

这里写图片描述

0 0
原创粉丝点击