css相关重点知识

1，前端的三大组成（三大模块）
HTML(超文本标记语言) 结构层
CSS（层叠样式表） 表现层： 用来美化html结构
JavaScript（脚本语言） 行为层：提供用户和界面的交互

*Div：没有具体的含义（主要用来页面的布局中，替代了原始的table和框架布局

2，CSS的概念以及介绍
CSS（层叠样式表）
作用： 美化html结构，重点（css可以很好的将结构和表现进行分离）
CSS的语法结构： 选择器{属性：属性值；属性：属性值…}
3，CSS的三种表现形式
(1)行内样式:通过style属性将样式写入标签中，它又叫内联样式。
(2)内嵌样式:通过style标签将样式写入head中。
语法格式：选择器{属性：属性值；属性：属性值……}
(3)外联样式/外部样式:通过link标签引入外部css文件夹.CSS文件到head中
4.CSS颜色的表现形式
（1）直接写颜色名称（如red，blue，green等）
（2）使用rgb 红绿蓝三色来设置，其中rgba可设置图片的透明度（如background: rgb(76,60,40); background: rgba(76,60,40,0.8);）
(3)使用16进制的方式表示颜色，eg:（如background：#000000）
5.选择器有七种.
（1）标签选择器（如table，a，div等）
常用属性：
text-decoration:none;设置去掉下划线
text-decoration:underline;设置添加下划线
text-decoration:overline;设置添加上划线
background-size：100% 100%;设置100%填充，在style中加空格
background-size：100%,100%;设置100%填充，在body中设置背景图片加逗号
margin：10px auto;设置水平居中
border-collapse：collapse;设置表格的边框合并
list-style:none;去掉无序列表的点
（2）id选择器 取id名 #名字
（3）类选择器 取class名 .名字
（4）子代选择器 父代>子代
（5）后代选择器 父代空格后代
（6）组合选择器/组选择器
（7）伪类、伪元素选择器
A：link 未访问 A：visited访问过 A：hover未点击 A：active点击后

• 顺序很重要（link和visited必须写到hover之前），active必须写到hover之后。
  Css三种样式的默认优先级：行内样式>内嵌样式>外联样式
  Css三种样式权重/可以改变优先级: !important
  6.盒子模型

盒子模型中重要的元素: Content(内容) Padding(内边距) Border(边框) Margin(外边距)
***上右下左
*Margin-top塌陷的产生:
一个元素中含有一个子元素,给子元素设置Margin-top时,会发现将设置的值添加给了父元素, 所以子元素的Margin-top设置失效;
Margin-top塌陷解决办法:
(1) 给父元素添加属性overflow:hidden
(2) 给父元素添加边框
(3) 使用伪元素类
7.元素溢出
元素溢出的产生: 一个元素中含有其他元素,而其他元素超出了这个元素(父元素),我们把这种情况称之为元素溢出
解决方式: 使用属性overflow
Overflow:hidden 设置溢出的内容裁剪(隐藏), 但是并不会在父元素中显示被裁剪的内容;
Overflow: visible 默认值，内容不会被修改，会显示在元素框之外
Overflow: scroll 设置该属性，内容会被裁剪，但会添加滚动条以便显示被裁剪的内容。
Overflow:auto 如果内容被裁剪，则浏览器会显示滚动条以便查看其余内容

8.块元素、内联元素、内联块元素布局中常见的三种标签
(1)块标签/元素 : 元素会占据文档流的一行显示,即便设置了宽高也会占据一行显示.
(2)内联标签/元素: 元素的大小会跟随元素内容的改变而改变, 设置了宽高 也不会改变元素的大小. 同时不会占据文档流的一行显示, 从左往右编写执行.
(3)内联块标签/元素: 既具备块元素设置宽高的属性也具备内联元素不会占据一行的属性;

9.display属性:可以将内联元素转换成内联块元素/块元素同时也可以将内联块元素转换成内联元素/块元素还可以将块元素转换成内联元素/内联块元素.
display属性的值有如下:none: 元素隐藏不显示
inline: 表示的是内联元素
block:表示的是块元素,并显示元素
inline-block: 表示内联块元素
10.浮动概念：所谓的浮动就是指元素脱离文档流，漂浮到文档流的上方，不会占据位置。
在网页布局 中浮动分为两种：
Float：left 表示左浮动
Float：right 表示右浮动

**浮动会将块元素/内联元素自动转换成一个内联块元素
11.浮动七大特性:
(1)浮动元素有左浮动(float:left)和右浮动(float:right)两种
(2)浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素 才停 下来
(3)相邻浮动的块元素可以并在一行，超出父级宽度就换行
(4)浮动让行内元素或块元素自动转化为行内块元素
(5)浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的 文字 会避开浮动的元素，形成文字饶图的效果
(6)父元素内整体浮动的元素无法撑开父元素，需要清除浮动
(7)浮动元素之间没有垂直 margin 的合并
12.定位(position)
定位: 设置元素在html文档流中的位置设置元素的定位方式之后, 要想进行位置偏移,那么就必须设置属性left,top,right,bottom.

(1)可以使用 css 的 position 属性来设置元素的定位类型，postion 的设置项如下：
relative 生成相对定位元素，元素所占据的文档流的位置不变， 元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的 位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对 或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相 对于 body 元素进行定位。

fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置， 可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static 默认值，没有定位，元素出现在正常的文档流中，相当于 取消定位属性或者不设置定位属性 inherit 从父元素继承 position 属性的值

(2)定位元素特性:绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
(3)定位元素层级:定位元素是浮动的正常的文档流之上的，可以用 z-index 属性来设置 元素的层级.

13. css中元素对齐的方式
    一个div(父元素)中嵌套了另一个div(子元素),在子元素中设置垂直居中
    设置文字的垂直居中
    设置图片的垂直居中
    ***** 清除浮动:
    给父元素添加overflow:hidden;
    给子元素(浮动元素)的后面加一个空的元素,并给他设置clear:both;
    通过伪对象的方式:after; :before和content一并使用