css知识归纳(2)

一、标签类型
块标签：

            1.独占一行
            2.默认宽度是父级100%的宽
            3.支持所有的css样式

内联标签：

  内联标签可以分为内标签和内联块标签
            内联标签：
                   1.同类型的排在同一行
                   2.内容撑起宽高
                   3.不支持宽高，不支持上下的padding和margin
                   4.代码换行被解析，解析的宽度和父级的字体大小有关
            内联块标签：
                   1.同类型的标签排在同一行
                   2.内容撑起宽高
                   3.支持所有的css样式
                   4.代码换行别解析，解析的宽度和父级的字体大小有关

常用的块标签：h1~h6,p,ul,li,ol,div
权重：浏览器优先有权重的标签中找内容
title是页面中权重最大的标签，权重是10

 div标签：
                1.语义：无意义
                2.权重：无
                3.样式：无
     h1~h6标签：
                1.语义：n级标题
                2.权重：极重
                3.默认样式：margin，padding，font-weight,font-size
           温馨提示：h1标签，一个页面中最好只有一个h1，
                             h2标签，一个页面中不超过22个
                             h3随便用
    p标签：
              1.语义：段落
              2.权重：无
              3.默认样式：margin
         警告：p标签中不含块标签的类型
     ol,li,ul列表标签：
             1.语义：ul  unorderlist  无序列表
                           ol  orderlist    有序列表
                           li    list    列表
              2.权重：无
              3.默认样式：padding，margin，list-style
         温馨提示：1.ul,ol,li是组合标签
                            2.ol,ul的第一层子级必须是li
                            3.li的父级必须是ul,ol
       内联标签：
       span标签 ：
              1.语义：无意义 
              2.权重：无
              3.默认样式：无
       strong：
              1.语义：强调
              2.权重：高
              3.默认样式：font-weight
       em：
              1.语义：强调
              2.权重：高
              3.默认样式：font-style
       i:
              1.语义：强调
              2.权重：高
              3.默认样式：font-style
        a:
              1.语义：链接
              2.权重 ：无
              3.默认样式：text-decoration
       <a href="链接的网址" target="新连接的方式"></a>
       如：<a href="http://www.baidu.com" target=" _blank">百度</a>
       温馨提示：
               1.a链接中的href属性中的值:
                      ①一定要记得加http://，否则链接无效
                      ②href中的值是链接的文件或地址，当href中的值是"###"或  
                      JavaScript：：时，可造成链接无效
               2.a链接中的target属性中的值：
                      ①"_blank"是表示在新窗口中打开页面
                      ②"_self"是表示在当前窗口打开页面
       img标签：
              1.语义：图片
              2.权重：高
              3.默认样式：border vertical-align
           温馨提示：图片标签是单标签
           <img src='1.jpg'  alt='图片名称'>
           温馨提示：图片中的alt属性权重很高，一定记得加上alt

标签类型的转化：

         display:
              1.block  转化为块
              2.inline   转化为内联
              3.inline-block  转化为内联块
              4.none   显示为无

收集的块标签和内联标签汇总 点击此链接 点我点我！！
派生选择器：父级的选择器+子级的选择器
二、css的引入样式： 行间样式 内部样式 外部样式
1.行间样式 在一个标签中写一个style的属性

 如：<div style='...'></div>
   在style='...'的引号中写相应的css命令
   优点：优先级最高
   缺点：不是人写的代码

2.内部样式：

  ①在head标签中，写一个style的标签
            ②选择器：
                   1.标签名选择器：
                   2.class选择器
                   3.id选择器
                优点：加载速度快
                       行间样式>id>class>标签名
                缺点：不利于扩展，不利于代码的重用和封装

3.外部样式

 在head标签中，写一个link标签，用来关联一个css文件，在css文件中，通过选择器来控制相应的样式
         如：<link rel='stylesheet' href='/css/index.css'>
         优点：利于扩展，利于代码的封装和重用
         缺点：要加载服务器

三、浮动 当需要横向布局，并支持宽高时，可通过浮动布局
特性：

          1.浮动元素排在同一排，遇到父级的边界或相邻的浮动元素停下来
          2.浮动元素撑起宽高，
          3.浮动元素支持所有的css样式
          4.浮动元素脱离文档流
          5.浮动元素提升层级

清浮动的操作：

               1.父级也浮动
               弊端：通篇都浮动，margin页面剧中会失效
               2.给父级加display:inline-block;
               弊端：margin页面居中会失效
               3.给父级加高
               弊端：不利于扩展
               4.给父级加overflow：hidden
               弊端：子级有可能显示不完全；
               overflow：auto/scroll;  溢出显示滚动条
               overflow:hidden;溢出隐藏
               5.伪类清浮动
               clear 标签元素一侧不允许出现浮动元素
               clear：right；右侧不允许出现浮动元素
               clear：left；左侧不允许出现浮动元素
               伪类：就一种特殊的属性，通过特定的情况触发相应的代码
               标签元素：hover{}
                   鼠标移入触发括号中的代码
                标签元素：after{}
                    表示在标签后插入一个什么东西
               方式：
                    1.通过伪类after在父级元素的后面插入一个空字符：
                    父级元素：after{content:" ";}
                    2.把这个空字符变成块类型
                     父级元素：after{content:" ";display:block;}
                    3.通过clear做清浮动的处理
                 父级元素：after{content:" ";display:block;clear:both;}

