CSS布局和定位（必懂秒会）盒子模型

在前端网页开发中，CSS是不可或缺的一个重要部分，但也是最难入门的一个方面之一。其中最难的部分之一是CSS布局和定位。

CSS布局是指如何将HTML元素放置在页面上，它涉及到元素的位置、大小、对齐和层叠等问题。由于各种浏览器的兼容性问题，CSS布局在不同的浏览器中可能会产生不同的结果。要解决这个问题，需要了解CSS盒模型、浮动和定位等属性。例如：

box-sizing: border-box;
float: left;
position: absolute;
其中，box-sizing指定元素的盒模型是content-box（默认）还是border-box（包含边框和内边距），float指定元素的浮动方式，position指定元素的绝对或相对定位。

CSS定位是指如何将HTML元素定位到页面上的指定位置。与布局相比，定位可以更加灵活，可以使元素与其他元素重叠，也可以使元素脱离文档流独立展示。但定位也非常复杂，需要理解absolute、relative、fixed等不同的属性以及各种定位方式的使用场景。例如：

position: relative;
left: 50%;
transform: translateX(-50%);
其中，position指定元素的定位方式，left指定定位距离左边的距离，transform指定元素的移动方式。需要注意的是，定位的位置很容易受到父级元素的影响，因此在使用定位时需要考虑到HTML结构的层次。

position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。

css分为3种常用方式定位

1.固定定位(fixed):当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
2.相对定位(relative):设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留
3.绝对定位(absolute):绝对定位的元素相对于最近一级已经定位的父元素来定位 （相对于定位的父元素来移动）,绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

盒子模型
CSS盒子模型主要包括以下几个组成部分：

内容（Content）：这是盒子的内部部分，通常包含实际显示的HTML内容，如文本和图片。
内边距（Padding）：位于内容与边框之间，可以增加盒子的内部填充空间。可以通过CSS的`padding`属性来设置内边距的方向，如上、右、下、左。
边框（Border）：围绕内容的一圈线条，用于分隔内容区域和其他元素。可以通过CSS的`border`属性来设置边框的宽度、样式和颜色。
外边距（Margin）：位于盒子边缘的空间，用于控制元素之间的间距。同样地，外边距也可以通过CSS的`margin`属性来设置，并分为上、右、下、左四个方向。
在标准的CSS盒模型中，`width`和`height`属性仅指代内容区的尺寸，而不包括内边距、边框和外边距。而在某些浏览器中，尤其是Internet Explorer，存在一个不同的盒模型，称为“怪异盒模型”，其`width`和`height`属性包括了内容、内边距、边框以及外边距的总和。

总结来说，CSS盒子模型的基本组成部分包括内容、内边距、边框和外边距，但在不同浏览器的实现中，外边距的计算可能有所不同

 

 例子

 

特殊点:

 

填充（padding）
填充是内容区和边框之间的空间。填充的属性有五种 ，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。
边框（border）
边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名 。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。设置盒子背景色属性时，在IE中背景不会延伸到边框区域，但在FF等标准浏览器中，背景颜色可以延伸到边框区域，特别是单边框设置为点线或虚线时能看到效果[1]。
空白边（margin）
空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。空白边的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。对于两个相邻的（水平或垂直方向 ）且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。若二者邻近的空白边值大小不等，则取二者中较大的值。同时，CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素，这是CSS 布局技术中的一个重要方法。

浮动
所谓浮动就是让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本身是何种元素。且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
Position定位
页面布局使用最多的是相对定位和绝对定位。
相对定位：这种定位方式下元素不脱离文档流，仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物，通过left、top、right和bottom四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。
绝对定位：这种定位方式下元素将脱离文档流，不占据空间，文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果[2]。