盒子基础

Posted liuyizhou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒子基础相关的知识,希望对你有一定的参考价值。

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)由浏览器生成。

以上是关于盒子基础的主要内容,如果未能解决你的问题,请参考以下文章

css盒子模型(基础下)

零基础入门前端系列—盒子模型(十四)

CSS基础知识五定位

基础面试题——什么是盒子模型

css基础

盒子常规流和浮动基础