CSS基础知识总结

CSS基础知识总结

1、使用CSS

<style> type=”text/css”>
</style>

2、CSS的优势是容易修改样式.<span>标签与CSS搭配起来使用能够较好地修改格式。

CSS中除了在<style>标签中编码选择器外，也可以在html本身的标签中使用属性<style=“ ”>来设置CSS格式。

3、外部CSS的使用

<link href=” ” ref=”stylesheet” type=”text/css”>

4、CSS的优先级

基本原则是就近原则；因此在书写是一般讲外部式放在最前；
在有相同权值的情况下，优先顺序是内联式>嵌入式>外部式。

选择器的类型包括标签选择器、类选择器、ID选择器。
1.ID选择器只能在文档中使用一次。
2.可以使用类选择器词列表方法为一个元素同时设置多个样式，但ID选择器不能。

5、CSS的其他选择器

• 子选择器 .选择器名称>标签名称
• 包含选择器 .选择器名称 标签名称（包含选择器作用于所有后代；而子选择器作用于直接后代）
• 通用选择器 *{CSS内容}；作用于所有标签
• 伪类选择器 表示标签的某种状态，如a：hover{}是所有浏览器兼容的伪类选择器
• 分组选择符 用逗号将不同的选择器分隔以设置相同的格式
• 不同选择器的应用根据权值来使用，权值高的优先；标签权值为1、类选择符为10、ID选择符为100；!important为设置最高权值

6、CSS的文字排版

字体：font-family:”Microsoft Yahei”;
字号：font-size；
颜色：color；
粗体：font-weight:bold；
斜体：font-style:italic / normal / oblique / inherit；

7、盒模型

1)边框
border-width；border-style:dashed、dotted、solid；border-color；
可以分别设置边框的上下左右；
2)高度和宽度
高度使用height、宽度使用width；盒模型的宽度等于margin+border+padding+width；margin、padding的定位顺序是上、右、下、左

8、布局模型

1）流动模型
默认的网页布局模型；块状元素从上到下垂直排列、内联元素从左到右水平排列；
2）浮动模型float
使多个块状元素可以并排显示
3)层布局
类似于图层一样，position:absolute、relative、fixed
绝对定位：使用left、right、top、bottom实现相对于父包含块的偏移
相对定位：相对于以前位置的偏移，但偏移前的位置保留不动
固定定位：固定在窗口某一位置不变，不会随滚动条的拖动而变化

9、居中设置

1.文本、图片的水平居中：text-align：center；
2.块状元素的居中需要将margin的left、right值设置为auto
3.不定宽块状元素的居中方法：
    1）使用table标签；
    2）设置display：inline；
    3）设置position：relative、left：50%和float：left（父元素）；子元素设置为position：relative和left：-50%
4.垂直居中
    1）父元素高度确定的单行文本垂直居中：将height和line-height设置为同样高度即可 。（垂直居中指的是内容到元素顶部和底部的距离相同）
    2）父元素高度确定的多行文本垂直居中：插入table（包括tbody、tr、td），并设置vertical-align：middle；或者使用display：table-cell与vertical-align：middle；
5.隐式改变display类型
    当为元素设置display：absolute或者float：left、float：right时，display会隐式转化为inline-block，此时可以设置元素的width和height。