盒子模型
---使用盒子模型属性美化网页元素
技能目标
会使用盒子属性美化网页元素
理解标准文档流及其组成和特点
会使用display属性设置元素显示方式
Padding 填充 margin 边界
边框(border)
样式(border-style)
颜色(border-color)
粗细(border-width)
例：border-style:soild; 实线
border-width:5px;
当border-style的值有2个时，第一个值代表上下边框，第二个值代表左右边框
border-style:dashed solid;
border-style:dashed solid double dotted; 上 右 底 左 顺时针从0开始
Border-color：#FF0000； 也可以写成Border-color：#F00；第一第二位一样可以简写成一个，后面如此类推
Border：5px red solid;
Border-top:5px blue dashed;
这里我的需求是上边框变为蓝色虚线边框，其他为红色实线边框。在CSS样式解析中是从上往下走，如果将这两句调换的话，边框效果都为红色
外边距(margin) 离外面的容器有多少像素，相对于谁，是谁的外边距就在谁那里设，比如下面的马，则在img标签样式里设置
margin-top
margin-right
margin-bottom
margin-left
Margin
margin:3px 5px 7px 4px;
margin:3px 5px;
margin:8px
类比边框一样的含义
/*水平居中*/
Margin:0px auto 上下为0像素，左右自适应
例：
<body>
<div class="box">
<div><img src="image/1.jpg" width="200px" height="200px"></div>
</div>
<ul class="list">
<li>计算机</li>
<li>英语</li>
<li>金融</li>
</ul>
</body>
注意：这里蓝色背景的div和棕色的ul之间有缝隙，在代码中并没有换行，因为标签自带默认margin或者浏览器兼容的问题，因此一般网页中样式会加载这句
*{margin=0px} *为通配符，这里代表所有网页元素外边距为0px
内边距(padding)
padding-left
padding-tight
padding-top
padding-bottom
Padding
扫一扫
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
