1、html+css经典布局

　　①左列定宽，右列自适应

　　.left{width:100px;float:left;}

　　.right{overflow:hidden;}

　　②两列顶宽，中栏自适应

　　.left{width:100px;float:left;}

　　.right{width:100px;float:right;}

　　.center{width:100%;margin:0 100px;}

2、px、em、rem、pt的区别

①px是像素，用px设置字体大小时，比较稳定和准确，但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的web页面时，如果进行了缩放，这是会使我们的web页面布局被打破。因此这时就出现了“em”来定义web的字体。

②em就是根据基准来缩放字体的大小，em是相对于父元素来设置字体大小的，这样会存在一个问题，进行任何元素设置，都有可能要知道其父元素的大小

③rem是相对于根元素的字体大小来显示的，只需要在跟元素上确定一个参考值

④pt的大小等于1英寸的1/72，磅：也是文字的一种计量单位，这种方式来源于打印-设计背景，最适合于媒体，但同样广泛应用于显示器

浏览器的兼容性：除了IE6-IE8，其他的浏览器都支持em和rem，px所有浏览器都支持

3、BFC

什么是BFC：

　　BFC（Block Formatting Context）块级格式化上下文。它是一个独立的渲染区域，就是一个独立的容器，并且这个容器里box的布局与容器外的布局没有关系。

BFC的渲染规则：

　　a、内部的box会在垂直方向一个接一个的放置

　　b、box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠　　

　　c、每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此

　　d、BFC的区域不会与float box重叠

　　e、BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

　　f、计算BFC的高度时，浮动元素也参与计算

如何产生BFC：

　　a、根元素

　　b、float不会none

　　c、position为absolute或fixed

　　d、display为inline-block、table-cell、table-caption、flex、inline-flex

　　e、overflow不为visible

BFC的作用：

　　a、自适应两栏布局

　　b、清除内部浮动

　　c、防止垂直margin重叠（放在两个BFC里）

4、实现文本三个点

　　a、容器宽度　　width:100px;

　　b、强制文本在一行内显示　　white-space:nowrap;

　　c、溢出内容为隐藏　　overflow:hidden;

　　d、溢出文本显示省略号　　text-overflow:ellipsis;

（注意：必须是单行文本才能设置文本溢出显示省略号）

5、什么是置换元素与非置换元素
　　置换元素：具有内联元素特征，但是可以直接设置宽度和高度。常见的置换元素有：img input select textarea

　　非置换元素：除置换元素外的其他元素都是非置换元素

6、如何给一个元素设置透明度，如何让这个元素的内容不发生透明度变化

　　a、rgba()

　　b、定位脱离文档流

7、什么是精灵图，它的原理是什么，优点是什么

　　a、将导航背景图片、按钮背景图片等有规则的图片合成一张背景图，然后用background-position来实现背景图片的定位技术。

　　b、减少对服务器的请求次数，提高页面的加载速度；减小图片体积

8、清除浮动的几种方式

　　a、给父元素添加overflow:hidden　　　　

　　　　优点：简单代码少，浏览器支持好

　　　　缺点：不能和position配合使用，因为超出的尺寸会被隐藏

　　b、给父元素添加height

　　　　优点：简单代码少，容易掌握

　　　　缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样，会产生问题

　　c、在浮动元素下方添加空的div标签，并设置样式：　　div{clear:both}

　　　　优点：代码少，容易掌握

　　　　缺点：增加了空标签，会导致代码冗余

