CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应，另一列固定宽度

1：标有!important标记的样式

2：HTML编辑的样式

3：用户设置的样式

4：浏览器默认的样式

 

一列自适应，另一列固定宽度，个人认为如下方法比较好用

<!DOCTYPE html>
<html>
<head>
	<title>
		html5
	</title>
	<link rel="stylesheet" type="text/css" href="css.css">
    <meta charset="utf-8">
	
</head>
<body>
<!--[if lt IE9]>
you can see it over IE9 brower
<![endif]-->

<div id="header">
	 头部信息
</div>
<div id="container">
<div class="sideBox">
		侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏
	</div>
	<div class="mainBox">
		主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域
	</div>
</div>

<div id="footer">
	底部信息
</div>


</body>
</html>

CSS样式如下：

*
{
	margin: 0;
	padding: 0;
}

#header,#footer
{
	background-color: #E8E8E8;
}


#container
{
	margin:10px 0;
	overflow: hidden;
	
}

.mainBox
{
    margin-right: 200px;
	background-color: lightblue;

}

.sideBox{
    float: right;
	background-color: lightcoral;
	width: 200px;

}

　　注意小技巧，将固定宽度的列浮动，注意其不能有元素阻挡其浮动至最上层，如例子代码将.sideBox放至.mainBox前面。若调换顺序则无法浮动至上方遮挡住.mainBox预留出来的200px空白区域.

posted on 2017-04-23 23:13  梦中开花  阅读(264)  评论(0)    收藏  举报

导航