css面试

·  阅读 450

选择器优先级

选择器分为可以分为:

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

image.png

image.png 选择器优先级(高到低):

  • 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 占位符。用于设置占位符的样式。
复制代码

image.png

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;)

2.双飞翼布局方法

双飞翼布局最早是淘宝团队提出,是针对圣杯布局的优化解决方案。 在中间自适应盒子中又套了一个子容器,主要是优化了圣杯布局中开启定位的问题。

  • 1.给center添加一个套子,外套宽度设置100%,给center设置margin左右,
  • 2.左盒子,外套,右盒子设置左浮动
  • 3.左盒子向左移动父容器的100%(margin-left: -100%;)
  • 4.右盒子向左移动自身宽度的距离

3.使用 flex 实现

父盒子开启弹性盒模型,子自适应盒子设置flex:1;全部占有所在行剩余空间,若果需要让自适应盒子最先加载可以给他加个最小order值。

4.使用 position 实现

子绝父相,左右盒子左右定位,中间盒子设置margin值,挤压中间盒子

等分布局加空隙

1.float+margin负值

  • 1.子元素设置百分比宽度,全部左浮动,加一个左边框线,开启怪异盒模型
  • 2.父元素取margin-left负值向左移动,把第一个边框线隐藏,注意不能给父元素设置宽度,100%也不行
  • 3.清除浮动--找到类为xxx的元素,在他的内容后面添加一个块级空元素,且有属性clear:both

2.flex

  • 1.父元素display:flex;子元素flex:1;
  • 2.子元素设置border-left,并开启怪异盒;
  • 3.父元素margin-left负值,左移

居中布局

水平居中

  • 1.text-align:center;给父元素添加 text-align:center; 子元素若为行内元素,行内块元素,文本,则可实现水平居中 。
  • 2.单个块级元素(子定宽)水平居中用margin:0 auto;
  • 3.多个块级元素水平居中:父元素加text-align:center,子元素转行内块。
  • 4.定位(不需要宽高):子绝父相,子left为父元素宽高的一半(50%),自身反向移动50%(用margin负值或变形)
  • 5.任意个元素用 flex,center

垂直居中

  • 1.对于单行文本/行内元素/行内块级元素 :高度等于行高的值;多行文本/行内元素/行内块级元素行高:等于 height/行数。
  • 2.定位
  • 3.flex

水平垂直居中

  • 1.margin: 100px auto;---子元素设置margin上下设置:副高-子高➗2;左右自适应,然后父盒子overflow:hidden;
    1. padding-left和padding-top---父盒子设置一个方向的内填充,并加一个怪异合模型。(必须知道所有宽高)
  • 3.子绝父相定位---子元素left、top定位到父盒子宽高的一半50%,然后子盒子反向移动自身一半,用过渡或margin负值。
  • 4.定位+margin:auto----子绝父相,子四个方位定位全为0,margin设置auto
  • 5.flex设置两轴方向排布都时center
分类:
前端
标签: