day12笔记

day12笔记

一、浏览器相关知识

五大浏览器内核 + Trident + Gecko + Presto + Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核） + Blink (由Google和Opera Software开发的浏览器排版引擎)

		浏览器内核代表作
		+ 自己根据我写的去大概记忆，一个内核你记住一两个代表作就行
		
		浏览器内核
		+ 渲染引擎，解析html、css、图片等等网页信息
		+ JS引擎，负责解析js
		
		浏览器兼容出现原因
		+ 厂家不同，核心架构和代码不一样
		+ 浏览器内核不同
		+ 标准只有一个，各个浏览器对于标准解析不一样
		
		兼容专业名称
		+ bug 指的是代码错误，在css里面指的是样式在各个浏览器里面解析不一致问题
		+ hack 解决bug问题的方法
		+ filter 过滤器，利于浏览器自身的漏洞或者对于某些东西的支持和不支持解决问题
		
		使用Hack带来的一些副作用
		+ 降低了CSS代码的可读性，增加了代码的负担。
		
		使用CSS Hack和 Filter通常有两种方法：
		+ 一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；
		+ 另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。

二、垂直居中属性

vertical-align属性 + 语法：vertical-align:top|middle|bottom|baseline（基线）; + 元素垂直居中，它并不会直接让元素在容器里面居中。它可以让元素在特定的条件下垂直居中 + 条件：内联元素、内联块元素 + 作用： 可以让表格文本垂直居中 可以让行内块元素在页面中垂直对齐 可以改变图片默认的排列位置

		text-align属性
		+ 当咱们给容器设置了text-align:center;属性后可以让图片在容器里面水平居中

三、图片间隙问题

+ 描述：当容器没有设置高度的时候，图片会默认把容器底部撑大几像素 + 解决方案： 使用vertical-align:top; 使用display:block; 使用float属性

四、蓝色边框问题

+ 描述：当把图片放在超链接里面时，在IE版本的浏览器里面图片会出现蓝色边框问题 + 解决方案：border:none|0;

五、表单元素问题

表单元素距离浏览器顶部不一致问题 + 描述：不同的表单标记在浏览器里面解析的时候，默认排列的位置不同看起来有一定的差异 + 解决方案：使用float属性

		表单按钮在各个浏览器里面样式不一样问题
		+ 描述：各浏览器中按钮元素样式不一致
		+ 解决方案：
		统一大小/（用a标记模拟）
		input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉
		如果这个按钮是一个图片，直接把图片作为按钮的背景图即可，背景图
		
		表单行高问题
		+ 描述：在低版本的浏览器中文本框的文字默认是不居中的
		+ 解决方案：设置行高

六、鼠标指针问题

+ 描述：在低版本的IE浏览器下支持的是cursor:hand;这个属性值，而高版本的浏览器不支持 + 解决方案：cursor:pointer;

七、表格标记

/*控制表格标题的位置*/ /* caption-side: left; */ table表格标记 + 组成：table、tr、td + 作用：显示数据 + groups必须配合行分组一起来使用 + 表格标题，只能放在table里面使用，放在外面会失效 + 行分组标记，可以把表格分为头部区域、内容区域、尾部区域 + 表体，当咱们不设置tbody的时候浏览器在解析的时候会默认添加 + rules组分割线，可以实现表格的细线边框 + 列分组 span属性 把几列划分成一组

八、表格css属性

/*单元格与单元格之间的间隙*/ border-spacing: 20px; /*合并边框*/ border-collapse: collapse; /*表格固定属性*/ table-layout: fixed; .hide{ /*单元格无内容时隐藏*/ empty-cells: hide; } /*表格隔行变色 even偶数 odd奇数 2n偶数 2n+1奇数*/ table:nth-child(5) tr:nth-child(2n){ background-color: yellow; } table:nth-child(5) tr:nth-child(2n+1){ background-color: greenyellow; }

九、表单字段集

fieldset表单字段集，作用用于对表单进行分组 legend是表单字段集的标题 个人信息

用户名

密码

电子邮箱

		<!--multiple属性 多选-->
		<input type="file" name="" id="" value="" multiple="multiple"/>