CSS的相关知识

目录

选择器优先级

盒子模型

W3C盒子、内容盒子、标准盒子（默认）

边框盒子、怪异盒子、IE盒子

思考

面试题

BFC

避免外边距重叠

清除浮动

阻止元素被浮动元素覆盖

默认文档流（默认上下外边距合并）

浮动布局 

元素浮动对兄弟元素的影响

子元素浮动对父元素的影响

 浮动布局对块级元素宽度的影响

 图片浮动（文字围绕图片）

定位

1、静态定位、默认定位

2、固定定位（position:fixed）

3、相对定位（position:relative）

4、绝对定位（position:absolute）

5、粘性定位（position:sticky）

6、更改元素层叠顺序 （z-index: 数字）（-1最小）

7、几种定位的总结

伸缩盒布局，弹性盒布局（display:flex）

子元素如何在父元素进行水平垂直居中

---

选择器优先级

important：最高

style属性：1000

id（#）选择器：100

class（.）选择器：10

标签/元素选择器：1

通配符选择器：0（去掉body的默认属性）

盒子模型

W3C盒子、内容盒子、标准盒子（默认）

宽高设置给content

w3c盒子的宽=内容区的宽width+左右border+左右padding=100px+2px+20px=122px

w3c盒子的高=内容区的高height+上下border+上下padding=100px+2px+20px=122px

所占页面空间盒子的宽=w3c盒子的宽+左右margin=122px+20px=142px

所占页面空间盒子的高=w3c盒子的高+上下margin=122px+20px=142px

边框盒子、怪异盒子、IE盒子

宽高设置给盒子本身

边框盒子的宽width=content的宽+左右border+左右padding=100px

边框盒子的高height=content的高+上下border+上下padding=100px

边框盒子所占页面宽=边框盒子的宽width+左右margin=100px+20px=120px

边框盒子所占页面高=边框盒子的高width+上下margin=100px+20px=120px

思考

1、box-sizing: content-box; + padding增大 = hello位置向右下移动

内容盒子变化padding和margin，hello的位置都会变

2、box-sizing: border-box; + padding增大 = hello位置不变

边框盒子变化padding，hello的位置不会吧；变化margin，hello的位置会变

面试题

1、说一说盒子模型?

        盒子组成:width+border+height+padding+margin

        盒子种类:

                1.内容盒子 w3c盒子 标准盒子 box-sizing:content-box

                2.边框盒子 怪异盒子 IE盒子 box-sizing:border-box

2、说一说盒子的组成以及盒子的种类.

         内容盒子特点:宽高设置给盒子内容区的宽高

         边框盒子特点:宽高直接设置给盒子的

BFC

直译为块级格式化上下文，可以理解成一块独立的渲染区域，BFC看成元素的一种属性。

当元素拥有了BFC属性后，这个元素就可以看做隔离了的独立容器，容器内的元素不会影响容器外的元素。

1、BFC的触发

overflow值不为visible的元素

html根元素

display

2、BFC的应用

避免外边距重叠

清除浮动

阻止元素被浮动元素覆盖

默认文档流（默认上下外边距合并）

1、块级元素：独占一行，宽度为默认父级的100%，高度由内容决定，可以设置宽高 

2、行内元素：与其他元素共享一行空间，宽高由内容决定，设置宽高不生效

3、行内块级元素： 与其他元素共享一行空间，可以设置宽高

/* 将div转化为行内元素 */ display: inline;
/* 将div转化位行内块元素 */ display: inline-block; /* 将div转化为块级元素 */ display: block;
hello和div中的文字对齐

浮动布局 

元素浮动对兄弟元素的影响

使用了浮动的元素会脱离文档流，不再保留原先位置而飘在文档流上方，兄弟元素将会被浮动元素覆盖，使用 clear:both 使得兄弟元素不受浮动元素影响或兄弟元素也浮动，二者并排

	兄弟元素都浮动,如果当前行占满会自动换行,遇到障碍会阻断

子元素浮动对父元素的影响

子元素浮动，如果父元素没有设置高度，则父元素失去子元素的支撑

使用 overflow: hidden使得子元素的高度继续撑起父元素

	文字不受浮动影响，自己找位置

 浮动布局对块级元素宽度的影响

如果块级元素没有设置宽度，浮动了该元素，则该元素的宽度将不再是100%，而是内容的宽度

