文档章节

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

小木fan
 小木fan
发布于 2017/09/02 17:00
字数 1963
阅读 52
收藏 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
绵阳
私信 提问
加载中
请先登录后再评论。
程序员面试书籍集合

面试是一个永远不过时的话题,是很多程序员作为涨薪的捷径之一。面试也越来复杂,难度越来越大,能有几本好的面试资料,就犹如利剑在手。因此在这里给大家推荐几本评分比较高的程序员面试书籍...

谢特boy
05/25
2
0
Jenkins 多环境 CI/CD 架构设计

http://dy.163.com/v2/article/detail/F7K4C9R60511Q1AF.html   ———— e n d ————   金三银四,师长为大家准备了三份面试宝典:   《java面试宝典5.0》   《350道Java面试题:...

osc_7fjpxbdo
03/19
5
0
疫情严重却被要求"自愿"上班!国内互联网公司上班时间一览

http://dy.163.com/v2/article/detail/F42SH72F0511Q1AF.html      作者 | 隔壁老王   来源 | 直评   上海、杭州、广东等陆续发布了延迟至2月9号24时之后上班的通知,遂整理了国内互...

osc_tjnx25e9
03/19
2
0
代码神器:拒绝重复编码,这款IDEA插件了解一下.....

http://dy.163.com/v2/article/detail/F64CF0LJ0511Q1AF.html   20大进阶架构专题每日送达    作者:HeloWxl www.jianshu.com/p/e4192d7c6844   Easycode是idea的一个插件,可以直接对...

osc_ho8dcqsx
03/19
8
0
Jenkins 多环境 CI/CD 架构设计

http://dy.163.com/v2/article/detail/F7K4C9R60511Q1AF.html   ———— e n d ————   金三银四,师长为大家准备了三份面试宝典:   《java面试宝典5.0》   《350道Java面试题:...

osc_gccs85s0
03/19
6
0

没有更多内容

加载失败,请刷新页面

加载更多

在JavaScript中从字符串中删除所有非数字字符 - Strip all non-numeric characters from string in JavaScript

问题: Consider a non-DOM scenario where you'd want to remove all non-numeric characters from a string using JavaScript/ECMAScript. 考虑一个非DOM场景,您希望使用JavaScript / EC......

法国红酒甜
今天
14
0
Quartz的Misfire处理规则 错过任务执行时间的处理机制

调度(scheduleJob)或恢复调度(resumeTrigger,resumeJob)后不同的misfire对应的处理规则 CronTrigger withMisfireHandlingInstructionDoNothing ——不触发立即执行 ——等待下次Cron触发频率...

独钓渔
今天
4
0
如何在Django视图中合并两个或多个查询集? - How to combine two or more querysets in a Django view?

问题: I am trying to build the search for a Django site I am building, and in that search, I am searching in 3 different models. 我正在尝试搜索要构建的Django网站,在该搜索中,我......

javail
今天
5
0
PHP解析/语法错误; 以及如何解决它们? - PHP parse/syntax errors; and how to solve them?

问题: Everyone runs into syntax errors. 每个人都遇到语法错误。 Even experienced programmers make typos. 即使是经验丰富的程序员也会打错字。 For newcomers, it's just part of the......

fyin1314
今天
20
0
OSChina 周三乱弹 —— 公主是大王的,命是自己的。小怪也要养家糊口啊!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :郭燕的单曲《下半生》 最近听一些轻快的歌 #今日歌曲推荐# 《下半生》 - 郭燕 手机党少年们想听歌,请使劲儿戳(这里) @锦年 :...

小小编辑
今天
44
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部