盒子基础

Posted 2020-11-20 liuyizhou

padding（外边框、填充区）

含义：表示边框到内容之间的距离：上（top）、右（right）、下（bottom）、左（left）。

类似于箱子和物品之间的填充物。

border边框

dasher（虚线） dotted（点线） soild（实线）

圆角

border-radius：半径值；

一个值表示四个角的半径

两个值的话，第一个表示左上右下。第二个表示左下右上。

border-bottom-right-radius:半径值 半径值；

指定右下角的半径，第一个是水平，第二个是垂直。

border-top：transparent

不显示边框（透明色边框）

outline

格式：outline：边框值；

表示轮廓，用于布局，不占像素

• 只能设置四个边，不能分开设置

子盒子构成

边框盒border-box（背景色默认渲染区域）

由border、padding、content组成

填充盒padding-bow

padding、content，严格意义上overflow溢出，指溢出填充盒。

内容盒content-box

默认情况下width和height就是指内容盒的宽和高。

设置背景色的渲染区域，默认值：border-box（边框盒）

设置渲染区域格式：background-clip：子盒子；

box-sizing：设置元素的渲染尺寸

content-box（默认值）：高和宽设置的是内容盒。

border-box：高和宽设置的是边框盒。

可以解决横向滚动条问题。

视觉格式化模型（visual formatting model）

CSS的一种机制，它规定了页面中多个盒子如何布局。

视觉格式化模型规定，定位体系一共有三种。

• 常规流（normal flow）文档流 常规文档流

• 浮动（float）

• 绝对定位（absolute positionmed）

position默认值：static

float默认值：none

margin：px、em、%、auto（可为负值）

border：px、em

padding：px、em、%

width、height：px、em、%、auto

em单位是根据当前标签的font-size决定的，一个单位是字体大小的两倍。

注：如果当前标签没有设置font-size注意继承。

视口（viewport）

可视窗口，通常指浏览器的可视区域。

视口的尺寸仅受到浏览器可是窗口大小的影响，和内容无关。

包含块（containing block）

每个元素都有一个包含块，它指元素在页面中摆放的区域。

通常情况下元素的包含块是它父级元素的内容盒。

html包含块：初始化包含块（initial containing bolck）由浏览器生成。