overflow 属性和取值

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容及时超出父级元素也会完全显示。
hidden 如果内容超出则会被隐藏。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

技术css

clearfix清除浮动

文章转载自《闲聊CSS之关于clearfix——清除浮动》。
一，什么是.clearfix
盒子清除内部浮动时可以用到.clearfix。

1
2
3
4
5
6
7
8
9
10
11
12
13
.clearfix:after { 
      content: " ";
      display: block; 
      clear: both; 
      height: 0;
}
.clearfix {
      zoom: 1;
}

<div class="clearfix"> 
    <div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：
1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

1
2
3
4
<div>
   <div class="floated"></div>
</div>
<div style="clear: both"></div>

二，.clearfix的弊端
在上面的代码中可以看到，抛开IE6, 7不谈，.clearfix在标准浏览器下插入了一个clear: both的元素，这样很可能清除掉不必要的浮动。举例来:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <style type="text/css">
    html, body { padding: 0; margin: 0; }
    ul { margin: 0; padding: 0; } 
  
    .clearfix:after {
      content: " ";
      display: block;
      clear: both;
      height: 0;
    }
    .clearfix {
      zoom: 1;
    }
  
    .left-col {
      background: red;
      float: left;
      width: 100px;
      height: 300px;
    }
    .right-col {
      margin-left: 100px;
    }
    .menu {
      border: 1px solid #000;
    }
    .menu li {
      float: left;
      display: block;
      padding: 0 1em;
      margin: 0 1em 0 0;
      background: #ccc;
    }
    .placeholder {
      background: yellow;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="left-col">
  </div>
  <div class="right-col">
    <ul class="menu">
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
    </ul>
    <div class="placeholder"></div>
  </div>
</body>
</html>

上面的代码构成一个两列布局的页面。注意.menu这个菜单设置了边框，但是由于.menu的li元素是左浮动的，导致.menu没有高度，于是可以用.clearfix来清除.menu内部的浮动。代码如下：

1
2
3
4
5
6
7
8
<ul class="menu clearfix">
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
</ul>

但是应用完.clearfix后，在标准浏览器下页面变得很乱，这是因为.clearfix:after把.left-col的浮动也给清除掉了。
三，重构.clearfix
在遭遇到上面的错误之后，分析一下除了.clearfix:after这种方式之外还有没有别的方法清除元素内部的浮动。构成BFC（Block Formatting Context）的元素可以清除内部元素的浮动。那么只要使.clearfix形成Block Formatting Context就好了。

  • 构成Block Formatting Context的方法有下面几种：
    • float的值不为none。
    • overflow的值不为visible。
    • display的值为table-cell, table-caption, inline-block中的任何一个。
    • position的值不为relative和static。

很明显，float和position不合适我们的需求。那只能从overflow或者display中选取一个。因为是应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求（会把下拉的菜单隐藏掉或者出滚动条），那么只能从display下手。
我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个，但是display: inline-block会产生多余空白，所以也排除掉。

剩下的只有table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context，因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context。这样我们新的.clearfix就会闭合内部元素的浮动。下面是重构之后的.clearfix。

1
2
3
4
5
.clearfix {
  zoom: 1;
  display: table;
  width: 100%;
}

四，总结

  • 在IE6, 7下面只要是触发了hasLayout的元素就可以清除内部浮动了。而在标准浏览器下面清除元素内部浮动的方法有很多，除了.clearfix:after这种方式，其余的方法无非就是产生新的Block Formatting Context以达到目的。
技术css

IE的haslayout布局

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。

  • 为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。

  • 当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）

  • 大多IE下的显示错误，就是源于 haslayout。如果它设置成了true，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词，如果haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。

  • 当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性
  • hasLayout 被设为了 true。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout的元素。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为“haslayout = -1”。
    负责组织自身内容的元素将默认有一个布局，主要包括以下元素（不完全列表）：
  • body and html
  • table, tr, th, td
  • img
  • hr
  • input, button, file, select, textarea, fieldset
  • marquee
  • frameset, frame, iframe
  • objects, applets, embed
    对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。
    如何激发 haslayout？
    大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。
  • display: inline-block
  • height: (任何值除了auto)
  • float: (left 或 right)
  • position: absolute
  • width: (任何值除了auto)
  • writing-mode: tb-rl
  • zoom: (除 normal 外任意值)
    Internet Explorer 7 还有一些额外的属性(不完全列表):
  • min-height: (任意值)
  • max-height: (除 none 外任意值)
  • min-width: (任意值)
  • max-width: (除 none 外任意值)
  • overflow: (除 visible 外任意值)
  • overflow-x: (除 visible 外任意值)
  • overflow-y: (除 visible 外任意值)
  • position: fixed

其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性，目前还未被浏览器广泛支持。

  • 对于内联元素(默认即为内联的元素，如 span，或 display:inline; 的元素)，
  • width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height不能在此种情况下令该元素具有 layout。
  • zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。
    具有“layout” 的元素如果同时 display: inline ，那么它的行为就和标准中所说的 inline-block很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

haslayout 问题的调试与解决

  • 当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。
  • 对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1%(height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE的条件注释。
  • 对 IE7 来说，最好的方法是设置元素的最小高度为 0 (min-height:0;)。
    haslayout 问题引起的常见 bug
    IE6 及更低版本的双空白边浮动 bug
    bug 修复: display:inline;
    IE5-6/win 的 3 像素偏移 bug
    bug 修复: _height:1%;
    IE6 的躲躲猫(peek-a-boo) bug
    bug 修复: _height:1%;
    IE6/7负margin隐藏Bug：
    bug 修复:去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;
    需要注意的是，hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃。上文中的InternetExplorer都是指IE7、IE6及以下版本。
技术IE

清除浮动float

有浮动引起的三个问题

  • 父容器无法包裹浮动元素，高度无法被撑开，认为此元素不在父元素内（脱离文档流），影响与父元素同级的元素(文字产生环绕、元素内容影响等)（给父元素添加clearfix样式）
  • 与浮动元素同级的非浮动元素会跟随其后*（clear清除）8
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构（clear清除）
1
2
3
4
5
6
 clear : none | left | right | both；取值只对本元素有效
取值：
   none  :  默认值.，允许两边都可以有浮动对象
   left   :  不允许本元素左边有浮动对象
   right  :  不允许本元素右边有浮动对象
   both  :  不允许有浮动对象
  • 添加.clearfix样式，在父级元素中添加一个class=“clearfix”的样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.clearfix:before, .clearfix:after{ 
    content: ""; 
    display: table;
}
.clearfix:after{ 
    clear: both;
}
.clearfix{
     *zoom: 1; /* for ie 6,7触发hasLayout，使元素闭合内部浮动*/
}
或者：
.clearfix{ 
      overflow:hidden; 
      _zoom:1; /* _zoom是CSS hack中专对IE6起作用的部分*/
}

zoom:1表示对象的缩放比例，overflow:hidden和 _zoom:1; 这两个属性连起来起作用清除内部浮动
clearfix 主要是用在浮动层的父层，而 clear 主要是用在浮动层与浮动层之间，和浮动层同一级，如果想要撑开父层的高度，clear 就要放在最后。

技术css

css hack

由于不同厂商的浏览器或浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等）对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack；

  • hack的书写有以下三种方式：

1、属性前缀法(即类内部Hack)，例如 IE6能识别下划线”_“和星号””，IE7能识别星号””，但不能识别下划线”“;

2、选择器前缀法(即选择器Hack)，例如 IE6能识别 .class{}，IE7能识别+ .class{}；

3、IE条件注释法（即HTML头部引用if IE）例如：





```

随笔hack

inline-block产生的缝隙问题

inline-block缝隙：左右会默认有缝隙

style样式设置为填充和边距均为0；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			border: 2px solid red;
		}
		.box>li{
			display: inline-block;
			background-color: #ccc;
			border-radius: 6px;
			height: 30px;
			font-size: 18px;
			line-height: 30px;
		}
	</style>

效果显示：
Paste_Image.png

1
2
3
4
5
6
7
<body>
	<ul class="box">
		<li>inline</li>
		<li>inline</li>
		<li>inline</li>
	</ul>
</body>

去掉间隙的方法

  • 父容器font-size:设为零。

    .box{font-size:o;}

  • 修改格式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <body>
    	<ul class="box">
    		<li>inline</li><li>inline</li><li>inline</li>
    	</ul>
    /*<ul class="box">
    		<li>inline</li
           ><li>inline</li
           ><li>inline</li>
    	</ul>*/
    </body>

  • margin-left:-8px;(与字体大小有关)
    但是会影响第一个li的显示样式，left会冒出ul的边框

  • float:left；使用浮动，而不使用inline-block；
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    	.box{
    		border: 2px solid red;
                           overflow:auto;/*hidden*/
    	}
    	.box>li{
    		float:left;
    		background-color: #ccc;
    		border-radius: 6px;
    		height: 30px;
    		font-size: 18px;
    		line-height: 30px;
    	}
    </style>

父元素ul需要撑开里面的浮动元素，使用overflow:auto或hideen;

另,inline-block(具有块级元素特性，可以设置宽高，上下边距填充) 在IE8以下不支持，可使用：

display: inine-block;
*display: inline;// 在IE8以下可以识别

技术css

文档流中的position定位问题

  • CSS 有三种基本的定位机制：普通流（文档流）、浮动和绝对定位。
    position属性共有四种取值：
    1. static：默认值，即正常文档流的表现形式，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
    2. relative：相对定位，对于其原本位置进行定位，但是其原来所占用的空间依然存在，即不脱离文档流。如”left:20px” 会使元素的left距离原来的位置添加 20 像素。
    3. absolut：绝对定位，相对于 static 定位以外的第一个父元素进行定位。脱离文档流，不占据空间，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
    4. fixed:绝对定位，脱离所有元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

  • fixed；生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

    对于定位元素（非static），z-index用来控制层叠元素的显示优先级，值越大优先级越高。默认情况z-index=0，文档流中按顺序谁在后面谁是最外层。

  • relative：生成相对定位的元素，相对于其正常位置进行定位（相对于自身定位）。如”left:20px” 会向元素的 LEFT 位置添加 20 像素.
    absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

  • absolut绝对定位使元素的位置与文档流无关，即脱离文档流，而相对定位后依然占有原来空间，不脱离文档流

    用定位实现水平居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>使用定位实现垂直水平居中</title>
    	<style type="text/css">
    		.ct{
    			/* position: relative;
    			height: 800px; 设置高度*/
    			position: absolute;
    			top: 0;
    			left: 0;
    			right: 0;
    			bottom: 0;/* 布满全屏 */
    			background: rgba(0,0,0,0.5);/* 灰色 */
    		}
    		.center{
    			width: 80px;
    			height: 80px;
    			position: absolute;
    			top:50%;
    			left: 50%;/* 左上角水平居中 */
    			margin-left: -40px;
    			margin-top: -40px;/* 元素水平居中 */
    			background-color: #fff;
    		}
    	</style>
    </head>
    <body>
    	<div class="ct">
    		<div class="center"></div>
    	</div>
    </body>
技术html

html中列表样式的设置

列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。
样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。
1．列表符号
列表符号是指显示于每一个列表项目前的符号标识。
基本格式如下：
list-style-type：参数
参数取值范围：
·disc：圆形
·circle：空心圆
·square：方块
·decimal：十进制数字
·lower-roman：小写罗马数字
·upper-roman：大写罗马数字
·lower-alpha：小写希腊字母
·upper-alpha：大写希腊字母
·none：无符号显示
参数中的disc是默认选项。
2．图形符号
图形符号指原来列表的项目符号将可以使用图形来代替。
基本格式如下：
list-style-image：URL
URL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。
3．列表位置
列表位置描述列表在何处显示。
基本格式如下：
list-style-position：参数
参数取值范围：
·inside：在BOX模型内部显示
·outside：在BOX模型外部显示

技术html

meta标签及浏览器内核

meta的主要作用是用来描述文件及文件的内容，以便于浏览器查找、分类，常见的值有：

1.【确定文档的编码】

2.【确定浏览器的兼容性】

3.【设置网页关键字】

4.【显示语言的设定】

5.【指定页面中脚本的类型】

6.【页面描述】

7.【标注网页作者】

8.【网站版权信息】

浏览器最重要或者说核心的部分是”Rendering Engine”，译为”渲染引擎”，也可以称为”浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。

所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

常见的额内核和浏览器有：

Trident内核的浏览器：IE、Maxthon、TT、The World等；

Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

Presto内核的浏览器：Opera7及以上版本；

Webkit内核的浏览器：Safari、Chrome。

技术html

color的写法

css中定义颜色的写法一共有三种

1.英文颜色名，如red，blue等

2.十六进制颜色，如#f8f900，#f0a等

3.（1）rgb颜色，如rgb（0，0，0）rgb（0,255，0）

（2）rgba，a为透明度，1为完全不透明，0为完全透明，如rgba（0,255,255,.4）透明度为0.4

技术css属性
,