定位、间隙解决、精灵图、BFC、表单、兼容问题、CSS hack、布局

定位：

使标签相对于某个标签重新定义一个位置，可以相对标签本身的位置，父标签或者浏览器窗口

• position：定位
  • 值：
    • static 默认
    • relative 相对定位
      • 相对于元素本身的位置定位
      • 不脱离文档流，本身的位置会保留
      • 微调自身位置
    • absolute 绝对定位
      • 相对于有定位属性的父元素，如果父元素没有定位会一层层向外寻找，直到最大的父元素（body）为止
      • 子绝父相
      • 脱离文档流，不占位
    • fixed 固定定位
      • 相对于浏览器窗口定位
      • 脱离文档流
  • 偏移量：top right bottom left
• 固定定位居中：
  • 已知盒子的宽高：
    • position:fixed；
    • top：50%；
    • left：50%；
    • margin-top：-盒子高的一半；
    • margin-left：-盒子宽的一半；
  • 未知盒子的宽高：
    • position:fixed；
    • top：0；
    • left：0；
    • right：0；
    • bottom：0；
    • margin：auto；
• 盒子在父元素里面水平垂直居中
  • 绝对定位居中
    • 已知盒子的宽高：
      • position:absolute；
      • top：50%；
      • left：50%；
      • margin-top：-盒子高的一半；
      • margin-left：-盒子宽的一半；
    • 未知盒子的宽高：
      • position:absolute；
      • top：0；
      • left：0；
      • right：0；
      • bottom：0；
      • margin：auto；
• 层级：z-index：0-9999
  • 此属性只在有定位属性的元素起作用
  • 默认由定位属性的层级：0

脱离文档流的几种情况：

• float（提升半层级，会给图片和文字让位）
• position：absolute
• position：fixed
• 定位提升一个层级，全覆盖

css补充样式属性

• border-radius：设置圆角
  • 值：px
    • 百分比
  • 分别设置四个角：
    • border-top-left-radius
    • border-top-right-radius
    • border-bottom-left-radius
    • border-bottom-right-radius
• vertical-align：文字垂直方向的对齐方式
  • top 顶部对齐
  • middle 中间对齐
  • baseline 基线对齐（默认值）
  • bottom 底部对齐
  • 用在**行内（行内块）**标签上
  • 应用：图文对齐
• 隐藏显示：
  • display：
    • display：none；隐藏
    • display：block；显示
    • 元素不存在，也不占位
  • visibility：
    • visibility：visible 显示
    • visibility：hidden 隐藏
    • 元素隐藏，但是位置保留
• list属性：
  • list-style：none；取消列表符号
    复合属性（type position image）
  • list-style-type：
    值：
    • none 无符号
    • disc 实心圆
    • circle 空心圆
    • square 方形
    • decimal 阿拉伯数字
    • decimal-leading-zero 带0的阿拉伯数字
    • lower-roman 小写罗马数字
    • upper-roman 大写罗马数字
    • upper-alpha 大写英文字母
    • lower-alpha 小写英文字母
  • list-style-position：
    值：
    • inside 在内容里面
    • outside 在内容外面（默认值）
  • list-style-image：url（）
    用背景图片代替设置图片为列表符号
• overflow 设置文本溢出时处理
  值：
  • visible 默认值，溢出时仍然显示
  • hidden 溢出部分隐藏
  • scroll 给元素添加滚轮（水平和垂直出现滚动条）
  • auto 溢出的时候自动出现滚轮
  • 分别设置水平和垂直方向的溢出处理：
    • overflow-x：
    • overflow-y：

间隙：

图片间隙问题解决方法：

• 水平方向（空白节点）
  解决：
  • 设置父元素font-size：0；
  • 浮动，把图片转成块元素，然后float：left在一行排列
• 垂直方向（行高）
  解决：
  • 设置父元素font-size：0；
  • line-height：0
  • 设置vertical-align：值除baseline以外的值都可以

设置透明度

• opacity 不兼容IE6,7,8
  • 值：0-1
  • 设置盒子包括盒子里面的内容全部呈现半透明的状态
• rgba（red,green,blue,alpha） 不兼容IE6,7,8
  • 盒子是半透明的，里面的内容不会透明
• filter：alpha（opacity=num） 兼容IE6,7,8
  • num 0-100
  • 设置盒子包括盒子里面的内容全部呈现半透明的状态

css精灵图：

css sprites css图像整合
把页面上固定类型的一些小图标整合到一张大图上面，然后通过background-image，background-repeat和background-position实现

• 优点：
  • 减少http请求的次数，提高性能
  • 易于改变图像风格
  • 减少命名的困扰
• 缺点：需要精准计算容器的大小

样式重置

