精灵图2

• 边框属性上
• 什么是边框？
  边框就是环绕在标签宽度和高度周围的线条
• 边框属性的格式：
  • 连写1（同时设置四条边的边框）

border: 边框宽度 边框样式 边框颜色;
例如：
border: 1px solid #000;

 * 快捷键：

      bd + tab

 * 边框样式的取值非要记住的只有两个：

dashed（虚线）
solid（实线）

 * 注意点：

1.连写格式中颜色属性可以省略，省略之后默认是黑色
2.连写格式中样式不可省略，省略之后就看不到边框了
3.连写格式中宽度可以省略，省略之后可以看到边框

• 连写2（分别设置四条边的边框）

border-top: 边框宽度 边框样式 边框颜色;
border-right: 边框宽度 边框样式 边框颜色;
border-bottom: 边框宽度 边框样式 边框颜色;
border-left: 边框宽度 边框样式 边框颜色;

 * 快捷键：

bt+
br+
bb+
bl+

• 连写3（分别设置四条边的边框）

border-width:上 右 下 左;  
border-style:上 右 下 左;
border-color:上 右 下 左;

 * 注意点：
   * 这三个属性的取值是按照顺时针来赋值，也就是按照上右下左来赋值，而不是按照日常中的上下左右
   * 这三个属性的取值省略时的规律：

1、上右下左>上右下>左边的取值和 右边一样
2、上右下左>上右>左边的取值和右边一样，下边的取值和上边一样
3、上右下左>上>右下左取值和上边一样

 * 非连写（企业开发中几乎不用）

例如：
border-top-width:;
border-top-style:;
border-top-color: #000;

• 内边距属性
• 什么是内边距？
  边框和内容之间的距离。
• 格式
  • 非连写

padding-top:像素;
padding-right:像素;
padding-bottom:像素;
padding-left:像素;

• 连写

      padding:上 右 下 左;

这三个属性的取值省略时的规律

1、上右下左>上右下>左边的取值和 右边一样
2、上右下左>上右>左边的取值和右边一样，下边的取值和上边一样
3、上右下左>上>右下左取值和上边一样

• 注意点：
  1. 给标签设置内边距之后，标签占有的宽度和高度会发生变化
  2. 内边框也有背景颜色

• 外边距属性
• 什么是外边距？
  标签和标签之间的距离。
• 格式：
  • 非连写

margin-top:;
margin-top:;
margin-top:;
margin-top:;

• 连写

margin-top:上 右 下 左;

这三个属性的取值省略时的规律

1、上右下左>上右下>左边的取值和 右边一样
2、上右下左>上右>左边的取值和右边一样，下边的取值和上边一样
3、上右下左>上>右下左取值和上边一样

• 注意点：
  外边距的那一部分是<strong>没有背景颜色</strong>

• 外边距合并（塌陷）现象

• 什么是外边距合并现象？
  在默认布局的垂直方向上，默认情况下相邻外边距是不会叠加的，谁比较大就听谁的在水平方向会合并。

• CSS盒子模型

• 什么是CSS盒子模型？
  仅仅是一个形象的比喻，HTML中所有的标签都是盒子模型

• 结论：
  1.在HTML中所有的标签都可以设置：

宽度/高度：指定可以存放内容的区域
边框：
内边距：
外边距：

• 盒子宽度和高度
• 内容的宽度和高度

   就是通过标签的width/height属性设置的宽度和高度

• 元素的宽度和高度

   宽度=左边框+左内边距+width+右内边距+右边框
   高度=同理可证

• 元素空间的宽度和高度

   宽度=左外边距+元素宽度+右外边距
   高度=同理可证

• 盒子宽度和高度练习

• 规律：

• 增加了padding之后元素的宽高也会发生变化

• 如果增加了padding之后还想保持元素的宽高，那么必须减去内容的宽高

• 增加了border之后元素的宽高也会发生变化

• 如果增加了border之后还想保持元素的宽高，那么必须减去内容的宽高

• 盒子box-sizing属性

• CSS3中新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding和border后元素的宽高保持不变

• box-sizing属性是如何保证增加padding和border之后，盒子元素的宽高不变

• box-sizing取值

content-box
       元素的宽高=边框+内边距+内容宽高
 border-box
       元素的宽高=width/height

• 盒子模型练习

