发表于 | 分类于

响应式工具

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面 (≥992px) 大屏幕 桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

发表于 | 分类于

新：

1
flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
如果缩写「flex: 1」, 则其计算值为「1 1 0%」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

旧：

1
2
3
box-flex：<number>
默认值：0
适用于：伸缩盒子元素
1
2
3
box-direction：normal | reverse
默认值：normal
适用于：伸缩盒容器
1
2
3
4
5
6
7
8
box-orient：horizontal | vertical | inline-axis | block-axis
默认值：horizontal
适用于：伸缩盒容器

horizontal： 设置伸缩盒对象的子元素从左到右水平排列
vertical： 设置伸缩盒对象的子元素从上到下纵向排列
inline-axis： 设置伸缩盒对象的子元素沿行轴排列
block-axis： 设置伸缩盒对象的子元素沿块轴排列
1
2
3
box-lines：single | multiple
默认值：single
适用于：伸缩盒容器
1
2
3
4
5
6
7
8
box-pack：start | center | end | justify
默认值：start
适用于：伸缩盒容器

start： 设置伸缩盒对象的子元素从开始位置对齐（大部分情况等同于左对齐，受）
center： 设置伸缩盒对象的子元素居中对齐
end： 设置伸缩盒对象的子元素从结束位置对齐（大部分情况等同于右对齐）
justify： 设置或伸缩盒对象的子元素两端对齐
1
2
3
4
5
6
7
8
9
box-align：start | end | center | baseline | stretch
默认值：stretch
适用于：伸缩盒容器

start： 设置伸缩盒对象的子元素从开始位置对齐
center： 设置伸缩盒对象的子元素居中对齐
end： 设置伸缩盒对象的子元素从结束位置对齐
baseline： 设置伸缩盒对象的子元素基线对齐
stretch： 设置伸缩盒对象的子元素自适应父元素尺寸
1
2
3
4
5
6
7
8
box-ordinal-group：<integer>
默认值：1
适用于：伸缩盒子元素

设置或检索伸缩盒对象的子元素的显示顺序。
效果等同于过渡版本的flex-order属性和新版本的order属性；
数值较低的元素显示在数值较高的元素前面；
相同数值的元素，它们的显示顺序取决于它们的代码顺序；
1
2
3
4
5
box-flex-group：<integer>
默认值：1
适用于：伸缩盒子元素

<integer>：用整数值来定义伸缩盒对象的子元素所在的组。

发表于 | 分类于

css中margin-top是设置容器的外间距了距离了，但有朋友会发现div嵌套后，margin-top或者margin-bottom失效了，下面来看看此问题解决办法。

设计页面的时候遇到一个神奇的问题，下面是html的代码

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.parent{
			width: 200px;
			height: 200px;
			background: blue;
			/* padding: 0; */
		}
		.box{
			width: 100px;
			height: 100px;
			background: red;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="parent">
		<div class="box"></div>
	</div>
</body>
</html>

发现margin相对的父容器搞错了，找到body去了，成了相对于body来设置margin，此时设置了homeNav 的高度和宽度都没效果，让我抓狂不已，div都不听话了，调试了半天终于找到了原因。
图片地址

IE6 7下正常，IE8及以上和ff、chrome表现一致

原因：

在两个嵌套的div，如果外层div的父容器padding值为0，
那么内层div的margin-top或者margin-bottom的值会”转移”给外层div，也就是父容器的父容器。

解决办法：

  1. 设置父容器的的样式加上：overflow:hidden。
  2. 把对父容器的margin-top外边距改成padding-top内边距。
  3. 给父容器div加样式， padding-top: 1px。
  4. 给父容器div加样式，position: absolute。
  5. 把父元素变成一个 block formating context ，下面是可选的方法
    a、float: left/right

b、position: absolute

c、display: inline-block/table-cell

d、overflow: hidden/auto

我自己使用的是第一种方法，建议方法1。

发表于 | 分类于

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。

发生外边距塌陷的三种基本情况:

1.相邻的兄弟姐妹元素

毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。例如：

1
2
<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>

可以发现这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（在此示例中为30px）。

2.块级父元素与其第一个/最后一个子元素

如果块级父元素中，不存在上边框、上内补、inline content、 清除浮动 这四条属性（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距合并 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。

类似的，若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有父元素的 border、padding、inline content、height、min-height、 max-height 分隔时，就会发生 下外边距合并 现象

1
2
3
 <div style="background: red">
	<div style="width: 100px;height: 100px;border:1px solid #000;margin-top:100px;"></div>
</div>

3.空块元素

如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：

1
2
3
4
5
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>

<div style="margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>

当以上情形同时出现时，外边距合并会更加复杂（会比较两个以上外边距来最终计算出真实的边距值）。

即使外边距为0，这些规则也仍旧生效。因此，无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距”截断”(根据上面的规则)，在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。

当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。

如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。

浮动 及 绝对定位 元素外边距不会合并。

发表于 | 分类于

a标签默认点击的时候会有个高亮的背景色，要把这个去掉只需要给a标签设置css样式：

1
-webkit-tap-highlight-color:rgba(0,0,0,0);