首页前端开发CSSCSS+DIV盒子模型

CSS+DIV盒子模型

时间2024-05-24 23:08:03发布访客分类CSS浏览20
导读:CSS盒子模型-什么是CSS盒子模型。 认识日常生活中盒子: 常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。 CSS盒子: 根据字面我们可以理解,CSS盒子也是装东西的,比如我们要将文...

CSS盒子模型-什么是CSS盒子模型

认识日常生活中盒子

常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。

CSS盒子
根据字面我们可以理解,CSS盒子也是装东西的,比如我们要将文字内容、图片布局网页中,那就需要像盒子一样装着。这个时候我们对其对象设置css高度(css height)、css宽度(css width)、css边框(css border)、css 边距(css margin)、填充(css padding),即可实现像盒子一样的长方形、正方形平面盒子。

通常我们这样
一组

等类似这种语法标签组叫1个盒子。因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充(padding)等属性后即可呈现出盒子一样的长方形或正方形。所以我们CSS盒子模型因此而得来。

日常使用CSS盒子
我们说将什么内容放入一个盒子里,我们就要想到是放入

里,脑海里就要这个概念。
假如我们说设置一个宽度为100px盒子,我们就要知道如下一个概念:

Css样式代码
.yangshi{ width:100px; }

对应html代码

内容

这个时候我们可以将

内容
看作为一个盒子。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: CSS+DIV盒子模型
本文地址: https://pptw.com/jishu/667347.html
七牛云存储+WP Super Cache缓存插件实现整站静态文件存储CDN加速 ZBLOG PHP程序页面标题Title的优化 无需使用插件

游客 回复需填写必要信息