CSS复习

CSS基础

css：层叠样式表
作用：给标签添加浏览器里的显示样式。
根据CSS书写位置不同：行内式、内嵌式、外链式。

• 内嵌式
  书写位置：写在head标签里面一对style标签。

<style type="text/css">
    选择器 {
        k: v;
        k: v;
    }
</style>

• 行内式
  <h1 style="color:red;">style属性的应用</h1>
  在平时不建议使用，测试时使用
• 外链式
  <link type="text/css" rel="styleSheet" href="CSS文件路径" />

样式有多个属性叠加而成：文字、文本属性、盒子属性。

选择器

基础选择器：标签选择器、id选择器、类选择器、通配符

• 标签选择器
  使用标签名选择标签，选中所有这个标签。
  用途：清除默认样式，设置初始样式。
  p {color: red;}
• id选择器
  使用标签的id属性值来选择。id是唯一的，只能选中一个标签。
  用途：id选择器不添加样式，留给js添加行为。（用法不唯一）
  #box {color: red;}
• 类选择器
  使用标签的class属性值来选择。
  一个标签可以有多个class属性，多个标签页可以有相同的类名。
  .box {color: red;}
• 通配符
  表示选取是包括body在内的所有标签。
  用途：用来设置、清除默认样式。
  * {color: red;}

高级选择器：后代选择器、交集选择器、并集选择器

• 后代选择器
  根据嵌套关系来选取某一个符合条件的标签。
  .box .demo div {color: red;}
• 交集选择器
  同一个标签必须满足所有的选择器条件。
  兼容：IE6不支持类的连写。
  div.box.demo {color: red;}
• 并集选择器
  不同的标签添加相同的样式，用并集选择器放在一起同时添加样式。
  div,.box,p {color: red;}

继承性、层叠性

• 继承性：有一部分属性本身不设置，但是可以从祖先元素里去继承。文本的属性可以继承，盒子不能继承。
  先看就近原则，如果一样近，看权重，权重一样看书写顺序。
• 层叠性：同一个元素可以被多个选择器选中，样式会同时加载标签上，如果属性重复，会出现层叠。
  看权重，权重大的层叠权重小的，权重一样书写在后面的层叠前面。
  ！important：将某一个属性的权重提升到最大。

字体文本属性

• 字体
  字号：font-size
  颜色：color
  字体：font-family （“Arial”,“宋体”）
  行高：line-height
  加粗：font-weight （数字/英文）
  字体样式：font-style （normal/italic/oblique）
  符合属性：font （除了color属性，其他都可以复合，必须写在字号后面）
• 文本
  对齐：text-align
  缩进：text-indent （em/px/% 相对于父盒子）
  修饰：text-decoration （none/overline/underline/line-through）

盒模型

• 宽高：width、height
  实际书写内容区域：width+height
  实际占有区域：width+height+padding+border
  盒模型内减：确定宽高的方法，用实际占有宽高减去对应的padding和margin
• 内边距（padding）：复合属性，可以拆开写。

padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
/* 复合属性 */
padding: 10px 20px 30px 40px;  /* 上、右、下、左 */
padding: 10px 20px 30px;  /* 上、左右、下 */
padding: 10px 20px;  /* 上下、左右 */
padding: 10px;  /* 上下左右 */

• 边框（border）：四个方向的复合，边框类型的复合。

border-top: 1px solid black;
border-right: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid yellow;

border-width: 1px;
border-style: dashed;
/* border-style:边框样式的属性有很多
    solid   实线
    dashed  虚线
    dotted  点线
    double  双线
    groove  边框凹陷
    ridge   边框凸出
    inset   内容凹陷
    outset  内容凸出
*/
border-color: red;

背景渲染区：内容、padding、border都可以渲染。

• 外边距（margin）：四个方向的属性，与padding划分一致。
  特殊用途：制作盒子水平居中。盒子本身设置宽度，margin值上下随意，左右auto。
• 盒模型拓展
  height：有时候盒子需要自适应宽度，不需要添加height，或者属性值为auto，用内容撑开。
  宽度剩余：我们能够确定左内边距，右边不确定。值设置padding-left，右边都给width。
• 父子盒模型：子盒子整体占有宽度不能超过父盒子的width。如果设置了padding和border对应的给子盒子width进行内减。
  如果子盒子不设置宽度，会自动撑满父盒子，子盒子设置的padding，不需要手动内减。

margin塌陷

• 在垂直方向上，如果两个盒子外边距有相遇的部分，会出现margin合并（塌陷）。
  解决方法：给盒子都设置同一方向的margin，不要重复设置反方向。
• 嵌套的两个盒子，给里面的盒子设置外边，距垂直方向也会有margin塌陷。
  解决方法：
  （1）给父盒子添加一个边框，强制限定内部元素开始的位置。
  （2）常用：不用子盒子的margin，用父盒子的padding挤出边距。

标准文档流

HTML就是标准文档流，网页只能从上到下，从左到右进行加载。

• 微观性质：
  文本之间有空白折叠现象。
  文本类的元素，上下不齐，底边对齐。
  一个盒子内文本写到结尾会自动换行。
  英文折行:white-space: normal;
