夜灵的Html笔记Day08——css属性详细设置、雪碧图、定位

1.尺寸属性：
    宽，高
    单位： px %
   
   语法：width
         
max-width   最大宽
min-width   最小宽
    **：块级元素默认宽是100%
        行内默认内容宽


height


max-height   最大高
min-height  最小高
    **：所有元素的高由内容为准
2.那些元素可以修改尺寸？
   块级元素都可以
     div,p,h1-h6,table,header,section.....
   form表单
     form,input,可修改，radio,checkbox ???不可以
   <img>标签可以修改


3. 溢出
    什么是溢出？
       使用尺寸属性控制元素内容大小时，如果内容大于元素本身，会导致内容溢出
    语法：
       overflow
       overflow-x   横向溢出处理
       overflow-y   纵向溢出处理
    取值：
       visible   默认值，溢出可见
       hidden    溢出隐藏
       scroll    滚动，让元素显示滚动条，溢出时可以用
       auto       自动，溢出时显示滚动并可用
   
4.后代选择器
    无限子级
    选择器1 选择器2 选择器3{
       样式声明
       ....
    }
    eg:
      div p a{}
      ul li div a{}
5.子代选择器
      直接下一层，剩下没了
      选择器1>选择器2{
      
      }
      eg:
        div>img{}
ul>li{

}
 6.边框三角形
    border:width style color;
    border-top-width:
    border-top-color:
     ..... bottom
     ..... left
     ......right


7.边框轮廓
   outline:width style color;
           宽    样式   颜色
 
   outline:none;
   outline:0;


8.
  html文档有默认外边距的元素
   通过CSS重写(css reset)方式将默认的外边距全部都清除
   body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,dl,dd,pre,table,li{
     margin:0;
     padding:0;
    }
  另存在basic.css common.css .....
   index.css  


pm:


9.外边距的合并
   1.当两个垂直外边距相遇时，他们将形成一个外边距，合并后外边距值等于两个元素
     外边距中较大的数值的一方
   2.外边距溢出
      在特殊的情况下，为子元素设置上外边距时，有可能会作用到父元素
      方法：
        1.给父元素加内边距，取代子元素上外边距
  缺：影响父元素的高度
2.给父元素加边框
  缺：影响父元素高度
3.在父元素中增加一个空table
 缺：多了一个空元素
4........
10.行内元素：
      上下外边距无效(img除外)
   行内块元素：
      设置上下外边距时，整行元素都跟着动


11.box-sizing
    作用：
         指定框模型的计算方式
    普通盒子模型的计算方式：


       div{
          width:200px;
 height:300px;
 border-left:5px solid red;
 border-right:8px solid blue;
 padding-left:10px;
 padding-right:2px;
       }


       实际宽度= 200+5+8+10+2=225px;
    语法：
       box-sizing
    取值：
       1.content-box
           元素的width值，
  width=width+padding-left/right+border-left/right
       2.border-box
           width=width;   会包含padding,border
  
  16:00


12.
   css Sprites
   雪碧图，精灵图
   作用：
      将若干小图像封装到一幅大图像中，以便减少http请求次数
   实现 ：
      在页面中，根据图标，图像的尺寸大小，创建一个一模一样的元素
     新建一个背景透明文件，把这些图标放一起


13.font-variant
     normal
     small-caps  小型大写字符
   (占空间一样)
14.text-align:justify;  两端对齐
   left/center/right


15.行高
   line-height:80px;
   line-height:1.5;
16.首行文本缩进 
    语法：
       text-indent
    取值：
       px的数值
17.文本阴影 
    语法：
       text-shadow
    取值：
       h-shadow v-shadow blur color;
   eg:
      text-shadow: 21px 16px 1px red;
18.
   表格特有属性
     边框合并
      语法：
        border-collapse
      取值：
         separate  默认，分离边框模式
collapse   边框合并模式  


19.图文混排
    浮动
    文本，行内元素，行内块 采用环绕的方式来排列，不会被压在下面，会避开浮动元素
20.
   清除浮动带来的影响
      元素浮动以后，会对后面的元素带来位置的影响，如果后面的元素不想被影响，
      那就清除浮动
   语法：
     clear
   取值：
      none   默认值，不做任何清除浮动
      left   清除前面元素左浮动带来的影响，即前面元素左浮动的话，
             当前元素不会上前占位
      right   清除前面元素右浮动带来的影响，即前面元素右浮动的话，
             当前元素不会上前占位
       both    清除前面元素任何一种所带来的影响


   浮动元素对父元素的影响
      浮动以后元素会脱离文档流，所以会导致无线不占据空间，如果一个元素中所有子
      元素都浮动，那该元素高度为0，父元素的高度按未浮动元素的高度为准
   解决：
      1.父元素设置overflow:hidden(auto)
        缺：如果有要溢出显示的内容，也一同被隐藏
      2.给父元素设高度
        缺：必须提前知道所需高度
      3.给父元素设浮动
        缺：对后续元素都有位置影响
      4.在父元素最后一子元素位置处，增加一个空块级元素，并且设置clear:both
        缺：增加一个空元素
      。。。。
21.
   透明度
      语法：opacity
      取值： 0.0-1.0  完全透明-完全不透明
     
      rgba(r,g,b,alpha);


      eg:
         div{
   backgorund:rgba(255,0,0,0.5);
   opacity:0.5;
}
22. 光标
    属性：cursor
    取值：
       1.default 默认值 
       2.pointer  小手
       3.crosshair  +
       4.text    |
       5.wait     等待
       6.help     帮助


23.重点（***）
    1.相对定位
    2.绝对定位
    3.固定定位
  
   1.定位
      语法：position
      取值：
         1.static   默认值
2.relative  相对定位
3.absolute  绝对定位
4.fixed     固定定位