初识CSS总结

一、什么是CSS？

1、CSS的定义

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2、CSS的主要作用

1. 布局

• 盒子模型
• 块级元素并排显示

2. 美化

• 字体设置
• 文本设置
• 列表设置
• 表格设置

二、盒子模型

一张网页就是一堆的盒子堆积起来的。盒子就是标签，都是矩形。

盒子的分类

盒子可以分为三类：

• 块级元素

  独占一行。
  

• 行内元素

  并排显示。
  

• 行内块元素

  可以并排显示，且具有块级元素的所有特点。
  

盒子模型的六大属性

1. 内容区域：width 和 height

• 块级元素

可以设置width和height，表示内容区域。

• 行内元素

width和height不起作用

2. 内填充区域： padding

用来设置内填充，也称补白。表示内容区域和边框之间的距离 

• 块级元素

上下padding可以撑起块级元素盒子的高度

• 行内元素

padding在垂直方向上不影响行高

3. 边框： border

• border-width

设置边框的宽度

• border-style

设置边框的样式

• border-color

设置边框的颜色
border是一个复合属性
通常使用

.box{
border:1px solid red;
}

4. 外填充区域：margin

表示外边距,盒子与盒子之间的距离,是边框之外的间隔。

• 设置盒子水平居中

.box{
margin:0 auto;
}

• 块级元素

margin有重叠问题

• 行内元素

margin在垂直方向上无效

5. 背景： background

• background-color

设置盒子的背景颜色

• background-image

设置盒子的背景图片

• background-repeat

控制背景图片是否平铺

• background-position

背景图片定位

三、字体和文本设置

字体设置

• font-style

设置字体是否倾斜

• font-weight

设置字体是否加粗

• font-size

设置字体大小

• font-family

设置字体类型

font是一个复合属性

• color

设置字体颜色

文本设置

• text-decoration

用来设置文本的装饰线

把a标签的默认的下划线去掉

a {
text-decoration:none;
}

• text-indent

首行空两格

• text-align

1）让盒子中的文本居中
2）让行内元素或行内块元素在一个盒子中居中

• line-height

设置行高

四、浮动布局

浮动的初衷：为了实现新闻的字围效果。

浮动的主要作用

  使用浮动来让块级元素并排显示。

浮动的特点

• 贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
• 包裹性 如果是一个块级元素，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
• 一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
• 如果一个行内元素浮动了，就可以设置宽度和高度。

清除浮动的影响

• 清除对父元素造成的影响

• 使用overflow:hidden

.box{
overflow:hidden;
}

• 对父元素添加高度

• 清除对兄弟元素造成的影响

• 使用clear:both

.box2{
clear:both;
}