css连续选取几个li_前端开发必会的HTML/CSS硬知识

1 本文简介

  • 面试大厂,HTML/CSS,JS,网络基础这三块硬知识是必不可少的
  • 我整理了一些备考笔记,分享给大家
  • 初中级前端到高级前端的蜕变,从基础知识开始~

2 块元素和行元素

2.1 请说出3个H5新增的块元素,并介绍他们的应用场景

  • aside:表示article元素内容之外,与article元素内容相关的辅助信息
  • figure:代表一个块级图像,包含说明。figure添加标题时,与figcaption元素结合使用。
  • dialog:表示几个人直接的对话。与dt和dd元素结合使用,dt表示讲话者,dd表示讲话内容。

2.2 行内元素和块元素的区别

  • HTML元素分为行内、块状、行内块元素三种。
  • 块元素和行内块元素可以设置宽高
  • 行内元素不可以,高度由内容撑开
  • 三者是可以通过display属性任意转换的 block 块状元素 inline-block行内块元素 inline 行内元素

2.3 块级元素特征

  • 可以设置宽高
  • 设置margin、padding的上下左右都有效
  • 元素独占一行
  • 多个块状元素一起写,默认排列从上至下

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年我花了一个月整理了一份最适合2020年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

2.4 行内块元素特征

  • 能设置宽高
  • 不会自动换行
  • 多个行内块一起写,默认从左至右排列

2.5 行内元素特征

  • 设置宽高无效
  • 设置margin的上下无效,左右有效,设置padding上下左右都有效(并且会撑大空间)
  • 不会自动换行

3 CSS

3.1 请说出3个CSS浏览器前缀

  1. -ms- 兼容IE浏览器
  2. -moz- 兼容firefox
  3. -o- 兼容opera
  4. -webkit- 兼容chrome和safari

使用demo

div {  -ms-transform: rotate(0);  -webkit-transform: rotate(0);  -moz-transform: rotate(0);  -o-transform: rotate(0);  transform: rotate(0);}

CSS前缀自动补全:autoprefixer

3.2 盒模型

  1. 盒模型分为标准盒模型和怪异盒模型(IE5.X和6)两种
  2. 标准盒模型 width = content
  3. 怪异盒模型 width = content + padding + border

已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;

