Css布局

Css布局

CSS盒子模型

border边框 content内容 padding内边距 margin外边距

边框会影响盒子的实际大小，盒子已经有了宽度和高度，此时再指定边框会撑大盒子

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的边框大小即可

border 边框

属性	用途	使用介绍
border-width	边框的粗细	一般情况下都用 px
border-style	边框的样式	solid 实线边框 dashed 虚线边框 dotted 点线边框 none 无边框 hidden 隐藏边框
border-color	边框的颜色
border-collaps	控制相邻单元格的边框	collapse 合并相邻的边框

border-style：

​ dotted :在MAC平台上IE4+与WINDowS和UNIx平台上IES.5+为 ··· 线，否则为实线

​ dashed :在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为 — 线，否则为实线

​ double :线边框。两条单线与其间隔的和等于指定的border-width值

​ groove :根据 border-colo日的直画3D凹悟

​ ridge :根据border-color的值画菱形边钰

​ inset :根据border-color的值画3DNI边

​ outset :根据border-color的值画3D产边

padding 内边距

内边距会影响盒子的实际大小 盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

如何盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
注意：使用box-sizing:border-box;可以在不撑大盒子的同时实现内边距

属性	描述
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距
padding	内边距，固定表示为上右下左内边距

padding值个数不同表示的样式也不同

padding	值的个数	描述
padding: 5px;	1个值	代表上下左右都有5像素内边距;
padding: 5px 10px;	2个值	代表上下内边距是5像素左右内边距是10像素;
padding: 5px 10px 20px;	3个值	代表上内边距5像素左右内边距10像素下内边距20像素;
padding: 5px 10px 20px 30px;	4个值	代表上是5像素右10像素下20像素左是30像素顺时针

margin 外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离。不会影响盒子的实际大小

属性	描述
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距
margin	内边距，固定表示为上右下左内边距

外边距可以让块级盒子水平居中,但是必须满足两个条件:

• 盒子必须指定了宽度(width)
• 盒子左右的外边距都设置为auto

行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

盒子塌陷问题

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时，子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案:

• 可以为父元素定义上边框
• 可以为父元素定义上内边距
• 可以为父元素添加overflow:hidden;（清除浮动）

还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题。

flex布局

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

flex-direction 决定主轴的方向

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 一条轴线排不下，如何换行

• nowrap（默认）：不换行
• wrap：换行
• wrap-reverse：换行，在上方换行

flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content 主轴上的对齐方式

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，盒子之间的间隔都相等。
• space-around：每个盒子两侧的间隔相等，盒子之间的间隔比盒子与边框的间隔大一倍

align-items 交叉轴上如何对齐

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content 多根轴线的对齐方式

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch（默认值）：轴线占满整个交叉轴。

浮动问题

float 浮动 属性值有left、right 表示左浮动、右浮动

为什么需要清除浮动?

父级没高度、子盒子浮动影响下面布局了，此时我们就应该清除浮动

浮动元素造成的影响

1. 浮动元素会脱离标准流(脱标)
   • 脱离标准普通流的控制(浮）移动到指定位置(动)，(俗称脱标)
   • 浮动的盒子不再保留原先的位置
2. 浮动的元素会一行内显示并且元素顶部对齐
   • 浮动的元素是互相贴靠在一起的(不会有缝隙）
   • 如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3. 浮动的元素会具有行内块元素的特性
   • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
   • 浮动的盒子中间是没有缝隙的，是紧挨着一起的
   • 行内元素同理

清除浮动

属性	描述
clear: left;	不允许左侧有浮动元素（清除左侧浮动的影响)
clear: right;	不允许右侧有浮动元素（清除右侧浮动的影响)
clear: both;	同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear: both;

清除浮动的策略就是：闭合浮动

清除浮动方法：额外标签法、父级添加overflow属性、父级添加after伪元素、父级添加双伪元素

清除浮动的方式	优点	缺点
额外标签法（隔墙法)	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	兼容性问题，IE6-7不支持:after
父级双伪元素	结构语义化正确	兼容性问题，IE6-7不支持

