DIV+CSS布局基础

CSS：层叠样式表单

作用：

• 用于控制网页元素的外观，提供了丰富的样式表现功能
• 设计HTML网页的样式，让网页内容与显示风格独立

选择器

• ID选择器：

#id{
颜色：
color:00ff00;
字体：
font-family:ncursive|fantasy|monospace|serif|sans-serif;
font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|samller|length|100px;
font-stretch:normal|narrower|wider;
font-style:normal|italic|oblique;
font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900;
text-shadow:color|length|opacity;
背景：
background-color:transparent|color;
background-image:none|url;
尺寸：
width:auto|length;
max-width:auto|length;
min-width:auto|length;
height:auto|length;
max-height:auto|length;
min-height:auto|length;
边框：
border-color:color;
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
border-width:medium|thin|thick|length
外补丁：
margin:auto|length;
内补丁：
padding:auto|length;
}

• 类选择器：

.class{color:ffffff;...}

• 标签选择器：

p{color:ffffff;...}

• 全局选择器：

*{color:ffffff;...}

• 组合选择器：

p.class{color:ffffff;...}

• 包含选择器：

p span{color:ffffff;...}

• 子对象选择器：

p > font{color:ffffff;...}

• 选择符选择器：

p,.class,font{color:ffffff;...}

• 伪类：
  作用：标签的状态，比如悬停、点击等等

a:hover|active|visited|link{coloe:red;...}

层叠原理

样式来源

在浏览器上运行的网页文档受以下三个CSS样式表控制外观：

• 浏览器的默认样式
• 用户自定义的样式
• 网页作者制作的样式

选择器的优先级（由高到低）

• ！important最高
• 内联样式
• ID选择器
• 类选择器
• 标签选择器
• 全局选择器

定义样式（后定义优先原则）

• 内联定义样式
• 定义内部样式块对象
• 导入外部样式表
• 链入外部样式表

DIV+CSS的布局方法

简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法
盒模型是DIV+CSS布局的基础
页面上每个元素都能看做一个容器，这个容器就是一个盒子
使用DIV+CSS布局，DIV标签就是布局中所用到的容器
页面上每个容器都占有一定的位置，有一定的大小
页面上每个容器都会影响其他容器的排布，它们相互作用，形成一个页面的布局

div{
width:200px;
height:200px;
background:#ccc;
padding:10px;
border-style:solid;
border-width:10px;
border-color:red;
margin:10px;
}

页面元素的布局

• 块级元素与行内元素
  块级元素一般都是从新行开始，它可以容纳行内元素和块级元素
  行内元素只能容纳文本和其他行内元素
• CSS布局方式
  三种基本的布局方式：常规流、浮动(float属性)和定位(position属性)
  常规流：默认的布局方式
  浮动：浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框
  定位：absolute代表绝对定位 relative代表相对定位
  margin:0px auto;居中