CSS基本样式简单介绍

具体详情内容请查阅《css参考手册》

一、基本结构样式

width 宽度

height 高度

background 背景

border 边框

padding 内边距

margin 外边距

其中，width，padding，margin如果使用百分数进行设置，实际上以自己的父盒子的宽度进行参考。border 不能用 百分比设置。

未设置 box-sizing时：

        盒子宽度 = width + 左右padding + 左右border;

设置 box-sizing : border-box 后：

        盒子宽度 = width;

二、背景样式

background-attachment: fixed; 背景是否滚动

background-color: gray; 背景颜色

background-image: url(bg.jpg);  背景图

background-repeat: no-repeat; 背景图是否重复

background-position: center 0px; 背景图位置

复合写法：

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

三、边框样式

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: dotted;

border-right-style: dotted;

border-bottom-style: dotted;

border-left-style: dotted;

border-top-color: blue;

border-right-color: blue;

border-bottom-color: blue;

border-left-color: blue;

复合写法：

border: 1px solid red;

四、字体和文本样式

font-size           文字大小（一般均为偶数）

font-family         字体（中文默认宋体）

color               文字颜色（英文、rgb、十六位进制色彩值）

line-height         行高

text-align          文本对齐方式

text-indent         首行缩进（em缩进字符）

font-weight         文字着重

font-style          文字倾斜

text-decoration     文本修饰

letter-spacing      字母间距

word-spacing        单词间距（以空格为解析单位）

五、块和内联

块 ：显示一行

内联 ：宽度和高度依赖文本的宽高

display : inline-block/block

inline-block的特性：

    1) 使块元素在一行显示

    2) 使内嵌支持宽高

    3) 换行被解析了

    4) 不设置宽度的时候宽度由内容撑开

六、浮动样式（float）

描述：元素加了浮动，会脱离文档流 ，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止

属性值：left/right/none

特性：

    1) 使块元素在一行显示

    2) 使内嵌支持宽高

    3) 不设置宽度的时候宽度由内容撑开

    4) 脱离文档流

    5) 提升层级半层

注：文档流是文档中可显示对象在排列时所占用的位置

七、定位（position）

属性值：relative/absolute/fixed

relative特性：

    1) 不影响元素本身的特性；

    2) 不使元素脱离文档流；

    c) 如果没有定位偏移量，对元素本身没有任何影响；

absolute特性：

    1) 使元素完全脱离文档流；

    2) 使内嵌支持宽高；

    3) 块属性标签内容撑开宽度；

    4 )如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；

    5) 相对定位一般都是配合绝对定位元素使用；

fixed特性（IE6不支持）：

    与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；

 定位的层级：

    使用 z-index:[number]  number越大 层级越高

注：

    absolute 和 relative 没有 对应关系。

八、滤镜样式

标准（w3c）   不透明度  opacity:0~1;

IE私有             filter:alpha(opacity=0~100);

九、表格样式（table）

1) 不要给table,th,td以外的表格标签加样式；

2) 单元格默认平分table 的宽度

3) th里面的内容默认加粗并且左右上下居中显示

4) td里面的内容默认上下居中左右居左显示

5) table 决定了整个表格的宽度；

6) table里面的单元格宽度会被转换成百分比；

7) 表格里面的每一列必须有宽度；

8) 表格同一竖列继承最大宽度；

9) 表格同行继承最大高度；

巴特西

CSS基本样式简单介绍

一、基本结构样式

二、背景样式

三、边框样式

四、字体和文本样式

五、块和内联

六、浮动样式（float）

七、定位（position）

八、滤镜样式

九、表格样式（table）

最新文章

热门文章

巴特西

CSS基本样式简单介绍

一、基本结构样式

二、背景样式

三、边框样式

四、字体和文本样式

五、块和内联

六、浮动样式（float）

七、 定位（position）

八、滤镜样式

九、表格样式（table）

最新文章

热门文章

七、定位（position）