<盒子模型>

一.什么是盒子模型
把所有的网页元素都看成一个盒子.

盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距( margin)组 成。

1.表格的细线边框 :table{ border-collapse:collapse; }

2.padding属性用于设置内边距。

3.布局稳定性
按 优先使用 宽度 (width) 其次 使用内边距(padding) 然后 外边距(margin)
原因:
(1) margin 会有外边距合并 还有 ie6下面margin 加倍的bug## 标题所以最后使用。
(2)padding 会影响盒子大小, 需进行加减计算 然后使用。
(3)width 没有问题我们经常使用宽度剩余法 高度剩余法来做

4.外边距:
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

相邻块元素垂直外边距的合并 :取两个值中的较大者

(1)可以为父元素定义上边框。
(2) 可以为父元素定义上内边距
(3)可以为父元素添加overflow:hidden。

块级盒子水平居中; margin:0 auto;
文字水平居中是 text-align: center

插入图片 移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

清除元素的默认内外边距:padding:0; margin:0;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值