Web前端基础知识：CSS盒子模型、绝对定位和相对定位

一：CSS盒子模型

CSS盒子模型概念：CSS盒子模型包含了内容（content）、内边距（padding）、边框（border）、外边距（margin）、宽度（width）、高度（height）几个要素，如图（图为标准盒子模型）

Content：所写的内容；
Padding：边框内的距离，设置时一般是上右下左的顺序，例如padding:10px(上)，20px(右)，30px(下)，40px(左)；
Border：将内容框起来的一个边框。border有三个属性，粗细（width），样式（style），颜色（color）。width可以设置为thin、thick和length，length为具体数值。style可以设置为none、hidden、solid等，none是不显示border，hidden可以解决边框中多余的内容，solid表示是实线。例如上图的边框可表示为border:10px solid red，“10px”表示的是边框的粗细；
Margin ：盒子与盒子之间的距离（或者说是边框与边框之间的距离）；
Width ：宽度（这是标准盒子的宽度，IE的宽度与标准盒子的宽度不同）；
Height ：高度（同上）。

二：绝对定位和相对定位

绝对定位（absolute）的概念：如果设置它的偏移量，将会影响其他元素的位置。如下图（图来自百度）

设置绝对定位时，元素会相对于离自己最近的设置了绝对定位的父元素进行定位。如上图就可以看出，离“第二个块”最近的设置了绝对定位的父元素是div02。【相对定位同理】

相对定位（relative）的概念：通过设置可使边框“相对于”它的起点移动，不影响其他元素的位置，依旧占据着原来的空间。如下图（图来自百度）

Web前端基础知识：CSS盒子模型、绝对定位和相对定位相关推荐

前端基础之CSS盒子模型
目录长度单位像素百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
web前端基础与CSS入门
web前端基础 1.嵌套列表注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
盒子模型什么是盒子模型网页设计中常听的属性名:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模型都具备这些属性.这些属性我们可以用日常 ...
Web前端基础知识总结
一.HTML和CSS 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是pres ...
WEB前端基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
Web 前端基础知识面试大全
目录一.HTML 1.对 HTML 语义化的理解 2.区别:src 和 href 3.DOCTYPE 的作用 4.HTML5 的新特性 5.script 标签中的 defer 和 async 6. ...
web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...

Web前端基础知识：CSS盒子模型、绝对定位和相对定位

Web前端基础知识：CSS盒子模型、绝对定位和相对定位相关推荐

最新文章

热门文章