博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css案例学习之盒子模型
阅读量:4708 次
发布时间:2019-06-10

本文共 693 字,大约阅读时间需要 2 分钟。

定义:每个盒子都有:边界、边框、填充、内容四个属性;
每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。
案例代码:
盒子模型的演示
  • 第1个列表的第1个项目内容
  • 第1个列表的第2个项目内容,内容更长一些,目的是演示自动折行的效果。
  • 第2个列表的第1个项目内容
  • 第2个列表的第2个项目内容,内容更长一些,目的是演示自动折行的效果。
说明:这里采用的是ul li布局。
内容(CONTENT)就是盒子里装的东西;
而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
边框(BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。

转载于:https://www.cnblogs.com/jiqing9006/p/4987439.html

你可能感兴趣的文章
Word直接发表博客测试
查看>>
sublime text2 中Emmet常用的技巧 和快捷键
查看>>
浏览器对应用程序的根URL发出请求时所发生的情况(结合 DI)
查看>>
VS2013 F12无法转到函数的定义处,总是从“元数据”获取的问题 ——解决方法...
查看>>
Python列表list对象方法总结
查看>>
jjs 产生undefined的情况
查看>>
chrome的uget扩展程序红色 Unable to connect with uget-integrator问题
查看>>
16 个免费和收费的视频、多媒体 WordPress 主题
查看>>
noip2018游记
查看>>
[SCOI2008]配对
查看>>
尚学堂Spring视频教程(七):AOP XML
查看>>
PHP 常用函数库和一些实用小技巧
查看>>
互联网架构消息队列
查看>>
day5_生成进度条的程序
查看>>
Linux内核之于红黑树and AVL树
查看>>
招聘一个靠谱的iOS
查看>>
使用Xunit进行单元测试
查看>>
TCP的三次握手和四次握手
查看>>
创建用户、授权SCHEMA
查看>>
python学习笔记
查看>>