![](https://imgkr2.cn-bj.ufileos.com/5b02ca29-357c-41bd-b193-925fbf089562.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=N8j%252FT85l87RtNBPpgYnJ1lYCWIo%253D&Expires=1599734594)

标准盒模型:1. 占用宽:margin*2+padding*2+border*2+width= 20*2+10*2+10*2+200 = 2802. 占用高:margin*2+padding*2+border*2+height= 20*2+10*2+10*2+50 = 1303. 盒子实际宽度:padding*2+border*2+width= 10*2+10*2+200 = 2404. 盒子实际高度padding*2+border*2+height= 10*2+10*2+50 = 90

![](https://imgkr2.cn-bj.ufileos.com/7779f321-279b-4c46-b6e5-b319a28b8549.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=iY2y7oaq2dl4L39xDbN0PO%252Bd4QI%253D&Expires=1599734605)

怪异盒模型:1. 占用宽:margin*2+width= 20*2+200 = 2402. 占用高:margin*2+height= 20*2+50 = 903. 盒子实际宽度:width = 2004. 盒子实际高度height = 50

IE8及更早版本不兼容问题解决方案:在HTML页面声明

3.3 box-sizing都有哪些值?他们的宽高分别如何计算?

  1. content-box(标准盒模型)|border-box(怪异盒模型)|inherit(继承父元素)
  2. content-box的宽高由content决定
  3. border-box的宽高由content+padding+border决定
css连续选取几个li_前端开发必会的HTML/CSS硬知识_第1张图片

4. BFC

4.1 什么是边界塌陷(或边界重叠)?

  1. 兄弟div(上下margin塌陷)
  2. 父子div(如果父级div没有paddingborderinlinecontent, 子级div的margin会向上查找边界塌陷的div,直到找到某个标签包括borderpaddinginline content的其中一个,然后按此div进行margin)

4.2 什么是BFC(格式化上下文)?如何实现?

BFC(块状格式化上下文,独立的盒子,布局不受外部影响,但是如果同一个BFC中,同级块状元素的margin-top和margin-bottom会重叠)

只要元素满足下面的任一条件,都会触发BFC特征。

  1. body根元素
  2. position: fixed|absolute(绝对定位元素)
  3. float(浮动元素) 除了none
  4. overflow: hidden|auto|scroll (除了visible之外的值)
  5. display: inline-block table-cellsflex (具有table-的属性)

解决问题:

  1. 解决边界塌陷问题
  2. 解决浮动元素导致父元素高度塌陷问题
  3. 解决阻止元素被浮动元素覆盖问题
css连续选取几个li_前端开发必会的HTML/CSS硬知识_第2张图片

4.3 多个inline元素之间会有空隙,为什么?如何解决?

元素被当成行内元素排版时,元素直接的空白符会被浏览器处理,根据white-spack的处理方式(默认是normal,合并多余空白),Html代码在回车换行时被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block元素之间就出现了空隙。

复现
首页 登陆 资源 社区 帮助

![](https://imgkr2.cn-bj.ufileos.com/50a6afa3-421d-4af9-9fad-48d72e69feb3.jpeg?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=fkwoshYKbb6i%252FNOezztndQzAZPk%253D&Expires=1599740520)

解决办法:

  1. 多个inline元素写在同一行
  2. 将父级元素的font-size:0
  3. 给inline元素添加float的样式
  4. 设置子元素的margin为负值
  5. 设置父元素display:table和word-spacing:-1em

5 浮动

5.1 浮动会出现什么问题?

  • 浮动会导致父元素高度塌陷
  • 会覆盖其他元素

5.2 如何清除浮动?

  • 父元素加上overflow:hidden
  • 在浮动元素的后面(同级),添加一个div,属性是clear:both
  • 在父元素添加一个伪元素 .clearfix:after { display: block; height: 0; visibility: hidden; clear: both; content: '';} .clearfix{ //IE6模式下 zoom:1;}
  • 在父元素添加双伪元素 .clearfix:before,.clearfix:after { display: table; content: '';}.clearfix:after { clear: both;}.clearfix { zoom: 1; //兼容IE6下}

6 position都有哪些值?

  • relative 相对定位 (相对元素在文档中的初始位置定位)
  • absolute绝对定位(相对于定位元素定位,最顶级是body)
  • fixed 固定定位 (相对窗口定位)
  • static 文档流

![](https://imgkr2.cn-bj.ufileos.com/6ddb8a2b-1261-4b84-ae49-ec32c3c4b59a.webp?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=B7HTGqcB2LRMUjsAlcvjkLzn03s%253D&Expires=1599739510)

7 CSS的选择器

7.1 CSS的选择器有哪些?

  • id 选择器
  • class 选择器
  • tag 选择器
  • 属性 选择器(a[href=""] )
  • 派生 选择器

7.2 优先级高低如何判断?

  • 不同级优先级: !important>内联>id>class = 属性 = 伪类 >标签 = 伪元素 > 通配符(*)
  • 同一级别: 后来居上 (后写覆盖先写) 内联样式 > 内部样式表 > 外部样式表 > 导入样式 @import ![](https://imgkr2.cn-bj.ufileos.com/67305866-9d2f-4f5c-9761-d42ee5ec7848.jpeg?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=%252FKfOJPBRWgQIyPnGTYRpw8J4f%252BQ%253D&Expires=1599739287)

优先级相同时会发生什么? 样式被覆盖

7.3 列举几条常用的CSS reset

  • *{ margin:0; padding:0;}
  • ol, ul { list-style:none;}
  • body {line-height:1;}

7.4 是否了解normalize?

normalize.css是一个css reset的替代方案。

  • 保护有用的浏览器默认样式而不是完全去掉
  • 一般化样式:为大部分html元素提供
  • 修复浏览器自身的bug
  • 优化css可用性
  • 解释代码

7.5 如何做到一个list中奇数和偶数行的背景色不一样?

 ul>li:nth-child(2n+1) {    background-color: red; }ul>li:nth-child(2n) {    background-color: yellow;}

7.6 如何做到一个list的第一行没有上边框?

 ul>li:first-child {      border-top: none;  }


有梦想的人,眼睛会发光。

希望屏幕前的你,能够关注我一波。接下来,我会分享前端各种干货,以及编程中的趣事。

css连续选取几个li_前端开发必会的HTML/CSS硬知识_第3张图片

你可能感兴趣的:(css连续选取几个li)