布局.定位.浮动

Posted 2020-10-10 芸芸众生!

元素：块级元素，内联元素，内联块状元素

块级元素：在默认情况下会独占一块区域

               相对于块级元素的父元素来讲，块级元素占据的行默认是单独享有的。

               通过设置元素的样式为：

1	display:block;

　　      可以让元素具有块级样式。

            块级元素的特点是：水平拉伸，垂直包裹。

            所谓水平拉伸，是相对于块级元素的父元素来说的。

            在不设置with属性时，块级元素的width会被水平拉伸，使得width+border+margin等于父元素的width；

            所谓垂直包裹，是相对于块级元素的子元素来说的。

            在块级元素没有设置子元素或者子元素with+border+margin=0时，若不设置块级元素的height属性，则height默认为0，

            若块级元素内部有一个with+border+margin=N，则块级元素的height=N；

            总结:

1.   总是在新行开始；
2.   高度，边距行高可控；
3.   水平拉伸块级父元素；
4.   垂直包裹内联元素和其他元素。

 内联元素：可以与其他元素共享同一行。

            通过设置元素的样式为：

1	display:inline;

　　      可以让元素具有内联样式。

            内联元素又能单独分为两类：替换元素和非替换元素

            替换元素如：img，input。这类元素和其他元素位于同一行上，拥有内在尺寸，高度、宽度、行高以及顶和底边距都可设置（有些是浏览器设置的，有些是人为提前设置的，如图片的宽和高）。

            非替换元素：内容直接包含在文档中，甚至可以认为是有衍生功能的文档。

            总结：

1.   可以和其他内联元素共享同一行；
2.   line-height, margin-left, margin-top，padding-left, padding-right可变，其中line-height会带动整行获得最大且相同的行高（最高的inlineboxes高度决定lineboxes的高度）；当内联元素有背景的话，padding是会影响显示（覆盖）的。
3.   高度，其余边距不可改变；
4.   只能容纳文本、其他非块级元素。

内联块状元素：同时具备内联和块状元素的特点

           可以和文本和非块级元素位于同一行上；同时元素的高度、宽度、行高以及顶和底边距都可设置。

           通过设置元素的样式为：

1	display:inline-block;

 

布局方式：普通流，浮动，绝对定位

普通流（Normal Flow）：html默认的从左到右，自上而下的布局方式。

浮动（Floats）:浮动的框可以向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样（w3c）。

a.浮动会脱离正常的文档流，浮动元素A的浮动位置任然是相对于父元素所在的位置的， 

b.如果父元素也在浮动，浮动元素A任然是参照他的父元素进行浮动，这一点与浮动父元素不浮动时没有区别，但是父元素会被浮动元素撑开，拥有自适应的高度。（所谓的清除浮动）

c.其他的盒子在排版时，会无视脱离文档流的盒子，即与其相邻的盒子会发生覆盖重叠，但这些盒子中的文本却会被浮动盒子排斥而环绕浮动盒子。

c.盒子的浮动会参照其父元素的width，但父元素的height不会影响浮动元素的位置，正常流中的父元素的height不会通过自适应去包裹其浮动元素，因为浮动元素已经脱离普通流。（这给排版带来一定的困难）

绝对定位（Absolute Positioning）：绝对定位的元素会脱离普通流，并且完全和普通流中的元素脱离关系。

BFC（Block Formatting Context）：块级格式上下文

 

 视觉格式化模型：定义了CSS中的盒模型，包括块盒（block box），行内盒（inline box）和匿名盒（anonymous box）。

 

 BFC的概念：可以理解为隔离了的容器，其内部的元素在布局上不会对外部元素产生影响。（可以将DFC暴力的直接理解为一个单独的html页面）

触发方式：

1.  浮动：除了float为no的浮动元素；
2.  绝对定位：元素的position为absolute或者fixed
3.  display设置为inline-blocks，table-cells，table-captions
4.  设置overflow为除了visible 以外的值（hidden，auto，scroll）

BFC的作用主要有两个：让容器与容器间的上下边距发生折叠（大吃小）；可以阻止元素被浮动元素覆盖。