星星博客 »  > 

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;
}

相关文章