1. 额外标签法也称为隔墙法，是W3C推荐的做法。

   • 清除浮动本质是?

     清除浮动的本质是清除浮动元素脱离标准流造成的影响

   • 清除浮动策略是?

     闭合浮动.只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.

   • 额外标签法（隔墙法）?

     隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签、添加清除浮动样式。（实际工作可能会遇到，但是不常用）

     • 额外标签法也称为隔墙法，是W3C推荐的做法。
     • 额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear: both” ></div>，或者其他标签(如<br />等）。

   优点:通俗易懂，书写方便

   缺点：添加许多无意义的标签，结构化较差

   注意：这个新增的盒子要求必须是块级元素不能是行内元素

2. 父级添加overflow属性

   可以给父级添加overflow属性，将其属性值设置为hidden、auto或 scroll ，子不教父之
   注意：是给父元素添加属性

   优点：代码简洁

   缺点：无法显示溢出的部分

3. 父级添加after伪元素

   :after方式是额外标签法的升级版，也是给父元素添加

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* IE6、7 专有 */
    *zoom: 1;
}

​ 优点：没有增加标签，结构更简单

​ 缺点：照顾低版本浏览器

​ 代表网站:百度、淘宝网、网易等

4. 父级添加双伪元素

   也是给给父元素添加

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

​ 优点：代码更简洁

​ 缺点：照顾低版本浏览器

​ 代表网站:小米、腾讯等

定位

为什么需要定位

1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位含义与特殊特性

​ 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

​ 定位 = 定位模式＋边偏移。

​ 定位模式：用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

​ 定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个:

属性	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

​ 绝对定位和固定定位也和浮动类似

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

边偏移

​ 边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。

属性	示例	描述
top	top: 80px;	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px;	底部偏移量，定义元素相对于其父元素下边线的距离
left	left: 80px;	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px;	右侧偏移量，定义元素相对于其父元素右边线的距离

定位特点

属性	描述
position: static;	静态定位是元素的默认定位方式，无定位的意思
position: relative;	相对定位是元素在移动位置的时候，相对于它原来的位置来说的(自恋型)
position: absolute;	绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)
position: fixed;	固定定位是元素固定于浏览器可视区的位置。主要使用场景∶可以在浏览器页面滚动时元素的位置不会改变
position : sticky;	top: 10px; 粘性定位可以被认为是相对定位和固定定位的混合，Sticky粘性的

相对定位的特点︰（务必记住)

• 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置)
• 因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的.

绝对定位的特点︰(务必记住)

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（ Document文档)。
• 如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
• 绝对定位不再占有原先的位置。（脱标)

固定定位的特点:(务必记住)

• 以浏览器的可视窗口为参照点移动元素

  跟父元素没有任何关系，不随滚动条滚动

• 固定定位不在占有原先的位置。

• 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

粘性定位的特点:

• 以浏览器的可视窗口为参照点移动元素（固定定位特点)

• 粘性定位占有原先的位置（相对定位特点)

• 必须添加 top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持。

定位模式

定位模式	是否脱标（脱离文档流）	移动位置	是否常用
static静态定位	否	能使用边偏移	很少
relative相对定位	否(占有位置)	相对于自身位置移动	常用
absolute绝对定位	是(不占有位置)	带有定位的父级	常用
fixed固定定位	是(不占有位置)	浏览器可视区	常用
sticky粘性定位	否(占有位置)	浏览器可视区	较少

相对定位、固定定位、绝对定位两个大的特点∶

• 是否占有位置（脱标否）；
• 以谁为基准点移动位置；

浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

固定定位小技巧∶固定在版心右侧位置。

• 让固定定位的盒子left: 50%;走到浏览器可视区（也可以看做版心）的一半位置。

• 让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒了贴着版心右侧对齐了。

子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式。这句话的意思是∶子级是绝对定位的话，父级要用相对定位。

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2. 父盒子需要加定位限制子盒子在父盒子内显示
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结∶因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

绝对定位（固定定位）会完全压住盒子，压住下面标准流所有的内容。

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto;水平居中，但是可以通过以下计算方法实现水平和垂直居中。

left: 50%;让盒子的左侧移动到父级元素的水平中心位置。

margin-left: -100px;让盒子向左移动自身宽度的一半。

堆叠顺序

z-index: 1; 来控制盒子的前后次序(z轴)

• 数值可以是正整数、负整数或0,默认是auto，数值越大，盒了越靠上

• 如果属性值相同，则按照书写顺序，后来居上

• 数字后面不能加单位