目录
基本知识：
网页三要素：
html 网页架构的基本元素 素颜的脸
css 给元素添样式 化妆的脸
js 给元素绑定事件，给元素添加动态效果 会哭会笑的脸
块级元素 ：
div（常用来进行网页架构搭建） p ul>li ol>li
独占一行
默认宽度为100%，如果有父元素则默认父元素的100%宽，如果没有父元素，则为视口区的100%，如果父元素也没有设置宽，则按照定义逐级向上查询。如果自身设置了宽，以自身为先。
元素的高由内容撑起
块级元素可以包含块级元素/行内元素/块级+行内行内元素
span
与其他元素共享一行
行内可以包含行内，不建议包含块级这样的编码思维方式
宽高由自身内容撑起
空元素
br hr
块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档中的分区或节 <dl> 定义列表 <dt> 定义列表中的项目 <fieldset> 定义一个框架集 <form> 创建 HTML 表单 <h1> 定义最大的标题 <h2> 定义副标题 <h3> 定义标题 <h4> 定义标题 <h5> 定义标题 <h6> 定义最小的标题 <hr> 创建一条水平线 <legend> 元素为 fieldset 元素定义标题 <li> 标签定义列表项目 <noframes> 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 <noscript> 定义在脚本未被执行时的替代内容 <ol> 定义有序列表 <ul> 定义无序列表 <p> 标签定义段落 <pre> 定义预格式化的文本 <table> 标签定义 HTML 表格 <tbody> 标签表格主体（正文） <td> 表格中的标准单元格 <tfoot> 定义表格的页脚（脚注或表注） <th> 定义表头单元格 <thead> 标签定义表格的表头 <tr> 定义表格中的行
行内元素列表 <a> 标签可定义锚 <abbr> 表示一个缩写形式 <acronym> 定义只取首字母缩写 <b> 字体加粗 <bdo> 可覆盖默认的文本方向 <big> 大号字体加粗 <br> 换行 <cite> 引用进行定义 <code> 定义计算机代码文本 <dfn> 定义一个定义项目 <em> 定义为强调的内容 <i> 斜体文本效果 <img> 向网页中嵌入一幅图像 <input> 输入框 <kbd> 定义键盘文本 <label> 标签为 input 元素定义标注（标记） <q> 定义短的引用 <samp> 定义样本文本 <select> 创建单选或多选菜单 <small> 呈现小号字体效果 <span> 组合文档中的行内元素 <strong> 语气更强的强调的内容 <sub> 定义下标文本 <sup> 定义上标文本 <textarea> 多行的文本输入控件 <tt> 打字机或者等宽的文本效果 <var> 定义变量
可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素 <button> 按钮 <del> 定义文档中已被删除的文本 <iframe> 创建包含另外一个文档的内联框架（即行内框架） <ins> 标签定义已经被插入文档中的文本 <map> 客户端图像映射（即热区） <object> object对象 <script> 客户端脚本
http get post
get 参数携带在浏览器地址栏?后使用&拼接传递
get/http://39.97.96.76 HTTP1.1
/index.php?user="zs"&age="18"
特点：1.get的请求携带参数是直接拼接在地址栏后面的
2.get不安全
3.传输数据量小
post 参数携带在请求体里的
var parmas = {
user:'zs',
password:'123321'
}
post(url,data(封装的数据携带在请求体里)).then()=>{}
特点：1.post请求参数携带在请求体里
2.post相对安全
3.post传输数据量大
前端单位
绝对单位 px 不会根据父元素/其他元素的大小变化而变化，设置多少就是多少
相对单位 em 像素值将是em值乘以使用em单位的元素的字体大小
rem 转化为像素大小取决于页根元素(html)的字体大小,
16px（html页根元素大小）*1(设置的em值) = 16px（转化后的绝对值）
当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。也就是比如当前 元素设置了font-size:20px,padding:10em(10*20=200px)
1.盒模型
W3C盒子（内容盒子） 默认IE盒子（边框盒子）
2.阿里：
实现三列布局：左右两侧固定30px 中间自适应
3.使用css绘制三角形
浮动
1.布局方式的一种
2.普通流（标准流/文档流）: 区分块级/行内/行内块级 margin/padding（标准流中）
浮动流（float）:
1.没有 块级/行内/行内块级 这些概念 不会与margin搭配使用
2.全部都可以设置宽高
3.两列布局 三列布局 字围现象
4.清除浮动三种方式
5.clear: left both right
清除左浮动对元素产生的影响 右 全部（左右）
定位（相对定位、绝对定位、粘滞定位、静态定位、固定定位）
1.要素：
a.定位是否脱离文档流
b.如何使用，自身/结合其他定位
面试实例题：
1.如何实现一个元素在另一个元素内的水平垂直居中
1.margin移动 top、left
2.父相对定位+子绝对定位，绝对定位top、left为50%，其余使用margin-left和margin-top 移动
3.父相对+子绝对，且left、top、bottom、right为0，margin：auto
4.给父元素设置display:flex，且父元素align-items:center;代码实现：6种方法，具体看带代码内的描述
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <style> /* 1、水平居中（margin:0 auto;） */ .box1{ margin: 0 auto; width: 400px; height: 400px; border: 1px solid green; } .box2{ width: 100px; height: 100px; margin: 0 auto; background: yellow; } </style> --> <!-- <style> /* 水平居中（text-align：center;） */ .box1{ width: 400px; height: 400px; border: 1px solid green; text-align: center; } .box2{ width: 100px; height: 100px; background: yellow; display: block; } .box3{ width: 100px; height: 100px; background: yellow; display: block; } .box4{ width: 100px; height: 100px; background: yellow; display: inline; } </style> --> <!-- <style> /* 方法一：水平垂直居中，margin移动 top、left 该方法具有一定的局限性，因为其必须要知道子元素本身的宽高*/ .box1{ width: 400px; height: 400px; border: 1px solid green; margin: 0 auto; } .box2{ width: 100px; height: 100px; background: yellow; margin: 0 auto; margin-top: 150px; } </style> --> <!-- <style> /* 方法二： 水平垂直居中: 子元素相对于父元素绝对定位，并且margin值减去自己宽高的一半 */ .box1{ width: 400px; height: 400px; border: 1px solid green; position: relative; margin: 0 auto; } .box2{ width: 100px; height: 100px; background: yellow; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; } </style> --> <!-- <style> /* 方法三：父相对+子绝对，且left、top、bottom、right为0，margin：auto 该方式不受元素宽高所限制，比较好用（推荐使用） */ .box1{ width: 400px; height: 400px; border: 1px solid green; position: relative; margin: 0 auto; } .box2{ width: 100px; height: 100px; background: yellow; position: absolute; margin: auto; left: 0; right: 0; bottom: 0; top:0; } </style> --> <!-- <style> /*方法四： 水平垂直居中 diplay：table-cell 该方式是将元素转换成表格样式，再利用表格的样式来进行居中（推荐）*/ /* 1.table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height。 2.设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性。 */ /* 而且高由元素内容撑起 */ .box1{ width: 400px; height: 400px; border:1px solid red; display: table-cell; vertical-align: middle; margin:0 auto; } .box2{ margin:0 auto; width: 100px; height: 100x; background: green; } </style> --> <!-- <style> /* 方法五：水平垂直居中（五）css3中的flex属性 这个属性很好用，但是绝逼有兼容性问题的，用者要注意 */ .box1{ width: 400px; height: 400px; border:1px solid red; margin:0 auto; display: flex; justify-content: center; align-items: center; } .box2{ width: 100px; height: 100px; background: green; } </style> --> <style> /* 方式六：水平垂直居中（四） 绝对定位和transfrom 该方法用最能装逼，用到了css3变形，面试者看到你代码里面有这样的 你的逼格瞬间就上去了，当然了 你知道的，逼格的东西是有兼容性问题的 */ .box1{ width: 400px; height: 400px; border:1px solid red; margin:0 auto; position: relative; } .box2{ width: 100px; height: 100px; position: absolute; background: green; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div class="box1"> <div class="box2">我是通过定位table-cell方式居中的</div> <div class="box3">3</div> <div class="box4">4</div> </div> </body> </html>
2.说出元素分类，以及块级与行内区别
块级：div、ul、li h1~h6 p(默认margin) table form
行内：span i em a b img strong select
空元素: br hr
特殊的行内（能设置宽高）: input img一，行内元素与块级元素的区别：
1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别
行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
二、行内元素和块级元素转换
display:block; (字面意思表现形式设为块级元素)
display:inline; (字面意思表现形式设为行内元素)
三、inline-block
inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。3.写CSS样式有哪几种方式，优先级最高的是哪一种？
1.行内样式 开始标签内写style属性 优先级最高
2.link标签引入外部样式表 href
3.<style></style>标签 可以写在head内，也可以写在html标签下，也就是可以处于文档任意位置4.CSS盒模型有哪些 区别
1.W3C盒子 content-box 宽高直接设置给内容区，盒子整体宽高是一直在变的
（宽：左右border + 左右padding + 内容区宽）
2.ie盒子 border-box 宽高直接设置给了整个盒子宽高,如若内容区发生变化，盒子整体的宽高内部构成（padding,border,content）是一直在变的
(宽：width)标准 W3C 盒子模型宽高：内容区宽高；
IE 盒子模型宽高： 内边距﹢边界﹢内容区；
5.浮动以及清除浮动？
a.脱离文档流/标准流，与原本的标准流已经不在一个层面里
b.可以使不在一行的元素（块级）到一行排列，块级行内化显示
清除浮动:
父子级：
1.给被浮动影响的元素设置overflow:hidden
2.给设置了浮动的元素的后面同级追加一个空元素（br/没有内容的块级元素)，给其设置clear:both
3.伪元素清除浮动法，给被浮动影响的元素设置其伪元素为以下属性
::after{
（给它内部的内容后追加内容）
content:'';
display:block;
clear:both
}
兄弟级：
给被浮动影响的元素设置clear：both（left right both）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动</title> </head> <body> <!-- 由于father的三个子元素全部都浮动起来了，不处于普通文档流中了，所以内部没有元素来撑起父元素的内容 --> <!-- 面试题：father是块级元素 宽100% 高内容决定 浮动——>0(浮动带来的高度塌陷) --> <!--面试题 清除浮动对父元素以及兄弟元素带来的影响 clean --> <!-- 方法1.overflow:hidden 建议使用 2.给被影响的元素后面添加一个空元素，给其设置clean:both 不建议使用给文档添加无意义的元素结构 3.伪对象选择器结合content来使用，给选中元素添加内容 --> <div class="father"> <div class="first">元素一</div> <div class="second">元素二</div> <div class="third">元素三</div> <div class="clean"></div> </div> <div class="brother">father的兄弟元素</div> </body> </html> <style> .first{ width: 100px; height: 100px; background-color: red; float: left; /* 设置浮动，脱离文档流，元素处于一个漂浮状态，已经跟普通文档流不在同一层面上了 */ /* 漂浮层在上面 */ /* opacity: 0.5; */ } .second{ width: 100px; height: 100px; background-color: rgb(115, 255, 0); float: left; /* opacity: 0.2; */ } .third{ width: 100px; height: 100px; background-color: rgb(183, 0, 255); float: left; } .father{ border: 2px solid black; /* 第一种方法：在父元素清除浮动 */ /* overflow: hidden; */ } .father::after{ /* 第三种方法 3.伪对象选择器结合content来使用，（给它内部的内容后追加内容） */ content: ''; display: block; clear: both; } .brother{ width: 200px; height: 200px; background-color:green; } /* 第二种方法 */ /* .clean{ clear: both; } */ </style>6.说说你常见的布局方式 （定位）
浮动、定位
相对、绝对、粘滞、固定
应用：二列、三列（阿里一面、二面）
float + 中间设置margin
左右定宽+中间 calc(100% - 左右固定值)
父元素flex布局 + 左右定宽 + 中间元素flex:1float + 中间设置margin:
两列布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="left"></div> <div class="center"></div> <div class="right"></div> </body> </html> <style> .left{ width: 200px; height: 200px; float: left; background: pink; } .center{ height: 200px; margin:auto; background: red; } /* .right{ width: 200px; height: 200px; float: right; background: pink; } */ </style>左右定宽+中间 calc(100% - 左右固定值)：
三列布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="left">左边定宽</div><div class="center">中间自适应</div><div class="right">右边定宽</div> </body> </html> <style> .left{ width: 300px; height: 800px; background-color: pink; display: inline-block; } .center{ width: calc(100% - 600px); height: 800px; background-color: rgb(192, 198, 255); /* 将设置行内块级显示之后，与其他元素共享一行，但是宽高只是可以设置 */ display: inline-block; } .right{ width: 300px; height: 800px; background-color: rgb(255, 192, 216); display: inline-block; } </style>两列布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="left">左边元素</div> <div class="right">右边元素</div> </body> </html> <style> .left{ width: 100px; height: 100px; background-color: green; float: left; } .right{ width: calc(100%-100px); height: 100px; background-color: red; } </style>父元素flex布局 + 左右定宽 + 中间元素flex:1
三列布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html> <style> .parent{ display: flex; } .left{ width: 200px; height: 200px; float: left; background: pink; } .right{ width: 200px; height: 200px; float: right; background: pink; } .center{ flex: 1; background: red; } </style>两列布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html> <style> .parent{ display: flex; } .left{ width: 200px; height: 200px; float: left; background: pink; } /* .right{ width: 200px; height: 200px; float: right; background: pink; } */ .center{ flex: 1; background: red; } </style>7.flex布局？
也可以理解为块级元素行内显示的方法，主轴交叉轴概念来去设置
flex-direction
justify-content 主轴对齐方式
align-items 交叉轴对齐方式 等等...........8.如何实现两列布局或三列布局？
9.display：none和visiblity:hidden 的区别注意：回流必将引起重绘，而重绘不一定会引起回流。
回流与重绘
1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
display:none 不占页面空间，visiblity:hidden 占据原先页面空间。
display:none 引起页面重绘和回流， visiblity:hidden 只引起页面重绘。
display:none元素及其子元素都将隐藏，而visiblity:hidden元素的子元素却可设 置 visibility: visible 显示出来10.布局原则：从上到下，从外到内
header
content/middle
footer
定位优于浮动
扫一扫
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
