css盒子模型

1，CSS选择器，大家写css选择器的时候，能共用的选择器尽量提取出来

2，选择器的继承和CSS样式优先级，有类似之处

关联的选择器 > id选择器 > 类选择器 > 元素选择器

越精确的优先级越高

 

3，CSS常用的属性、值

字体属性：

Font-size：字体大小

Color：字体颜色

Font-style：字体样式  italic是斜体

Font-weight：字体加粗

Font-family：字体族谱  宋体 、黑体...

 

控制文本的属性

Letter-spacing：字母间隔

Word-spacing：文字间隔

 

背景属性

Background-color：背景颜色

Background-image：url() 背景图片

Background-repeat：背景平铺：

Background-attachment：背景附件：

Background-position：背景位置

 

DIV和CSS的概念

现在在网站设计的标准中，已经不再使用表格定位技术，而是使用div+css

实现各种定位。简单来说，就是通过div来搭建网站结构（框架），css用

来美化网站样式

例如：数据页面、报表之类的页面还是HTML表格比较方便

 

DIV+CSS来布局网站

21世纪初，2000年左右，网站

搜索引擎，开始反思了：如何判断一个网是好是坏？

结果：看内容，看搜索引擎抓取内容的速度

Div+css-----div只写内容，然后css控制他的样式

（1）由于之前的table，布局网站，层层嵌套，导致搜索引擎抓取的障碍增大，所以被淘汰，div 抓取内容比较顺利

（2）Table----显示的时候，等整个table框架加载完毕一块显示，div---加载一部分显示一部分，如果页面太长的话，导致后面可能会出现空白

 

但是，网站布局也并不是绝对的，现在 数据报表，后台管理方面 table比较方便的

 

DIV+CSS布局网站的优点：

1，内容、显示相分离；

2，提高工作效率

3，利于改版和维护

4，利于搜索引擎优化

5，代码简洁，提高访问速度

 

 

盒子模型：

 任何一个html的标签我们都可以看成是一个容器（盒子），既然有盒子肯定有 宽（width）、高（height），边框（border），内容和边框之间有一个空隙（padding），如果有多个盒子，会存在盒子与盒子之间存在边距，margin

 

需求1：

需求2：盒子这两个字 和包含他的盒子的 间距稍微大一点

需求3：盒子两个字 居中显示

 

 

谷歌浏览器下，margin-top 不起作用解决之道：增加 float 浮动，即可

 

Margin、padding  值复制

margin:25px;  如果只有一个值，其他都会复制这一个值

而且，margin、padding 顺序，上右下左

1，如果是一个值，其他三个方向都复制这一个值

2，如果是两个值，上下对应一个值，左右对应一个值

3，如果是3个值，也就是缺左边的，于是复制右边的

 

 

定位分为 absolute（绝对），relative（相对），static（静态），或者fixed（固定）

 

绝对定位：

文档流：浏览器加载页面的时候，从上往下解析的

但是，如果把一段代码，设置为绝对定位（absolute），这段代码就会脱离文档流

飘起来了

Position:absolute；

 

相对定位：

Relative ,相对于文档流，代码在哪里写的，就在那里显示

 

Z-index 值高的 会覆盖值低的

 

 

区块浮动：

 

Float属性：

eft 元素向左浮动。

right 元素向右浮动。

none 默认值。元素不浮动

 

Clear属性：

left 在左侧不允许浮动元素。

right 在右侧不允许浮动元素。

both 在左右两侧均不允许浮动元素。

none 默认值。允许浮动元素出现在两侧。

右浮动

float:right   向右浮动，脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边

左浮动：

float:left   向左浮动，脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘

 

区块浮动：如果包含框太窄，浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：