html,css

html

盒模型:

网页上每个元素均可以看作一个盒子,他从内到外包括content,padding,border,margin. 举例： box-sizing:content-box: width属性 === 内容区宽度。当border和padding变宽的时候，内容区宽度不变

box-sizing:border-box: width属性 === 内容区宽度 + padding 宽度 + border 宽度，当固定width的时候，调整border和padding的大小，内容区宽度会自动收缩。

HTML语义化

举例，好比说段落用 p，边栏用 aside，主要内容用 main 标签，看到标题用h1或者h2。 语义化的好处是易读、有利于SEO。

HTML5

html5中新增长的标签,技术(api)(包括promise,localStorage,canvas等),统称为html5.

meta viewport

死背：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

控制页面在移动端不要缩小显示。

侃侃而谈

一开始，全部页面都是给PC准备的，乔布斯推出 iPhone 3GS，让手机也能够访问PC端的页面，可是页面是不适应手机屏幕的，因此乔布斯的工程师想了一个办法，默认把手机模拟成 980px，页面缩小。后来，智能手机普及，这个功能在部分网站不须要了，因此咱们就用 meta:vp 让手机不要缩小个人网页。

手机页面不写meta viewport：

document.documentElement.clientWidth  //980
复制代码

BFC 是什么？

如何清除浮动？

overflow: hidden（方方反对） 用： .clearfix 清除浮动写在爸爸身上

.clearfix::after{
     content: ''; display: block; clear:both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容 */
 }
复制代码

CSS

CSS选择器

1. .类选择器，#id选择器,input[type=text] [data-x] [target=_blank] 属性选择器

2. 直接子代选择器> 后代选择器空格 ，表明两个都选

3. 伪类选择器： input:focus 选择得到焦点的 input 元素。 a:hover p:first-child p:last-child p:nth-child(1) p:nth-child(even) p:nth-child(odd) p:before p:after

input:enabled 选择每一个启用的 元素。 input:disabled 选择每一个禁用的 元素 input:checked 选择每一个被选中的 元素。

高度与宽度,文本省略,margin合并,文档流

