盒子模型：

将HTML页面中的布局元素看作是一个矩形的盒子

一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）
内容区域包括文字与图片等
盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
盒子的宽：内容宽度+左右内边距+左右外边距+左右边框
盒子的高：内容高度+上下内边距+上下外边距+上下边框

内边距产生的问题

有宽度的盒子加内边距会撑大原来的盒子
解决：
将有宽高的盒子减去相应的内边距的值
若一个盒子没有指定宽度，此时给这个盒子指定padding，则不会撑开盒子。

清除元素的默认内外边距

使用margin时，会出现垂直外边距合并

(1). 相邻块元素

当上下相邻的两个块元素，如果上面的元素有margin-bottom
下面的元素有margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。
而是 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。

(2). 嵌套块元素

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，那么父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者
解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。

注意：#浮动、固定、绝对定位的盒子不会有问题！

浮动

特点：

加了浮动的盒子在其他标准流盒子的上面。
加了浮动的盒子是不占位的

注意：

浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙
浮动是不占位的，会影响下面的标准流元素，需要给浮动的元素添加一个标准流的父亲。
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距
浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
如果一个盒子里面有多个子盒子，如果其中一个盒子浮动，其他兄弟盒子也应该浮动。防止引起问题

三种布局机制的上下顺序

标准流在最底层
浮动在中间层
定位的盒子在最上层

定位

statlc 静态定位是元素的默认定位方式，无定位。
relative 相对定位是元素相对于自身原来在标准流中的位置来说的(占位)
absolute 绝对定位是元素以最近的带有定位的父级元素来移动位置。
3.1 不占位
3.2 父元素没有定位，则以浏览器为准定位
3.3要和父级搭配使用：子绝父相
fixed 固定定位只认浏览器的可是窗口（应用：电梯导航）
4.1 不占位
4.2 跟父元素没有任何关系；单独使用的
4.3 不随滚动条滚动。

堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后面的盒子会压住前面的盒子。
用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

z-index 的特性如下：
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字无单位。

浮动的妙用：

让多个块级元素在一行显示。
让左右对齐盒子浮动的盒子就是按照顺序左右排列

知识点内容来自教学视频，自己总结归纳。

box-sizing: border-box;

width = border + padding + 内容的宽度
height = border + padding + 内容的高度

box-sizing: content-box

width = 内容的宽度
height = 内容的高度

CSS面试须知--盒子模型、浮动及定位相关推荐

Web前端基础---CSS样式--盒子模型--浮动与定位
Day02 CSS样式 DIV和CSS DIV是层叠样式表中的定位技术,全称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML文档内大块(block-level)的内容提供结 ...
web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
文章目录一.什么是CSS 二.CSS的三种样式及其优先级三.CSS基本选择器及其优先级四.其他常见的选择器五.选择器优先进阶六.css的常见属性(颜色.背景.字体.边框) 七.内间距和外间距 ...
盒子模型+浮动布局+定位布局
盒子模型 border (边框)元素边框 margin 外边距 padding 内边距 content (内容)可以是文字或图片浮动布局 1.浮动:float:left/right; 2.清 ...
css基础，盒子模型，选择器与权重
1.css基础 1.1css简介 css(叠层样式表)是一种标记语言 1.1.1css语法规则选择器加声明 <style>/* 选择器{样式} *//* 给谁改样式{改什么样式} */p ...
CSS学习之盒子模型
1. 前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
css 标签显示模型盒子模型浮动背景属性
标签显示模式(display) 块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建. 常见的块元素有< ...
css盒子模型浮动
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
CSS基础：盒子模型和浮动
盒子模型所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子,封装HTML元素. 它包括:外边距(marg ...

CSS面试须知--盒子模型、浮动及定位