• 注意点：

  • 如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来
  • 如果外面的盒子不 想被一起顶下来，那么可以给外面的盒子设置一个边框属性
  • 在企业开发中，一般情况如果需要控制嵌套关系盒子之间的距离，应该首先先考虑padding，其次再考虑margin，margin本质上用于控制兄弟关系之间的间隙，padding是控制父子关系的

• 另注意点：

  • 在嵌套关系的盒子里，我们可以margin：0 auto; 的方式来让里面的盒子在外面盒子中水平居中
  • <strong>margin：0 auto;只对水平方向有效，对垂直方向无效</strong>

• 盒子居中和内容居中

• <strong>text-align:center; </strong>和 <strong>margin:0 auto;</strong> 居中

• text-align:center; 的作用：

设置盒子中存储的文字/图片的水平居中

• margin:0 auto;的作用：

让盒子自己水平居中

• 清空默认边距

• 为什么要清空默认边距（外边距和内边距）
  在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等，所以在企业开发中

• 如何清空默认的边距

  • 格式：

*{
         margin: 0;
         padding: 0;
        }

• 注意点：

  通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好
  所以，百度搜yui css reset ，第一个，进去打开网址复制
    http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

• 行高和字号
• 什么是行高？
  在CSS中所有的行都有自己的行高
• 注意点：
  行高和盒子的高不是同一个概念
• 格式：

   line-height:;

• 规律：

  1. 文字在行高中默认是垂直居中的
  2. 在企业开发中我们经常将盒子的高度和行高设置为一样，那么这样就可以保证一行文字在盒子的高度中是垂直居中的，简而言之：要想一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高即可
  3. 在企业开发中如果一个盒子中又多行文字，那么就不能用上面那点，那么我们只能通过padding来让文字垂直居中

• 还原字体和字号

• 注意点：

  1. 在企业开发中，如果一个盒子中存储的是文字，那么一般情况下我们回忆和字左边的内边距为基准，不会以右边的内边距为基准，因为这个右边的内边距有误差
  2. 右边内边距的误差从何而来？因为右边如果放不下这个文字，那么文字就会换行显示，所以文字和内边距之间的距离就有误差
  3. 顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离

• 网页布局方式
  什么是网页的布局方式？
  其实就是指浏览器是如何对网页中国的元素进行排版的
  • 标准流（文档流/普通流）排版方式
  • 其实浏览器默认的排版方式就是标准流的排版方式
  • 在CSS中将元素分为三类，分别是块级元素、行内元素、行内块级元素
  • 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版

垂直排版：如果元素是块级元素，那么就会垂直排版
水平排版：如果元素是行内元素/行内块级元素，那么就会水平排版

• 浮动流排版方式

float: left;
float: right;

• 浮动流是一种“半脱离标准流”的排版方式
• 浮动流只有一种排版方式，就是水平排版，他只能设置某个元素左对齐或者右对齐
• 注意点：

   1.浮动流中没有居中对齐，也就是没有center这个取值
   2.在浮动流中是不可以使用margin:0  auto;的

• 特点：

   1.在浮动流中是不区分块级元素、行内元素、行内块级元素的，无论是块级元素、行内元素、行内块级元素都是水平排版
   2.在浮动流中无论是块级元素、行内元素、行内块级元素都可以设置宽高
   3.综上所述，浮动流中的元素和标准流中的行内块级元素很像

• 定位流排版方式

• 浮动元素的脱标

• 什么是浮动元素的脱标？
  脱标：脱离标准流，当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标

• 浮动元素脱标之后会有什么影响？
  如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素

• 浮动元素排序规则

• 浮动元素排序规则

  • 相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面
  • 不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
  • 浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定
  • 要结合脱标的过程来想

• 浮动元素贴靠现象
  当父元素足够有放下所有浮动元素的宽时，所有浮动元素会并排正常地放，但当父元素宽度不够时，最后一个浮动元素就会向前面元素紧贴着的那个元素贴靠，如果这时父元素宽度够，就搞定，宽度还不够就继续往前一级一级地贴，直到最后无论父元素宽度够不够，都会贴近
  父元素的最左边。

• 浮动元素字围现象
  浮动元素不会盖着不是浮动元素中的文字
  68-70.浮动练习

• 浮动元素高度问题

