css复习

浏览器分两部分：

shell 内核

IE trident

Firefox Gecko

Google chrome Webkit/blink

Safari Webkit

Opera presto

（层叠样式表格）

html css javascript

结构 样式 行为

www.baidu.com(域名) – dns(解析) – 192.168.000.001（地址）

css权重（256进制,多个直接进进行相加（派生选择器/父子选择器））

！important（Infinity）>行间样式（1000）>id（100）>class|属性|伪类（10）>标签选择器|伪元素（1）>通配符（0）

凡是带有inline的元素，都带有文字特性

标签的分类

1.行级元素（内联元素） display=inline

feature： 内容决定元素所占位置

不可以通过css改变宽高

举例：span strong em a del

2.块级元素 display=block

feature： 独占一行

可以通过css改变宽高

举例： div p ul li ol form address

3.行级块元素 display=inline-block

feature： 内容决定大小

可以通过css改变宽高

举例： img

body自带8px margin

盒模型 层模型 浮动模型（float：left right ）

{

盒子模型 (margin +border+padding+(content=width+height))

盒子壁 border

盒子内边距 padding

盒子内容区 width+height

外边距 margin

Padding:四个参数：上右下左 三个参数：上 左右 下

}

定位：

position：absolute

left: 100px

top: 100px

/right bottom

层模型：

absolute:（定位技术）

脱离原来位置进行定位（释放原来位置）

相对于最近的有定位的父级进行定位

如果没有，那么相对于文档进行定位

relative（参照物）

保留原来位置进行定位

相对于自己原来的位置进行定位

fixed

位置不动

{

position=fixed;

left:50%;

top:50%;

margin-left:-width*0.5;

margin-top:-heighr*0.5;

}

经典bug:

bfc: block format context(块级格式化上下文)

触发盒子的bfc：

margin塌陷（垂直方向margin结合在一起，父子同时变化）
(强加border)

触发一个盒子的bfc：

position：absolute

display;inline-block

float:left/right

overflow:hidden （溢出部分隐藏）

2.margin合并（区域不能共用，兄弟方向margin合并）

不解决

伪元素：(行级元素)

**：：before{

content:””;
}

**：：after{

content:””;
}

清除浮动

**::after{

content: “”;

clear: both;

/只对块元素有效/

display: block;

}

/* position: absolute;float: left;right: ;

自内部把元素转换成inline-block*/

行级元素只能嵌套行级元素

块级元素可以嵌套任意元素

除外不能嵌套

默认文字大小16px

/除去换行/

white-space: nowrap;

/溢出隐藏/

overflow: hidden;

/…形式展示/

text-overflow: ellipsis;

margin: 0 auto; （父子级，都是块级元素，放于子块中，使其居中）

语句：

font-size: n px （设置字体大小（高））

font-weight: normal (bold 加粗 100 200 -900逐渐变粗)

font-style：italic （斜体）

font-family:arial （字体 alrial乔布斯发明。第一件贡献是字体）

color; (设置字体颜色 ：

1.土鳖式(纯英文) color:red

2.颜色代码 color:#f40;

3.颜色函数 rgb(255,255,255)

R red G geeen B blue

00-ff 00-ff 00-ff (饱和度)

#ffffff 白色

#000000 黑色

transparent(透明色)

)

border: n px solid color; (加边框)（border-width border-style(solid实线dotted点状虚线dashed条状虚线) border-color）

(画三角)

border-left;

border-right:
border-top;

border-bottom;

text-align:left center right (对其方式)

line-height: n px (文字所占像素)

height=line-height (当行文本垂直居中)

text-indent：2em (首行缩进 1em=1*font-size)

text-decoration: line-through; (中划线none无线underline下划线overline上划线resize)

cursor:pointer （pointer小手help?）

opacity: 0-1 (透明度，0到1之间)

list-sttyle:none (去掉li标签前的圆点)

//伪类选择器

a:hover{

background-color:red; (当鼠标移入是改变颜色)

color：#fff;

}

border-radius:10px; (50%为圆)

z-index：1 (z轴，默认0)

clear:both (清除浮动流，必须是块级元素)

white-space: nowrap; (失去换行功能)

target=_blank; (在新的界面中打开)

vertical-align: middle; （对齐线）