了解掌握CSS

1.CSS简介

CSS作为网页的表现

CSS是层叠样式表，不属于编程语言

CSS英文全称：Cascading Style Sheet

 

2.CSS常见属性

text-align：文字的水平对齐方式；常见值：center、left、right；

vertical-align：元素的垂直对齐方式；常见值：text-top；text-bottom；middle；

font-size：字体大小

 

3.CSS选择器

（1）元素选择器

通过元素名选择

 

（2）id选择器

只能在元素中唯一命名，不能重复

使用+id值选中

 

（3）类/class选择器

可以重复命名，通过+类名选中

一个元素可以使用多个类名，用空格隔开

 

（4）伪类选择器

一个特殊的类，表示元素的特殊状态

点击时效果，鼠标引入时效果

选择器：伪类名

frist-child:同类元素中的第一个元素

nth-child：选择同类元素中的指定

last-child：同类元素中的最后一个元素

n表示0到正无穷

2n表示偶数

 

4.display展示

用于控制HTML元素的显示效果。

 

值   意义

display:"none"  HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。

display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。

display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。

display:"inline-block"    使元素同时具有行内元素和块级元素的特点。

5 边框属性
border-style 设置4个边框的样式。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
dashed 定义虚线。
none 定义无边框。

6. 盒子模型

​ 网页就是由许多个盒子通过不同的排列方式堆积而成，网页上每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容，填充，边框，边界组成。默认盒子边框无，背景色透明，默认看不到盒子

6.1 盒子模型

​ margin 外边距，定义区块外边界与上级元素距离的属性，值为长度

​ padding 内边距（填充），是设置区块的内边距的属性，是边框和元素内容之间的间隔距离

​ border 边框(注意边框是有内外俩条边界的)

​ width 盒子的宽度

​ height 盒子的高度

​ 内容 盒子里面所包含的元素和内容

​ 属性值：

​ 1个：上下左右都是该值

​ 2个：前者表示上下的值，后者表示左右的值

​ 3个：前者表示上边的值，中间表示左右的值，后者表示下边的值

​ 4个：上右下左，顺时针排序

6.2不同浏览器解析盒子模型的差异

​ IE5盒子 width = 内容 + border + padding

​ 盒子占据的宽度 = margin2+width

​ 盒子占据的高度 = margin2+height

​ 盒子实际的宽度 = width

​ 盒子实际的高度 = height

​ W3C盒子 width = 内容

​ 盒子占据的宽度 = margin2+border2+padding2+width

​ 盒子占据的高度 = margin2+border2+padding2+height

​ 盒子实际的宽度 = border2+padding2+width

​ 盒子实际的高度 = border2+padding2+height