盒子模型的简介
创始人
2024-05-30 01:36:40
0次

盒子的组成

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是css属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

盒子的类型

  • 第一种是W3C标准的盒子模型（标准盒模型）
  • 第二种IE标准的盒子模型（怪异盒模型）

标准盒模型与怪异盒模型的表现效果的区别之处 

  • 标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度

W3C标准盒模型下盒子的大小 = width （ content ） + border + padding + margin 

  • 怪异盒模型中的width指的是内容、边框、内边距总的宽度；height指的是内容、边框、内边距总的高度 

怪异盒模型下盒子的大小 = width （ content + border + padding ） + margin 

 如何在CSS 设置这两个模型

标准盒模型：

box-sizing: content-box

怪异盒模型：

box-sizing: border-box

定位：

  • 绝对定位（参考点是左上的原点）

position:absolute;
(跟top/bottom/left/right联合使用)

  • 相对定位（参考点是本身的位置）

position:relative;
(跟top/bottom/left/right联合使用)

  • 固定定位

position:fixed;
(跟top/bottom/left/right联合使用)

包含块的设置：
设置为包含块的元素，参考点就是这个元素左上角的一点，
移动的范围就是包含块元素的大小

  • 浮动定位

float:none/left/right;
注意：如果有一个元素要浮动，相邻的元素也需要加上浮动！！！

  • 清除浮动：

clear:left/right/both;
注意：如果想要此元素不浮动，就使用

  • 溢出属性：

overflow:hidden/scroll/visibility(默认显示);
text-overflow:ellipsis;(文本超出后用…显示)

  • 层叠

z-index:数字（不要单位）;
数字越大越在上面，越小越在下面

  •   设置居中：
margin:0px auto;


 

 

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：云原生时代顶流消息中间件Apache Pulsar部署实操之轻量级计算框架

下一篇：华为云服务器安装mysql连接失败问题

相关内容

热门资讯

Python|位运算|数组|动... 目录 1、只出现一次的数字（位运算，数组） 示例 选项代...
张岱的人物生平 张岱的人物生平张岱（414年－484年），字景山，吴郡吴县（今江苏苏州）人。南朝齐大臣。祖父张敞，东...
西游西后传演员女人物 西游西后传演员女人物西游西后传演员女人物 孙悟空 六小龄童 唐僧 徐少华 ...
名人故事中贾岛作诗内容简介 名人故事中贾岛作诗内容简介有一次,贾岛骑驴闯了官道.他正琢磨着一句诗,名叫《题李凝幽居》全诗如下：闲...
和男朋友一起优秀的文案？ 和男朋友一起优秀的文案？1.希望是惟一所有的人都共同享有的好处；一无所有的人，仍拥有希望。2.生活，...
戴玉手镯的好处 戴玉手镯好还是... 戴玉手镯的好处 戴玉手镯好还是碧玺好 女人戴玉？戴玉好还是碧玺好点佩戴手镯，以和田玉手镯为佳！相嫌滑...
依然什么意思？ 依然什么意思？依然（汉语词语）依然，汉语词汇。拼音：yī    rán基本解释：副词，指照往常、依旧...
高尔基的散文诗 高尔基的散文诗《海燕》、《大学》、《母亲》、《童年》这些都是比较出名的一些代表作。
心在飞扬作者简介 心在飞扬作者简介心在飞扬作者简介如下。根据相关公开资料查询，心在飞扬是一位优秀的小说作者，他的小说作...
卡什坦卡的故事赏析？ 卡什坦卡的故事赏析？讲了一只小狗的故事, 我也是近来才读到这篇小说. 作家对动物的拟人描写真是惟妙...
林绍涛为简艾拿绿豆糕是哪一集 林绍涛为简艾拿绿豆糕是哪一集第三十二集。 贾宽认为是阎帅间接导致刘映霞住了院，第二天上班，他按捺不...
小爱同学是女生吗小安同学什么意... 小爱同学是女生吗小安同学什么意思 小爱同学，小安同学说你是女生。小安是男的。
内分泌失调导致脸上长斑,怎么调... 内分泌失调导致脸上长斑,怎么调理内分泌失调导致脸上长斑,怎么调理先调理内分泌，去看中医吧，另外用好的...
《魔幻仙境》刺客，骑士人物属性... 《魔幻仙境》刺客，骑士人物属性加点魔幻仙境骑士2功1体质
很喜欢她，该怎么办？ 很喜欢她，该怎么办？太冷静了！！ 太理智了！爱情是需要冲劲的~不要考虑着考虑那~否则缘...
言情小说作家 言情小说作家我比较喜欢匪我思存的，很虐，很悲，还有梅子黄时雨，笙离，叶萱，还有安宁的《温暖的玄》 小...
两个以名人的名字命名的风景名胜... 两个以名人的名字命名的风景名胜？快太白楼，李白。尚志公园，赵尚志。
幼儿教育的代表人物及其著作 幼儿教育的代表人物及其著作卡尔威特的《卡尔威特的教育》，小卡尔威特，他儿子成了天才后写的《小卡尔威特...
海贼王中为什么说路飞打凯多靠霸... 海贼王中为什么说路飞打凯多靠霸气升级？凯多是靠霸气升级吗？因为之前刚到时确实打不过人家因为路飞的实力...
运气不好拜财神有用吗运气不好拜... 运气不好拜财神有用吗运气不好拜财神有没有用1、运气不好拜财神有用。2、拜财神上香前先点蜡烛，照亮人神...