您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

学习前端的第十天


这几天深受鼠标双击的折磨,非常痛苦,正好趁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新增的标记,例如可以做图像按钮

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进