盒模型
Posted 瑶狗屎狗屎瑶i
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒模型相关的知识，希望对你有一定的参考价值。
盒模型只是补充
子盒子
边框盒（border-box）由border，padding，content组成
浏览器调试时，在页面中显示的元素尺寸是指边框盒的尺寸
元素的背景默认覆盖边框盒，可通过background-clip属性修改
填充盒（padding-box）由padding，content组成
处理溢出内容的显示方法：overflow
hidden：隐藏（隐藏padding以外的内容）
scroll：垂直和水平方向显示滚动条
auto：有溢出的方向显示滚动条
内容盒（content-box）由content组成
默认情况下，width和height属性，是指内容盒的宽度和高度
width和height的设置范围，可通过box-sizing属性修改
border-box：
UI图片只给了页面高度
当元素宽度为100%的基础上再加padding，border的时候
box-sizing默认取值content-box（表示内容盒的高度);border-box:消除滚动条
设置背景色的渲染范围：
background-clip：范围
盒子尺寸的计算
outline：外边框（轮廓）；不占像素
用outline的情况下必须同时对四个边进行设置
视觉格式化模型：
css的一种机制，它规定了页面中的多个盒子如何布局
视口（viewport）：
可是窗口，通常指浏览器的可是区域
包含快（containing block）：
每一个元素都有一个包含块，它是指元素在页面中摆放的区域
通常情况下，元素的包含块是它父元素的包含盒（content-box）
html包含块：初始化包含块（initial containing block）
初始化包含块是浏览器在渲染前自动生成的一块区域
视觉格式化模型要求，所有的元素必须放置在它的包含块中
元素的定位体系概述
什么是定位体系：
视觉格式化模型规定，定位体系一共有三种：
1，常规流（normal flow）
2，浮动（float）
3，绝对定位（absolute positioned）
任何一个元素必须属于其中一种定位体系
不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异
position是css属性；默认值是static
float是css属性；默认值是none
1， 块级(block)元素
1>占满整个空间的宽度（整行）
2>自动换行
2，inline（行内元素）
每个行内元素紧挨着显示；直到占完可用宽度后换行
盒模型=盒子尺寸 ；定位体系=盒子位置
取值单位：
margin：px,em,%,auto
padding:px,em,%
border:px,em
width:px,em,%,auto
height:px,em,%,auto
只有margin可取负值；auto：按照不同定位体系的规则计算
常规流又叫普通流，文档流，普通文档流，常规文档流
盒模型中的auto值
水平方向：
常规流盒子水平方向上的尺寸必须等于包含块的宽度
当margin-left；margin-right；width为固定值并且3个的和小于包含块的宽度则margin-right的值改为auto
垂直方向：
margin为auto：0px
height为auto：适应内容的高度
以上是关于盒模型的主要内容，如果未能解决你的问题，请参考以下文章