盒子模型基本介绍及知识点
盒子模型
盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距( margin)组 成。
盒子里面的文字和图片等元素是 内容区域
盒子的厚度 我们成为 盒子的边框
盒子内容与边框的距离是内边距;盒子与盒子之间的距离是外边距
2.盒子边框
语法:border : border-width || border-style || border-color
border: 1px solid red;
表格的细线边框 :table{ border-collapse:collapse; }
3.内边距
padding属性用于设置内边距。 是指 边框与内容之间的距离。
4个值 padding: 上内边距 右内边距 下内边距 左内边距
实际高度: Height = content height + padding + border
实际宽度:Width = content width + padding + border
通过给设置了宽高的盒子,减去相应的内边距的值,维持盒子原有的大小
4.布局稳定性
按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)
原因:
(1) margin 会有外边距合并 还有 ie6下面margin 加倍的bug## 标题所以最后使用。
(2)padding 会影响盒子大小, 需要进行加减计算 其次使用。
(3)width 没有问题我们经常使用宽度剩余法 高度剩余法来做
5.外边距
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
外边距合并
相邻块元素垂直外边距的合并 :取两个值中的较大者
嵌套块元素垂直外边距的合并(塌陷)
(1)可以为父元素定义上边框。 (2) 可以为父元素定义上内边距 (3)可以为父元素添加overflow:hidden。
块级盒子水平居中; margin:0 auto;
文字水平居中是 text-align: center
插入图片 移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
清除元素的默认内外边距:padding:0;margin:0;
盒子模型基本介绍及知识点相关推荐
- html中怎么让盒子模型居中,通过box盒子模型给元素内容设置居中
老版本语法 div{ display: -webkit-box; -webkit-box-align:center; //垂直居中 -webkit-box-pack:center;//水平居中 } 新 ...
- CSS布局:CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的 优先级 公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
- JS助记 ----- 盒子模型与获取元素样式
盒子模型简单介绍 content-box 默认的盒子模型,width 和 height 设置的是 content 的大小,有border和padding的情况下再额外增加盒子的宽高,整个盒子的可视区大 ...
- Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框、内边距、外边距
前言 持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍 盒子的概念 页面中的每一个标签,都可看做是一个 "盒子&qu ...
- 【前端学习笔记】(五)(CSS布局 盒子模型)
目录 盒子模型 1.盒子模型的介绍 2.内容区域的宽度和高度 3.边框( border ) 3.1 边框(border)- 单个属性 3.2 边框(border)- 连写形式 3.3 边框(borde ...
- 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第十讲:深入理解盒子模型
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第十讲:深入理解盒子模型 摘要:通过前节<第九讲:块元素.行内元素.标准流.盒子模型>学习了前节介绍了贵阳网站建设中的DIV+CSS中类选择器.i ...
- 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第九讲:块元素、行内元素、标准流、盒子模型
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第九讲:块元素.行内元素.标准流.盒子模型 DIV+CSS将显示和数据分离,极大的方便了贵阳网站建设时布局的灵活性.将节对DIV+CSS中类选择器.id选择器 ...
- Day05-CSS布局-盒子模型
CSS布局-盒子模型 一.CSS三大特性 3.1 优先级的介绍 3.2 权重叠加计算 3.3 (拓展)权重叠加计算案例 4.1 Chrome调试工具 二.PxCook的基本使用 三.盒子模型 1.1 ...
- HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用
目标 能够认识 盒子模型 的组成部分 能够掌握盒子模型的 边框.内边距.外边距 的作用及简写形式 能够计算盒子的 实际大小 能够了解 外边距折叠现象,并知道如何解决 盒子塌陷问题 一.PxCook的基 ...
最新文章
- 奔腾微型计算机采用的微处理器的型号,“奔腾”微型计算机采用的微处理器的型号是()。...
- Good Bye 2018题解
- Log4j的自定义logger
- 云服务器系统盘升级会不会丢失数据,云服务器 系统盘快还是数据盘快
- pae扩展内存 linux,Linux内核-内存管理-PAE(物理地址扩展)
- 修改gitignore 后不起作用
- 南阳OJ 16 矩形嵌套
- Openbox自定义键盘(lxde-rc)
- hybird app
- Jquery仿IGoogle实现可拖动窗口
- 深入理解C#面向对象之继承
- python使用execjs时,编码gdk报错
- 2021年5月30日 星期日 晴
- Hive编程指南01
- 武汉某GIS企业机试题
- 使用YMIR生产基于yolov5的头盔检测模型
- 传统企业数字转型,主要面临哪些问题?
- PDFjs提取文件中的图片
- 人类以负熵为食:工作、生活、群体负熵
- linux 常用操作备注