前端基础之CSS（总结）

css学什么??

主要学习选择器和属性，选择器是去找到标签的位置，属性是给标签增加需要的样式。

CSS选择器

1.基本选择器：

1.标签选择器

2.ID选择器

3.类选择器(class="c1 c2  ...")

2.通用选择器(*)

3.组合选择器

1.后代选择器(空格)

2.儿子选择器(>)

3.毗邻选择器(div+p) 用的时候感觉有点问题

4.弟弟选择器 （~）

4.属性选择器

1.[s9]

2.[s9="hao"]

3.其他不常用的

5.分组和嵌套

1.分组(用逗号分隔的多个选择器条件)

2.嵌套(选择器都可以组合起来使用)

6.选择器的优先级

1.选择器相同，越靠近标签的优先级越高(就近原则)

2.权重的计算

1.内联样式1000

2.ID选择器100

3.类选择器10

4.元素选择器1

伪类和伪元素

1.伪类

1.   : link

2.  : visited

3.   : hover(重要)

4.   ：active

5.   ：focus（input标签获取光标焦点）

2.伪元素

1.  ：first-letter

2.  ：before（重要 在内部前面添加）

3.   ：after（重要 在内部后面添加）

css属性

1.字体

1.font-family

2.font-size

3.font-weight

2.文本属性

1.text-align 对齐(重要)

2.text-decoration 装饰（去除a标签的下划线）

3.text-indent 行首缩进

3.背景属性

1.background-color  背景颜色

2.background-image  背景图片

4.color

1.red (直接写颜色)

2.#FF0000

3.rgb(255,0,0)   -->  rgba(255,0,0,0.5)

5.边框属性border

1.border-width （边框宽度）

2.border-style（边框样式）

3.border-color   （边框颜色）

一般情况都用简写：border：1px solid red;

css盒子模型

1.content （内容）

2.padding（内填充）调整内容和边框之间距离时使用这个属性

3.border（边框）

4.margin（外边框）多用于调整标签之间的距离

注意：要习惯看浏览器console窗口那个模型

display （标签的展现形式）

1. inline

2.block  菜单里面的a标签可以设置成block

3.inline-block

4.none （不让标签显示，不占位）

float（浮动）

1. 多用于实现布局效果（1.顶部的导航条，2.页面左右分栏）

2.float：任何标签都可以浮动，浮动之后都会变成块级  （a标签float之后就可以设置高和宽）

3.float取值

1. left

2.right

3.none

clear 清除浮动  >>>  清除浮动的副作用 （内容飞出，父标签撑不起来）

1.结合伪元素来实现

.clearfix：after {

content：“”；

display：“block”；

clear：both；

}

2.clear取值  >>>  left   right   both

overflow

1.标签的内容放不下(溢出)

2.取值：

1.hidden  ---->  隐藏

2.scroll    ----->  出现滚动条

3.auto

4.scroll-x

5.scroll-y

定位 position

1.static(默认)

2.relative(相对定位 --> 相当于原来的位置)

3.absolute(绝对定位  -->  相当对于定位过的前辈标签)

4.fixed （固定 ---> 返回顶部按钮示例）

脱离文档流的3种方式

float

absolute

fixed

opacity(不透明度)

1.取值0~1

2.和rgba()的区别：

1.opacity改变元素\子元素的透明度效果

2.rgba()只改变背景颜色的透明效果

z-index

1.数值越大，越靠近你

2.只能作用于定位过的元素

3.自定义的模态框示例