学习前端的第十天

这几天深受鼠标双击的折磨，非常痛苦，正好趁618换个鼠标。闲聊就到这吧，今天说说布局方式和浏览器兼容问题。

一、宽高自适应

1、自适应介绍：在以往的开发过程中，大家发现某个区域如果宽度或者高度固定好的话，当再次添加内容的时候，需要去改变宽或者高，不便利于开发和需求更改，所以在布局中需要用到宽高自适应

2、实现宽高自适应：

• 宽度自适应，把容器的高度设置为width:auto;或者不设置width
• 如果外层的宽度不设置的情况下，版心设置固定宽度，随着分辨率的改变两边的内容会自适应
• 容器设置了width:100%; 当脱离文档流时，由于百分比单位会根据容器的宽度作为参照，所以它的宽度会依旧起作用
• 高度自适应，把容器的高度设置为height:auto;或者不设置height
• 注意点：高度自适应，如果子元素有设置了float属性的，会发生高度塌陷问题，这个时候需要清除浮动

3、宽高自适应属性：

• min-height 最小高度 一开始有一个固定的高度，随着内容的超出高度会自适应
• max-height 最大高度 一开始元素的内容是自适应的，超出设置的高度内容会溢出
• min-width 最小宽度 一开始有一个最小的宽度，大于最小的宽度元素是自适应的，如果小于设置的值元素大小不变
• max-width 最大宽度 一开始有一个固定的宽度，当元素的宽度小于最大宽度的时候可以实现自适应
• 宽高自适应提供的几个属性，主要给我们多了一个判断，之前是无法做判断

4、百分比（流式）布局

1. 内容会根据容器的大小自适应
2. 由于百分比单位参照的是容器的属性，所以当咱们把容器的相关属性改变了子元素会跟着改变

二、元素隐藏

1、display:none; 隐藏，理解为消失了，没有位置。

2、visibility:hidden; 占位隐藏，元素消失了，但位置还在。理解为隐身，但元素的功能不存在。

3、opacity:0; 隐藏，占位置的，实际上就是透明为0，让你眼睛看不见它了，但元素的功能存在。

4、溢出隐藏方式： overflow:hidden;

三、群组和伪对象选择器

群组选择器

1、介绍：当为不同的HTML对象定义相同的样式时，为了避免样式的重复性可以使用群组选择器来声明。

2、语法：标记1,标记2{}

• 在选择器中指定多个对象，对象之间用逗号进行分开。逗号告诉浏览器，这里包含两个不同的选择器。
• 可以把任意数量、任意类型的选择器放在群组中进行声明。

伪对象选择器

1、介绍：

伪类选择器：描述某种状态，例如鼠标划过、鼠标点击、鼠标激活、鼠标访问过后。

伪对象选择器：相当于是通过css的方式增加了标记，理解为通过css方式创建了一个新标记

2、语法：

   标记::after{ content: “”; }   通过伪类选择器新增的元素类型是内联类型

3、属性：

• after  在元素的后面新增了一个东西
• before  在元素的前面新增了一个东西
• first-letter  表示选中段落中的第一个字
• first-line  表示选中段落中的第一行文字
• selection 表示当鼠标选中文字时改变文字的样式，注意：只能改变背景和文字颜色
• 注意：伪对象选择器里面的content属性必须设置，要不然不会起作用

焦点：

1、获取焦点，当鼠标点击后表单框里面，光标闪烁时把这种行为叫做获取焦点

2、失去焦点，当鼠标点击了除了表单框以外的页面中其他的区域，光标不再闪烁时把这种行为叫做失去焦点

语法

• 选择器：focus{}  获取焦点时改变表单的内容样式

四、浏览器兼容问题

1、兼容问题出现的原因，浏览器生产厂家不同，所用的核心架构和代码也不一样，出于对自身利益的考虑设置了种种技术壁垒

2、css属性标准其实只有一个，但是要通过各种不同浏览器去运行，有些浏览器在运行css代码的时候会按着标准去执行，而有些不会，这就导致各个浏览器里解析的结果有所不同

3、兼容问题最多的浏览数就是IE

• IE浏览器它是捆绑在window系统里面的，由于window系统的市场占有率非常高，所以IE浏览器得利于它市场占有率也很高
• IE浏览器的市场占有率很高，它觉得自己就是标准，不会向w3c标准考虑，这让实现兼容变得特别麻烦
• 随着技术的发展，其他好用的浏览器越来越多了，用户选择变多，出现了浏览器世界大战，通过两次世界大战微软被迫推出了IE9
• 兼容主要以IE9以下，问题非常之多，和IE9以上区分，以上和其他的浏览器基本上没有多大的区别

兼容问题：

1、图片间隙：当容器没有设置高度，图片会默认把容器底部撑大几像素（大概3px）

• vertical-align:top;
• display:block;
• float:left;

2、margin-top问题： 在标准流中，子元素设置了margin-top后，浏览器在解析的时候会误认为给容器设置的，
所以会出现整体往下掉的情况

• 给容器设置overflow：hidden;
• 子元素或者父元素设置float

3、透明度问题

• opacity:.5; 取值范围0-1
• filter:alpha(opacity=50); 取值范围1-100

4、鼠标指针问题 hand表示手，由于hand属性值在高版本的浏览器里面支持，IE会支持

   cursor:pointer; 所有的浏览器都会支持

5、蓝色边框问题：当图片在超链接标记里面时，在IE浏览器里面会出现蓝色边框

• 给图片标记设置border：none|0;

6、表单距离顶部距离不一致问题：由于表单元素默认都是以底部排列，所以距离浏览器顶部距离不一样

• 可以使用vertical-alig属性解决
• float:left;

7、按钮标记样式不统一问题：各个浏览器在解析按钮标记时样式不一样

• 给表单设置背景图
• 取消按钮的默认样式重新设置
• 使用a标记模拟

8、表单行高问题：在低版本的IE浏览器里面，文字不会默认居中

• 设置line-height

important过滤器

1、在css里面有很多的兼容问题，兼容问题更多的集中在低版本的IE浏览器里面

2、过滤器是解决兼容问题的一种方式，原理是：有些东西在有些浏览器里面支持，有些里面不支持，过滤器有利于避免出现一些问题

3、过滤器方式：

• filter:alpha(opacity=value);
• _属性:属性值;
• !important 关键字过滤器 表示最高权重

min-height兼容问题：

1、min-height在低版本的IE浏览器里面不支持最小高度这个属性

2、正常的height属性在IE低版本浏览器里面就是具有min-height的功能

3、IE：height == min-height

五、补充

maxlength="value" 	表示可以输入的字符个数，是html属性

<input type="file" multiple="multiple"/> 	上传文件框标记,是HTML5新增的标记,其中multiple 表示多选属性

<input type="image" src="" />	  图像域，是HTML5新增的标记，例如可以做图像按钮