CSS基础 和 font字体、背景属性连写 与 清除浮动方法

1.伪类
　　1. :link
　　2. :visited
　　3. :hover(重要)
　　4. :active
　　5. :focus(input标签获取光标焦点)

2.伪元素
　　1.:first-letter
　　2.:before(重要在内部前面添加)
　　3.：after(重要 在内部后面添加)

一、CSS

1.css属性

　　1.字体

　　字体居中：

.font-dv {
　　　　font-size: 20px;
　　　　font-family: "微软雅黑";
　　　　font-weight: 700;
　　　　font-style: italic;
　　　　border: 1px solid red;
　　　　height: 100px;
　　　　line-height: 100px;
　　　　text-align: center;
　　　}

　　font字体连写

　　- 语法：font:font-styel font-weight font-size/line-height font-family;
　　
　　- PS: 框高=行高 字体垂直居中
　　- 代码：font连写：font: italic 700 20px/100px "微软雅黑";
　　

1 .font-dv{
2 　　　　height:100px
3 　　　　font: italic 700 20px/100px "微软雅黑";
4 　　　　border:1px solid red;
5 　　　　text-align: center;
6 　　}

2.文本属性
　　1.text-align 对齐（重要）
　　2.text-decoration装饰（去除a标签的下划线(text-decoration:none）
　　3.text-indent 首行缩进
3.背景属性
　　1.background-color 背景颜色
　　2.background-image 背景图片（XXX） url（） no-repeat 50% 50%

　　background-color
　　背景颜色

　　background-image
　　背景图片

　　background-image：url（图片地址）

　　background-repeat
　　背景平铺
　　　　值：repeat(默认) | no-repeat | repeat-x | repeat-y

　　background-position
　　　　背景定位
　　　　值：left | right | center | top | bottom

　　　　background-position-x: left | right | center

　　　　background-position-y: center | top | bottom

　　★方位值只写一个的时候，另外一个值默认居中。
　　　　background-position:right center;
　　　　background-position:center; --> center center;

　　★写2个方位值的时候，顺序没有要求。
　　　　background-position:20px 30px;

　　★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。
　　　　background-position:right center;

　　　　background-attachment
　　定义：设置背景图像是否固定或者随着页面的其余部分滚动。
　　　　值：scroll | fixed

　　背景属性连写：
　　　　background: url("../content/images/top.jpg") no-repeat center top;

4.color
　　1.red
　　2.#FF0000
　　3.rgb(255,0,0) -->rgb(255,0,0,0.5)
5.边框属性 border
　　1.border-width(边框宽度)
　　2.border-style(边框样式)
　　3.border-color(边框颜色)
　　简写：
　　　　border:1px solid red;
6.css盒子模型
　　1.content(内容)
　　2.padding(内填充) 调整内容和边框之间距离时使用这个属性
　　3.border(边框)
　　4.margin(外边框) 多用于调整标签之间的 距离
　　注意：要习惯看浏览器console窗口那个盒子模型
7.display(标签的展现形式)
　　1.inline
　　2.block 菜单里面的a标签可以设置成block
　　3.inline-block
　　4.none(不让标签显示，不占位)
8.float(浮动)
　　1.多用于实现布局效果
　　　　1.顶部的导航条
　　　　2.页面左右分栏（博客页面：左边20% 右边80%）
　　2.float
　　　　1.任何标签都可以浮动，浮动之后都会变成块级 a标签float之后就可以设置高宽
　　　　3.float取值：
　　　　　　1.left
　　　　　　2.right
　　　　　　3.none

9.clear清除浮动--》清除浮动的副作用（内容飞出，父标签撑不起来）
　　1.结合伪元素来实现
　　

.clearfix:after{
　　　　content:"";
　　　　display:"block";
　　　　clear:both;
　　}

　　2.clear取值：
　　　　1.left
　　　　2.right
　　　　3.both
10.overflow
　　1.标签的内容放不下（溢出）
　　2.取值：
　　　　1.hidden-->隐藏
　　　　2.scroll-->出现滚动条
　　　　3.auto
　　　　4.scroll-x scroll-y
　　　　列子：
　　　　　　圆形头像的列子
　　　　　　1.overflow：hidden
　　　　　　2.border-radius:50%(圆角)

　　当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。

　　总结：哪个容器的子元素有浮动，那么父容器必须要清浮动!

　　◆清除浮动不是不用浮动，清除浮动产生的不利影响。

　　◆清除浮动的方法

　　　　语法：clear: left | right | both

　　　　工作里用的最多的是clear:both;

　　★额外标签法
　　　　在最后一个浮动元素后添加标签,然后标签中加clear:both;。

　　★给父集元素使用overflow:hidden;(如果有内容出了盒子，不能使用这个方法)

　　★伪元素清除浮动 推荐使用<ul class="nav-ul clearfix">

clearfix:after {
　　content: " ";
　　/*both:left+right*/
　　clear: both;
　　height: 0px;
　　display: block;
　　visibility: hidden;
　　}
<ul class="u1 clearfix" style="overflow:hidden">
<li class="nav-cell">秒杀</li>
<li class="nav-cell">优惠券</li>
<li class="nav-cell">PLUS会员</li>
<li class="nav-cell">闪购</li>
<!-- 第一种：使用而外标签 -->
<!-- <li style="clear:left;"></li> -->
</ul>

11.定位position
　　1.static(默认)
　　2.relative(相对定位-->相对于原来的位置)
　　3.absolute(绝对定位-->相对于定位过的前辈标签)
　　4.fixed(固定-->返回顶部按钮实例)
　　补充：
　　　　脱离文档列的3中方式
　　　　float
　　　　absolute
　　　　fixed
12.opacity(不透明度)
　　1.取值0~1
　　2.和rgba()的区别：
　　　　1.opacity 改变元素\子元素的透明度效果
　　　　2.rgba()只改变北京颜色的透明度效果
13.z-index
　　1.数值越大，越靠近你
　　2.只能作用于定位过的元素