文档章节

前端面试宝典(1)——HTML&CSS

小木fan
 小木fan
发布于 2017/09/02 17:00
字数 1963
阅读 12
收藏 0
点赞 0
评论 0

面试宝典链接:http://blog.csdn.net/piaoxuetianya1/article/details/38338055

前端开发面试知识点

HTML&CSS

     对web标准和W3C的理解

     web标准可分为页面的结构、表现和行为。结构主要是HTML标签组成;表现既是CSS样式表,通过CSS可使页面的结构更具有美感;行为是页面和用户具有一定的交互,使得页面的结构或表现发生变化,由JS实现。

      W3C对web标准提出了规范化的要求,既是在实际编程中的一些代码规范。

  1. 对结构的要求

        1)标签字母要小写

        2)标签要闭合

        3)标签不允许随意嵌套

    2.对css和js的要求

         1)尽量使用外链CSS样式表和JS脚本,使结构、表现、行为分为三块,符合规范;提高页面渲染速度

         2)样式尽量少用行间样式表,即使表现和结构分离;标签越少,加载越快,代码维护简单

         3)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性

      浏览器内核差异

     内核,即渲染引擎。作用,通俗的讲开始怎样翻译网站那边发过来的HTML页面。帮助浏览器渲染网页的内容,将页面内容和排版代码转换为用户所见的视图。负责对网页语法的解释和渲染

      IE内核/Trident内核——IE浏览器、世界之窗、腾讯TT(没有使用w3c的标准;渲染速度最慢)

    Webkit内核——Google、Safair(苹果公司自己的内核;Webkit引擎包括webCore排版引擎+JavaScriptCore解析引擎;增加最新特性srcset,可根据不同分辨率的设备显示)

      Presto内核——Opera(渲染速度的优化达到了极致;而牺牲了网页的兼容性;动态内核,页面的全部或部分都能够在回应脚本事件时被重新解析)

      Gecko内核——Firefox(跨平台内核,可在windows、Linux、Mac OSX中使用)

   浏览器内核渲染的原理及应用原理优化编写代码:http://www.cnblogs.com/ada-zheng/p/4308581.html

      浏览器兼容性

       http:// http://www.tuicool.com/articles/6bAjim

      hack

       分为三种:CSS属性前缀法,选择器前缀法,IE条件注释法(<!--[if IE ]>  <![endif]->  )

       http://blog.csdn.net/freshlover/article/details/12132801

      布局

      1、float-半脱离文档流-对于文字不脱离文档流,对于元素是脱离文档流的。

<html>
   <head></head>
   <body>
     <p>这是内容。</p>
   </body>
</html>

//元素:<p>这是内容。</p>

      2、position

            relative-相对的

            absolute-绝对的

           fixed-相对于视口

      3、用inline-block布局,对父元素加font-size:0;消除空白符

      (空白符包括空格、制表符、换行符white-sapce)

       居中

       水平居中—1.在要居中的元素外加一个父级div,再在父级上加text-align:center;要居中的元素加inline-block;

                          2.块级元素block加margin:0 auto;

                    3.加父级元素:position:relative;居中的元素加position:absolute;left:50%:transfrom:translateX(-50%);

         垂直居中—1.同上3

                          2.display:table-cell;同行等高,默认宽度为内容宽度,可设宽高vertical-align:middle;

         多列布局—1.一列定宽,一列自适应——margin-left/margin-right

                            eg——方法一:float清除浮动,方法二:position布局

<!DOCTYPE html>
<html lang="zh">
<title>table表格</title>
<head>
    <style type="text/css" media="screen">
     * {
        margin: 0;
        padding: 0;
     }
     /*清除浮动*/
     .clearfix:after {
        content: '';
        display: block;
        clear: both;
     }
     .clearfix { /*兼容IE*/
        zoom:1;
     }

     .list_box {
        background-color: #999;
        height: 200px;
        overflow:hidden;
     }
     .list_fixed {
        width: 400px;
        height: 100%;
        background-color: green;
        float: left;
     }
     .list_unfixed {
        height: 100%;
        width: 100%;
        margin-right: -400px;
        background-color: blue;
        float: right;
     }
    </style>
</head>
<body>
    <div class="list_box clearfix">
        <div class="list_fixed">一列定宽</div>
        <div class="list_unfixed">一列自适应</div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<title>table表格</title>
