‘壹’ web前端入门到实战：css让一个盒子的高度自适应屏幕剩余的部分
项目中，移动端要雹颤自适应，由于有时候数誉肆缓据不够，所以导致了有的区域空白
要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条
做法
1-让容器高度充满这个屏幕
在容器内容很少的情况下，要想让这个庆模容器充满整个屏幕：
`.container{
}`
2-让容器高度充满剩余屏幕高度
要让容器充满屏幕的剩余高度，用 vh 结合 flex 布局就可以实现。
`.content{
}
.header{
}
.content{
}
.footer{
}`
‘贰’ web前端，设置的盒子高度和显示的不一样，我设置的确定高度，但是盒模型上显示的差了0.几
height: 100px;
zoom: 1;
box-sizing: unset;
border: 0 none;
outline: 0;
overflow: hidden;
加上这几个属性试试；
‘叁’ web前端问题，关于盒子模型，谢谢
这个是一个标准 可以不加的
下面的dtd文件是一个用来描述文档格式的文件
也就是说 如果你加了那一句
浏览器就会根据dtd里面规定的格式进行解析
dtd规定了你html的格式
‘肆’ web前端--网页布局（盒子模式、弹性盒子、网格）
布局的传统解决方案，基于[盒状模型]，于那些特殊布局非常不方便。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
2009年诞生的这个属性可以说是不亚于 css界一场蒸汽机诞生一样的工业革命，它的诞生标志着马车一样的 float被彻底抛进历史的垃圾堆。
通过display：flex 将对象设置为弹性盒子，以下属性必须熟记于心。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器属性：
flex-direction（决定主轴的方向）
flex-wrap（决定是否换行）
flex-flow（ <flex-direction> || <flex-wrap>;）
justify-content（主轴方向对齐方式）
align-items（交叉轴方向对齐方式）
align-content（多轴情况下沿交叉轴对齐方式）
项目属性：
order：数值越小，排列越靠前，默认为0。
flex-grow:项目的放大比例，默认为0
flex-shrink:项目的缩小比例，默认为1
flex-basis:项目占据主轴的大小
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self：单个项目有与其他项目不一样的对齐方式
flex-box无疑是布局上面的神器
网格布局同样是布局方面的神器，目前不太常用。
display:grid; 设置网格
必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中
网格属性：
display：grid| subgrid
grid-template-columns：设置列
grid-template-rows：设置行
grid-template-areas：设置区域
grid-template：none | subgrid | <grid-template-rows> / <grid-template-columns>;前面三个属性合体
grid-column-gap：设置列间距
grid-row-gap：设置行间距
grid-gap：<grid-row-gap> <grid-column-gap>;前两个属性合体
justify-items：start | end | center | stretch;设置项目水平方向对齐方式
align-items：start | end | center | stretch;设置项目垂直方向对齐方式
justify-content：start | end | center | stretch | space-around | space-between | space-evenly; 设置网格水平对齐方式
align-content： start | end | center | stretch | space-around | space-between | space-evenly; 设置网格垂直对齐方式
grid-auto-columns：自动补齐列
grid-auto-rows：自动补齐行
grid-auto-flow：row | column | row dense | column dense
grid
网各项属性：
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column：项目放置列
grid-row：项目放置行
grid-area
justify-self
align-self
‘伍’ web前端开发需要掌握哪些知识
1.学习html。
这是最简单最基本的。掌握div、formtable、ulli、p、span、font等标签是最常用的，尤其是div和table，div用于布局，table也可以用于布局，但不灵活，基本table用于处理数据。
2.学习css。
这里的css不包括css3。一般我们可以看到，在web前端开发工程师的要求中，有一个会使用css+html或css+div进行界面布局，所以css是用来辅助html进行布局和显示的。css要熟练掌握float、position、width、height、最大最小，会使用100%、overflow、margin、pading等。
3.学习js。
其实js入门很简单，不需要知道很多事情。只要你会根据某个id或者name获得网页dom或者样式或者值，你就会给某个id或者name的元素标签赋值，或者添加数据，追html。
4.学习jquery。
jquery相当于将js封装成一套js插件，目的是操作起来更方便，代码写得更少，jquery入门也很简单，那些入门需要学习的和js一样，只是用jq代码代码代替。
5. 最好点击后台语言，如java和php。
为什么？因为我们前台界面的数据来自后台，如果我们能点击后台代码，我们就知道如何与后台交互数据是最好的，这样可以节省时间，使前端代码更加标准化。
6.学习css3+html5。
‘陆’ web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变
原本不是圆形图片，通过CSS样式布局实现成圆形图片，首先图片必须为正方形
1、HTML源代码完整代码：
复制代码代码如下:
图片圆形布局 在线演示 DIVCSS5。
2、对应CSS代码：
复制代码代码如下:
#divcss5{ margin:10px auto}。
#divcss5 img{ border-radius:50%}。
命名盒子“id=divcss5”盒子居中，同时上下外间距为10px;，然后设置对象盒子里img图片圆角50%。