DIV+CSS学习笔记总结篇

a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）

a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）

a:hover {color:#FF00FF;} /* 鼠标移动到链接上

*/（可和其他标签结合一起用）

a:active {color:#0000FF;} / 选定的链接 /

注意

伪类选择器的排序很重要，a:link a:visited  a:hover a:active，记作lvha

输入伪类选择器（针对表单）

input:focus{color:red;} / 键盘输入焦点 /

其他伪类选择器

p:first-child{color:red;} /* 第一个p */

:before 在元素之前添加内容。

:after 在元素之后添加内容。

css优先规则

内联样式表-> ID 选择器—> Class 类选择器->标签选择器

背景属性：

背景的添加 ：

背景颜色的添加:

background:red;

backgronnd-color:red;

背景图片的添加：

background:url(“images/1.jpg”);

backgronnd-image:url(“images/1.jpg”);

背景的平铺

什么是平铺？平铺就是图片是否重复出现

不平铺：background-repeat:no-repeat;

水平方向平铺：background-repeat:repeat-x;

垂直方向平铺：background-repeat:repeat-y;

完全平铺：默认为完全平铺

背景图片的定位

背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现

background-position的取值可为英文单词或者数值和百分值。

background-positon的英文单词取值

top left

top center

top right

center left

center center

center right

bottom left

bottom center

ottom right

background-positon的数值取值

background-position:x y;

positon的百分值取值

background-position:x% y%;

背景图片的大小

背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。

background-size的数值取值

background-size:x y;

background-size的数值取值

background-size:x% y%;

背景图片的滚动

背景图片是否随着内容的滚动而滚动由background-attachment设置

background-attachment:fixed; 固定，不随内容的滚动而滚动

background-attachment:scroll; 滚动，随内容的滚动而滚动

css文字文本属性：

文字属性

color:red; 文字颜色

font-size:12px; 文字大小

font-weight:“bold” 文字粗细(bold/normal)

font-family:“宋体” 文字字体

font-variant:small-caps 小写字母以大写字母显示

文本属性

text-align:center; 文本对齐(right/left/center)

line-height:10px; 行间距(可通过它实现文本的垂直居中)

text-indent:20px; 首行缩进

text-decoration:none;

文本线(none/underline/overline/line-through)

letter-spacing: 字间距

盒子模型

盒子模型就是一个有高度和宽度的矩形区域

所有html标签都是盒子模型

div标签自定义盒子模型

所有的标签都是盒子模型

class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识多带带的唯一的元素。

盒子模型的组成

盒子模型组成部分：

自身内容： width、height 宽高

内边距： padding

盒子边框： border 边框线

与其他盒子距离： margin 外边距

内容+内边距+边框+外边距=面积

border 边框

常见写法 border:1px solid #f00;

多带带属性：

border-width:

border-style:

dotted 点状虚线

dashed（虚线）

solid（实线）

double（双实线）

border-color (颜色)

padding 内边距

值：像素/厘米等长度单位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下 左右

padding:10px 10px 10px; 上 左右 下

padding:10px 10px 10px 10px; 上 右 下 左（设置4个点-->顺时针方向）

多带带属性：

- `padding-top:`
- `padding-right:`
- `padding-bottom:`
- ` padding-left:`

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

margin 外边距

值：与padding相同

多带带属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

补充盒子模型内容

标准盒子模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型

从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

IE盒子模型

从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content

和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding

IE盒子模型width = padding+border+内容

标准盒子模型 = 内容的宽度（不包含border+padding）

例：

一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px

那应该选择哪中盒子模型呢？当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢？很简单，就是在网页的顶部加上 doctype 声明。

假如不加 doctype 声明，那么各个浏览器会根据自己的行为去理解网页，即 ie 浏览器会采用 ie 盒子模型去解释你的盒子，而 ff 会采用标准 w3c 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。

反之，假如加上了 doctype 声明，那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

用 jquery 做的例子来证实一下

　上面的代码没有加上 doctype 声明，在 ie 浏览器中显示 ie盒子模型，在 ff 浏览器中显示“标准w3c 盒子模型”。

　代码2 与代码1 唯一的不同的就是顶部加了 doctype 声明。在所有浏览器中都显示“标准 w3c 盒子模型”

所以为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型

扩展

学会使用box-sizing布局

基本概念

块级元素：默认情况下独占一行的元素，可控制宽高、上下边距；

行内元素：默认情况下一行可以摆放多个的元素，不可控制宽高和上下边距

行块转换

display:none; 不显示

display:block; 变成块级元素

display:inline; 变成行级元素

display:inline-block; 以块级元素样式展示，以行级元素样式排列

溢出

overflow:hidden; 溢出隐藏

overflow:scroll; 内容会被修剪，浏览器会显示滚动条

overflow:auto; 如果内容被修剪，则产生滚动条

文本不换行：white-space:nowrap;

长单词换行：word-wrap:break-word;

行内元素和快级元素小结

一、块级元素：block element

每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；

块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。

DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

二、行内元素：inline element

也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。

三、block（块）元素的特点:

①、总是在新行上开始；

②、高度，行高以及外边距和内边距都可控制；

③、宽度缺省是它的容器的100%，除非设定一个宽度。

④、它可以容纳内联元素和其他块元素

四、inline元素的特点

①、和其他元素都在一行上；

②、高，行高及外边距和内边距不可改变；

③、宽度就是它的文字或图片的宽度，不可改变

④、内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下:

设置宽度width 无效。 设置高度height 无效，可以通过line-height来设置。 设置margin

只有左右margin有效，上下无效。

设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

五、常见的块状元素

address – 地址

blockquote – 块引用

center – 举中对齐块

dir – 目录列表

div – 常用块级容易，也是CSS layout的主要标签

dl – 定义列表

fieldset – form控制组

form – 交互表单

h1 – 大标题

h2 – 副标题

h3 – 3级标题

h4 – 4级标题

h5 – 5级标题

h6 – 6级标题

hr – 水平分隔线

isindex – input prompt

menu – 菜单列表

noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容

noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）

ol – 有序表单

p – 段落

pre – 格式化文本

table – 表格

ul – 无序列表

六、常见的内联元素

a – 锚点

abbr – 缩写

acronym – 首字

b – 粗体(不推荐)

bdo – bidi override

big – 大字体

br – 换行

cite – 引用

code – 计算机代码(在引用源码的时候需要)

dfn – 定义字段

em – 强调

font – 字体设定(不推荐)

i – 斜体

img – 图片

input – 输入框

kbd – 定义键盘文本

label – 表格标签

q – 短引用

s – 中划线(不推荐)

samp – 定义范例计算机代码

select – 项目选择

small – 小字体文本

span – 常用内联容器，定义文本内区块

strike – 中划线

strong – 粗体强调

sub – 下标

sup – 上标

textarea – 多行文本输入框

tt – 电传文本

u – 下划线

七，可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

applet - java applet

button - 按钮

del - 删除文本

iframe - inline frame

ins - 插入的文本

map - 图片区块(map)

object - object对象

script - 客户端脚本

八、行内元素与块级元素有什么不同

区别一：

块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度

行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别二：

块级：块级元素可以设置宽高

行内：行内元素不可以设置宽高

区别三：

块级：块级元素可以设置margin，padding

行内：行内元素水平方向的margin-left; margin-right;

padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

区别四：

块级：display:block;

行内：display:inline;

替换元素有如下：（和img一样的设置方法）

<body>内容</body>