文档章节

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

小木fan
 小木fan
发布于 2017/09/02 17:00
字数 1963
阅读 14
收藏 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
前端相关整理

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

Seas0n_
2016/03/01
106
0
就决定是你了,心仪的公司!——《程序员面试金典》

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

灰仓鼠
2017/11/28
0
0
前端学习之路(从入门到入坑...)

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

阿小庆
06/14
0
0
有奖征文004期|从小白到大牛,进阶路上有话说?

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

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

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之高级类型的索引类型(Index types)

转发 TypeScript基础入门之高级类型的索引类型(Index types) 高级类型 索引类型(Index types) 使用索引类型,编译器就能够检查使用了动态属性名的代码。 例如,一个常见的JavaScript模式是从...

durban
28分钟前
0
0
利用碎片化时间Get Linux系统

起初,我做着一份与IT毫无关系的工作,每月领着可怜的工资,一直想改变现状,但无从下手,也就是大家熟知的迷茫。我相信,每一个人都会或多或少的经历过迷茫,迷茫每一个选择,迷茫工作或者生...

Linux就该这么学
今天
1
0
图像显示深入学习一:Activity启动过程

一个月左右写了图像显示深入学习之文章开篇文章表明了自己近期的计划,前半年重新学习了opengl es,c++以及Linux的一些知识,觉得是时候开始看图像这一块的源码了,边看边补缺补漏吧。 作为该...

JerryLin123
今天
3
0
给MySQL授权远程访问

putty登录服务器; 登录MySQL: mysql -u root -p 新建远程用户: CREATE USER 'myusername' IDENTIFIED BY 'mypassword'; 授权: grant all on *.* to john@'101.102.103.104' identified by......

sweethome
今天
3
0
在t-io老巢造谣,不过有造谣的就会有反造谣的!

只发当事人的截图,不发表评论,以免有引导嫌疑 PS: 截图是由不同的人发过来的 本人已经不在此微信群 图3:有造谣的,就有反造谣的 图4是2018-09-23的t-io官方群的一个发言小统计,有助于让...

talent-tan
今天
104
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部