html marquee初始空白_前端开发必会的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的上下左右都有效
- 元素独占一行
- 多个块状元素一起写,默认排列从上至下
2.4 行内块元素特征
- 能设置宽高
- 不会自动换行
- 多个行内块一起写,默认从左至右排列
2.5 行内元素特征
- 设置宽高无效
- 设置margin的上下无效,左右有效,设置padding上下左右都有效(并且会撑大空间)
- 不会自动换行
3 CSS
3.1 请说出3个CSS浏览器前缀
- -ms- 兼容IE浏览器
- -moz- 兼容firefox
- -o- 兼容opera
- -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 盒模型
- 盒模型分为标准盒模型和怪异盒模型(IE5.X和6)两种
- 标准盒模型 width = content
- 怪异盒模型 width = content + padding + border
已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;
标准盒模型:
1. 占用宽:
margin*2+padding*2+border*2+width
= 20*2+10*2+10*2+200 = 280
2. 占用高:
margin*2+padding*2+border*2+height
= 20*2+10*2+10*2+50 = 130
3. 盒子实际宽度:
padding*2+border*2+width
= 10*2+10*2+200 = 240
4. 盒子实际高度
padding*2+border*2+height
= 10*2+10*2+50 = 90
怪异盒模型:
1. 占用宽:
margin*2+width
= 20*2+200 = 240
2. 占用高:
margin*2+height
= 20*2+50 = 90
3. 盒子实际宽度:
width = 200
4. 盒子实际高度
height = 50
IE8及更早版本不兼容问题解决方案:在HTML页面声明
3.3 box-sizing都有哪些值?他们的宽高分别如何计算?
- content-box(标准盒模型)|border-box(怪异盒模型)|inherit(继承父元素)
- content-box的宽高由content决定
- border-box的宽高由content+padding+border决定
4. BFC
4.1 什么是边界塌陷(或边界重叠)?
- 兄弟div(上下margin塌陷)
- 父子div(如果父级div没有paddingborderinlinecontent, 子级div的margin会向上查找边界塌陷的div,直到找到某个标签包括borderpaddinginline content的其中一个,然后按此div进行margin)
4.2 什么是BFC(格式化上下文)?如何实现?
BFC(块状格式化上下文,独立的盒子,布局不受外部影响,但是如果同一个BFC中,同级块状元素的margin-top和margin-bottom会重叠)
只要元素满足下面的任一条件,都会触发BFC特征。
- body根元素
- position: fixed|absolute(绝对定位元素)
- float(浮动元素) 除了none
- overflow: hidden|auto|scroll (除了visible之外的值)
- display: inline-block table-cellsflex (具有table-的属性)
解决问题:
- 解决边界塌陷问题
- 解决浮动元素导致父元素高度塌陷问题
- 解决阻止元素被浮动元素覆盖问题
4.3 多个inline元素之间会有空隙,为什么?如何解决?
元素被当成行内元素排版时,元素直接的空白符会被浏览器处理,根据white-spack的处理方式(默认是normal,合并多余空白),Html代码在回车换行时被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block元素之间就出现了空隙。
复现
<ul><li>首页</li><li>登陆</li><li>资源</li><li>社区</li><li>帮助</li>
</ul>
解决办法:
- 多个inline元素写在同一行
- 将父级元素的font-size:0
- 给inline元素添加float的样式
- 设置子元素的margin为负值
- 设置父元素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 文档流
7 CSS的选择器
7.1 CSS的选择器有哪些?
- id 选择器
- class 选择器
- tag 选择器
- 属性 选择器(a[href=""] )
- 派生 选择器
7.2 优先级高低如何判断?
- 不同级优先级:
- !important>内联>id>class = 属性 = 伪类 >标签 = 伪元素 > 通配符(*)
- 同一级别:
- 后来居上 (后写覆盖先写)
- 内联样式 > 内部样式表 > 外部样式表 > 导入样式 @import
优先级相同时会发生什么? 样式被覆盖
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;}
魔女有话说
- 有梦想的人,眼睛会发光。
- 希望屏幕前的你,能够关注我一波。接下来,我会分享前端各种干货,以及生活中的窍门。
- 小魔女将会陪大家笑看人生。
html marquee初始空白_前端开发必会的HTML/CSS硬知识相关推荐
- 前端开发入门:html和css基础知识回顾2
HTML+CSS基础知识 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被 ...
- css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发 来源 | web前端开发 我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
- 人工智能实战小程序之语音_前端开发
1. 人工智能实战小程序之准备工作 2. 人工智能实战小程序之语音_前端开发 今天这部分主要讲小程序前端功能的开发 由于我偏后端,css是我的弱项,可能很多人和我一样开发小程序不知道如何下手,希望本篇 ...
- 网站前端开发必会基础知识有哪些?
自己工作做得好好的,怎么非要去搞前端?" 很多人离职的时候,可能印象最深的就是爸妈每天说的这句话.起因很简单,就是自己辞了爸妈眼中的"铁饭碗". 他也是如此,毅然辞去了一 ...
- JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 前端开发必须要了解的CSS原理
从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢? 一.浏览器的 ...
- 从事前端开发必须要了解的CSS原理
从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢? 一.浏览器的 ...
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
- 一年前端开发工程师简历_2017年是前端开发人员应该回头并掌握基础知识的一年...
一年前端开发工程师简历 by Artem Sapegin 通过Artem Sapegin 2017年是前端开发人员应该回头并掌握基础知识的一年 (2017 is the year that front ...
最新文章
- SAP QM QE02 修改检验结果,报错 -No characteristics were found–
- Nature首次「博士后」前景调查:计算机、数学学者最乐观,63%的人想继续留在学界...
- linux shell if [[ ]]和[ ]区别 ||
- SpringBoot动态生成多个Excel文件以压缩包.zip格式下载
- pxe装机原理_linux PXE装机详解(非常详细,小白专用)
- SAP License:2021年度最新FICO面试题目
- 默认参数和命名关键字参数(1)
- 给iOS开发新手送点福利,简述UIPageControl的属性和用法
- DM6437烧写总结
- android(9)_数据存储和访问3_scard基本介绍
- JavaScript:函数的可选参数
- 好佳居软装十大品牌 软装可以提升格调
- echarts大数据多图表绘制卡顿解决方案
- C++| 匠心之作 从0到1入门学编程【视频+课件+笔记+源码】
- Silvaco学习笔记(五)毕设相关
- Codeforces Round #376 (Div. 2) B. Coupons and Discounts
- css简单实现div鼠标悬浮后出现阴影
- VC 出错 msdev.exe错误
- JavaSwing+MySQL+进销存管理系统
- 总结了大佬的学习方法 #CSDN博文精选# #学习方法# #高效系统化学习#