医院门户网站模板下载,2023年房地产行业分析,网站改版申请,高中生沉迷哔哩哔哩怎么办前言#xff1a; 盒子模型是css中最核心的基础知识#xff0c;理解了这个重要的概念才能更好的排版#xff0c;进行页面布局。一、css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) #xff0c;包含了元素内容#xff08;content#xff09;、内边距#…前言 盒子模型是css中最核心的基础知识理解了这个重要的概念才能更好的排版进行页面布局。一、css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) 包含了元素内容content、内边距padding、边框border、外边距margin几个要素。如图 图中最内部的框是元素的实际内容也就是元素框紧挨着元素框外部的是内边距padding其次是边框border然后最外层是外边距margin整个构成了框模型。通常我们设置的背景显示区域就是内容、内边距、边框这一块范围。而外边距margin是透明的不会遮挡周边的其他元素。 那么元素框的总宽度 元素element的width padding的左边距和右边距的值 margin的左边距和右边距的值 border的左右宽度元素框的总高度 元素element的height padding的上下边距的值 margin的上下边距的值 border的上下宽度。二、css 外边距合并叠加 两个上下方向相邻的元素框垂直相遇时外边距会合并合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值如图 比较容易理解所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义如下图 需要注意的是只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。css reset 中也会经常用到* { margin : 0; padding : 0; } 三、box-sizing属性介绍box-sizing属性是用户界面属性里的一种之所以介绍它是因为这个属性跟盒子模型有关而且在css reset中有可能会用到它。box-sizing : content-box|border-box|inherit; (1) content-box ,默认值可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。 即总宽度 margin border padding width (2) border-box , 设置的width值其实是除margin外的border padding element的总宽度。盒子的width包含border padding 内容 即总宽度 margin width很多CSS框架都会对盒子模型的计算方法进行简化。(3) inherit , 规定应从父元素继承 box-sizing 属性的值上海尚学堂web前端原作请多支持关于border-box的使用1 一个box宽度为100%又想要两边有内间距这时候用就比较好2 全局设置 border-box 很好首先它符合直觉其次它可以省去一次又一次的加加减减它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
