CSS盒状模型简介

CSS盒状模型

在平时的开发过程中还是经常得写博客,这2天有个公司找我面试,在面试当中提到了CSS中的盒状模型。这个东西在平时的前端开发经常用到。以下简单介绍一下:

CSS中的盒状模型由:margin、border、padding和content几个属性组成,

content:内容,它可以是文字和图片等;

padding:内边距,空白和内补丁,用于设置内容和边框之间的距离,就像一个缓冲带;

border:边框,用于设置内容边框的粗线和样式等 ;

margin:外边框,是一块内容与另一块内容之间的间距;

在使用CSS设置盒状模型宽度和高度时,我们只设置content区域的宽度和高度,而不是content+border+padding+margin. 如果给盒状模型定义背景色,将会在content区域和padding区域显示,是无法设置颜色的。

从以上的盒状模型介绍中可以看出,一个盒状模型应该将这4个方面的尺寸全部加起来计算:

盒状模型的宽度=左margin宽度+左padding宽度+左border宽度+content宽度+右padding宽度+右border宽度+右margin宽度 。

盒状模型的高度=上margin宽度+上padding宽度+上border宽度+content宽度+下padding宽度+下border宽度+下margin宽度。

时间: 2024-10-11 12:32:39

CSS盒状模型简介的相关文章

CSS 盒状模型简介

框的构成以及相关 CSS 特性( property ) 结构 为了给文档树中的各个元素排版定位(布局),浏览器会根据渲染模型1为每个元素生成四个嵌套的矩形框, 分别称作 content box.padding box.border box 和 margin box,它们是不可分割的,并可能会重合, 这就是 CSS 规范中描述的"框模型"(box model).它是以 CSS 的角度去看一个元素被渲染后的抽象形态. 是一个元素自身的构成部分,不同于布局:多个元素在页面上的定位.  注:p

CSS盒状模型

CSS盒状模型是大多数CSS布局与定位的基础,它以包含4个成分的有界限的盒子来描述网页中的每个元素.盒状模型示意图如下图所示. 盒子的尺寸=内容尺寸(width+height) + 内边距(padding) + 边框粗细(border) + 外边距(margin) 一.在给元素设置背景时 IE作用域:content + padding Firefox作用域:content + padding + border 二.border border-color : red green; 上下为红色,左右

<逆战>css盒模型简介

css盒模型是网页布局中不可或缺的部分,以下是对css盒模型简要介绍的思维导图: 注:margin常出现的bug: a:当父元素和子元素都没有设置浮动的情况下,如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上 b:上下相邻两个元素之间的margin值,不会叠加,按照最大值去设置 原文地址:https://www.cnblogs.com/meng-/p/12609618.html

第七十三节,css盒模型

css盒模型 学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 CSS盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性                       值                                             说明                                CS

css盒模型

css盒子模型是为了让我们充分理解div+css模型的定位功能,盒子模型在学习div+css布局方式中必须要学习的一个模型. 那什么是css盒模型呢? 网页设计中常听到的属性名:内容(content).填充(padding).边框(border).边界(margin).css盒模型都具备这些属性.这些属性和日常生活中盒子的属性是一样的.内容就是盒子里面装的东西,而填充就是像盒子里装的一些反震的材料,边框就是箱子的本身,边界呢就像盒子之间的空隙. 盒子的模型有2种,分别是IE盒子模型和标准盒子模型

第16章 CSS盒模型下

第 16章 CSS盒模型[下]学习要点:1.元素可见性2.元素盒类型3.元素的浮动 本章主要探讨 HTML5中 CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性使用visibility属性可以实现元素的可见性,这种样式一般可以配合 JavaScript来实现效果.样式表如下:属性 visibility 值 说明 CSS版本visible 默认值,元素在页面上可见 2hidden 元素不可见,但会占据空间. 2collapse 元素不可见,隐藏表格的行与列. 2 如果不

CSS 盒模型

CSS盒模型也叫框模型,具备内容(content).内边距(padding).边框(border).外边距(margin)这些属性.在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: border:元素的边框(可能不可见),用于将框的边缘与其他框分开: margin:外边距,表示框的边缘与相邻框之间的距离: padding:内边距,表示框内容和边框之间的空间. 盒模型的结构如下图所示: 由上图可以看出,width和height指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响

css盒模型和块级、行内元素深入理解

一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起.添加边框会在内边距区域外边增加一条线.这些线可以有不同的样式和宽度,如实线.虚线.点画线.在边框外边的是外边距,外边距是透明的,一般使用它控制元

CSS盒模型(Box Model)

阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀.盒模型是网页布局的基础,它制定了元素如何在页面中显示,如果足够地掌握,那使用CSS布局那将会容易得多. 1. 什么是CSS盒模型 盒模型,顾名思义,就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,