分享5

------------------------------轻松一刻--------------------------------

1. 生活中程序猿的真实写照、一款游戏一包烟，一台电脑一下午。一盒泡面一壶水，一顿能管一整天。

2. 计算机系的男同学追班里一女同学，结果此女总是躲躲闪闪。男的看没戏，就另找了一个去追，结果这女的不满意了，质问这男的为啥抛弃她。男的问：“请教一个电脑问题，如果你点击一个程序，总是提示‘没有响应’，怎么办？”女的说：“马上结束任务。”男的：“对，我也是这样想的。”

3. 前台美女三宝：你好，找谁，倒饮料。产品经理三宝：山寨，改版，再推倒。项目经理三宝：进度，流程，做报表。团队经理三宝：团建，开会，评绩效。数据分析师三宝：SQL，Excel，PPT。人事经理三宝：画饼，忽悠，挖墙脚。设计师三宝：修改，重做，飞机稿。程序员三宝：闷骚，加班，修电脑。

4. 【世界上最没用的几句话】1、警察：不要跑！2、国足：必胜！3、老师：同学们不要睡了！4、病人：医生，您轻点儿！5、父母：孩子，不要闹了！ 6、罪犯：我是冤枉啊！7、女人：不要嘛！8、男人：我发誓！9、程序员：这个不能实现。

5. 某男是程序员，每天半夜三更才回家。某女抱怨：“你就不能提早点回家么？”某男：“好，一定。”于是下次某男一直写代码到天亮提着油条豆浆才回家。
   

组合选择器

选择器组 熟悉

通过多个选择器, 组合起来锁定一个或多个元素.
(被选择的元素,需要满足选择器组中的所有选择器)

格式:
元素名称选择器选择器1选择器2…选择器n{
样式列表;
}

例如: 选择所有class值为class1的div元素
div.class1{

}

选择器列表 熟悉

将一组样式, 给定到多个选择器的结果
(被选择的元素,只需要满足选择器列表中的任意一个选择器)

格式:
选择器1,选择器2…选择器n{
样式列表;
}

例如:设置div和p元素的文字颜色为绿色:
div,p{
color:#0f0;
}

派生选择器 *

子选择器

格式:
    选择器1>选择器2{
}

作用:
从选择器1的结果元素中, 选择匹配选择器2的子元素.

例如: 选择所有div中的子标签p
div>p{

}

例如: 选择id为content元素的子元素div
#content>div{

}

后代选择器

格式:
    选择器1 选择器2{
}

作用:
从选择器1的结果元素中, 选择匹配选择器2的后代元素.

例如: 选择所有div中的后代标签p
div p{

}

例如: 选择id为content元素的后代元素div
#content div{

}

更多的选择器 在Jquery技术时进行扩展

常用样式

背景样式

-   背景颜色
        background-color:颜色值;
-   背景图片
        background-image:url("图片地址1"),url("图片地址2")...url("图片地址n");
        堆叠顺序:URL定义的越靠前, 显示时越靠上.
-   背景图片控制 - 平铺
        backgorund-repeat:
            取值: 
                -   默认平铺:repeat;
                -   仅横向平铺:repeat-x;
                -   仅纵向平铺:repeat-y;
                -   不平铺:no-repeat;
-   背景图片控制 - 缩放
        background-size:宽度% 高度%;
-   背景图片控制 - 滑动
        background-attachement:
                -   scroll  :   默认图片跟随内容滑动
                -   fixed   :   固定不滑动
-   背景图片控制 - 定位
        background-position:x偏移值 y偏移值;

文字样式 *

-   字体大小
        font-size:长度+单位;
-   字体颜色
        color:颜色值;
-   文字位置    
        text-align:left/center/right;
-   文字加粗
        font-weight:bold;
-   文字线
        text-decoration:
            取值:
                -   underline   :   下划线
                -   overline    :   上划线
                -   line-through:   删除线

• 文字斜体:
  font-style:oblique;
• 文本行高:
  line-height:长度+单位;
• 文字阴影
  text-shadow:横向偏移 垂直偏移 [阴影模糊距离] 阴影颜色;
• 字体设置
  font-family:字体名称;

安装字体
@font-face{
font-family:"自定义名称";
src:url("字体文件路径");
}

盒模型 ( 框模型 ) ***

指的是元素在网页中占用空间大小的 计算模型.
一个元素在网页中占用的高度:  元素自身高度+上下内边距+上下边框的宽度+上下外边距;
一个元素在网页中占用的宽度:  元素自身宽度+左右内边距+左右边框的宽度+左右外边距;

边框

边框样式: ***

格式1.    一次性指定四个方向边框的宽度 样式 颜色值;
        border:宽度 样式 颜色值;

