深圳市金黑网络技术有限公司始终坚持以用户需求为导向,提供安全、稳定、高效的产品和服务!
签到 · 搜索导航 · 服务热线 · 微信/手机:17817817816

深圳网站建设

查看: 761|回复: 0

div盒子模型

[复制链接]

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2022-2-15 02:22:32 | 761 | 0 | 显示全部楼层 |阅读模式
我们说div就是一个块,它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程
盒子模型特性:
4个组成部分:宽高、内间距、边框、外间距

1.内边距padding
示意图

深圳企业网站.jpg
注意:
  • 添加了padding属性的元素,会加大盒子的宽或高,需要减去padding的大小
  • 如果这个块级盒子没有width属性(从父级继承宽度)的时候,添加padding和border不会撑大盒子(盒子内容部分会自动压缩)

2.外边距margin
示意图

深圳网站建设.jpg
多学一招:margin:0 auto;可以让盒子在其父元素中居中

margin:0 auto;和text-align:center;的区别
margin:0 auto;
text-align:center;

针对的对象盒子---块元素(标签本身)标签内部的行元素
居中的范围在父盒子中居中自己内部
3.边框属性
边框有3要素:边框类型、边框颜色、边框厚度
a) 边框类型
语法:border-style:值
取值:
        (1)solid实线
        (2)dashed虚线
        (3)dotted点线
        (4)double双线

楼主热帖

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表