css学习笔记

前言
闲来无事，将前端css知识点总结了一下，内容不多，也不包括css3的内容，纯属根据自己的喜好和容易忘记的加以简记。

//字体
font: font-style font-weight  font-size/line-height  font-family;

text-decoration: none  |   underline   |     line-through


//内嵌、外链、内联（行内样式）
<link rel=”stylesheet” href=”1.css”> 

<style type=”text/css”>
样式表写法
</style>

<a style="font:12/18 "微软雅黑"; text-decoration:underline;"

标签分类及特点：

块级元素：Div,h1-h6,p,ul,li
    ★独占一行
    ★可以设置宽高
    ★ 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。

行内元素：span  ,a,  ,strong , em,  del,  ins
    ★在一行上显示
    ★不能直接设置宽高
    ★元素的宽和高就是内容撑开的宽高。

行内块元素： input  img
    ★在一行上显示
    ★可以设置宽高 

元素类型转换
    display:inline  inline-block  block;

继承性 :

继承性发生的前提是包含（嵌套关系）
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结：文字的所有属性都可以继承。
◆特殊情况：
h系列不能继承文字大小。
a标签不能继承文字颜色。

优先级：

默认样式<标签选择器<类选择器

链接伪类：

a:link{属性:值;} 链接默认状态

a:visited{属性:值;} 链接访问之后的状态

a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激的状态

a:focus{属性:值；} 获取焦点

背景属性:

连写：

background:background-color,background-image,background-repeat,background-position,Background-attachment;

background:red url("1.0.png") no-repeat right buttom scroll;

分开
background-color 背景颜色

background-image url(” “) 背景图片

Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺

Background-position left(默认) | right | center | top | bottom | x y背景定位

Background-attachment 背景是否滚动 scroll(默认) | fixed

行高：

浏览器默认文字大小：16px

行高=文字高度+上下边距+边框

一行文字行高和父元素高度一致的时候，垂直居中显示。

边框border：

表单控件自带边框和轮廓，当需要修改时需要去掉！！!

border: 0 none; /*去掉边框*/
 outline-style: none; /*去掉轮廓线*/
label  for  id      获取光标焦点

<label for="usename">用户名<label><input id="usename" type="text">

padding连写 margin 如同
Padding: 20px; 上右下左内边距都是20px

Padding: 20px 30px; 上下20px 左右30px

Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40

Padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px

清除浮动-伪元素

定位

定位方向: left | right | top | bottom
◆position:static; 静态定位。默认值，就是文档流。

◆绝对定位 Position:absolute;

特点：
★元素使用绝对定位之后不占据原来的位置（脱标）

★元素使用绝对定位，位置从上一级定位的父盒子出发，如果上级都没定位，就是从浏览器出发。

★给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）

相对定位 Position: relative;

特点：
★使用相对定位，位置从自身出发。

★还占据原来的位置。

★子绝父相（父元素相对定位，子元素绝对定位）

★行内元素使用相对定位不能转行内块

固定定位 Position:fixed;

特点：
★固定定位之后，不占据原来的位置（脱标）

★元素使用绝对定位，位置从上一级定位的父盒子出发，如果上级都没定位，就是从浏览器出发。

★元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）