格式2.
单独指定某一个方向的边框 宽度 样式 颜色值;
左: border-left:宽度 样式 颜色值;
上: border-top:宽度 样式 颜色值;
右: border-right:宽度 样式 颜色值;
下: border-bottom:宽度 样式 颜色值;

边框的样式值:
- 实线 : solid
- 虚线边框 : dashed
- 点组成边框 : dotteds

边框圆角 *

格式1.
    一次指定四个角的圆角宽度值
    border-radius:长度+单位;

格式2.
单独指定每一个角的圆角宽度值
上左角: border-top-left-radius:长度+单位;
上右角: border-top-right-radius:长度+单位;
下左角: border-bottom-left-radius:长度+单位;
下右角: border-bottom-right-radius:长度+单位;

边框阴影 熟悉

格式:
    box-shadow:x偏移 y偏移 [阴影模糊大小] 阴影大小 阴影颜色

处理溢出边框的内容 了解

格式:
    overflow:
        -   visible :   溢出的内容显示, 默认值.
        -   hidden  :   溢出的内容隐藏.
        -   scroll  :   添加横向 纵向滚动条.
        -   auto    :   当内容溢出时. 才添加滚动条

表格的双线边框问题 了解

border-collapse: collapse;

内边距 padding ***

指的是元素的内容 与 元素的边框的距离.

格式1.
一次指定四个方向的内边距
padding:长度+单位;

格式2.
一次指定上下 和 左右的内边距
padding:上下长度+单位 左右长度+单位;

格式3.
一次指定上 ,右 ,下,左的内边距
padding:上 右 下 左;

格式4.
一次指定一个方向的内边距
左: padding-left:长度+单位;
右: padding-right:长度+单位;
上: padding-top:长度+单位;
下: padding-bottom:长度+单位;

外边距 margin ***

指的是元素的边框 距离 其它元素的盒模型的距离. 值可以是负数

格式1.
一次指定四个方向的外边距
margin:长度+单位;

格式2.
一次指定上下 和 左右的外边距
margin:上下长度+单位 左右长度+单位;

格式3.
一次指定上 ,右 ,下,左的外边距
margin:上 右 下 左;

格式4.
一次指定一个方向的外边距
左: margin-left:长度+单位;
右: margin-right:长度+单位;
上: margin-top:长度+单位;
下: margin-bottom:长度+单位;

外边距的特殊使用:

1.  两个块元素之间 ,上下的内边距不会叠加. 值较大者生效.
2.  外边距可以是负值
3.  可以指定一个元素的左右外边距值为自动 auto , 自动居中.

定位 *****

用于控制元素在网页中显示的位置

默认定位 (静态定位) *****

默认元素分为三类:
    1.  块元素 :   独占一行, 可以设置宽度和高度. div,ul,ol,li,table...
    2.  行内元素    :   与其他元素共享一行, 一行排满自动换行,宽度和高度无法设置, 只能由内容撑开. span,i,b,a...
    3.  行内块元素 : 与其他元素共享一行, 一行排满自动换行,宽度和高度可以设置. img,button,input...

display:
- block : 块元素
- inline : 行内元素
- inline-block : 行内块元素
- none : 隐藏不显示.

浮动定位 *

格式: float:left/right;

相对定位 *****

作用: 相对当前元素在默认定位下的位置 , 控制它进行x和y轴的移动.
特性: 原有空间保留, 移动的新位置, 采用覆盖显示.
格式: position:relative;

绝对定位 *****

不占用网页空间, 采用覆盖显示的一种定位方式.
格式: position:absolute;

固定定位 *****

不占用网页空间 ,采用漂浮覆盖显示的一种定位方式.
格式: position:fixed;

相对定位/绝对定位/固定定位 如何确定元素的位置

上述的三种定位方式, 通过如下四种样式 来确定元素的位置:
    1.  top:    长度+单位;
    2.  left:   长度+单位;
    3.  right:  长度+单位;
    4.  bottom: 长度+单位;

相对定位情况下:
元素相对于自身目前的位置, 进行指定方向的偏移.
例如: 让元素从原有位置, 向右移动10个像素. left:10px; 或 right:-10px;

绝对定位情况下:
指的是元素距离指定方向边框的距离.
注意: 如果元素没有一个使用定位(相对定位/绝对定位/固定定位)的祖先元素, 则上述的边框指的是浏览器边框;
如果元素拥有一个使用定位的父元素 , 则上述的边框指的是这个使用了定位的祖先元素的边框.

固定定位情况下:
距离浏览器边界某个方向的距离;

相对定位/绝对定位/固定定位 堆叠顺序

设置堆叠顺序:
    z-index:整数;
    默认值为0 , 值越大越靠上. 负数表示显示在内容的后面.

当值相同时 , 元素编写时越靠后, 显示时越靠上.