摘要：昨天面试了本地的一家公司，面试的前端。行内元素，不可设置宽高其实正确答案应该是设置无效，单行显示直到一行排列不下，才会换新一行。头部有固定的高度像素，内容容器是像素而侧边栏是像素。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
盒模型的组成昨天面试了本地的一家公司，面试的Web 前端。题目共有CSS和JS两部分，
因为我对于CSS不是很熟悉，所以这里就只列出CSS相关的笔试题，仅供学习。
盒模型通过四个边界来描述：margin(外边距)、border(边框)、padding(填充)、content(内容)
是的，这是最基本的，但是我回来查了一下发现还有IE模型（IE5和IE6尽然还存在？excuse me？）
W3C标准模型的内容占据的空间是由width属性设置的，内容周围的padding和border值是另外计算的。
但是IE的非标准模型，width是内容、内边距、边框的宽度的总和。
block,inline,inline-block的区别
我的答案是：block块级元素，可设置宽高，独占一行，另起一行显示。可设置margin和padding属性。
inline行内元素，不可设置宽高（其实正确答案应该是设置无效），单行显示（直到一行排列不下，才会换新一行）。设置水平方向的margin和padding值会产生边距效果，垂直方向上的margin和padding不会产生边距效果。
inline-block可设置宽高，但是仍然是在同一行显示。
CSS选择器我只回答了基本选择器，回答的太简单了，哎~~~
基本选择器：
class选择器
id选择器
标签选择器
通用选择器(*)
多元素组合选择器：
E,F 匹配所有E或F元素
E F 匹配所有属于E元素后代的F元素
E > F 匹配所有E元素的子元素F
E + F 匹配所有紧随E元素之后的同级元素F
属性选择器
E[attr] 匹配所有具有att的E元素
E[att=val] 匹配所有att属性等于val的E元素
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于val的E元素
E[att|=val] 匹配所有att属性具有多个连字号分隔的值、其中一个值以val开头的E元素
太多了。。直接上地址吧：http://www.ruanyifeng.com/blo...
CSS优先级我只回答了就近优先的原则，回答的太简单了(lll￢ω￢)。
正确的应该是：
浏览器缺省设置 < 外部样式表(src) < 内部样式表(head内部) < 内联样式(HTML内部)
但是！但是！但是！内部样式表和外部样式表的优先级需要看他们的引入和定义的顺序，如果先用内部样式表定义了样式，然后再引入通过外部样式表定义的样式，你们外部样式表的样式将会覆盖内部样式表定义的样式，反之亦是一样。
还有id,class,标签选择器的优先级。
id选择器 > class选择器 > 标签选择器
另外当且仅当有两个或者是多个class或者id的时候，谁在前面就谁的优先级高。
清除浮动的方式这里的div会应用id1的样式效果
浮动：一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。
分析HTML代码结构：
123
清除浮动：
方法一：添加新的元素、应用clear:both
123
.clear {
clear:both;
height: 0;
line-height: 0;
font-size: 0;
}
方法二：父级div定义overflow:auto
div*3
.clearfix {
overflow: auto;
zoom: 1; //这句是处理IE的兼容问题
}
如何实现响应式
第一步：Meta标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。
第二步：HTML结构
有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。
第三步：媒介查询-Media Queries
CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
@media screen and (max-width: 700px) {
//样式
}
@media screen and (max-width: 480px) {
//样式
}
BFC的理解
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC 的一些用处（如清浮动，防止 margin 重叠等）
具体的可以参考文章http://www.cnblogs.com/dojo-l...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111806.html
摘要：一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。 工欲善其事必先利其器-前端实习简历篇 - 掘金 有幸认识很多在大厂工作的学长，在春招正式开始前为我提供很多内部推荐的机会，非常感谢他们对我的帮助。现在就要去北京了，对第一份正式的实习工作也充满期待，也希望把自己遇到的一些问题和...
摘要：对于所访问的每个元素，函数应该将该元素传递给所提供的回调函数。 HTML 在线阅读Github地址 题目列表 HTML HTML和XHTML的区别 Html的语义化 Doctype的文档类型 cookie、sessionSttorage、localStory区别 HTML全局属性(global attribute)有哪些？ 常见的浏览器内核有哪些？ 介绍一下你对浏览器内核的理解？...
摘要：对于所访问的每个元素，函数应该将该元素传递给所提供的回调函数。 HTML 在线阅读Github地址 题目列表 HTML HTML和XHTML的区别 Html的语义化 Doctype的文档类型 cookie、sessionSttorage、localStory区别 HTML全局属性(global attribute)有哪些？ 常见的浏览器内核有哪些？ 介绍一下你对浏览器内核的理解？...
摘要：对于所访问的每个元素，函数应该将该元素传递给所提供的回调函数。 HTML 在线阅读Github地址 题目列表 HTML HTML和XHTML的区别 Html的语义化 Doctype的文档类型 cookie、sessionSttorage、localStory区别 HTML全局属性(global attribute)有哪些？ 常见的浏览器内核有哪些？ 介绍一下你对浏览器内核的理解？...
阅读 1861·2021-11-16 11:44
阅读 1162·2021-11-15 11:38
阅读 450·2019-08-30 15:55
阅读 3167·2019-08-30 15:52
阅读 3401·2019-08-30 15:43
阅读 2069·2019-08-30 11:21
阅读 300·2019-08-29 12:18
阅读 1790·2019-08-27 11:04