　　d、万能清除法：　　p:after{content:"."'clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

　　　　优点：支持性好，各大网站都在用万能清除浮动

　　　　缺点：代码多，不适合初学者

9、visibility:hidden和display:none的区别：

　　visibility:hidden　　仍然占着位置　　子元素可以继承　　c3的transition属性支持visibility:hidden

　　display:none　　不占位　　子元素不能继承　　c3的transition属性不支持display:none

10、什么是css样式表？优先级算法如何计算？

　　层叠样式表

　　重要性和来源的优先级从低到高是：

　　　　a、浏览器默认样式

　　　　b、class/id……选择器的权重

　　　　c、内部或外部（书写顺序）

　　　　d、行内样式

　　　　e、!iimportant

11、IE过滤器有哪些，兼容性如何？

　　a、_下划线属性过滤器　　IE6及更低版本浏览器中会继续解析这个规则

　　b、!important关键字过滤器，他表示所附加的声明具有最高优先级的意思，浏览器会优先显示（IE6不识别此语法）

　　c、*属性过滤器　　可以被IE7及以下浏览器识别

　　d、\9　　IE版本识别，其他浏览器都不识别

　　e、\0　　IE8及以上版本识别，其他浏览器都不识别

12、五大浏览器内核代表作品

　　Trident　　IE、Maxthon（遨游）、腾讯、Theworld世界之窗、360浏览器

　　Gecko　　Mozilla、Firefox

　　Webkit　　Safari、Chrome

　　Presto　　Opera

　　Blink　　由Google和Opera Software开发的浏览器排版引擎，2013.04发布

13、哪些属性可以继承

　　文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing

　　列表相关：list-style-image、list-style-position、list-style-type、list-style-type、list-style

　　颜色相关：color

　　透明度：子元素会继承祖元素的opacity，但是不能修改

　　注：font-size是继承父元素的大小，而不是比例。line-height当父元素是百分比或px值的时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是父元素的字体大小乘以数字。

　

14、简述对html语义化的理解

　　html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析

　　即使在没有css样式的情况下也以一种文档格式显示，并且是容易阅读的

　　搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO

　　是阅读源代码的人更容易将网站分块，便于理解和维护

15、渐进增强和优雅降级

　　渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

　　优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

16、主流浏览器的前缀有哪些

　　-ms-　　IE

　　-moz-　　火狐

　　-webkit-　　谷歌

　　-o-　　Opera

　

17、px、em、rem、pt、ppi的意思

　　a、px是像素，用px设置字体大小时，比较稳定和精确，但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的web页面时，如果对浏览器进行了缩放，这时会使我们的web页面布局被打破。因此，这时就提出了使用“em”来定义web页面的字体。

　　b、em是根据基准来缩放字体的大小，em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小

　　c、rem是相对于根元素字体大小来显示的，rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值

　　d、pt的大小等于1英寸的1/72，磅：他是作为文字的一种计量单位这种度量方式来源于打印-设计背景，最适合于媒体，但同样广泛应用于显示器

　　e、ppi是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多

18、标准盒模型和怪异盒模型的区别，他们的组成部分

　　标准盒模型：content+border+padding　　实现：box-sizing:border-box

　　怪异盒模型：content　　实现：box-sizing:content-box

19、H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

　　<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

　　width=device-width　　宽度等于当前设备的宽度

　　initial-scale=1.0　　初始的缩放比例

　　minimum-scale=1.0　　允许用户缩放到的最小比例

　　maximum-scale=1.0　　允许用户缩放到的最大比例

　　user-scalable=no　　用户是否可以手动缩放

20、rem布局的缺点

　　a、做出来的效果与效果图有些许偏差

　　b、雪碧图定位问题

　　c、rem单位最好不要用在PC端

　　

知识点总结 HTML+CSS部分的更多相关文章

  1. 【经验之谈】前端面试知识点总结（CSS相关）——附答案

    目录 二.CSS部分 1.解释一下CSS的盒子模型? 2.请你说说CSS选择器的类型有哪些,并举几个例子说明其用法? 3.请你说说CSS有什么特殊性?(优先级.计算特殊值) 4.要动态改变层中内容可以 ...

  2. css知识点补充、css属性、

    1.媒体查询的css代码的优先级要比其他的高! 2.text-overflow: 定义文本溢出父级元素如何处理!    clip/ellipsis/string 3.overflow: visible ...

  3. 前端知识点总结(html+css)部分

    HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ****** - 数据库获取数据,然后替换到html文件的指定位置(W ...

  4. 《CSS揭秘》之毛玻璃效果知识点

    实现代码: CodePen:毛玻璃效果 Dabblet:毛玻璃效果 HTML: <main> <blockquote> <em>"The only way ...

  5. 《CSS权威指南》读书笔记

    一.css和文档层叠 css规定了冲突规则,这些规则统称为层叠.这些规则定义了样式发生冲突时以优先级高的为准. 常用的优先级判定: 1. 开发者样式>读者样式>浏览器样式(除非使用!imp ...

  6. CSS一些设置用法

    今天就简单写点的知识点 1. CSS字体样式小结 1) text-indent :值  实现段落首行缩进功能   (在起初我们编写段落时为了实现首行缩进两个字符时用的是HTML的标签元素&nb ...

  7. 一天搞定CSS---终篇CSS总结

    虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...

  8. css基础小总结

    header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...

  9. CSS系列(6) CSS通配符详解

    通配符使用星号*表示,意思是“所有的”. 平时使用电脑,比如要搜索C盘里所有的网页,可以使用 *.html来搜索,.html是网页的后缀名,*代表了所有网页的名称: 也就是使用 * 加后缀名,就可以在 ...

随机推荐

  1. mysql不是内部或外部命令--windows环境下报错的解决

    安装Mysql后,当我们在cmd中敲入mysql时会出现‘Mysql’不是内部或外部命令,也不是可运行的程序或其处理文件. 处理: 我的电脑右键属性>高级系统设置>高级>环境变量&g ...

  2. 网易云信技术分享：IM中的万人群聊技术方案实践总结

    本文来自网易云信团队的技术分享,原创发表于网易云信公众号,原文链接:mp.weixin.qq.com/s/LT2dASI7QVpcOVxDAsMeVg,收录时有改动. 1.引言 在不了解IM技术的人眼 ...

  3. 函数式接口与Stream流

    lambda表达式是jdk8的特性.lambda表达式的准则是:可推断,可省略. 常规代码写一个多线程 public class Main { public static void main(Stri ...

  4. AngleSharp 实战（01）之最简单的示例

    文档地址:https://anglesharp.github.io/docs/Examples.html 直接贴代码了: using System; using System.Linq; using ...

  5. Spring源码系列 — Resource抽象

    前言 前面两篇介绍了上下文的启动流程和Environemnt的初始化,这两部分都是属于上下文自身属性的初始化.这篇开始进入Spring如何加载实例化Bean的部分 - 资源抽象与加载. 本文主要从以下 ...

  6. WPF数据模板(7)

    数据模板常用在3种类型的控件, 下图形式: 1.Grid这种列表表格中修改Cell的数据格式, CellTemplate可以修改单元格的展示数据的方式. 2.针对列表类型的控件, 例如树形控件,下拉列 ...

  7. CefSharp F12打开DevTools查看console js和c#方法互相调用

    转载地址: https://www.cnblogs.com/lonelyxmas/p/11010018.html winform嵌入chrome浏览器,修改项目属性 生成 平台为x86 1.nuget ...

  8. 阿里Jvm必问面试题及答案

    什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Java被设计 ...

  9. 一款好用的SSH工具“FinalShell”

    FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求. 特色功能:免费海外服务器远程桌面加速,ssh加速,双边tcp加速,内网 ...

  10. 开发技术--浅谈python数据类型

    开发|浅谈python数据类型 在回顾Python基础的时候,遇到最大的问题就是内容很多,而我的目的是回顾自己之前学习的内容,进行相应的总结,所以我就不玩基础了,很多在我实际生活中使用的东西,我会在文 ...