web 应用程序开发原理二

###CSS层叠样式表
      它是用于定义HTML元素的显示形式，是一种格式化网页内容的技术
###添加样式表的方式
      1. 内联式：直接在元素中加入style属性<div style="border:1px solid #000;
      width:300px;height:200px"></div>
      2. 嵌入式：书写style标签，在标签中指明样式。可以用于网页中的不同元素
      <style>
             div{
                   width:300px;
                   height:200px;
                   backgroup-color:yellow;
                   border:2px solid #000:
                }
       </style>
       3. 外联式：将样式规则书写到文件中，可以用于不同的网页，重用度最好。
       <link rel="stylesheet" href="abc.css">
       层叠样式表的含义：如果有多个规则来描述同一个元素，那么会根据样式表的优先级，
        来决定最终显示什么样式
       对于导入css方式的优先级：内联式>嵌入式>外联式 
###css选择器
      元素选择器div：利用元素的标签名称作用选择范围。div{}表示所有的div元素均采用该样式
         h1，h2｛｝表示所有的h1标签和h2标签均采用该样式
      类选择器 .：利用元素的class属性来引入类选择器的样式。可以用于多种元素。同一种元素
      也可以选择性使用
           .mm{} <div class="mm"></div>该div采用mm类选择器定义的样式
      id选择器 #：让拥有该id属性的元素采用该样式
             <p id="p1"></p>      #p1{}  id号为p1的元素采用该样式
      包含选择器 ：元素内的子元素采用该样式
              <div id="mydiv"></div>      #mydiv span{}  id号为mydiv元素中
        所有的span标签采用该样式

      div.aa{}表示所有的div中，class属性为aaa的元素采用该样式
      通配符 *：所有的元素均采用该样式。
            #oneDiv *{}表示id为oneDiv中，所有的元素均采用该样式。
      伪类选择器：执行完某个动作的元素采用该样式。
           #data tr:hover{}  表示鼠标悬停在id为打他下的tr元素是，采用该样式
###css属性单位
      颜色单位：使用0-255之间的整数值来设置。如color：rgb（128，0，128）
          使用十六进制数组定义颜色，如#fc0eab；
            为颜色取名：aqua，black，blue，fuchsia，gray，green等，

      布局属性：margin属性
               1.水平盒子的间距为两个盒子间距的和
               2.垂直盒子的间距为两个盒子间距的较大值
               3.margin值可以设置为负值
               padding属性：
             1. padding属性用来描述盒模型的边框和内容之间插入多少空间
             2. margin是当前元素和border的距离；padding是内容和border的距离
             3. margin是对外的，padding是对内的
             4. margin只对块级元素有效。padding对所有元素都有效
###盒子模型
         1. 内容（content）：元素中的内容
         2. 外边框（margin）：代表 元素外边的空间，这个控件将元素相互分开
         3. 边框（border）：位于元素的边距内和元素的边框外之间的可配置的线
         4. 内边框（padding）：元素内容和元素边框之间的空间 
       盒子模型均可以用“上右下左”方式设置。如果仅给出两个或三个值，那么缺失边的属性值取与对边相同的值
    盒子之间的关系：
      1. 所谓标准流，指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则
      2. 1文本元素按照从上到下、从左到右的格式布局
      3. 2块级元素按照从上到下依次排列
      4. 3内嵌元素按照从左到右依次排列
display:none和visibility：hidden的区别
 1. 这两个样式都可以隐藏元素
 2. display：none元素看不见，同时元素不占用位置
 3. visibility：hidden元素看不见，但元素会占用位置
 4. word-break：break-all；超出部分的文字自动换行

####内嵌元素和块级元素的互相转换
       内嵌元素--->块级元素     display：block
       块级元素--->内嵌元素     float：left
###CSS优先级
     1. ！important可以改变CSS选择器的优先级。加上一个“！important”就优先于正常的CSS规则
     2. div｛
              background=color:
        blue !important;
           ｝
        <div style="background-color:red">
                   adasd
              </div>
        结果div颜色为蓝色