web 前端修炼之道

i_garfileo 发布于2019-08-28 17:59 / 3453人阅读

摘要：行内元素的和属性只有水平边距，没有竖直边距。竖直方向的虽然增大了行内元素的面积，但并没有和相邻元素拉开距离。对于不支持则使用网格布局同级下，哪块内容重要，在就优先写到前面。使用进行多版本调试。

1.块级元素和行内元素的区别

块级元素即使设置了宽度，仍然是独占一行的，
块级元素可以设置margin和padding属性。行内元素的margin和padding属性只有水平边距，没有竖直边距。
竖直方向的padding虽然增大了行内元素的面积，但并没有和相邻元素拉开距离。

2.display:inline-block和hasLayout

为了兼容IE6、IE7(不支持display:inline:block)，我们真正能使用的display类型只有inline,block和none.
display:inline-block集块级元素和行内元素的特点于一身。
为了使IE6、IE7实现display:inline-block效果，可以在行内元素(如span)中定义display：inline-block，以触发hasLayout,可以使用vertical-align:-10px和其他实现浏览器效果一样。
它只能对行内元素实现display:inline-block；还要用到针对IE的hack,*vertical-align。

3.relative、absolute和float

position:absolute和float会隐式的改变display类型，不论之前是什么类型的元素（display:none除外），只要设置了postion:absolute、float；left和float:right中任意一个，都会让元素以display:inline-block显示，这也就是IE6下使用float产生双边距可以使用display:inline去除.
position:relative不会隐式改变display的类型。

4.水平居中

文本、图片等行内元素的水平居中可以使用text_align:center。
确定宽度的块级元素的水平居中可以使用margin:0 auto;
不确定宽度的块级元素的水平居中（1）.讲内容放入table标签，这是table标签margin:0 auto;（2）将块级元素使用display:inline变成行内元素，在通过text-align:center实现；（3）给父元素设置float,然后父元素设置position:reletive和left:50%,子元素设置成position:reletive和left:-50%.

5.竖直居中

父元素高度不确定的文本、图片和块级元素竖直居中是通过给父容器设置上下边距实现的。
父元素高度确定的单行文本竖直居中，是通过给父元素设置line-hignt等于父元素hight高度实现的。
父元素高度不确定的多行文本、图片和块级元素竖直居中（1）直接使用表格（2）对于支持display:table-cell的IE8和ff用display:table-cell和vertacil-align:middle实现居中。对于不支持则使用IE hack

6.网格布局

同级下，哪块内容重要，在HTML就优先写到前面。
用于布局个人偏好子选择器

7.Z-index的相关问题及flash和IE6下的select元素

除了x,y轴，还有一个Z轴，z轴在元素设置position为reletive或absolute或被激活，起大小有z-index设置，z-index越大，元素位置越靠上。
z-index只对非窗口的元素有效，而flash默认是窗口模式，我们要将flash中的womde设置成opaque或transpartent
select元素在IE6下也是默认以窗口形式显示的。

8.插入png图片

IE6的png图片不支持透明，可以使用IE下私有的滤镜解决。

9.使用IETest进行多IE版本调试。

云服务器 GPU云服务器前端web前端前端web前端课程 web前端前端开发前端web前端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110934.html

零基础入门前端的修炼之道

摘要：面对这些较高的要求，前端在开发环节中的作用也变得越来越重要因而近几年来前端工程师备受青睐一般水平的前端工程师平均年薪可达万元资深前端工程师年薪高达万元。这种用户体验的细节问题是否处理妥当是判断一名前端工程师是否优秀的因素。本文是为了给那些想要了解前端开发是什么，或者刚刚打算开始学习前端的朋友们准备，希望可以帮助准备入行的你;showImg(https://segmentfault.c...

JiaXinYi 2019-08-02 11:51 评论0 收藏0
JavaScript修炼之道

摘要：它返回值是一个字符串，该字符串说明运算数的类型。结构由大括号，中括号，逗号，，冒号，双引号组成，包含的数据类型有，等。数组与对象并用数据交互创建文件类库特效开发运算符与简化写法记录参数操作正则表达示扩展内置对象 1.JavaScript基础类库如：jQuery、jQuery.cookie等 2.创建静态对象 var obj = {}; var obj = new Object();...

shiina 2019-08-21 10:49 评论0 收藏0
Java程序员修炼之道学习笔记(1)-简介

摘要：旧写法文件处理文件处理文件处理新写法文件处理可能会出现资源无法关闭的情况，改进写法为各个资源独立声明变量文件处理钻石语法针对创建泛型定义和实例过于繁琐做出的改进转载请注明出处 http://www.paraller.com 原文排版地址点击跳转-简介/) 使用Java代码的整个过程 .java --javac--> .class --类加载器--> 转换后的.class --解...

chanjarster 2019-08-15 12:19 评论0 收藏0
Java程序员修炼之道学习笔记(1)-简介

摘要：旧写法文件处理文件处理文件处理新写法文件处理可能会出现资源无法关闭的情况，改进写法为各个资源独立声明变量文件处理钻石语法针对创建泛型定义和实例过于繁琐做出的改进使用Java代码的整个过程 .java --javac--> .class --类加载器--> 转换后的.class --解释器--> 可执行代码 --JIT编译器--> 机器码 1、类文件在加载过程中通常会被处理和修改，比如...

sanyang 2019-08-15 12:17 评论0 收藏0
【笔记】程序员修炼之道从小工到专家

摘要：抽象比细节活的更长久使用项目词汇表名不正则言不顺昂贵的工具不一定能制作出更好的设计早测试，常测试，自动测试要到通过全部测试，编码才算完成把网收紧，一个只抓一次温和的超出用户的期望在你的作品上签名建立自己的藏书库 1 关心你的技艺 2 思考你的工作 3 在所有的弱点中，最大的弱点就是害怕暴露弱点 4 提供各种选择，不要找各种蹩脚的借口 5 不要容忍破窗户 6 作变化的催化剂 7 记住...

cppprimer 2019-08-21 11:49 评论0 收藏0