HTML/css之弹性布局
1.flex 弹性布局
产生的比较晚 目前在移动网页开发中可以使用
而且逐渐成为主流。
在桌面网页开发中,使用的比较少
(主要是桌面浏览器的兼容性问题更加严重)
开启方法:
在容器标签上,加上display:flex;
将对容器内部的标签起到布局作用
开启弹性布局后,内部的标签将会失去行块性质
不再遵循流式布局的控制
布局效果:
对齐支持:可以实现上,下,左,右4个方向停靠排列
可以实现上下居中 左右居中
排列方向支持: 可以实现内部标签水平排列
垂直排列 多行排列
空间分配支持:可以实现空间均分(考虑两头空间,不考虑两头空间)
空间可以固定或弹性伸缩(可以指定伸缩比例)
布局方向:
默认水平方向为主轴 垂直方向为交叉轴
元素是沿着主轴方向排列
主轴可以通过flex-direction
修改
主轴居中:
Justify-content:center;
交叉轴居中:
Align-items:center;
空间均分:
Justify-content:space-around; (两头有空白)
Justify-content:space-between; (两头无空白)
空间分配比例
Flex-shrink: 控制收缩比例
Flex-grow: 控制增长比例
Servlet 和jsp
错误处理
Tomcat 错误处理
1.页面找不到404 有明确的http状态码的错误
a) 可以在wen.xml中配置
<error-page>
<error-code>404</error-code>
B) java代码或者在Java代码中抛出异常
可以在web.xml 中配置
<error-page> <exception-type>异常类的全名</exception-type>
通过节点可配置{转发到那个页面}
错误页面可以在<%page指令中添加iserrorpage=”true”这个属性>
添加之后可以在jsp中访问exception对象
Exception代表抛出的异常(如果抛出的异常是servletexception
或者是它的子类)那么exception
对象将指向servletException
内部包装的异常对象而不是指向servletException
本身
2.关于代码中的catch
之前我们catch到异常之后,之调用了exception。printStackStrace()将至打印到控制台输出
页面并没有报错(但页面显示不正常 如没有数据)
添加错误也之后 catch到的exception
就不能只打印了之 不能让exception被忽略而是应该在打印之后将至抛出, 甚至不需要打印 而是抛出 (抛出比打印更重要)
抛出异常时 会发现不是所有的异常类都能跑出去(因为有一些方法的签名是固定的
而且是由其他人提供的 没法改
如HttpServlet 中的doXXX
方法)
只能选择抛出指定类型的异常
将真正的异常抱在里面 形成异常链
Exception1 caused by excepyion 1.1 caused by exception 1.1.1
3.为什么要是用log4J
Log for Java 专门为Java项目提供日志工具
log4 j 的目标是将日志同时写到控制台 文件 数据库 发邮件 调用网络接口等多个地方;
log4j 还提供了日志级别 可以区分日志的重要性,对于不同级别的日志可以传输到不同的地方或者平时忽略掉不重要的日志,当系统出现问题是还可以在不重启服务器的情况之下将平时忽略掉的信息全部开启。
Log4j2 会从web-inf中查找名字为log4j2.xml
的配置文件,
在配置文件中 <configuration> sytutus属性是log4j2自己内部使用打的logger的日志输出级别
。如果想让log4j将自己内部日志信息打印出来 需要status
的级别设置的低一些 以便找到loh4j
自己的错误信息
4.日志级别
·Fatal 最高级 表示致命错误,当程序遇到这种错误时无法恢复执行接下来就
会崩溃 logger.fatal(“致命错误的详细信息”)
·Error 错误级 捕获到异常时 通过这个级别输出
Logger.error(“错误信息”,exception)
·Warm 警告级 当程序执行时 遇到不应该执行的代码或不应该出现的情况 时
通过这个级别输出
比如 pager 类中的total==0
可以通过
Logger.warm(“警告消息”)
·Info 消息/数据级 输出一些业务数据 向外部提供数据信息
·Debug 调试级 输出程序执行过程中的关键数据 更详细的数据 甚至是
方法内部的局部变量或参数的值 目的是方便查找bug
·Trace 跟踪级 输出更详细的信息 最细致事务信息
通过trace 信息可以看到程序执行的每一个步骤 及程序当前所处的状态细节
HTML/css之弹性布局的更多相关文章
- css flex弹性布局学习总结
一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支 ...
- css flexbox 弹性布局
flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...
- CSS Flex弹性布局
关于css3的flex布局,阮一峰老师的文章写的清晰易懂又全面,这里附上链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_s ...
- CSS中的EM属性之弹性布局
这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...
- CSS经典布局之弹性布局
当我们在浏览浏览器的时候,经常会放大/缩小浏览器的显示比例,或者在不同的设备上.所处的分辨率也不尽同样. 因此.我们须要学习一个新的知识:弹性盒模型. 弹性盒模型 实现项目对齐,方向,排序(即使项目大 ...
- 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- 百度在PWA中阐述的弹性布局-[CSS]
原文链接 响应式布局 自从进入移动互联网时代,响应式布局这个词经常出现在 Web 设计和开发领域,它让 Web 页面在不同尺寸的设备上都具有良好的浏览体验. 开始之前 在讲解响应式布局之前,需要先了解 ...
- css弹性布局
1.弹性布局是什么 在移动端一种方便的布局方式,打破了之前用浮动,定位的布局,更加灵活. 2.弹性布局的格式 包含父元素和子元素,有对应的属性应用在父元素和子元素达到布局的目的 3.父元素的属性 要开 ...
随机推荐
- python登录网易163邮箱,爬取邮件
from common import MyRequests,LoggerUntil,handle_exception myRequests.update_headers({ 'Accept':'tex ...
- [OpenCV] Samples 15: Background Subtraction and Gaussian mixture models
不错的草稿.但进一步处理是必然的,也是难点所在. Extended: 固定摄像头,采用Gaussian mixture models对背景建模. OpenCV 中实现了两个版本的高斯混合背景/前景分割 ...
- Extended VM Disk In VirtualBox or VMware (虚拟机磁盘扩容)
First, Clean VM all snapshot, and poweroff your VM. vmdk: vmware-vdiskmanager -x 16GB myDisk.vmdk vd ...
- ZTree id值太大,ZTree没有生成树,ZTree的id值过大
ZTree id值太大,ZTree没有生成树,ZTree的id值过大 >>>>>>>>>>>>>>>> ...
- Ansible Playbook 使用变量
如何在 Playbook 中定义并使用变量: vars: - user: "test" # 定义变量 tasks: - name: create user user: name=& ...
- Splash 简介与安装
Splash 说白了就是一个轻量级的浏览器,利用它,我们同样可以实现跟其他浏览器一样的操作,我们使用 Docker 来安装 Splash: [root@localhost ~]# docker run ...
- Python时间戳与时间字符串互相转换实例代码
#设a为字符串import timea = "2011-09-28 10:00:00" #中间过程,一般都需要将字符串转化为时间数组time.strptime(a,'%Y-%m-% ...
- 《Lua程序设计》第7章 迭代器与泛型for 学习笔记
本章将介绍如何编写适用于泛型for的迭代其(Iterator).7.1 迭代器与closurehttp://www.cnblogs.com/moonlightpoet/p/5685275.html 7 ...
- Struts2(五)数据校验
一.概述 在提交表单数据时,如果数据需要保存到数据库,空输入等可能会引发一些异常,为了避免引起用户的输入引起底层异常,通常在进行业务逻辑操作之前,先执行基本的数据校验. 下面通过两种方式来阐述Stru ...
- linux apache下虚拟主机配置方法
假设VPS的IP是58.130.17.168,有两个域名指向该IP,分别是domain1.com, domain2.com, 修改/etc/httpd/conf/httpd.conf,在文件的最后加入 ...