• 块级元素：block
  包含了所有容器级标签以及p标签。
  特性：能够设置宽高，必须独占一行，如果不设置宽度，会自适应父亲的宽度。
• 行内元素：inline
  包含除了p标签之外的所有文本级标签。
  特性：不能设置宽高，可以和其他行内元素并排在一行，高度有内容自动撑开。
• 行内块元素：inline-block
  特性：既能设置宽高，也能并排一行。
• display：显示模式。
• 脱离标准文档流的方法：浮动、绝对定位、相对定位

浮动

属性：float
属性值：left、right
根据属性值的方向进行浮动。

• 浮动具有的性质
  浮动的元素脱离标准文档流。
  浮动元素会在同一方向，一次贴边。
  浮动元素不会出现margin塌陷。
  文字不和盒子属性一样，不会被浮动的元素遮盖住，文字会围绕浮动元素的周围。
• 清除浮动
  问题：浮动的元素不能撑高父盒子。前面的浮动元素会影响后面的元素布局。
  方法：
  （1）给父盒子直接设置高度。但高度不可以自适应。
  （2）清除浮动属性clear。属性值left、right、both。但高度不能被撑高，父盒子margin值太小会失效。
  （3）外墙法：在受影响的大盒子前面添加一个有clear属性的标签。但高度不能被撑高，父盒子margin值太小会失效。
  （4）内墙法：给有浮动元素的大盒子内部，最后面添加一个有clear属性的标签。解决了所有问题，但让HTML结构出现了很多无实际意义的标签。
  （5）利用溢出隐藏解决所有问题。overflow: hidden;
  让父盒子高度自适应：当父盒子有一个溢出隐藏的属性，页面在加载时，父盒子会自动的去检索内部子元素的高度，以最高的高度作为父盒子的高度进行加载。
  清除浮动：父盒子有一个溢出隐藏的属性，页面在加载时，父盒子会检索子元素是不是有浮动属性，有浮动的元素会强制限定在盒子的范围内。

a标签的修饰

样式分为不同状态下的属性。都是由用户行为来最终决定，我们需要提前将可能的状态预置好。

• 四个状态：
  未访问之前的状态：a:link
  访问后的状态：a:visited
  鼠标悬停的状态：a:hover
  鼠标点击不松手的状态：a:active
  顺序必须遵循爱恨准则
  a标签中的color和text-decoration属性不可以继承父盒子的。

背景（background）

五个单独的属性：

background-color: red;
background-image: url(image/1.jpg);
background-repeat: no-repeat;   /* repeat、repeat-x、repeat-y */
background-position: center top;
background-attachment: scroll;    /* fix固定 */

复合写法：

background: url() no-repeat center top red fixed;

背景位置：

• 像素表示法，正的值表示把背景图向右向下移动，负的值表示把图片向左向上移动
• 单词表示法：水平方向left、center、right，垂直方向：top、center、bottom
• 百分比表示法：100%的宽度=盒子border内部的宽度-背景图片的宽度。

定位

定位：辅助布局脱离标准流。
方向偏移属性：left、right、top、bottom
属性值为正，偏移方向是他的反方向，负值与他相同的方向。

• 相对定位 position: relative;
  针对自身元素的位置偏移。偏移参考元素是元素自身。
  特点：相对定位的元素不脱离标准流，位置保留。结构稳定，有压盖效果（有定位的元素会压盖没有定位的元素）
• 绝对定位 position: absolute;
  不是针对自身的偏移。
  偏移参考元素：如果祖先元素里有定位，参考元素就是距离绝对定位元素最近的祖先元素；如果都没有定位，参考元素是body。
  特点：脱离标准流，原位置会被覆盖。
• 固定定位position: fixed;
  针对浏览器窗口进行偏移，显示效果固定在浏览器上的某个位置，元素不会随着页面的滚动而滚动。
• 利用定位制作banner图
  制作banner居中效果：用插入图而不用背景图，让插入图绝对定位，在父盒子内部水平居中。更有语义性。

.banner{
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;    /* 防止页面放大后出现滚动条 */
}
.banner img{
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -960px;     /*  960px为banner宽度的一半  */
}

透明

• 盒子透明
  需要用一个属性完成，透明度属性opacity，属性值是0到1之间的小数。
  透明效果：盒子本身半透明，内容也是半透明。
  IE8及以下的浏览器不支持opacity属性。但IE有自己设置盒子透明的属性，filter。
  filter属性内部有多重滤镜属性，其中包括alpha通道透明。filter: alpha(opacity=50);
  解决内容同时透明的问题：盒子透明，内容不透明。将文字放在别的盒子里，用定位定在半透明的盒子里。
• 图片透明
  除了IE6，其他浏览器都能够正常的加载背景透明或半透明效果的PNG图片。IE6不支持。
  解决IE6的png图片兼容问题：
  （1）如果有透明，没有半透明，可以用GIF图片格式代替，GIF在IE6里没有兼容问题。（2）给页面添加一段只有IE6认识的JS代码。

<!--[if IE 6]>
    <script type="text/javascript" src="js/png.js"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix("选择器");     // 多个选择器用逗号隔开
    </script>
<![endif]-->