文档章节

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

小木fan
 小木fan
发布于 2017/09/02 17:00
字数 1963
阅读 16
收藏 1

面试宝典链接: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
博文 52
码字总数 13186
作品 0
绵阳
私信 提问
2018 前端面试准备

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

掘金官方
2017/12/14
0
0
前端学习之路(从入门到入坑...)

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

阿小庆
06/14
0
0
完整的网页制作视频

基础:http://edu.51cto.com/course/12283.html 进阶:http://edu.51cto.com/course/12338.html 课程目标在第一阶段HTML&CSS网页制作基础课程的前提下,力求通过一个实际网站页面的编写,让学...

杨胜强的号
01/22
0
0
「请教」在线考试系统的设计与开发毕设

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

oszbl
2014/10/23
473
1
有奖征文004期|从小白到大牛,进阶路上有话说?

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

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

没有更多内容

加载失败,请刷新页面

加载更多

手写一个重试机制程序(使用Callable)

java.util.concurrent.Callable<V>接口可以实现多线程,同时还能实现一个简易重试机制。 查看Callable接口源码可知,它内部的call()方法带返回值,同时抛出了异常。 public interface Cal...

哥本哈根的小哥
17分钟前
0
0
能否通过反射修改被 final 修饰的成员变量?

一、背景 日常磨刀 二、阅前须知知识点: 当final修饰的成员变量在定义的时候初始化值,反射就不能动态修改它的值了。 当final修饰的成员变量在定义的时候没有初始化值,就还能通过反射来动态...

jack__0023
35分钟前
0
0
方之熙博士被任命为RISC-V基金会中国顾问委员会主席,加速RISC-V ISA在中国的应用

中国顾问委员会将就RISC-V基金会的教育和应用推广战略提供指导 今天在中国乌镇举行的世界互联网大会(World Internet Conference)上,RISC-V基金会(RISC-V Foundation)宣布,半导体行业资深人...

whoisliang
49分钟前
1
0
为了用户体验,不要做浏览器兼容

读者看到这篇文章的标题也许会感到奇怪,按照通常的经验来说,为了用户体验应该做浏览器兼容,以便让不同的浏览器用户都能有好的体验,从而增加网站的流量,但是我认为做浏览器兼容属于同样的...

Bob2100
50分钟前
1
0
分布式定时任务架构 (二) xxl-job二次开发实践

4个月前,公司有任务调度的需求,需要一周内完成,时间非常紧。 需求有三点: web界面编辑cron表达式,启动,停止任务 接入公司的rpc成本较低,公司有自研的rpc,研发人员希望共用同一套注解 ...

勇哥和你一起学技术
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部