前端编程笔记1-css(1)

1.     网页字体常用12px

2.     css的标准流/非标准流

标准流：默认布局方式

非标准流：某个元素脱离它本身的位置

3.     css盒子模型原理分析图

margin边距

border 边框

padding 填充

content 内容

（1）   html元素都可以看成一个盒子

（2）   盒子模型的参照物不一样，则使用的css属性不一样

（3）   尽量使用margin布局，padding会改变盒子大小（相当于盒子有弹性），margin过大，盒子内容会被挤到盒子外，盒子本身没有变化

4.     css属性放在后面优先级高

5.     form

post方式提交不会在地址栏显示参数

6.     css选择器

l  类选择器 .style{}

l  id选择器 #style2{}

l  html选择器 body{}

l  通配符选择器*{}

优先级：id>类>html>通配符

父子选择器

l  子选择器标签是html标签

l  id 选择器和类选择器可以构成父子选择器

l  父子选择器可以有多种

class=”style1style2”

style1与style2发生冲突时，以.css文件里写在后面的选择器为准

7.     行内元素，内联元素(inlineelement)  span, a, img

块元素(block element) div p

行内元素特点：只占内容宽度，默认不换行

块元素特点：不管内容多少，换行，同时占满整行，使用浮动可以控制

行内元素内不要放块元素

一些css属性对行内元素无效（与浏览器有关）尽量使用块元素定位布局

8.     浮动float

float:left;

两层概念：（1）把右边的空间让出来（2）寻找左边界

9.     定位position

static:默认值

relative:相对自己原来的位置，原本占有的空间被保留

absolute:元素从原来的位置脱离，后面的元素占用让出的空间, 生成绝对定位的元素，相对于 static 定位以外(非标准流盒子)的第一个父元素（离自己最近的）进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed:只针对body定位

例：

#special{

       position:relative;

       left:40px;/*在原来的位置上向右移动*/

       top:100px;/*在原来的位置上向下移动*/

}

#special{

position:absolute;

left:40px;

top:100px;

}