• inline的高度是行高，而不是font-size
• 全部inline和inline-block元素之间,无论有多少回车和空格或者tab,都只显示一个空格，解决方法：1float:left，而后clearfix清除浮动，2display:flex
• 超出一行文本省略：

  div{
        border:1px solid red;
        /*如下三行*/
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
  复制代码

• 阻止父子上下margin合并的方法：1.父亲padding0.1或者儿子border0.1挡住，能够防止合并。2父亲overflow:hidden;
• 文档流：1.内联元素从左到右依次排列，若是空间不够，就换一行从左到右依次排列2.块级元素另起一行，从上到下占满整行。
• 脱离文档流的状况 父元素div高度变小 float position:absolute position:fixed 注意: position:relative没有脱离文档流，只是相对于以前的位置定位，原来的地方还占据位置。
• 宽高固定居中套路： position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
• 内联元素的padding 和margin只会影响宽度,可是不会影响高度，内联元素的高度只受line-height影响。

CSS4 icon：SVG

SVG：SVG实际上是一段代码，浏览器能够解析这段代码，将它变成图形 优势：能够渐变,不会失真,能够动

flex布局（css6）

我理解flex从两个方面去理解：

1. 元素布局 主轴和交叉轴，弹性元素永远沿主轴排列

   /*容器上：*/
   flex-direction/* 弹性元素按主轴排列的方向*/
   flex-wrap/*nowrap | wrap | wrap-reverse，主轴排列不下，是否换行 。默认是nowrap不折行。不会溢出。元素的弹性伸缩*/
   flex-flow/*上面两个的缩写*/
   
   justify-content/* 主轴对齐方式，五个属性*/
   align-items/* 单行交叉轴的元素对齐方式。默认stretch（元素未在交叉轴上设置尺寸，将把交叉轴自动填满，有flex-start，end，center，baseline几个属性）*/
   align-content/*多行交叉轴的对齐方式。flex-wrap: wrap的时候。stretch（这几行在垂直方向上占满） | flex-start（这几行挤在上面） | flex-end（挤在下面） | center（挤在中间） | space-between | space-around */
   /*元素上：*/
   order/* 元素排列次序*/
   align-self/* 单个元素的align-items*/
   复制代码

2. 元素伸缩 当容器为flex-wrap: nowrap;时，元素会伸缩。 在元素上写：

• flex-shrink默认为1，按比例缩小，占满一行
• flex-grow: 放大比例。默认为0，不放大。若是两个子元素flex-grow:3，flex-grow:2，那么意思就是剩下的空间按3:2分配。
• flex-basis默认为为auto。若是有width，就由width决定，若是没有width，就由内容的宽度决定。
  • flex-basis有数值。忽略width，由flex-basis决定
  • flex-basis:0由内容宽度决定。由于他的优先级比width高
• flex是上面三个的缩写。
  • flex: 1 = flex: 1 1 0%既之内容的大小（无论width是多少） 按比例放大或缩小，占满一行 -flex: auto = flex: 1 1 auto;既考虑width， 按比例放大或缩小，占满一行
  • flex: none = flex: 0 0 auto; 不放大也不缩小，width是多少，就是多少经常使用于固定尺寸 不伸缩

calc()

width: calc(50% - 10px);

宽度100%会把父盒子撑破， 解决方法：

1. box-sizing：border-box;
2. width: calc(100% - 10px);

布局CSS7

segmentfault.com/a/119000001…

圣杯布局和双飞翼布局 是老的布局方式，2012年之前流行,如今已不流行，可是面试可能会考察到. why it?

• 是三列布局，两边固定宽度，中间自适应
• 中间内容元素在 dom 元素次序中优先位置

原理：实际上都用了浮动和负边距的特性。 双飞翼实现方法： 1先所有fl 2main width100% 3 左边的一块 margin-left: -100%; /4/ 右边的一块 margin-left: -150px; /5/ 4.main.wrap{ margin-left: 100px; /6/ margin-right: 150px; /6/ background: blue; /7/ height: 350px; /7/ } 双飞翼：js.jirengu.com/fevifumike/…

CSS8:到底什么是BFC？

内部元素彻底包起来（float等），外部元素界限分明，不重叠。

面试官问的时候就说：

1. 首先一个BFC能够包住浮动元素，不让他超过边界（但这不是清除浮动，清除浮动用clearfix），即便是子元素的margin也能够包住，不冲出父元素。好比举一个代码的例子，儿子是浮动元素，那么只要在爸爸上写overflow：hidden;或者overflow:auto;或者diaplay：flow-root;那么爸爸就会包住儿子，且margin也会在爸爸里面）
2. 让两个相邻的BFC界限分明。 举个例子： 两个div是是兄弟关系，若是哥哥浮动了，那么哥哥会叠在弟弟上面，会遮盖弟弟。这时候若是把弟弟也变成BFC，那么哥哥和弟弟之间就会界限分明，谁都不会遮挡谁。

移动端开发

响应式两点：（CSS5）

1. 媒体查询：

   @media (max-width: 768px){/*0-768*/
               body{
                   background-color: blue;
               }
           }
   
           @media (max-width: 425px){/*0-425*/
               body{
                   background-color: red;
               }
           }
   复制代码

   2.加上meta viewport历史缘由:最开始手机浏览器(苹果三)会在本身的三四百像素的手机上模拟980像素的显示效果,而后让用户本身去缩放,查看网页. 那么就告诉浏览器不要缩放网页,手机屏幕是多少像素,就显示多少像素的网页.使用下面的代码

   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   复制代码

手机端什么CSS属性均可以用,不用考虑兼容的问题

CSS9动态 REM

动态 REM是手机专用，是如何适配全部手机的方案。 em:一个m的宽度.就说是一个汉字的宽度.这个单位是相对于font-size的 rem:root em,根元素的font-size.即 <html>的font-size .rem是相对于html的font-size的.

vh:视口高度,总共100vh vw:视口宽度,总共100cw

pc端只须要选一个布局(flex或者float),而后定宽就能够了。可是手机端不行，由于屏幕太多了 解决方法：

1. 使用百分比布局。（缺点：高度没法使用百分比）
2. 使用vw，vh。（缺点是兼容性很差）
3. 使用动态 REM总体缩放

动态rem： 由于rem这个单位跟<html>标签的font-size挂钩。那么用js将<html>标签的font-size与页面宽度挂钩（pagewidth），那么rem这个单位就间接地与页面宽度挂钩了。

<head>
  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>动态REM</title> <script> var pageWidth = window.innerWidth document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>') </script> </head> 复制代码

而后布局等大单位就用rem，可是border，font-size等小单位，还用px便可，由于这些单位就算统一，在任何手机上的表现都没有多少影响。

这样写以后，10rem就是页面宽度。这样就能够总体按比例缩放了。

伪类，伪元素

伪类： :hover :focus :active :visited :link :first-child ，:last-child ，nth-child()用来选取不一样状态的元素 伪元素： ::before ::after ,实际存在的元素，用content：''来作小三角形，小圆点

html5标签

html5标签header footer main artical section aside nav，有点：若是都用div或者span来着，那么不清楚每一部分的含义，语义化，结构清晰，提升可读性。有利于seo，好比标题是h1，爬虫爬取数据会优先爬取标题。

DOCTYPE 规定使用哪一个版本的html 使用html5

元素

块级元素：div p header footer main artical section aside nav

行内元素：span、a、b、i，strong

行内块元素：img，input，button