HTML+CSS学习Day12笔记

Day12笔记

一、隐藏的四种方法

/*隐藏后下方的元素会顶上来*/
/* display: none; */

/*默认表示显示和display:block;效果是一样的，block还有把其他类型元素转成块级元素*/
/* visibility: visible; */

/*隐藏元素是占位隐藏，把元素隐藏后不会影响其他的网页结构，会让元素功能失效*/
/* visibility: hidden; */

/*当透明度为0的时候也可以让元素隐藏，占位隐藏，把元素隐藏后它的功能还在*/
/*opacity: 0;*/

/*overflow:hidden;当容器的内容溢出时隐藏*/

table表格

/*指的是单元格与单元格之间的间隙，作用和html属性cellspacing是一样的*/
border-spacing:value

二、input file上传文件

<input type="file" name="" id="" value="" style="opacity: 0;"/>

三、伪对象（元素）选择器

伪对象（元素）选择器：再不用添加元素的情况下，可以通过css选择器给选中的内容添加样式

伪类选择器：描述的是某种状态 link visited hover active

/*可以选中一行里面的第一个字*/
p::first-letter{
	font-size: 30px;
	color: red;
} 
			
/*只对第一行内容起作用*/
p::first-line{
	color: red;
}

/*在元素内容的后面添加东西，可以让元素有一个元素。注意点：通过伪对象添加的元素默认类型是内联*/
div::after{
	/*内容content属性必须设置*/
	/* content: "快乐！"; */
	/* content: url(img/mi.png); */
	content: "";
	width: 50px;
	height: 50px;
	background-color: red;
	display: block;
}
			
div::before{
	content: "";
	width: 50px;
	height: 50px;
	background-color: red;
	display: block;
}

四、三角

/*三角：通过元素的边框可以使用，当默认不给元素宽和高的情况，只给边框的话可以实现三角*/
div{
	width: 0;
	height: 0;
	/*transparent表示透明*/
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid orange;
	border-bottom: 50px solid transparent;
}

五、浏览器兼容

开源：开放源代码，大家都可以使用和研究并修改 Linux 国产系统基于这个系统的，因为它是开源的

​ 代表系统：深度deepin（国产系统）

不开源：不开放源代码，有很多的盗版 windows — 国家的一些机构、例如银行不会使用window系统或者mac系统
金融安全

为什么会出现浏览器兼容问题？
由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

浏览器内核:

1、主要分成两部分：渲染引擎和JS引擎。

2、渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式、然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同、所以渲染的效果也不相同。

3、JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分得很明确，后来JS引擎越来越独立，内核九倾向于只指渲染引擎。

六、CSS Bug、CSS Hack和Filter

1、CSS Bug：CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

2、CSS Hack:CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢用patch（补刀）来描述这种行为。

3、Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

七、使用Hack带来的一些副作用

降低了CSS代码的可读性，增加了代码的负担。

使用CSS Hack和 Filter通常有两种方法：

1）一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；

2）另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。

八、图片间隙bug

问题：当容器没有设置高度的时候，图片会默认把容器底部撑大几像素，大概3px
解决方案：

1、设置高度

2、把图片从行内块元素类型转成块级元素 display:block;

3、把图片让其脱离文档流，float:left;

4、给图片使用vertical-align:top;

九、vertical-align属性介绍：

1、之前讲解表格的时候，提到过一个valign="top|middle|bottom" 文本垂直居中

2、vertical-align其实和html顺序valign功能是一样的

3、vertical-align:top|middle|bottom|baseline（基线对齐）;

4、注意点：图片默认是以基线对齐的排列的

5、为什么vertical-aiign可以解决图片间隙问题，因为vertical-align改变了图片的默认排列位置

十、超链接蓝色边框bug

问题：如果图片放在超链接里面的话，在低版本的浏览器里面会出现蓝色边框问题
解决方案：

1、去除图片默认边框（加在img中）border:none|0; 

2、注意点：图片默认边框是看不见的，只有在特定的条件下才会出现

十一、input元素，距离浏览器顶部距离不一致bug

问题：表单元素默认排列，距离浏览器顶部不一致
解决方案：

1、设置float:left;

2、vertical-align: top; 

十二、按钮元素默认大小不一致bug

问题：表单按钮标记在各个浏览器里面样式不一样
解决方案：

1、取消掉表单按钮的默认的样式重新设置

2、使用背景图

3、在工作中一般会使用超链接标记模拟按钮标记，因为button按钮和超链接都具有跳转功能

十三、鼠标指针bug

问题：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以 上版本及其它内核浏览器都识别该声明。
解决方案：

cursor:pointer;

cursor:	auto默认
		crosshair加号
		text文本
		wait等待
		help帮助
		progress过程
		inherit继承
		move移动
		ne-resize向上或向右移动
		pointer手形

十四、input行高bug

问题：表单元素里面的文本在IE低版本的浏览器里面文本无法居中
解决方案：

给表单元素设置行高。

十五、8个常见的兼容问题

1、透明度问题 opacity

2、margin-top问题

3、图片间隙

4、蓝色边框

5、表单距离浏览器顶部不一致问题

6、表单按钮样式不一样

7、鼠标指针问题

8、表单文本行高问题

十六、清除浮动

/*万能清除法，通过css形式模拟了空盒子方式*/
.clear::after{
    /*内容必须为空，否则会占位*/
	content: "";
    /*在本需要加overflow:hidden的元素后面增加空盒子*/
	display: block;
    /*给新增加的空盒子清除所有*/
	clear: both;
    /*将新增加的空盒子占位隐藏*/
	visibility: hidden;
    /*老版本IE中空盒子也是有高度的，所以有必要明确高度为0*/
	height: 0;
}
/*也是为了解决IE的兼容问题，after在IE中可能不起作用，所以有必要写zoom*/
.clear{
    /*zoom缩放属性，占用位置不变，仅视觉缩放*/
	zoom: 1;
} 

十七、元素居中

.eleMiddleParent{
	position: relative;
}
.eleMiddleSon{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}