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