首页 > 代码库 > CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应，另一列固定宽度
CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应，另一列固定宽度
1：标有!important标记的样式
2：HTML编辑的样式
3：用户设置的样式
4：浏览器默认的样式
一列自适应，另一列固定宽度，个人认为如下方法比较好用
<!DOCTYPE html>
<html>
<head>
<title>
html5
</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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空白区域.
CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应，另一列固定宽度
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。