• 做垂直方向的布局时，用标准流；做水平方向的布局时，用浮动流

• 在标准流中内容的高度可以撑起父元素的高度

• 在浮动流中浮动的元素是不可以撑起父元素的高度的

• 在标准流中，div如果没设置宽度高度，那么宽度和父元素一样，高度为0

• 清除浮动方式一

• 清除浮动方式一

给前面一个父元素设置高度

• 注意点：
  在企业开发中，我们能不写高度就不写高度，所以这种方式<strong>用得很少</strong>

• 清除浮动方式二

• 清除浮动的第二种方式

 给后面的盒子添加clear属性

• clear属性取值

none：默认取值，按照浮动元素的排序规则来排序（）
left：不要找前面的左浮动元素，不要和前面的左浮动同一行
right：不要找前面的右浮动元素，不要和前面的右浮动同一行
both：不要找前面的左浮动元素和右浮动元素（用得最多）

• 注意点：
  当我们给某个元素添加clear属性之后，那么这个属性的margin属性就会失效

• margintop失效的原因

• 如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来

• 如果外面的盒子不 想被一起顶下来，那么可以给外面的盒子设置一个边框属性

• 清除浮动方式三
  清除浮动的第三种方式

隔墙法

• 外墙法

1、在两个盒子之间添加一个额外的块级块级元素
2、给这个额外添加的块级元素设置clear:both;属性

• 注意点：

  1. 外墙法可以让第二个盒子使用margin-top属性
  2. 外墙法不可以让第一个盒子使用margin-bottom属性
  3. 一般企业开发中，不设置第一个盒子的margin-bottom和第二个盒子的margin-top属性，而是直接设置额外那个盒子的高度

• 内墙法

• 清除浮动方式四

• 内墙法

1、在第一个盒子中所有子元素的最后添加一个额外的块级块级元素
2、给这个额外添加的块级元素设置clear:both;属性

• 注意点：

外墙法可以让第二个盒子使用margin-top属性
外墙法也可以让第一个盒子使用margin-bottom属性

• 外墙法和内墙法的区别：
  外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度

• 在企业开发中<strong>不常用隔墙法</strong>来清除浮动

• 伪元素选择器
  在前端开发中推崇结构和样式分离，html添加语义，CSS代码修改样式
  什么是伪元素选择器

• 作用：给指定标签的内容前面添加一个子元素或者给制定标签的内容后面添加一个子元素

• 格式：

div::before{
                  属性:值;
                  }
含义：给指定标签的内容前面添加一个子元素

div::after{
                  属性:值;
                 }                
含义：给指定标签的内容后面添加一个子元素

例如：

div::before{
    /*指定添加的子元素的内容*/
    content:"爱你";
    /*指定添加的子元素的宽高*/
    width: 50px;
    height: 50px;
    background-color: pink;
    /*指定添加的子元素的显示模式*/
    display: block;
    /*隐藏添加的子元素*/
    visibility: hidden;
                }

• 清除浮动方式五（比较推荐）

