学习日记52---css学习

1. css（cascading style sheets 层叠样式表）。html只负责文档的结构和内容，表现形式完全交给css，使html文档变得简洁。
2. 定义方法： 选择器{属性：值；属性：值；属性：值；}
3. css页面引入方法：
   
   1. 内联式：< div style:”color：red;font-size:12px”>…<div>
   2. 嵌入式：在头文件中（首页常用此法，速度快）
      
<style type="text/css">
div{
color:red;
font-size:20px;
line-height: 40px;
}
</style>

      会自动为后面的div块套入样式
   3. 外链式
      
<link rel="stylesheet" type="text/css" href="css/main.css">

      其中css/main.css里为style里的div内容。

4. css常用文本设置 ★

   • color 设置文字的颜色，如： color:red;
   • font-size 设置文字的大小，如：font-size:12px;
   • font-family 设置文字的字体，如：font-family:’微软雅黑’;
   • font-style 设置字体是否倾斜，如：font-style:’normal’; 设置不倾斜，font-style:’italic’;设置文字倾斜
   • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
   • font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘微软雅黑’;（字号/行高 在前，字体在后）
   • line-height 设置文字的行高，如：line-height:24px;
   • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
   • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
   • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

5. 颜色表示法

   1. 颜色名表示，red，yellow等
   2. rgb表示，rgb（255,0,0）
   3. 16进制数表示，#ff0000

6. css选择器

   1. 标签选择器
      标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
   2. id选择器
      通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
   3. 类选择器（应用最多，可以自定义样式组合，优先级比id选择器小）
      通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

   4. 层级选择器
      主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

      .box span{color:red}
      .box .red{color:pink}
      .red{color:red}
      
      <div class="box">
          <span>....</span>
          <a href="#" class="red">....</a>
      </div>
      
      <h3 class="red">....</h3>

   5. 组选择器
      多个选择器，如果有同样的样式设置，可以使用组选择器。

   6. 伪类及伪元素选择器★
      常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
      

      .box1:hover{color:red}
      .box2:before{content:'行首文字';}
      .box3:after{content:'行尾文字';}
      
      
      <div class="box1">....</div>
      <div class="box2">....</div>
      <div class="box3">....</div>

7. 块元素、内联元素、内联块元素
   元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

8. 盒子模型
   元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。
   把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

9. 浮动：文档流
   文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

10. 浮动特性
    1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
    2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
    3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
    4、浮动让行内元素或块元素自动转化为行内块元素
    5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
    6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动
    7、浮动元素之间没有垂直margin的合并

11. 解决内联元素间隙的方法 ★
    1、去掉内联元素之间的换行
    2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

12. 清除浮动

    1. 父级上增加属性overflow：hidden
       2.在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
    2. 使用成熟的清浮动样式类，clearfix
       

       .clearfix:after,.clearfix:before{ content: "";display: table;}
       .clearfix:after{ clear:both;}
       .clearfix{zoom:1;}
       清除浮动的使用方法：
       .con2{... overflow:hidden}
       或者
       <div class="con2 clearfix">

13. 定位
    我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

    1. relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
       absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
       fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
       static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
       inherit 从父元素继承 position 属性的值

    2. 定位元素特性
       绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

    3. 定位元素层级 ★（z-index）
       定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

    4. 典型定位布局
       1、固定在顶部的菜单
       2、水平垂直居中的弹框
       3、固定的侧边的工具栏
       4、固定在底部的按钮