六大方向:
页面布局
css盒模型
DOM事件
HTTP协议
面向对象
原型链
难度提升:通信,安全(web安全,xss),算法
页面布局:
浮动,定位,flexBox , table-cell, 网格布局(grid)【兼容性不好】
关于浮动和定位很简单,就不写了。
html结构:
<section class="layout flex">
<div class="left">左边</div>
<div class="center">flex
<p>内容加长以后是否依然适用</p>
<p>内容加长以后是否依然适用</p>
<p>内容加长以后是否依然适用</p>
<p>内容加长以后是否依然适用</p></div>
<div class="right">右边</div>
</section>
统一css样式:
.layout{
width: 100%;
//min-width: 1000px;
height: 100px;
background-color: orange;
margin: 20px 0;
.left{
width: 200px;
height: 100%;
background-color: skyblue;
}
.right{
width: 200px;
height: 100%;
background-color: pink;
}
.center{
height: 100%;
background-color: palegoldenrod;
}
}
flex布局:
.flex{
display: flex;
.center{
flex: 1;
}
}
table的方式也特别简单,就是设置容器与子容器的display方式
分别为table和table-cell就好
grid布局:
.grid{
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 100px;
}
注释: grid-template-columns:有几列就定义多少个列宽
grid-template-rows: 有几行就定义几行的行高
盒子模型
box-sizing:border-box;
包含内边距,以及border宽高
box-sizing:content-box;
宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。