CSS总结——3

xiaoxiao2021-02-28  92

盒模型

从内到外分别是 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)

转载请注明原文地址: https://www.6miu.com/read-62574.html

最新回复(0)