CSS学习笔记（一）

1、背景

　　background:url() no-repeat left center red;

　　background-repeat、background-position、background-image、background-color

2、文字的样式

　　font-size 改变文字的大小

　　font-weight  加粗文字

　　font-family  字体

　　font-style   italic斜体   normal正常

　　text-indent   缩进 10px 2em

　　font:12px/2 arial,sans-serif;  表示font-size是12px, line-height是font-size的2倍，后边的是字体。可能这个就是最少的font了

　　说下em，px，rem的区别

　　px就是字体大小，写上之后，即使页面放大，字体应该是不会变大的

　　em是个单位，比如父级的font-size是12px，子级设置font-size位2em，那么子级的font-size真实大小是24px;

　　　<div style="font-size:12px;">我是测试</div>
        <div style="font-size:12px;"><p style="font-size:2em;">我是测试</p></div>

　　如果父级设置了em，子级再设置em，那么子级真实的大小时父级的em*子级的em，看下面的例子

*{ margin:0; padding:0; list-style:none;}

body{font-size:12px;}

p{font-size:2em;}
    .div1{ font-size:2em;}
    .div2{ font-size:2em;}　　

<div class="div1">我中测试</div>
    <div class="div2">
        <p>我中测试</p>
    </div>

如果给body的font-size设置em的话，以浏览器默认字体大小为奇数，一般就是16px，就是body{font-size:1em;}相当于body{font-size:16px;}，font-size还可以用百分比

对于rem，是css3新增的单位，如果父级为rem，子级也为rem，那么子级的真实rem还是子集的值

3、从外到内，从上到下去写页面

4、white-space:nowrap强制文字不换行，text-overflow:ellipsis加省略号  overflow:hidden; 溢出隐藏

5、css的书写位置：style="css样式" --行间样式

<style type="text/css"></style>内联样式

6、HTML实体符号 

&lt;    < 

&gt;   >

7、IE6不支持a以外标签的hover

8、div#box(禁止用)   div.box必须是div并且有一个class是box

　　选择器的前面最好限定范围，span页面里所有span都选中了。

　　注意：继承没有直接给的大。

　　继承    #box .text

　　直接给  span

　　这个标签会执行span的样式

9、css样式继承

　　font-size、font-weight、font-family、font-style、line-height、

　　color ->a特殊，不能继承父级的颜色

10、

　　块标签：div  p   h1

　　　　独占一行

　　　　能给宽高

　　　　不给width的时候，width为100%

　　行内标签：a    span

　　　　共处一行

　　　　不能给宽高，宽高靠内容撑起来

      行内块标签：img input

　　　　能给宽高，共处一行

　　嵌套规则：

　　　　块：能套块标签和行内标签。但是p比较特殊，它不能再包含其他的块标签。

　　　　行内：只能嵌套行内标签。

　　IE6不支持块的inline-block

      html语义化：该用什么标签就用什么标签，用大包住小，不要为了实现样子，就乱用标签。不要为了css而改变HTML

11、什么时候用图片

　　图片作为网页中的内容出现时，用img

　　图片作为修饰(可有可无)时，用background

12、ul无序列表，ol有序列表，<dl><dt>标题</dt><dd>内容一</dd><dd></dd></dl>描述列表  

13、　盒模型：width+padding+border， margin不是盒模型的一部分

　　注意：行内标签的margin和padding是不完整的，只有左右没有上下。

　　块margin塌陷

　　　　下边元素的margin-top，上边元素的margin-bottom，中间的距离是margin-top和margin-bottom最大的。

　　　　注意：塌陷只存在于上下！左右margin没事

14、margin-top合并

　　父级的margin-top和子级的margin之间没有border，padding，就会发生合并，父级和子级一起拥有margin-top

　　解决问题：

　　　　1、父级加一个border

　　　　2、父级加padding-top（推荐）  height（其次）

　　　　3、父级overflow：hidden（推荐）

　　能用padding(推荐)，就是用padding，因为margin会有一些问题。

15、浮动：

　　浮动特性：

　　　　1、浮动后脱离文档流

　　　　　　其他元素当浮动的东西不存在，占据浮动元素的位置

　　　　2、文本环绕

　　　　3、浮动能让块到一行

　　　　4、浮动是有顺序的left、right

　　　　5、浮动后，父级宽度不够会被挤下来

　　　　6、浮动后，被挤下来的元素会跟着最高的元素走

　　　　7、浮动后，行内变块（能给宽高）

浮动三要素：

　　　　1、有一个元素浮动，同级元素都要浮动

　　　　2、有浮动，就必须清除浮动

　　　　3、浮动的元素，必须要有宽度（最好有宽度，虽然有时候不加宽度也没事儿）

16、无语意标签：i、b、span等。

17、