css项目会遇到的一些场景应用

沐森
148 阅读7分钟

一. 透明度设置

语法：opacity:数值； 取值范围0～1 0为完全透明，1为完全不透明；

eg： opacity:0.5 等价于 opacity:.5

注: IE8及以下浏览器不能识别opacity属性，解决方案如下

filter:alpha(opacity=数值):取值范围0～100

扩展：transition:all +秒数(设置透明)

二. 改变定位元素层叠顺序

语法：z-index：auto/整数

注：设置了定位属性的元素按照书写的先后顺序，后写的优先显示在最上层，设置z-index后，值越大，层级越高； auto 默认值。 注：允许设置负值；

三. 锚点链接

实现在本页面内不同位置的跳转

语法：<标记 id="命名锚记名"></标记>

<a href="#锚记名"></a>连接锚记名 只能用a

扩展一：在网页中插入flash

语法

   <object width="1000" height="500">
   
      <embed src="1.SWF" width="1000" height="500">
    
    </object>

扩展二：滚动字幕

语法：

<marquee behavior="scroll/alternate" direction="left/right/up/down" scrollmount="数值">
    文本内容
</marquee>

四. 宽高自适应

语法：width:100%

注：块元素默认宽度为100%，等于父元素宽

高度自适应

语法： height:auto;或者不设置高度

五.最大最小宽高

  1. 最小高度

语法： min-height：数值+单位

注： IE6 不能识别min-height属性，兼容写法如下：

min-height:100px; _height:100px;

注：添加下划线的css属性只有IE6识别，其他浏览器不能识别

2.最大高度

语法：max-height:数值+单位；

3.最小宽度

语法：min-width:数值+单位；

注：块元素设置该属性时，需要先将元素转换为inline-block内联块类型；

4.最大宽度

语法：max-width数值+单位

六. 高度塌陷问题及其解决（常见的几种清除浮动的方法及其优缺点）

描述：父元素没有设置高度，子元素浮动导致父元素高度为0，就叫做高度塌陷问题；

解决方案：

1.给父元素设置overflow:hidden;

原理：给父元素设置overflow:hidden; 触发了BFC(块级格式化上下文)的状态，闭合了子元素的浮动，子元素重新参与的高度计算，父元素高度不再为0；

缺点：显示在父元素框之外的部分会被隐藏；

2.在浮动的子元素的末尾添加一个空div，并设置如下样式

.clearfix{clear:both;height:0;overflow:hidden;}

注：后两个属性是为了兼容IE6

缺点：在页面中多次出现这样的空div,容易造成代码冗余

3.万能清除浮动

父元素: :after{content:".";display:block;clear:both;height:0;overfloe:hidden;visibility:hidden;}

扩展：元素隐藏不可见的两种方式；

  • display:none;元素隐藏，位置不保留；
  • visibity:hidden;元素隐藏，位置保留;

优点：官方推荐

七. 伪元素

  1. E:: before 在E元素内所有内容之前添加一个伪元素

eg： p::before{content:"hello world";color:red;}

  1. E::after 在E元素内所有内容之后添加一个伪元素

eg: p::after{content:url(1.jpg)}

注：

  • 我们常用":"和"::"来区分伪类和伪元素，实际呈现效果相同;
  • 无论内容是否为空，都不能省略content;
  • 伪元素是内联元素;

只有:after可以用来清除浮动

扩展：1. :first-letter 匹配段落文本中的第一个字符 2. :first-line 匹配段落文本的第一行 3. ::selection 改变文本选中效果(只能更改color和background-color)

八.圆角

1.单独设置某个方向的圆角

语法：border-top-left-radius:20px;

2.简写方式

  • border-radius:20px; 四个方向圆角均为20px;
  • border-radius:20px 0; 左上，右下为20px,右上，左下为0；
  • border-radius:20px 0 40px; 左上为20，右上，左下为0，右下为40px;
  • border-radius:10px 5px 2px 0;顺时针方向左上，右上右下左下；

3.将元素设置为圆

语法：border-radius:50%或100%；

注：元素本身必须是宽高相等的正方形块

4.使用/设置第二组值，表示垂直半径

