【专业技术】CSS知识点总结

1、CSS指层叠样式表(Cascading Style Sheets)

2、使用CSS样式常见的三种方式： 1)<link href=".........." rel="stylesheet" type="text/css"/>

2)<style type="text/css">...................</style>

3)<div style=’.......’></div>

3、CSS层叠样式默认规则后者覆盖前者，特殊情况除外—!important优先级最高，高于上面一切。* 选择器最低，低于一切。；例：#Box {color:red !important;color:blue;}

4、块级元素及行内元素

1） 块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

2） 行内元素会在一条直线上排列，都是同一行的，水平方向排列

3）块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

4）行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效,margin上下无效，padding上下无效。

用一句话概括就是：块级元素不论内容有多少只要有两个元素就会换行， 如果有两个行内元 素则会以并排的形式展示不会换行。

5、块级元素：div、dl、dt、dd、h1-h6、form、hr、ol、p、ul

6、行内元素：a、b、br、img、input、label、select、span、textarea、sub、sup

7、行内元素转块级元素的方法：display:block、display:table

8.选择器

1）元素选择器：html {color:black} p{color:gray} h2{color:red}

2）类选择器：.important {font-weight:bold;} .warning {font-style:italic;}

3）ID选择器：#intro {font-weight:bold;}

4）属性选择器：img[alt] {border: 5px solid red;}

5）后代选择器：h1 em {color:red;}

6）子元素选择器：h1 > strong {color:red;}

7）相邻兄弟选择器：h1 + p {margin-top:50px;}

8）伪类选择器：a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}

9) 伪元素选择器：p:first-line {color: #ff0000;} 注：:before和:after 非常常用。

1. 盒子模型（它的整个宽度包括（内容宽度 + border宽度 + padding宽度 + margin宽度），整个的宽度充满父容器）

例子：padding，border和margin，即内边距、边框、外边距。他们三者就构成了一个“盒子”。就像我们收到的快递，本来买了一个小小的iphone，收到的确实那么大一个盒子。因为iphone白色的包装盒和iphone机器之间有间隔层（内边距），iphone白色盒子有厚度，虽然很薄（边框），盒子和快递箱子之间还有一层泡沫板（外边距）。这就是一个典型的盒子。

例子：

1. 清除Folat(浮动)

1. 为父元素添加overflow：hidden
2. 浮动父元素
3. Clear:both;
4. display 常用属性：none、block、inline、inline-block、inherit

例：

1)list-item：通过它可以模拟li列表样式；

2)table：也是一个“块”，但和block相比，table具有包裹性；

3)able-cell：最新的多列布局解决方案；

12.position

1）static(默认)：部队浏览器做改变

2）relative：relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化

3）absolute：首先寻找该元素的所有父元素，如果找到一个设置了position:relative、absolute、fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位

4）fixed：fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。