<head>
    <style type="text/css" media="screen">
     * {
        margin: 0;
        padding: 0;
     }
     .list_box {
        height: 200px;
        position:relative;
        background-color: #999;
        overflow:hidden;
     }
     .list_fixed {
        width: 400px;
        height: 100%;
        position: absolute;
        background-color: green;
        top: 0;
        left: 0;
     }
     .list_unfixed {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: blue;
        top: 0;
        left: 400px;
     }
    </style>
</head>
<body>
    <div class="list_box clearfix">
        <div class="list_fixed">一列定宽</div>
        <div class="list_unfixed">一列自适应</div>
    </div>
</body>
</html>

                          2.一列不定宽,一列自适应——

                          3.多列布局——table-cell

                          eg——等高布局 

<!DOCTYPE html>
<html lang="zh">
<title>table表格</title>
<head>
    <style type="text/css" media="screen">
     * {
        margin: 0;
        padding: 0;
     }
     .list_row {
       display: table-row;
       overflow: hidden;
     }
     .list_cell {
        display: table-cell;
        width: 30%;
        padding: 2%;
        background-color: #f5f5f5;
        /*兼容IE6/7*/
        margin-bottom: -100px;
        *padding-bottom: 110px;
        *float: left;
     }
     .list_center {
        background-color: #f0f3f9;
     }
    </style>
</head>
<body>
    <div class="list_row clearfix">
        <div class="list_cell">你一定也有过这种感觉的。当你心事重重,渴望找一个人聊一聊的时候,那个可以聊的人来了,可是你们却并没有聊什么。当然,聊是聊了,可是他聊他的,你也试着开始聊你的,只是到后来,你放弃了……那么,最后的办法就是静下来,啃啮自己的寂寞。或者反过来说,让寂寞来吞噬你。------罗兰《寂寞的感觉》
        </div>
        <div class="list_cell list_center">作为一个被基阿异捅过两个大血窟窿的人。告诉后来的基友们一句:一命二运三风水,四积阴功五读书。
        </div>
        <div class="list_cell">奔波了一天,收到了无数的生日快乐,享受了电影见面会现场各种形式的祝福和礼物,以及场面宏大的生日快乐歌,感谢<西风烈>,感谢支持我的朋友们!现在机场举长寿面祝你们都永远幸福快乐!
         </div>
    </div>
</body>
</html>

                    eg——  display:table-cell;中vertical-align: middle;可设宽高

<!DOCTYPE html>
<html lang="zh">
<title>table表格</title>
<head>
    <style type="text/css" media="screen">
     * {
        margin: 0;
        padding: 0;
     }
     .list_row {
       display: table-cell;
       padding:10px;
       border:1px solid #ccc;
     }
     .list_cell {
       display: inline-block;
       vertical-align: middle;
     }
     .list_one {
        background-color: #639146;
        padding:40px 80px 10px 10px;
        color: #fff;
     }
      .list_two {
        background-color: #BC1D49;
        padding:60px 80px 10px 10px;
        color: #fff;
     }
      .list_three {
        background-color: #2B82EE;
        padding:70px 80px 10px 10px;
        color: #fff;
     }
      .list_four {
        background-color: #F57900;
        padding:80px 80px 10px 10px;
        color: #fff;
     }
    </style>
</head>
<body>
    <div class="list_row clearfix">
        <div class="list_cell list_one">你是</div>
        <div class="list_cell list_two">一个</div>
        <div class="list_cell list_three">大的</div>
        <div class="list_cell list_four">幸福</div>
    </div>
