css布局方面小结

1 ####css选择器

1 .left-word.moreinfor{} 这样是找不到选择器的。中间需要一个空格

但是div.moreinfor 是可以的。

2 max-width的作用：

p元素只有width：300px时候。不管浏览器怎么改变他都不会变。哪怕被浏览器遮挡。

当设置 max-width：300px的时候：当浏览器小于300px，他会根据浏览器改变状态。

3 box-sizing:border-box的使用。：为了让border和padding不增加宽度

或者在 *下面加上box-sizing属性，使所有页面都是于此。

.fancy {

  width: 500px;

  margin: 20px auto;

  padding: 50px;

  border: solid blue 10px;

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

4 利用display：inline-block; 内联元素的性质，但是有宽高！所以这样就不用清除浮动了。但是：

vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙，用负margin值来填补inline-block中间的空白。

5 columns的使用

<html>

<head>

	<title></title>

	<style type="text/css">

	.col{

		columns:100px 3;

		-webkit-columns:100px 3; /* Safari and Chrome */

   		-moz-columns:100px 3; /* Firefox */

	}

	</style>

</head>

<body>

<div class="col">

Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

</div>

</body>

</html>

和就是在div里面加了一个p就会导致高低不平！！

	<!DOCTYPE html>

<html>

<head>

	<title></title>

	<style type="text/css">

	.col{

		columns:100px 3;

		-webkit-columns:100px 3; /* Safari and Chrome */

   		-moz-columns:100px 3; /* Firefox */

	}

	</style>

</head>

<body>

<div class="col">

<p>

Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

</p>

</div>

</body>

</html>

为什么会导致加了一个P就不行呢，因为你的CSS 是针对.col 也就是div的设置，而没有针对p。如果你写成 p的column之CSS 。那么加上p就OK了。

盒子模型的深入了解。

巴特西

css布局方面小结

最新文章

热门文章