盒模型
从内到外分别是 padding(内边距)、border(边框)、margin(外边距)。
盒子尺寸计算公式:
CSS布局
基本布局:
流动布局(Flow) 默认浮动布局 (Float)层模型(Layer)
流动(Flow)布局
块状元素都会在所处的包含元素内,自上而下按顺序垂直延伸分布。在流动模型下,内联元素都会在所处的包含元素内,从左到右水平分布显示。
浮动(Float)布局
浮动原本是为了实现文字环绕效果,但是使用浮动时会引发一些意想不到的问题。 这里需要提一下浮动的两个特性:包裹性和破坏性。 包裹性:
设置了float属性的内容,不会对外面造成任何影响,像是被包裹起来一样,一般称之为BFC。 其他具有包裹性的小伙伴如下:
display : inline-block ,table-cell
position : absolute,fixed,sticky
overflow : hidden,scroll
破坏性:
当父容器无高度的时候,子容器使用float属性会造成父容器的高度塌陷。
其他具有破坏性的小伙伴如下:
display: none position:absulute,fixed,sticky
层模型
三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)