css基础知识

一、css部分样式

1.font-weight:bold; //粗体

2.font-style:italic;//斜体

3.text-decoration:underline;//下划线

4.test-decoration:line-through;//删除线

5:text-indent:2em;//文字缩进

6:line-height:2em;//行间距（行高）

7:letter-spacing:50px;//文字间距

8:word-spacing:50px;//英文单词间距

9:text-align:center;//块状元素 对齐：left、top、right、bottom、center；

二、元素分类

css中，html中的标签元素大体被分为三种不同的元素：块状元素、内联元素（行内元素）、内联块状元素；

1.块状元素特点：

常用块状元素有：

、

、

-

、

、
、

、、

、

、

设置display：block就是将元素显示为块级元素；

每个块状元素都从新的一行开始，并且其后的元素也另起一行；

元的的高度、宽度、行高、以及顶和底边距都可设置；

元素宽度在不设定的情况下，是它父容器的100%，除非设定一个宽度；

2.内联元素特点：

常用内联元素有：、、
、、、、、、、、

设置display：inline 将元素设置为内联元素；

和其他元素都在一行上；

元素的高度、宽度、及顶部和底部边距不可设置；

元素的宽度就是它包含的文字或图片的宽度，不可改变；

3.内联块状元素

常用的内联块状元素有：、

设置display：inline-block 将元素设置为内联块状元素；

和其他元素都在一行上；

元素的高度、宽度、行高以及顶和底边距都可设置；

三、盒子模型

padding 盒子内填充、margin 盒子外边距、盒子边框border；

border-style(边框样式):dashed（虚线）、dotted（点线）、solid（实线）；

border-color(边框颜色)；

border-width（边框宽度）；

border-bottom\top\left\right（指定边框方向）;




四、css布局模型


1.流动模型(flow)

是默认的网页布局模式；

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布；

内联元素都会在所处的包含元素内从左到右水平分布显示；

2.浮动模型（float）

任何元素在默认情况下是不能浮动的，

但是可以用css定义为浮动，如div、p、table、img等元素都可以被定义为浮动，

这样块状元素就能一行显示了；float:left；

3.层模型

绝对定位（position：absolute） left:100px,top:20px; 相对于外容器做绝对定位移动；

相对定位（position：relative） 相对于自身做定位移动；

固定定位（position：fixed）相对于body窗口作为定位移动；拖动时位置固定不变；

relative与absolute组合使用， 通过父元素div设置postion：relative  后 ，

子元素div 设置position：absolute后，通过top、等设置相对位置定位；

4.字体缩写

body{

    font-style:italic;

    font-variant:small-caps;

    font-weight:bold;

    font-size:12px;

    line-height:1.5em;

    font-family:"宋体",sans-serif;

}

body{

    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;

}

p{font-size:12px;text-indent:2em;} 2em=24px 的首行缩进；

水平居中设置-行内元素：给父元素设置 text-align:center;

水平居中设置-定宽块状元素：条件1：元素有固定width 条件2：设置margin-left和margin-right：auto；  margin:20px auto;

水平居中-不定宽块状元素方法（1）：

加入table标签 设置margin：0 auto；实现

  table{

    margin:0 auto;

}

设置我所在的div容器水平居中

水平居中-不定宽块元素方法（2）：

将块元素的display类型设置为inline，变成行内元素，设置父元素属性：text-align:center；

水平居中-不定宽块元素方法（3）：

父容器设置 float:left; position:relative;left:50%; 

子容器设置 position:relative;left:-50%;

垂直居中-父元素高度确定的单行文本(1):

父容器设置height：100px；