css面试-一一网

选择器优先级

选择器分为可以分为：

1.四大选择器：id选择器、类选择器、标签选择器、通配符选择器。
2.关系选择器：后代选择器（div p）、子代选择器（div>p）、兄都选择器[div+p,div~p]、交集选择器、并集选择器
3.序选择器：

选择器优先级（高到低）：

1.！important
2.style行内样式1000
3.id选择器100
4.类选择器，伪类、属性10
5.标签、伪元素1

方法：
m = id选择器个数*100，
n = 类，属性，伪类选择器个数*10，
i = 标签，伪元素选择器*1，
m+n+i谁大就用谁的样式，一样则就近原则
复制代码

伪类与伪元素

最大区别：是否创建元素
伪类:弥补选择器不足，增加一个类为元素统一添加一些样式，

比如为li标签的奇数行添加一个背景颜色为红色，
鼠标点击之后的效果，
鼠标放上去的效果，

伪类是在选择器后面加上伪类名称，中间用冒号(:)隔开。
伪元素:本质上是创建了一个有内容的虚拟容器；用于将特殊的效果添加到某些元素。比如，给某行尾文字的第一个文字添加放大效果，可以利用为元素进行添加。伪元素既可以使用“:”，也可以使用“::”

//1.常用的伪类
:link 未访问的节点，通常用于 a 标签
:visited 已访问的节点，通常用于 a 标签

:hover 鼠标悬浮的节点
:active 当前选中的节点

