CSS+DIV总结

参考：blog.csdn.net/u014697639/…

1. IE6 的双倍边距 BUG

<style type="text/css">
    body {margin:0}
    div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }
</style>

解决办法：浮动后本来外边距 10px,但 IE 解释为 20px,解决办法是加上 display:inline

2. 让div水平垂直居中的六种方法

参考：

1. div水平垂直居中方法的优点及缺点

www.cnblogs.com/mslalan/p/8…

2. 让div水平垂直居中的六种方法

blog.csdn.net/ActiveQi/ar…

方案一：

/*
绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）
*/
div{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

方案二：

/*
绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值。
*/
div{
  width: 600px;
  height: 600px;
  background: red;
  position: absoute;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -300px;
}

方案三：

/*
绝对定位方法：绝对定位下top left right bottom 都设置0
*/
div.child{
  width: 600px;
  height: 600px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

方案四：

/*
flex布局方法：当前div的父级添加flex css样式
*/
<div class="box"></div>
.box{
  height: 800px;
  -webkit-display:flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid #ccc;
}
div.child{
  width: 600px;
  height: 600px;
}

方案五：

/*
table-cell实现水平垂直居中: table-cell middle center组合使用（让div里面的文本内容）
*/
.table-cell{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 240px;
  height: 180px;
  border: 1px solid #666;
}

方案六：

/*
绝对定位：calc() 函数动态计算实现水平垂直居中
*/
<div class="calc">
  <div class="child">calc</div>
</div>
.calc{
  position: relative;
  border: 1px solid #ccc;
  width: 400px;
  height: 160px;
}
.calc .child{
  position: absolute;
  width: 200px;
  height: 50px;
  left: -webkit-calc((400px - 200px)/2);
  top: -webkit-calc((160px - 50px)/2);
  left: -moz-calc((400px - 200px)/2);
  top: -moz-calc((160px - 50px)/2);
  left: calc((400px - 200px)/2);
  top: calc((160px - 50px)/2);  
}

3. IE6 为什么无法定义 1px 左右高度的容器

解决办法：IE6 下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

1. CSS 具体含义是什么？在网页制作中为什么要使用 CSS 技术?

CSS(Cascading Style Sheets)也叫层叠样式表，它是用来控制网页中一个或多个元素的外观。在网页制作中，使用样式表可以减少很多具有相同外观元素的重复设置工作，从而给网页的设计和维护带来了很大的方便;具体应用是：改变样式表中元素显示样式的定义，则在使用该样式表的所有网页中相应元素的显示样式都会自动发生改变。

1. CSS+DIV 开发 Web 页面的优势有哪些？

• CSS+DIV，这个网页设计模式中，DIV 承担了网页的内容，CSS 承担了网页的样式。这样就使网页的内容和样式的分离开来。有利于页面的维护升级。
• 有助于提高搜索引擎亲和力（快速找到需要的数据，而不是像在 TABLE 中一层层的查找）
• 有助于页面的重构(换皮肤如 blog，直接套用另外一套样式就可以实现，而不用改动网页脚本。)

1. box-sizing 属性

用来控制元素的盒子模型的解析模式，默认为 content-box

context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽

border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content 部分的高/宽

1. CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]

!important 比内联优先级高

1. display有哪些值？说明他们的作用?

inline（默认）–内联

none–隐藏

block–块显示

table–表格显示

list-item–项目列表

inline-block

1. position的值

static（默认）：按照正常文档流进行排列；

relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；

absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；

fixed(固定定位)：所固定的参照对像是可视窗口。

1. CSS3有哪些新特性
2. RGBA和透明度
3. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
4. word-wrap（对长的不可分割单词换行）word-wrap：break-word
5. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
6. font-face属性：定义自己的字体
7. 圆角（边框半径）：border-radius 属性用于创建圆角
8. 边框图片：border-image: url(border.png) 30 30 round
9. 盒阴影：box-shadow: 10px 10px 5px #888888
10. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
11. ? 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

1. 用纯CSS创建一个三角形的原理是什么

把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

1. 一个满屏品字布局如何设计
2. 常见的兼容性问题
3. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
4. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性
5. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
6. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
7. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
8. 为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

1. display:none与visibility：hidden的区别

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

1. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

1. 父级div定义height
2. 最后一个浮动元素后加空div标签 并添加样式clear:both。
3. 包含浮动元素的父标签添加样式overflow为hidden或auto。
4. 父级div定义zoom
5. 上下margin重合的问题
6. CSS优化、提高性能的方法有哪些？
7. 避免过度约束
8. 避免后代选择符
9. 避免链式选择符
10. 使用紧凑的语法
11. 避免不必要的命名空间
12. 避免不必要的重复
13. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
14. 避免！important，可以选择其他选择器
15. 尽可能的精简规则，你可以合并不同类里的重复规则
16. fsdf
17. 让页面里的字体变清晰，变细用CSS怎么做

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

1. position:fixed;在android下无效怎么处理

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

1. li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

解决方法：

可以将

代码全部写在一排

浮动li中float：left

在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

1. display:inline-block 什么时候会显示间隙
2. 有空格时候会有间隙 解决：移除空格
3. margin正值的时候 解决：margin使用负值
4. 使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
5. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp
6. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
7. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
8. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
9. webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
10. style标签写在body后与body前有什么区别

页面加载自上而下 当然是先加载样式。

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

1. CSS属性overflow属性定义溢出元素内容区的内容会如何处理

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时候，溢出的内容出现在父元素之外。

参数是hidden时候，溢出隐藏。

1. 阐述一下CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。