前端入门到熟悉day03

01为什么要清除浮动

浮动会产生“高度塌陷”

 

02伪元素选择器

:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

 

03工具样式清除浮动

.clearfix{

clear: both;

/*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/

}

<div class="clearfix"></div><!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->

 

04overflow 清除浮动

overflow: hidden;

/* 别加错位置 给父元素添加 */

 

05after伪元素清除浮动

.clearfix:after{

content: "";

clear: both;

display: block;

height: 0;

visibility: hidden

}

.clearfix{

zoom:1; （这个好像是放大的意思）

/*zoom 1 就是ie6 清除浮动的样式 */

}

 

06双伪元素清除浮动

.clearfix:before, .clearfix:after{

content: "";

display: table;

}

.clearfix:after{

clear: both;

}

 

07父亲没有定位

/* 若所有父元素都没有定位 以浏览器当前屏幕为准去定位 */

 

08父元素有定位实战

/* 若有父元素都没有定位 以父亲为准去定位 */

 

09定位的盒子居中对齐

left: 50%;

top: 50%;

margin-left: -1/2width;

margin-top: -1/2height;

 

10淘宝轮播图

主要运用绝对定位和相对定位

 

11固定定位广告

主要运用position:fixed 固定定位

 

12显示隐藏

 display: none;隐藏某个元素 不保留位置 block 显示某个元素

inline：将一个元素作为内联样式来显示

   block：将元素以块元素显示

   inline-block：既有内联样式的特点又有块元素的特点

 visibility: visible; 显示某个元素

visibility: hidden; 隐藏某个元素 保留位置

 

13视频播放

运用相对定位和绝对定位以及伪类:hover

 

14溢出隐藏

overflow的可选值

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

 

15文字溢出省略号

overflow: hidden;

/* 溢出隐藏 */

text-overflow: ellipsis;

/* 溢出部分用省略号代替 */

white-space: nowrap;

/* 强制在同一行内显示内容 直到文本结束或者遭遇到br标签对象才换行*/

（三个缺一不可）

16鼠标样式

<li style="cursor: default;">我是小白</li>

<li style="cursor: pointer;">我是小手</li>

<li style="cursor: move;">我是移动</li>

<li style="cursor: text;">我是文本</li>

 

17轮廓线

outline: none;

/* 取消轮廓的做法 */

resize: none;

/* 防止拖拽 */

outline: none;

/* 取消默认的蓝色的轮廓 */

 

18精灵图

 <!-- 雪碧图  Css Sprite

        怎么把多张图片合成我们的雪碧图 ： CssGaga(软件)

      优点：

          1.把多张图片集成到一张设计稿里面 =》 压缩了我们的项目体积 =》用户加载的时间就会变小

          2.减少http请求 直接的减缓服务器的压力

     -->

display: inline;

/* 在一排显示 并不是转化为行内元素 */

background: url("images/sidebar.png");（一定要把他做成背景图）

background-position