关键词：
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空白区域.
csscss特性③(css优先级|权重叠加计算公式)(代码片段)
...基础选择器权重表格,进行权重叠加计算;CSS选择器选择器优先级-权重计算继承父标签的样式,*通配符选择器0,0,0,0标签选择器0,0,0,1类选择器，链接伪类选择器0,0,1,0ID选择器0,1,0,0标签的行内样式style属性1,0,0,0样式后添加!important... 查看详情
01-css基础知识
...一、选择器1.1、单一选择器1.2、复合选择器1.3、继承层叠优先级二、标签样式2.1、背景(background)2.2、字体(font)2.3、文本(text)2.4、链接(link)2.5、列表(ul)2.6、表格(table)2.7、边框(border)三、布局3.1、盒子模型3.1.1、介绍3.1.2、margin3.1.3... 查看详情
csscss特性③(css优先级|优先级引入|选择器基本权重)(代码片段)
文章目录一、CSS优先级1、优先级引入2、选择器基本权重3、完整代码示例一、CSS优先级1、优先级引入定义CSS样式时,可能出现多个类型相同的规则定义在同一个元素上,如果CSS选择器相同,执行CSS层叠性,根据就近原则选择执行的样... 查看详情
css基础引用方式标签选择器优先级各式布局
今天讲的css基础，了解了css即层叠式表，是美化网页，控制页面的样式。样式表引进网页的3种方式1内联式，语法例子：<div style="width:100px;height:50px;background:#E91115"></div>‘ ... 查看详情
css选择器
CSS三大特性—— 继承、优先级和层叠。继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类 首先来看一下css选择符(css选择... 查看详情
css选择器优先级总结
CSS三大特性——继承、优先级和层叠。继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类 首先来看一下css选择符(css选择器)有... 查看详情
css选择器优先级(代码片段)
CSS三大特性——继承、优先级和层叠。继承：即子类元素继承父类的样式;优先级：是指不同类别样式的权重比较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。css选择符分类 首先来看一下css选择符(css选... 查看详情
css权重优先级
从CSS代码存放位置看权重优先级：内嵌样式>内部样式表>外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。从样式选择器看权重优先级：important>内嵌样式>ID>类>标签|伪类|属性选择&g... 查看详情
css优先级
/*div{ color:red; }*/ /*标签选择器权重0,0,0,1小组长*/ div{ color:pink!important; } /*类选择器权重0,0,1,0班长*/ .one{ color:blue; } /*id选择器权重0,1,0,0班主任*/ #two{ color:green; } /*style=行内样式表权重1,0,0,0校长* 查看详情
css选择器优先级
1.CSS选择器判断过程：第一步：判断选择器的权重(多重组合样式同理，多个class<一个id);权重从大到小依次为:!import元素行内样式ID选择器伪类选择器/属性选择器>类选择器tag标签选择器*通配符继承第二步:同种类型的权重判断... 查看详情
css选择器有哪些，选择器的权重的优先级
1.选择器类型1、ID #id2、class .class3、标签 p4、通用 *5、属性 [type="text"]6、伪类 ：hover7、伪元素 ::first-line8、子选择器、相邻选择器2.权重计算规则1. 第一等：代表内联样式，如:style=””，权值... 查看详情
css选择器的优先级及权重问题css核心问题
1.CSS选择器优先级: !important>行间样式>id>class和属性选择器>标签选择器>通配符选择器 注意：[初级工程师水平]2.之所以有优先级问题，归根到底是这些选择器有权重的，权重值越大，优先级越... 查看详情
html/css选择符优先级
CSS的选择符优先级1、同级样式默认后者覆盖前者2、样式优先级类型(1)<class[type](10)=伪类(10)<id(100)<style行间样式(1000)<style内部样式<link外部引入样式选择符的相应值综合相加起来大的优先级高注:相应值仅仅是代表他们... 查看详情
css基础(代码片段)
...类+10元素伪元素+1其他选择器+0属性后加!important优先级最高元素属性优先级最高相同权重后写的生效非布局样式字体字体族serifsans-serifmonospacecursivefantasy设置的时候不需要双引号多字体机制fallback设定几个字体，从头... 查看详情
前端三件套html+css+js基础知识内容笔记(代码片段)
...ff09;交集选择器伪类选择器CSS的特性CSS继承性CSS3层叠性和优先级常用的样式属性字体属性文本属性边距和填充边框属性列表属性背景和阴影属性背景属性背景图片的定位背景的渐变阴影属性盒子模型标准文档流块状标签和行内标... 查看详情
前端三件套html+css+js基础知识内容笔记(代码片段)
...ff09;交集选择器伪类选择器CSS的特性CSS继承性CSS3层叠性和优先级常用的样式属性字体属性文本属性边距和填充边框属性列表属性背景和阴影属性背景属性背景图片的定位背景的渐变阴影属性盒子模型标准文档流块状标签和行内标... 查看详情
css选择器优先级
一、定义所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。二、规则样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：1内联样式表的权值最高 style=""－－－－－－－－－... 查看详情
css基础知识总结
...联三种主要的选择器元素选择器class选择器id选择器样式优先级(从高到低)!important内联样式按顺序执行选择器优先级(从高到低)!important内联样式id选择器class选择器元素选择器display属性noneblockinl 查看详情