语法：border-radius:50px/25px;

50px表示水平半径； 25px表示垂直半径；

九. 图片整合技术

1.概念：

将多张小图整合到一张背景图中，使用background-position来实现不同位置的移动，就叫做图片整合技术；

2.优势

减少了对服务器请求次数，减轻了服务器压力，提高了页面加载速度，较小了图片体积，从而达到网站性能优化；

十. 居中和常见兼容性问题

  • 水平居中

1.行内元素水平居中

如果被设置元素为文本，图片等行内元素时，水平居中时是通过给父元素设置text-align:center来实现的.

2.定宽块元素水平居中

满足定宽和块状两个条件的元素是可以通过设置左右margin值为auto来实现居中的。

3.不定宽块元素水平居中

方案一： 父元素 {display:table;margin:0 auto}

注： display:table 将元素转换为表格形式

方案二： 父元素{text-align:center} 子元素{display:inline-block}

  • 水平垂直居中

1.已知大小的元素在屏幕窗口水平垂直都居中

元素

{
width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2; //元素本身宽
margin-top: -height/2;//元素高
}
  1. 未知大小的元素在屏幕窗口水平垂直都居中
元素{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
nargin:auto;
}
  • 子元素在父元素中居中

1.已知大小的子元素在父元素中水平垂直都居中；

父元素{
position:relative;
}
子元素{
width:value;
height:value;
position:absolute;
left:50%;
top:50%;
margin-left:-width/2; //是子元素自身宽
margin-top:-height/2;//是子元素自身高
}

2.未知大小的子元素在父元素中水平垂直都居中

父元素{
positin:relative;
}
子元素{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}

扩展方案

父元素{
display:table-cell;
text-align:center;
vertical-align:middle;
}

注:display:table-cell;将子元素转换为td的形式

十一. 常见浏览器兼容性问题

1.双倍浮动的bug

描述:块元素设置浮动后，又设置了横向的margin值，在IE6下显示的margin比设置的值要大(2倍关系)。

解决方案：给浮动的块元素设置display:inline;

2.图片添加超链接时，在某些浏览器中会出现带颜色的边框

解决方案：img{border:0/none;}

3.IE6不能识别min-height属性

解决方案：mix-height:100px; _height:100px;

4.IE8及以下浏览器不能说不能识别opacity属性

解决方案：opacity:.5; filter:alpha(opacity:50)

5.图片默认有空隙或者间距

解决方案

  • img{dispaly:block}
  • img{float:left}
  • img{vertical-align:top/middle/bottom}
  • 给图片所在父级添加 font-size:0;

6.鼠标指针bug

描述：cursor：hand；只有IE8以下浏览器识别，其他浏览器都不识别；

解决方案: cursor:pointer;所有浏览器都识别将鼠标指针设置为手的形状；

7.IE6不能识别较小高度的容器

解决方案;将超出部分设置overflow:hidden;隐藏

8.表单元素行高不一致；

解决方案：

input{float:left;} input{vertical-align:top/middle/bottom}

十二. css rack(过滤器)

1.下划线属性过滤器

eg: _background:red;

注: 只有IE6识别，其他浏览器都不识别；

2.！important 关键词过滤器 eg:background:orange !important;

注：除了IE6不识别，其他浏览器都识别

  1. *属性过滤器

eg: *banckground:yellow

注:IE6,IE7识别，其他浏览器不识别

4.\q

eg:background:purple\q;

注:IE6,7,8,9,10识别，其他浏览器都不识别

5.\0

eg:background:pink\0

注IE8及以上浏览器识别，其他浏览器不识别

十三. 市场主流五大浏览器内核及其代表作品

1.IE浏览器 内核:Trident (不能跨平台，只能在window)

2.Mozilla FireFox(火狐) 内核：Geoko（开源）

3.Googl Chrome(谷歌) 内核：Webkit-> Blink

4.Opera(欧朋) 内核：presto->webkit->Blink

5.Safaric(苹果浏览器) 内核：webkit

注：国内大部分浏览器的内核都是。IE+Webkit双内核

接下来是补充的一些内容=》

avatar
文章
阅读
粉丝