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. 数组去重--ES6方法

    数组去重方法1:用es6的set和...扩展运算符 let arr = [1,2,3,4,4,5,2]; console.log([...new Set(arr)]) // [1, 2, 3, 4, ...

  2. oracle中如何更改一个表的一个字段属性（名称，类型）

    修改字段的属性,名称方法 --修改某一个字段的类型,当该字段不为null时alter table 表名add 字段NUMBER(11,0) default 0 not null;--添加表一个字段 A ...

  3. python之三方库（冷门+热门）

    AES加密库 pycryptodome

  4. Codeforces 939A题，B题（水题）

    题目链接:http://codeforces.com/problemset/problem/939/A A题 A. Love Triangle time limit per test 1 second ...

  5. Vim操作：打开文件

    1.打开文件并定位到某一行 vim +20 vendor/laravel/framework/src/Illuminate/Support/Facades/Facade.php # 定位至第20行 2 ...

  6. Linux服务器用postfix 发送邮件延迟 阻塞 被接收方拒绝等问题

    Linux服务器用postfix 发送邮件延迟 阻塞 被接收方拒绝等问题 postfix如何设置发送邮件延迟通知 1 */1 * * * /bin/bash /home/delete_postfix. ...

  7. tomcat特殊字符处理问题解决方案

    tomcat特殊字符处理问题解决方案 直接加上如下代码,本质是通过反射加上过滤字符 @Configuration public class TomcatConfig { @Bean public Co ...

  8. maven 学习---转换基于Maven的Web应用程序支持Eclipse IDE

    在上一节教程中,使用Maven创建了一个Web应用程序.这里有一个指南,告诉你如何转换Web应用程序到Eclipse IDE支持的形式. 注意,通过WTP工具Eclipse IDE支持Web应用程序, ...

  9. JS 判断设备来源

    1.js代码判断当前设备: function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", ...

  10. Hibernate基于注解实现自关联树形结构实现

    很久没用过Hibernate了,项目需求需要使用,并建立树形结构,在开发中遇到一些问题,在这里记录一下. 1.创建数据库表,主要是设置标志信息,不然插入数据库会报id不能插入null的错误. 2.创建 ...