css盒子模型概念
2023-09-11 14:22:19 时间
CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:
图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最外层是外边距(margin),整个构成了框模型。通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素。
那么,元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;
元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。
盒子模型=context+padding+border+margin.
2018-03-21 00:52:50
相关文章
- SQL Server Alwayson概念总结
- C语言重要概念汇总
- 【CSS】 Css背景图片及背景渐变综合知识和技巧大全(代码实例)
- [转]RabbitMQ入门教程(概念,应用场景,安装,使用)
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
- C#基础概念二十五问
- 3天学会css视频_PHP初级 CSS教程_CSS入门教程
- CSS(字体相关知识以及css三种样式表使用方法)
- css CSS常见布局解决方案
- 《Git版本控制管理(第2版)》——4.3 Git在工作时的概念
- Android中dp,px,sp概念梳理以及如何做到屏幕适配
- 链接与加载过程中,几个关键的概念
- 面向对象 概念区分 多态和重载
- 【Linux系统】进程概念
- CSS_css sprite原理优缺点及使用
- 浅析如何给css加上模块的功能以及CSS Modules用法介绍
- NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题及VUE提取 CSS 到单个文件
- CSS阻塞渲染、怎么防止css阻塞
- webpack高级概念,PWA的打包配置(系列十二)
- CSS学习---css基础知识0105
- CSS学习知识整理(五)Css display(显示)
- CSS学习知识整理(四)Css 盒子模型
- CSS学习知识整理(二)Css 背景
- CSS学习知识整理(一)Css 简介、语法与创建
- MyBatis 之一(概念、创建项目、操作模式、交互流程)
- 【数据库】JDBC的概念 及 jar包配置
- Mysql MGR(1)MGR基础概念
- CSS 加粗(css font-weight)
- 概念火热 智能家居究竟是否值得改装?
- 智能家居概念诞生八十余载 落地缓慢原因何在