div::after{
    /*设置添加的子元素的内容为空*/
    content:"";
    /*设置添加的子元素为块级元素*/
    display: block;
    /*设置添加的子元素的高度为0*/
    height: 0;
    /*设置添加的子元素看不见*/
    visibility: hidden;
    /*给添加的子元素设置clear:both;*/
    clear: both;

因为此方法是CSS3推出的，IE6不支持
需要在CSS里面添加以下内容，就能兼容IE6（box1为第一个盒子的类名）

.box1{
            *zoom: 1;
            }

注：

• 清除浮动方式六（也是比较推荐）
  overflow:hidden; 的作用：
  • 可以将超出标签范围的内容裁剪掉
  • 清除浮动（给第一个盒子添加）
  • 注意点：

因为此方法是CSS3推出的，IE6不支持
需要在CSS里面添加以下内容，就能兼容IE6（box1为第一个盒子的类名）
.box1{
            *zoom: 1;
            }

• 可以通过给外面的盒子设置overflow:hidden;让里面的盒子设置margin-top之后，外面的盒子不被顶下来

• 定位流-相对定位
• 定位流分类

相对定位
 绝对定位
 固定定位
静态定位

• 什么是相对定位？
  就是相对自己<strong>以前在标准流中</strong>的位置来移动。

• 相对定位注意点

• 相对定位是不脱离标准流的，会继续在标准中占用一份空间

• 在相对定位中同一个方向上的定位属性只能使用一个

• 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素、行内元素、行内块级元素的；

• 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin、padding等属性时会影响到标准流的布局，这些属性是给定位前的盒子设置的

• 相对定位应用场景

  • 用于对元素进行微调（比较少）
  • 配合后面学习的绝对定位来使用

• 格式:

.box2{
    background-color: green;
    position: relative;
    top:;
    right:;
    bottom:;
    left:;
          }

• 定位流-绝对定位
• 什么是绝对定位？

就是相对于body来定位

• 格式

.box2{
    background-color: green;
    position: absolute;
    top:;
    right:;
    bottom:;
    left:;
}

• 绝对定位注意点：

  • 绝对定位的元素是脱离标准流的
  • 绝对定位的元素是不区分块级元素、行内元素、行内块级元素，所有元素都能设置宽高！

• 绝对定位-参考点

• 规律

  • 默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点
  • 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先作为参考点

1、只要是这个绝对定位元素的祖先元素都可以
2、这里指的定位流是指 绝对定位、相对定位、固定定位
3、定位流中只有静态定位不行

• 如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素为参考点

• 绝对定位、注意点

• 如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点；

• 一个绝对定位元素会忽略祖先元素的padding

• 绝对定位-子绝父相

• 相对定位的弊端：

相对定位不会脱离标准流，会继续在标准流中占用一份空间，所以不利于布局界面

• 绝对定位的弊端：

默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器宽度高度的变化而变化

• 子绝父相：

子元素使用绝对定位，父元素使用相对定位

• 绝对定位-水平居中

margin：0 auto；在绝对定位中无效 

如何让绝对定位的元素水平居中（加下面2行代码）

只需要设置绝对定位元素的 left：50%；
然后在设置绝对定位元素的 margin-left：-元素宽度的一半px；

• 绝对定位-团购界面
  企业开发中，发现某个元素盖在另一个元素上面，要第一时间想到定位流；
  而使用定位流的时候一定要想到子绝父相；

• 定位流-固定定位
• 格式：

position: fixed;
left:;
top:;
right:;
bottom:;

• 注意点：

  1. 固定定位的元素是脱离标准流的，不会占用标准流中的空间
  2. 固定定位和绝对定位一样不区分行内/块级/行内块级元素，可以设置 宽高
  3. 背景关联方式可以让背景图片不会随着网页页面的滚动而滚动，而固定定位的元素不会随着网页页面的滚动而滚动

• 定位流- z-index属性

a、IE6不支持固定定位
b、默认情况下就静态定位

• 什么是z-index属性？
  默认情况下所有的元素都有一个默认的z-index属性，取值是0；z-index属性的作用是专门用于控制定位流元素的覆盖关系的

   1.默认情况下，定位流的元素会盖住标准流的元素
   2.默认情况下，定位流的元素，后面编写的会盖住前面编写的
   3.如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面

• 注意点：

  • 从父现象
  • 如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面
  • 如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面

• a标签的伪类选择器

• 通过我们的观察发现a标签存在一定状态
  1.1默认状态，从未被访问过
  1.2被访问过的状态
  1.3鼠标长按状态
  1.4鼠标悬停在a标签上状态

• 什么是a标签的伪类选择器？
  a标签的伪类选择器是专门用来修改a标签不同状态的样式的

• 格式：

a:link{
    color: skyblue;
}
修改从未被访问过状态下的样式

a:visited{
    color: green;
}
修改被访问过的状态下的样式

a:hover{
    color: black;
}
修改鼠标悬停在a标签上的样式

a:active{
    color: pink;
}
修改鼠标长按状态下的样式

• 注意点：
  • a标签的伪类选择器可以单独出现也可以一起出现
  • a标签的伪类选择器如果一起出现，那么有严格的顺序要求，编写的顺序必须严格遵守爱恨原则：love hate
  • 如果默认状态的样式和被访问过状态的样式一样，那么可以缩写，例如：

a{
    color: skyblue;
}

• a标签伪类选择器的练习
• 在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
• 在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽高/高度/padding/margin）
• 在企业开发中和a标签文字/背景相关的都写在伪类选择器中（有开发经验的程序员都是这么写）