:first-child 第一个子节点([更多看上一节序选择器](https://juejin.cn/post/6960999913409019918#heading-14))
:last-child 最后一个子节点
:enabled 启用的元素，通常用于表单
:focus 当前取的焦点的元素
:checked 选中的元素，通常用于表单 checkbox 元素
:disabled 未启用的元素，通常用于表单

//2.常用伪元素
::before 元素内容前插入新内容
::after元素内容之后插入新内容
::first-letter 文本首字母。常用于对文本首字母设置样式
::first-line 文本首行。常用于对文本首行设置样式。仅用于块级元素。
::selection 选中的内容。常用于文本。
::placeholder 占位符。用于设置占位符的样式。
复制代码

css三大特性

传送门

块元素、行内元素、行内块元素

块元素

独占一行、宽高可设（缺省由内容决定）、用于布局
div p h form ol ul li menu table

行内元素

不独占一行、宽度、高度不可设置、左右margin+padding可设置、只能放文本和其他行内样式
a span img input button label textarea select
行内元素有默认间距：
- 1.重设字体—给行内元素的直接父级设置font-size:0px;
- 2.借助HTML注释-在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。

行内块元素

不独占一行、可设置宽高、默认有间距
缺点：多个相邻行内块之间有间隙（空隙产生的原因：当元素有行内元素的特性时，元素间的空白符都会被解析，回车换行会被解析成一个空白符，如果字体不为零那么就会占一定的宽度，并且这些间距会随字体的大小而变化）

里面的文本行数不一致时会出现盒子塌陷

解决：margin-left: -10px;父级元素font-size: 0;,（可以取消间隙，但是会影响父元素盒子内其他元素的字体大小）

background元素背景

background-clip: border-box;//(默认值)裁剪背景，可以到外边框，内边框，内容
background-image: url();//设置背景图片
background-repeat:repeat; //默认, 在水平和垂直都需要平铺
background-position:水平方位，垂直方位；//背景图片位置
复制代码

盒子模型

盒子模型包括边距（margin）、边框（border）、填充（padding）、内容（content）。

边距（margin）

边距是控制相邻盒子之间的距离，用margin设置，边距会发生折叠现象，即谁大以谁为主。

边距应用：
*子盒子居中—– 子元素在父元素居中，margin上下设置（父-子）/2 ; margin左右为auto，但是子元素设置margin会导致父元素塌陷，所以要给父元素设置 overflow: hidden;或者给父元素设置border属性

margin负值—-（1）、对于margin左右，若果元素本身没有宽度，margin负值会会增加元素宽度；如果元素自身有宽度，会产生位移；（这个很有用）margin-left为负向左移；（2）、margin-top为负值，不管是否设置高度，都不会增加高度，而是会产生向上的位移；（3）、margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.
行内元素外边距—-一般有默认的外边距，我们并不想要这样，可以给他的父元素设置font-size:0;

边框border

border: 边框的宽度边框的样式边框的颜色;
border-radius: 左上右上右下左下;
化⚪— border-radius: 50%;
画环—设置边框，然后border-radius: 50%;
画椭圆—变成长盒子然后border-radius: 50%;

内填充padding

位于内容和边框的距离，用padding设置；它适用于所有元素，且取值只能为正；
background默认会延伸到内边距区域；
内边距的作用是使内容与边框隔开一点，所以如果加了边框，通常最好加一些内边距；

.内容content

标准盒模型和怪异盒模型

//标准和模型：宽度=w+padding+border
box-sizing: content-box;/*默认情况*/
        宽度 = width + padding + border;
        高度 = height + padding + border;
       ！！！！！！ 上边框线是一个复合属性，只写50px是无效的，会让上边框线不存在

//怪异合模型；宽度===width
box-sizing: border-box;
        宽度=width;(padding和border已经算进去了)
        高度=height;
border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的;
复制代码

布局1之浮动

浮动流是一种半脱离标准流的排版方式；如果有两个块级盒子,第一个设置左浮动，那么第二个盒子会跑到第一个盒子下面，而第二个盒子的内容不会被第一个盒子遮盖，而是环绕他。float设计的初衷也是为了图文环绕;

只有左浮动，或右浮动，即沿其父容器的左侧或右侧放置。

`排布规则`

当一个元素左浮动之后，它会被移出正常的文档流，然后向左平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。直到填满容器一整行（或者放不下了），之后换行至下一行。

（1）同一个方向上谁先浮动，谁在前面；
（2）不同方向上左浮动找左浮动，右浮动找右浮动；
（ 3）.有三个浮动盒子前两个左浮动，第三个右浮动，浮动后如果第一个第二个不在一行显示，那个第三个就会和第二个在一行右浮动；

浮动后的表现

1.半脱标–会脱离文档流，浮起来了，相当于形成了一个新的平面；但是同时形成一个特殊区域，只让其他非浮动流的元素进入占位（消耗宽高），不让文字进入被浮动元素遮盖。

2.字围–浮动元素不会挡住没有浮动的元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象；

3.贴靠现象：
1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示（浮动盒子总宽小于等于父盒宽）；
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元素（已经浮动摆好了的）开始往前贴靠，一直找到父盒子；
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边(就是换行)

清除浮动

清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。

1.额外标签法–就给父元素的末尾添加一个空标签，写上clear: both;;
2.父级添加overflow属性方法触发BFC–overflow为 hidden | auto | scroll 都可以实现。能清除浮动，但也是溢出隐藏。
3.after伪元素清除浮动–先写好下面的类，然后给需要清除浮动影响的父元素添加类就可以了，原理是：找到有clearfix这个类的元素，在他内容的最后面添加一个空的块级元素，然后为这个块级元素添加清除浮动的属性。

      .clearfix:after {
        content: "";
        display: block;
        clear: both;
      }
复制代码

4.父元素末尾设置<br clear="all" />
5.给父元素设置display:table

网页布局2之定位

position 属性用来指定一个元素在网页上的位置，一共有 5 种定位方式，绝对定位，相对定位，固定定位，sticky(粘连定位)，静态定位（默认）。

相对定位

相对定位就是相对于自己以前在标准流中的位置（即 static 时的位置）来移动；它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离；
left:30px;表示以盒子左边为基准盒子向右移动30px，为负是向左移。

不脱离标准流，他原来在标准流的位置还会占用空间，移动后的位置可能遮盖同级盒子。但是正是因为不脱离标准流，我们直接加定位，不移动就没啥问题，作为父容器定位（子绝父相）

应用：对元素微调，如点击之后稍微移动一下，或者给绝对定位做参照元素。

绝对定位

绝对定位是参照距其最近的有定位属性的父级元素的定位。加了绝对定位的元素就可以用legt，right，top，bottom方位属性相对父级参照的上下左右进行定位。

1.脱离标准流的。
如果一个绝对定位的元素是以 body 作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点;
会忽略父级元素padding进行定位。
子绝父相: 子元素用绝对定位, 父元素用相对定位。
如何让绝对定位的元素水平居中？ 只需要设置绝对定位元素的 left:50%; 然后再设置绝对定位元素的 margin-left: -元素宽度的一半 px;/或transform: translateX(-50%); 即向左移动自身的一半

固定定位（fixed）

相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。搭配 top、bottom、left、right。

固定定位的元素是脱离标准流的, 不会占用标准流中的空间，所以也不区分行内/块级/行内块级。

sticky(粘连定位)

元素可以被固定于页面指定位置，但并不一定始终固定于此位置。

定位位置可以通过 top、bottom、left 与 right 属性设置，但是此位置是一个临界值，也就是说元素只有达到设置的这个临界值才会固定，其他位置并不会固定。

//表示当前元素距离顶部距离为0的时候就固定了
        position: sticky;
        top: 0px;
复制代码

z-index属性(控制定位元素的可见性)

z-index 属性的作用是专门用于控制定位流元素的覆盖关系的；默认是 0.

1.默认情况下定位流的元素会盖住标准流的元素;
2.默认情况下定位流的元素后面编写的会盖住前面编写的
3.如果定位流的元素设置了 z-index 属性, 那么谁的 z-index 属性比较大, 谁就会显示在上面;
从父现象: 如果两个元素的父元素设置了 z-index 属性, 那么子元素的 z-index 属性就会失效, 也就是说谁的父元素的 z-index 属性比较大谁就会显示在上面;

层叠上下文

层叠上下文(stacking context)，是 HTML 中一个三维的概念，相当于Z轴，用来控制堆叠元素的显示优先顺序。
如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在 Z 轴上就“高人一等”，最终表现就是它离屏幕观察者更近。

同一个堆叠上下文元素在 Z 轴的排列:

背景或边框 < z-index负值 < 块级元素 < 浮动元素 < 行内、行内块元素 < position z-index:auto/0 < position z-index正值

网页布局之flex布局

父元素设置display:flex,激活弹性容器，直接子元素变成弹性元素。有如下默认属性：

flex-direction: row;//主轴从左到右，起点在左。
justify-content:flex-start;//子盒子从主轴的起点开始，依次向终点排列。
flex-wrap:nowrap;//不换行
flex-shrink:1;/元素不会在主维度方向拉伸，但是可以缩小。
align-items：stretch;//元素被拉伸来填充交叉轴大小。子元素不设置高度
复制代码

设置主轴-`flex-direction`

flex-direction:row ;/*默认主轴起点在左，从左至右*/
 flex-direction: column;/*主轴从上至下的排版*/
复制代码

主轴对齐方式（元素在主轴的排列）-`justify-content`

/*(初始值);元素从容器的起始线排列。（主轴终边溢出）*/
justify-content:flex-start;

/*所有子元素统一在中间排列，左右平分多余空间（从主轴起边、终边溢出）*/
justify-content:center;

/*左右盒子贴边，以主轴的起点和终点对齐，然后平分剩余空间，让间距相等（主轴终边溢出）*/
justify-content:space-between;

/*，使每个元素的左右空间相等。中间的不会折叠而是累加（从主轴起边、终边溢出）*/
justify-content:space-around;

/*每个间距的长度相等，会折叠（从主轴起边、终边溢出）*/
justify-content:space-evenly;

复制代码

侧轴上的对齐方式`align-items`

align-items定义全部单行元素(不换行)侧轴上的对齐方式，而align-self属性能设置单个弹性元素的对齐方式。
若果设置换行，就需要控制多行全部元素在侧轴对齐方式，就要用align-content

/*单行元素（不换行）在侧轴对齐方式*/
align-items: flex-start | flex-end | center | stretch;

/*多行行元素（设置换行）在侧轴对齐方式*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

/*单行某个元素元素在侧轴对齐方式*/
 align-self: auto | flex-start | flex-end | center | baseline | stretch;
复制代码

flex子项属性

1.flex属性，值为数字,表示当前item占父容器的多少份，比较常用的两个：

flex:1,
//只给当前行一个子项设置，表示当前项占据所有父元素的剩余空房间
//若果所有子项都设置，相同的flex属性，表示平分。
复制代码

2.flex-shrink表示收缩吗

flex-shrink:0;//表示不收缩
复制代码

3.order属性

order属性用于修改单个弹性元素的显示顺序，默认为0，数值越小，排列越靠前；

div布局的时候，可以让最重要的放到前面，显示的时候可以设置order，让其显示在中间

.item {
  order: <integer>;
}
复制代码

css两列布局（左边定宽+右边自适应）

方法一：用浮动布局+margin
方法二：左右盒子都定位为，定位右盒子的left为做盒子的宽度，right为0，拉伸
方案三：.给父元素设置display: flex;给右边自适应设置 flex:1;这相当于100%-左定宽。

三列布局

1.圣杯布局方法

圣杯布局–左右定宽，中间自适应的三列布局，但是会把自适应的部分放到最前面加载。

第一步：都设置左浮动。
第二步：父盒子内填充，挤压中间的盒子
第三步：移动left盒子，先margin-left：100%，表示左盒子向左移动中间盒子的100%，左边和中间盒子对齐（所在位置为其在标准流中的位置）；然后左盒子相对定位，向左移动内填充宽度的大小left: -132px;
第四步：移动right盒子，浮动半托标的，右盒子也需要占位置，向左移动130px（margin-left:-130px）上去了，然后定位到有padding，（向右移动left: 132px;）