正常，没有浮动 默认100%
浮动 内容宽度
浮动 设置宽度100px
浮动 设置宽度100% 超出了屏幕， 没有显示全
浮动 设置宽度 calc()函数中 减号前后的 空格不能省略  （这里外边距是10px）

 图片浮动（文字围绕图片）

定位

1、静态定位、默认定位

2、固定定位（position:fixed）

脱离文档流，原先位置不保留，如果没有使用定位属性，就固定在原先位置

如果使用定位属性，则放在指定位置（相对于视口区域进行定位）

没有使用定位属性
使用定位属性

3、相对定位（position:relative）

不脱离文档流，保留原先位置，如果使用了定位属性，则相对于原先位置定位

没有使用定位属性
使用定位属性

4、绝对定位（position:absolute）

脱离文档流，不保留原先位置

1）如果有祖先定位元素，则根据最近的祖先定位元素进行定位

2）如果没有祖先定位元素，使用了定位属性，则根据浏览器视口区域进行定位

      如果没有使用定位属性，则在原来位置定位

没有祖先定位且没有使用定位属性
没有祖先定位但有使用定位属性

5、粘性定位（position:sticky）

不脱离文档流，使用了定位属性后，刚开始相对定位，滚动到一定位置固定定位

	刚开始相对定位	滚动到一定位置固定定位

6、更改元素层叠顺序 （z-index: 数字）（-1最小）

7、几种定位的总结

fixed	脱离文档流，原先位置不保留	如果使用定位属性，相对与视口区域进行定位 如果没有使用定位属性，则在原先位置定位
relative	不脱离文档流，原先位置保留	如果使用了定位属性，相对于原来位置进行定位 如果没有使用定位属性，则在原来位置定位
absolute	脱离文档流，原先位置不保留	如果有祖先定位元素，则根据最近的祖先定位元素进行定位 如果没有祖先定位元素，使用定位属性，则根据浏览器视口区域进行定位；如果没有使用定位属性，则在原来位置定位
sticky	不脱离文档流	刚开始是相对定位 滚动到一定位置和变成了固定定位

伸缩盒布局，弹性盒布局（display:flex）

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，给容器父元素使用

display:flex ：将子元素放在一行排列布局

给父容器设置，子元素在主轴的对齐方式	/* 主轴开始方向对齐 */             justify-content: flex-start;             /*主轴结束方向对齐 */             justify-content: flex-end;             /* 主轴居中对齐 */             justify-content: center;             /* 子元素在主轴上空间均匀分配*/             justify-content: space-between;             /* 子元素左右两侧的空间均匀分配 */             justify-content: space-around;             /*均匀分配  */             justify-content: space-evenly;
给父容器设置，子元素在交叉轴的对齐方式	/* 交叉轴开始方向对齐 */             align-items: flex-start;             /* 交叉轴结束方向对齐 */             align-items: flex-end;             /* 交叉轴居中对齐 */             align-items: center;             /* 基线对齐、文字对齐 */             align-items: baseline;             /* 拉伸、平铺 */             align-items: stretch;
给父容器设置，多主轴的对齐方式	align-content: flex-start;             align-content: flex-end;             align-content: center;             align-content: space-around;             align-content: space-between;

父元素设置 align-items: baseline	子元素2 设置padding
父元素设置 align-items: center;	子元素设置 不同的高度
父元素设置高度和 align-items: stretch	子元素不能 设置高度

给父容器设置，主轴排列方式
flex-direction:row	flex-direction: row-reverse	flex-direction: column	flex-direction: column-reverse

	给子容器设置， 占父容器剩余空间的比例
给父容器设置， 是否换行	给子容器设置， 占父容器剩余空间的比例

 子元素如何在父元素进行水平垂直居中

法一：父元素设置border，子元素设置border和margin

 法二：父元素设置padding和边框盒子

法三：子元素绝对定位，父元素相对定位，并且给子元素设置定位属性全部为0（top、left、bottom 、right），margin:auto

法四：子元素绝对定位，父元素相对定位，并且给子元素设置定位属性top:50%，left:50%，margin-left:-width/2，margin-top:-height/2

 法五：父元素设置伸缩盒布局，在父元素中设置子元素在主轴和交叉轴的对齐方式都为居中（display: flex; justify-content: center; 和 align-items: center;）