每个浏览器都有自己的默认“用户代理”样式表，它用于使没设置样式的网站看起来更清晰，为实现跨浏览器的兼容带来了麻烦，
强制每个浏览器将其所有样式重置，从而尽可能避免跨浏览器的差异

图片格式：

• psd ps自动生成，包括图层，通道，文字…
• jpg
  优缺点
  • 文件小
  • 色彩丰富
  • 不支持动图和透明
  • 有损压缩
• gif
  • 支持动画和透明
  • 文件小
  • 色彩简单，只支持256种颜色
• png
  • 支持透明
  • 色彩丰富
  • 色彩复杂时，文件大
• webp
  • 文件小
  • 支持有损和无损压缩
  • 色彩方面支持
  • 有兼容性问题

项目规范

• 根据项目创建一个对应的文件夹
• html，css，images，js ，assets，只能有一个入口文件（index.html）
• 小图标（link-function）
• 命名需要见名知意
• 字母下划线和数字
• html
  • utf-8 html5
  • 标签的嵌套结构
  • 标签全部小写并且闭合，属性一定加双引号
  • 标签嵌套：
    • -ul>li
    • div可以嵌套其他标签，p标签不可以嵌套div和p
    • 行内标签不要嵌套块标签，a除外
  • 添加注释
• css
  • utf-8
  • css属性注意换行，一个属性一行
  • 图片命名需要见名知意
  • 有reset,public这两个文件，其他的css文件根据样式命名（login.css）
  • reset样式需要在页面本身样式之前引入（重置样式）
  • 注释

BFC（Block Formatting Context）

块级格式化上下文，是一个独立的渲染区域，其内部的布局不会影响外面其他元素的布局

• 如何形成BFC
  • 根标签
  • float值不为none
  • display：inline-block
  • position：ansolute或者fixed
  • overflow：除visible以外的值
• BFC特性
  • BFC里面标签从上往下排列
  • BFC标签的子元素的左边界与包含框的左边界重合
  • BFC垂直方向的margin起作用，里面子元素的margin还是会发生重叠
  • BFC区域不会和float区域重合
  • BFC在计算高度时不会忽略浮动元素的高度
  • BFC里面的布局不会影响外面的布局
• 解决问题：
  • margin重叠
  • 清除浮动带来的影响
  • 解决图文环绕
  • 自适应三栏或两栏布局

字体图标

• 阿里巴巴图标矢量库：iconfont.cn
• fontawesome.com.cn

单行文本省略：

• text-overflow：
  值：
  • clip 超出的文字裁剪掉
  • ellipsis 超出部分文字省略号代替
• 需要配合两个属性：
  • white-space：nowrap（不换行）；强制文本不换行
  • overflow：hidden；

多行文本省略

• 有兼容性问题
  • display：-webkit-box；
  • -webkit-box-orient（-浏览器-盒子-朝向）：vertical；
  • -webkit-line-clamp（固定住）：4；(限制行数)
  • overflow：hidden；
• 第二种方式：（行高和伪元素）

    	p{
            width: 500px;
            border: 1px solid red;
            *height: 80px;
            *line-height: 20px;
            position: relative;
            overflow: hidden;
        }
        p::after{
            content: ".....";
            position: absolute;
            bottom: 0;
            right: 0;
            background: #fff;
            padding-left: 2px;
        }
 	... 用一个span或者利用伪元素包裹，给它设置样式，结合定位

小三角

div{
width: 0;
/* border: 10px solid; /
border-width: 20px 40px;
border-style: solid;
/ border-left-width: 0; /
border-color: transparent blue transparent transparent;
/ border-color: red blue green yellow; */
}

小箭头

		*{
            margin: 0;
            padding: 0;
        }
        .wrap{
            position: relative;
        }
        div div{
            width: 0;
            border-width: 40px;
            border-style: solid;
            border-color: transparent blue transparent transparent;

        }
        .box{
            border-color: transparent white transparent transparent;
            position: absolute;
            top:0;
            left: 3px;
        }

<div class="wrap">
        <div></div>
        <div class="box"></div>
</div>

表单标签

• 表单标签区域放一些表单元素
• 用户可以在表单元素输入信息
• 表单元素分为很多类型，文本框，密码框，单选按钮，多选按钮，提交，重置…

 <form>
       表单标签
</form>

• 表单元素就是input标签，input分为很多类型（type）
  • text 文本框
    单行文本框
  • password 密码框
    内容不可见
  • radio 单选按钮
  • checkbox 多选按钮
  • file 文件
  • submit 提交当前form标签里面的内容
  • reset 重置
  • textarea 多行文本框标签
    • cols=‘列数’
      rows=‘行数’
  • select>option 下拉框标签

 <form action="">
        文本框：<input type="text" readonly placeholder="请输入文本">
        密码框：<input type="password" name="" id="" disabled>
        <br>
        单选按钮：<br>
        性别： <input type="radio" name="sex" id=<