css盒模型盒模型包括什么？ 主要是内容(内容区域)、填充和边距
分为两类。 IE盒模型、css标准盒模型
在IE盒模型中，width和height指向内容区域边框填充的宽度和高度
在css标准框模型中，width和height是指内容区域的宽度和高度，增加内部、外部和外部边距不会影响内容区域的大小，而是会改变整体大小
如何设置两种长方体模型box-sizing: content-box； /*标准盒模型*
盒尺寸： border-box； /* ie盒型号*
获取js元素宽度1、element.style.width/height
2、ie独特的方式
element.current style.width/height
3、通用型
window.getcomputedstyle (element ).width/height
4、类似api的形状
element.getBoundingClientRect ().width/height；
在margin聚合、margin重叠标准文档流中，不重叠数值方向的margin，仅将大的值设为margin (由于水平方向可以重叠，所以没有聚合现象)
主要是兄弟之间，比如两个div。 margin-bottom:50px(div1)，下面的兄弟div是margin-top:10px。 结果不是取上下距离60px，而是取margin的最大值，即50px
syle type=text/CSS.block1{ width :100 px； height: 100px； 背景色： royal blue； 玛格琳- bottom : 70px； Overflow :自动； }.block2. block2_ child { width :150 px； height: 150px； 背景色： saddle brown； margin-top:90px； Overflow :自动； }.block2{ border :1 px solid # CCC； }/style/headbodydivclass=' block1'/divdivclass=' block2' divclass=' block2_ child '/div/div/body解决方法我们是否则，父元素的高度会降低。
BFC (在块级格式化上下文中，可以理解为独立区域)。在我的理解中，它就像一个渲染规则。
) BFC内的要素在垂直方向上边距重叠
例1是上面的代码，去除border修饰句后会出现重复现象
)2) BFC是页面中独立的容器，外面的因素不影响里面的因素。 反之亦然
在htdyz中，存在右侧div占据左侧div之下的空间的问题
//我们对右侧的div进行了bfc处理后
在左侧可以清楚地看到母箱的背景色
(3) BFC的区域不与相邻的浮动盒区域重叠)可以用于消除浮动的影响) )。
//)2)的图可以参考理解
)4)计算BFC高度时，悬浮元素也参与计算
)比较4 )的上下两幅图像来理解这个问题。 BFC高度
可见，父元素的高度基本上接近浮动元素的高度
BFC 1、overflow:如何将属性设置为隐藏、自动，而不是可见
2、浮动中：浮动的属性值不是none。 也就是说，如果设置了浮动，当前元素将创建BFC
3、position:必须是静态的、可撤销的
4、display: inline-block、table-cell、table-caption、flex、inline-flex
这里是引用
原文地址： https://www.cn blogs.com/qianguyihao/p/8512617.html
补充： css的基本单位问题是头疼，需要花点时间
% :百分比，这需要具体看用法。 那是针对谁的
大致来说，有1种，对母箱有2种，对箱本身有3种，对定位要素有3种
(这里是指有关位置的属性。 需要理解它指向的参照物是哪一个)
. wrap { position:absolute； left: 50%； top: 50%； 传输：传输(-50%、-50%； 举个例子，left和right是针对父盒的，它是其参照物；
后面的translate是其自身的参数(方面)设置
in:英寸
厘米cm:厘米
mm:
em: 1em相当于当前字体的大小
子元素的字体大小相对于父元素的字体大小。
的width、height、padding、margin使用em时是该元素的字体大小。 因为em每次换母盒时参照物都会发生变化，所以一般多使用rem。 这是因为rem的参照物只有html元素。 计算得更清楚
ex: 1ex是字体的x-height，通常是字体大小的一半
pt:磅1pt=1/72 in
px:像素
pc: 12点活字(1pc=12点)//这很少见，我没听说过。
rem是根元素字体大小的单位，用于html。
html{
font-size:100px； //此时，1rem=100px；
}
也就是说，当前字体大小为100px
想要调整为font-size:10px时
- WebKit-text-size-adjust : none； 由于在较新版本的chrome中已禁用，因此字体大小小于12px时仅显示12px
最好的方法还是用transform:scale ()调试，然后缩放就可以了
例如
p{
font-size:0.12rem
变换： scale (0.83；
}
rem自适应布局
document.documentelement.style.fontsize=document.documentelement.clientwidth/640 * 100‘px’；
//640是设计模式的大小。 也就是说，根据设计图的总体比例缩放内容大小，即使页面屏幕大小发生变化，rem的相对大小也会自动调整
闲话不多说，今天的知识点很乱。 暂时想起的话请看rem和em。
因此，我认为有必要朝着文字大小的部分进行整理。 学习的路很长，你和我一起学习。 明天不写纸质资料，心里就撑不住了