</body>
</html>

        盒子模型_css  (css的三大特性:继承、优先级、层叠)

        CSS中的盒子模型分为两种:W3C标准和IE标准盒子模型。

        大多数浏览器采用w3c标准模型,而IE中则采用Microsoft自己的标准。

        怪异模式是“部分浏览器在支持w3c标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。

        当不对DOCTYPE进行定义时,会触发怪异模式。

        

        标准模式,一个块的总宽度=width + padding(左右) + border(左右) + margin(左右)

        怪异模式,一个块的总宽度=width + margin(左右) (即width已经包含了padding和border的值)

        CSS3中的box-sizing:content-box || border-box || inherit

        当设置为box-sizing:content-box时,将采用标准模式解析计算

        当设置为box-sizing:border-box时,将采用怪异模式解析计算

        当设置为inherit时,从父级继承box-sizing属性的值

         

               ***在谷歌开发者模式下审查元素计算出来的结果不包括margin的值。

          选择器的优先级及使用

          1.CSS选择器分类

              (1)标签选择器(body,div,p)

              (2)类选择器(class="head")

              (3)ID选择器(id="name")

              (4)全局选择器(*)

              (5)组合选择器(.head .head_top中间用空格键分开)

              (6)后代选择器(#head .nav ul li父集到子孙集的选择器)

              (7)群组选择器(div,span,img{color:red}具有相同样式的标签分组显示)

              (8)继承选择器(div p,注意两选择器用空格键分开)

              (9)伪类选择器(a:link)

              (10)字符串匹配的属性选择器(^$*分别对应开始、结尾、包含,div[attr~="test"])

              (11)子选择器(div>p)

              (12)CSS相邻兄弟选择器(h1 + p)  

               !important > 行内样式(1000)  > ID选择器(100) > 类选择器(10) > 标签(1) > 通配符 > 继承 > 浏览器默认属性

               html5 + CSS3

               移动端的自适应

               <meta name="viewport" content="width=device-width,initial-scale=1" />

               @media screen and (max-device-width : 400px) {}

                http://www.cnblogs.com/MissZhao/p/5773091.html

        

        

        

      

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
小木fan
粉丝 1
博文 51
码字总数 13186
作品 0
绵阳
2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方 ⋅ 2017/12/14 ⋅ 0

前端相关整理

整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,所以针对细节不发散,仅...

Seas0n_ ⋅ 2016/03/01 ⋅ 0

前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆 ⋅ 06/14 ⋅ 0

就决定是你了,心仪的公司!——《程序员面试金典》

很多接近毕业或者刚毕业没多久的程序员们都在做一件事:找工作。很多人对找IT相关的工作一头雾水,像是考官会问些什么,面试题是什么样的,该做些什么准备等等。其实我也是个没有经验的小白,...

灰仓鼠 ⋅ 2017/11/28 ⋅ 0

有奖征文004期|从小白到大牛,进阶路上有话说?

从小白到大牛,是用无数代码堆砌出的血泪史,就问你,想不想一吐为快? 想不想让大家了解你和代码那些风花雪月的故事? 或独自一人用青春和热血挥洒代码的经历? 咳咳,其实就是想让你写写程...

慕课网官方_运营中心 ⋅ 05/29 ⋅ 0

史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp ⋅ 2017/01/13 ⋅ 0

「请教」在线考试系统的设计与开发毕设

是这样的,楼主正在努力自学前端技术,准备找工作。 本科学的电子信息工程,但是相比互联网的话,对电子这块兴趣不大,所以毕设选了这么个奇葩题—— 「XX课程在线考试系统的设计与开发」。 ...

oszbl ⋅ 2014/10/23 ⋅ 1

前端开发面试题总结之——CSS3

相关知识点 题目&答案 如何理解CSS的盒子模型? link和@import的区别? CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS 3新增伪类有哪些? 如何居中div,如何居中一个浮动元素...

sandisen ⋅ 2017/02/18 ⋅ 0

java面试题栈

JavaEE面试题收集 Java EE平台构建于Java SE平台之上,Java EE平台提供一组API和运行环境来开发和运行大规模的,多层的,可扩展的,可靠的和安全的网络应用程序。这里会不断收集和更新JavaE...

掘金官方 ⋅ 2017/12/06 ⋅ 0

一个大二女生的Web开发成长之路:从软妹子到女汉子的进阶过程

原文出处:floraLam 的博客 学习和实践前端一年时间,几乎天天在工作室和一群屌丝男程序员一起学习、开发。这种潜移默化的环境下,编码提高了,节操也细碎了。 一年前,娇滴滴的还是工作室里...

floraLam 的博客 ⋅ 2014/08/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 43分钟前 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 49分钟前 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 昨天 ⋅ 0

Confluence 6 重新获得站点备份文件

Confluence 将会创建备份,同时压缩 XML 文件后存储熬你的 <home-directory>/backups> 目录中。你需要自己访问你安装的 Confluence 服务器,并且从服务器上获得这个文件。 运行从 Confluence...

honeymose ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部