四、定位 ：通过一个标签元素固定到页面的某一个位置，或者通过偏移量将
这个移动到某一个位置

                  position:relative;相对定位
                   position:absolute;绝对定位
                   position:fixed;固定定位
                   left/top/right/bottom :具体数值/百分比

相对定位：

                  1.针对自身进行定位
                  2.提升层级整级
                  3.保留原有的位置

绝对定位：

                 1.针对有定位的父级的原点进行定位，若无则成document,
                  2.绝对定位和相对定位一般配合使用，父级(相对)子级(绝对)
                  3.绝对定位的元素内容撑起宽高
                  4.绝对定位的元素支持所有的css样式
                  5.绝对定位的元素脱离文档流
                  6.绝对定位的元素提升层级整级，可通过z-index调整显示层级
                        z-index：具体的数值，数值越大，显示层级越高
                  7.父级有绝对定位，子级不需做清浮动处理

固定定位：

                  1.只针对页面窗口进行定位
                  2.提升层级整级
                  3.父级有固定定位，子级不需做清浮动处理

偏移量的特性

     left  right   top bottom
       1.在有宽度的时候，left和top的优先级比right，bottom高
       2.在没有宽度的时候，left和top,right，bottom会同时生效，会将标签元 
         素的宽高拉伸到设置的值
       通过偏移量的百分比和margin的负值可进行相应的居中处理

五、表格和表单
table标签的特性
table,tr,th,td是组合标签

       1.table标签独占一行
      2.table标签设置宽度后，th,td不设置宽度，根据内容平分table的宽度，
      如果有宽度，不超出宽度
      3.th,td的高度和宽度会影响同一列或同一排的其他标签，同一列或同一排
      继承最大高度或宽度
      4.th,水平垂直文本对齐
      5.td 垂直文本对齐
      应用：利用table的特性实现 文本垂直居中
      rowspan  行合并   colspan  列合并
      合并后要将被合并的单元格删除，否则会超出

给table设置边框，并取消内部边框

<table border=1 cellspacing=0 class='tab'>

表格边框合并

style=border-collapse:collapse

合并单元格小提示

colspan 是合并列，rowspan是合并行，合并行的时候，比如rowspan="2"，
它的下一行tr会少一列；合并列的时候 colspan="2"，此行的列会少一列

form表单
1.页面中用户提交的数据可通过标签提交到后台，
2.表单标签要通过表单控制标签作为辅助提交
3.表单控制标签，用来获取具体的用户信息
4.表单的写法

<form action="" method=""></form>

action表单信息提交的地址，可以是服务器地址，也可以是网址
    method 表单信息提交的方式
    get 地址栏可查，不加密
    post 地址栏不可查，加密，打包形式发送给后台
    1.input 表单控件
    input 标签的属性
    type   text 文本    button 按钮   password  密码文本   hidden 隐藏    radio  单选框
     submit  提交  file 文件  checkbox  多选框  color  颜色  number  数字  date 日期
     name表示表单控件的名称，规定表单控件属于哪一类名称的属性 

六、服务器
能够提供数据服务的机器
命名：

        1.驼峰式命名
        大驼峰 Footer  小驼峰 sliderBar 
       2.下划线命名  header_bg
       3.中划线命名  dl-header
       4.匈牙利命名：功能名称+属性名称  sub-btn

七、seo 搜索引擎优化

1. 标签语义化布局
       布局用合理的标签，利用合理的权重进行页面布局
  2. 权重的使用
       h1~h6,strong,em,i,img,title
  3.用户体验
  服务器压力
        页面文件大小，会影响用户流失，页面文件越大，流失越大

减少服务器的压力问题

 1.代码量
     css文件越小，数量越少，压力越少
        1.文本样式继承的问题
        2.机构尽量重用，实现精简代码
        3.尽量提取共有的样式，或通过外部样式关联
   2.文件数量
       1.css文件
       2.js文件
       3.img文件  合并背景图  即css雪碧图
  合并背景图：通过background-position进行背景定位，通过不同区域的显示，让合并的背景图在指定的位置显示
  优点 ：能够减少副武器的请求次数，
  缺点：不利于维护

八、
(1)页面结构

     容器：container  侧栏：sidebar  页头：header 栏目：column 
    内容：content/container 左右中：left right center 页面主体：main
    页尾：footer

(2)导航

     导航：nav  右导航：rightsidebar 主导航：mainnav 菜单：menu
    子导航：subnav 子菜单：submenu 顶导航：topnav 标题：title
    边导航：sidebar 摘要：summary 左导航：leftsidebar

(3)功能

    标志：logo 图标：icon 广告：banner 注释：note 登录：login 指南：guild
    登录条：loginbar 服务：service 注册：regsiter 热点：hot 搜索：search
    新闻：news 功能区：shop 下载：download 标题：title 投票：vote
    加入：joinus 合作伙伴：partner 按钮：button 友情链接：link 滚动：scroll
    版权：copyright 标签页：tab 文章列表：list 提示信息：msg 
    当前的：current 小技巧：tips