点击此处返回
未登录用户
每日可免费学习1个教程
王晓楠
关注人数：10182
1.电商设计师学习代码的必要性
2.店铺装修- DW软件与HTML
3.店铺装修-常用的HTML标签
4.店铺装修-标签的属性和标签的嵌套
5.店铺装修-常用的HTML标签—超链接
6.店铺装修-图片标签和图像地图
7.店铺装修-表格标签的应用
8.店铺装修-表单标签及搜索框的应用
9.店铺装修-店铺装修中的表单运用
10.店铺装修-不同类型的列表标签
11.店铺装修-CSS层叠样式介绍及应用
12.店铺装修-更加多样的CSS文本样式
13.店铺装修-CSS中的背景样式
14.店铺装修-电商页面背景图片案例
15.店铺装修-CSS中的盒子模型
16.店铺装修-边框border的用法
17.店铺装修-float浮动在布局中的意义
18.店铺装修-浮动布局页面的方法
19.店铺装修-三种常见的元素及转换方式
20.店铺装修-定位布局在店铺装修中的意义
21.店铺装修-CSS样式的3种类型和7种选择器
22.店铺装修-巧用淘宝系统类实现全屏海报
23.店铺装修-淘宝系统类做交互效果
24.店铺装修-淘宝开发平台widget库
25.店铺装修-J_TWidget库做全屏轮播
26.店铺装修-widget库中的手风琴效果
27.店铺装修-widget库中弹出层效果
28.店铺装修-巧用工具做常规店招
29.店铺装修-自定义店招及店内搜索框
30.店铺装修-不同类型的店铺海报装修
31.店铺装修-整体页面常见的装修方式
32.店铺装修-自定义页面中的楼层跳转效果
33.店铺装修-不同类型的自定义轮播
34.店铺装修-其他页面及无线端店铺装修
本篇教程学习的是店铺装修-CSS中的盒子模型，喜欢的一起来学习吧。
那我们开始今天的教程吧。
1.CSS中的盒子模型，这个框由几个东西组成，首先是主体内容，它是在中间的位置，并不是从相框的左上角开始的，我们在绘制的时候就绘制中心这一块，旁边的就是填充。
2.内填充在CSS里叫padding，就是内容和外边框产生的距离，再往外就是边框，在CSS里叫border，每一个画作为整体，画框与画框之间有一个小间隔，这个间隔叫外间距，在CSS中叫margin。
3.创建【HTML文件】，在【拆分】视图里面写些内容，盒子模型前面加个h1，再写个盒子模型，加个h2，元素与元素之间有间隔，写个【div标签】。
4.选择【窗口】-【CSS设计器】，点击【+】，选择【在页面中定义】，添加【选择器】，在【布局】里有一个叫margin，黑框代表是一个整体，margin代表的是元素与元素之间的间距，padding也是一样的。
5.写个【style标签】，定义一下宽度，加个背景颜色，刷新一下，文字和外边框靠的特别近，添加padding值，加个【padding-left】【30px】，这个时候字和左边产生一个距离了，加个【padding-top】【60px】，文字就和上面产生了间距，这个就是padding。
70000+教程，每天免费学一课
打开APP，离线免流量
