html css 笔记

cursor其他取值 鼠标移入
    auto          ：标准光标
    default        ：标准箭头
    pointer        ：手形光标
    wait          ：等待光标
    text          ：I形光标
    vertical-text   ：水平I形光标
    no-drop        ：不可拖动光标
    not-allowed     ：无效光标
    help          ：帮助光标
    all-scroll      ：三角方向标
    move          ：移动标
    crosshair       ：十字标
Html5中标签（包括新增常用）：
    <div>  块
    <span>  区分掩饰
    <a rel="nofollow" href="#">  超链接
    <header>  页面头部（板块）
    <footer>  页面底部（板块）
    <section>  页面中的板块→代替<div>
    <nav>  导航
    <article>  页面中独立完整的一块内容，可以是一个文章、帖子、博客及回复的内容块:
    <aside>   用法一：用来写在<article>中，作为其附属信息
用法二：用来写在页面主体当中，作为整个页面的附属信息
    <details>
        <summary>今天天气不错</summary>
    </details>
类似于隐藏框 当<details open>是<summary>内容显示出来
    <dialog>  一个对话框一般隐藏，显示加open
    <h1>~<h6>  标题标签
    <p>  段落
    <mark>  强调标签——加背景色
    <strong>  强调标签——字体加粗
    <em>  强调标签——字体倾斜
    <time>  强调标签——时间
    <ul>  无序列表
    <ol>  有序列表
    <dl>  分为dt dd，dd为dt进行列表的再次分类
    <img src=""/>  图片
    <form>  表单
    <input>  一些框
    <textarea>  输入一段文本框
    <select>  下拉框 选择为<option>
    <table>  表格
    <thead>  表格头部
    <tbody>  表格内容
块标签(block):
    1.独占一行
    2.支持所有的样式
    3.不设置宽度，撑满父级的空间
内嵌标签(行内/内联)(inline)
    1.在一行显示
    2.不支持宽高，对上下的margin和padding支持的也有问题
    3.代码换行会被解析成一个空格
    4.内嵌的宽度，有内容撑开
块:
    div,header,footer,nav,article,aside,section,p,h1-h6,ul,ol,li,dl,dt,dd
内嵌:
    span,a,strong,em,time,mark
background 背景（集合样式）
    background-color 背景颜色
    background-image 背景图片（添加路径 url（））
同一个元素可以拥有多个背景，用逗号分开，先写的背景在上面
    background-repeat  背景图片平铺方式
    no-repeat     （不平铺）
    repeat        （平铺）
    repeat-x      （水平平铺）
    repeat-y      （纵向平铺）
background-postion 背景定位
关键字
      x：left  center  right
      y：top  center  bottom
数值
      x：10px/20%   （像素大小/百分比）
      y：10px/20%
background-attachment：fixed     固定图片不动
background-origin     背景图位置
    border-box
    padding-box     （默认）
    content-box
background-clip 背景裁切
    -webkit-text       （文字背景，只限谷歌）
    border-box         （默认）
    padding-box
    content-box
background-size 背景图大小（！！！手机端不建议使用）
等比放大：contain（包含）
    cover （覆盖）
线性渐变
    background-image：linear-gradient（red,blue） （有红色变蓝色 从上到下）
渐变定位（从什么地方开始到什么地方结束）
在（red,blue）中加入位置
如：（red 50px,blue 100px）也可加入百分比
渐变方向 deg
在开是位置加入角度值 （角度默认180deg）
如：background-image：linear-gradient（120deg，red,blue）
斑马线（就是平铺渐变）
    background-image：repeating-linear-gradient（）
兼容IE6（方向）
    filter：progid:DXTmageTransform.Microsoft.gradient
    (starColorstr=‘red‘,endColorstr=‘blue‘,GradientType=‘1‘);或者2
径向渐变
    background-image：radial-gradient（起点 形状 大小 点）
起点：可以是关键字（left，top，right，bottom）、具体数值或百分比
形状：ellipse、aircle
大小：具体数值或百分比，也可以是关键字
最近端（closest-side）
最近角（closest-corner）
最远端（farthest-side）
最远角（farthest-side）
包含 contain
覆盖 cover
！！！火狐只支持关键字。
font 文字（集合样式）
    color  字体颜色
    font-size  文字大小
    font-family  字体
    font-weight:  字体加粗与否
    bold  加粗
    normal  正常
    font-style:  字体倾斜
    italic  倾斜
    nomral  正常
    line-height  行高
字体语法：
    font：font-style  font-weight  font-size/line-height  font-family；
文本:
    text-decoration: 文本修饰
    line-through 删除线
    overline 上划线
    underline 下划线
    none 没有修饰
text-algin: 文本对齐方式
    left     左
    center   中
    right    右
    text-indent 首行缩进
white-space：nowrap 强制不换行（wrap 换行）
    word-spacing 单词间距
    letter-spacing 字母间距
    direction 文字排列方向
    rtl  右到左
    ltr  左到右
unicode-bidi：bidi-override  改变文字的书写方式（从右到左）
在某一元素内文字超出显示省略号
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
border 边框(复合样式，集合样式)
    border-top
    border-right
    border-bottom
    border-left
    border-top-width 上
    border-right-width 右
    border-bottom-width 下
    border-left-width 左
    border-style 边框样式(solid 实线/dashed 虚线/dotted 点线)
    border-top-style
    border-right-style
    border-bottom-style
    bordder-left-style
    border-color 边框颜色
关键字
    rgb(0-255,0-255,0-255);
六位或者三位的一个十六进制的数字;
    border-top-color
    border-right-color
    border-bottom-color
    border-left-color
border-radius 圆角半径
列：border-radius:10px 20px 30px 40px
    border-width 边框宽度
border-image语法 ：
    border-image：border-image-sourceg  border-image-slice  border-image-repeat
    -webkit-border-image:url(border.png) 27 27 stretch stretch;
    border-image     给内容加入图片仅限谷歌 要加如前缀 -webkit-
    border-image-sourceg     引入图片
    border-image-slice     切割图片 两个值（上下或左右）不用加px
    border-image-repeat    图片的排列方式
    round      平铺
    repeat     重复
    streth     拉伸
    border-colors 为边框加颜色（从外层一层层显示）
只可在火狐下使用，并单独为某个方向上的边框设置
盒模型：
怪异盒模型
在IE6,7,8,下，没有文档声明会进入怪异盒模型
    box-sizing：
    border-box（怪异盒模型）
    content-box （标准盒模型）
box-shadow
    inset （可选）内阴影、 x 偏移、 y 偏移、 模糊半径、 扩展半径、 阴影颜色
阴影先写的在上边，后写的在下边
padding
    padding 内填充(使元素和它的内容之前有一个空隙)
    padding:30px(上下左右);
    padding:30px(上下) 60px(左右);
    padding:10px(上) 30px(左右) 60px(下);
    padding:10px(上) 30px(右) 60px(下) 80px(左);
    padding-top
    padding-right
    padding-bottom
    padding-left
    padding不算在元素的width里边
    padding在元素的边框以里，并且padding会显示元素的背景
margin
    margin 外边距
    margin:30px(上下左右);
    margin:30px(上下) 60px(左右);
    margin:10px(上) 30px(左右) 60px(下);
    margin:10px(上) 30px(右) 60px(下) 80px(左);
    margin-top
    margin-right
    margin-bottom
    margin-left
    margin在元素的边框以外，并且margin不会显示元素的背景
    **同级元素之间的距离用margin，父元素和子元素之间的距离用padding
a 超链接
    href 页面地址 点击会跳到这个页面来
    href 压缩包 点击会下载这个压缩包
    href id名字 点击跳到这个id的元素的位置
    a 标签不继承父级的字体颜色
    a标签中不能再包含a标签
    span 标签区分样式用
包含选择 a span{} 找到a标签下的span标签
base 定义页面上的链接默认的打开方式和默认地址
新窗口打开页面 target="_blank"
当前窗口打开页面 target="_self"
table 表格
table 设置宽度之后，宽度会自动分配到每一行,设置高度之后也会自动分配到tbody下的每一行
    thead 表格头部
   tbody 表格主体
tr 行
th 单元格    (加粗，居中)
      td 单元格
colspan     横向合并单元格
rowspan     纵向合并单元格
    td,th 不支持margin
    tr，thead，tbody :不支持margin和padding
    border-spacing:0; 单元格间距为0（IE6，7不支持）
    border-collapse:collapse; 合并边框
单元格中的内容默认垂直居中,可通过设置vertical-align进行修改
单元格设置 宽度，一竖列宽度都变，单元格设置 高度，一横行高度都变
表格清除默认样式：
    table{border-collapse：collapse；}
    td，th{padding：0；border：1px；}
vertical-align 垂直对齐方式(用在两个或多个，内联或者内联块元素垂直方向的对齐)
     值               描述
    baseline       默认。元素放置在父元素的基线上。
    sub          垂直对齐文本的下标。
    super         垂直对齐文本的上标
    top          把元素的顶端与行中最高元素的顶端对齐
    text-top       把元素的顶端与父元素字体的顶端对齐
    middle        把此元素放置在父元素的中部。
    bottom        把元素的顶端与行中最低的元素的顶端对齐。
    text-bottom    把元素的底端与父元素字体的底端对齐。
    length
    % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
float(浮动 left/right/none):
    1.使内嵌元素支持宽高
    2.使块元素在一行显示
    3.不设置宽度的时候,宽度由内容
    4.脱离文档流
浮动原理:
使元素脱离文档流,然后按照指定的方向去移动，直到碰到父级的边界，或者另外一个浮动元素停止
文档流:
文档流是文档中可显示对象在排列时所占用的位置。
BFC ( Box Formatting Context) 块级格式化上下文
     inline formatting context 行内格式化上下文
BFC 作用
    1.清除内容浮动
    2.阻止margin向外传递
触发BFC的条件:
    1.根节点
    2.float不为none的情况
    3.display的值为inline-block、table-cell、table-caption
    4.overflow的值不为visible
    5.position的值为absolute或fixed
overflow的值
    visible    默认值。内容不会被修剪，会呈现在元素框之外。
    hidden     内容会被修剪，并且其余内容是不可见的。
    scroll     内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto       如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    inherit    规定应该从父元素继承 overflow 属性的值。
    clear      元素的某个方向上不能有浮动元素（left、right、both、none）
清浮动的方法：
    1.给同为父元素设置  float
    2.给父元素设置  display：inline-block；
    3.给父元素设置  overflow不为visible（默认值） 一般设为auto；
    4给父元素加个样式
        clearFix:after{content:"";display:block; clear:both;} 最流行的方法
定位（position）
    position:relative; 相对定位(只加相对定位元素不会有任何变化)
    1.不脱离文档流(元素移走元素的初始位置，还会被保留)
    2.根据自己的原始位置来计算left(right)和top(bottom)值
    3.提升层级
position:absolute; 绝对定位
    1. 脱离文档流
    2.提升层级
    3.根据自己有定位的父级来计算坐标,如果父级没有定位就会一层一层的向外去找.所有的父级都没有定 位,就根据document来计算
    4.使内嵌元素支持宽高
    5.绝对定位之后不设置宽度，宽度有内容撑开
！！！！元素定位之后，默认情况下，后边的层级高于前边的元素
z-index 层级
    1.数值越大层级越高
    2.层级只在定位元素上起效果
    3.层级最好只在同级元素之间做比较
document 是html的父级
form 表单
    action    提交跳转地址
常用控件-----
    textarea       输入一段文本
    select         下拉框  option
    input
    type="text"      文本输入框
    type="password"  密码框
    type="radio"     单选框
    type="checkbox"  复选框
    type="file"      上传控件
    type="submit"    提交按钮
    type="email"     邮箱 必须以@结尾
    type="tell"      电话 （移动设备自动弹出数字输出法）
    type="url"       网址
    type="range"     数值选择
    max="100" min="1" value="50" step(部署控制，每次移动多少)="10"
    type="number" 数字选择
    max="9" min="1" value="3" step="3"
    type="color" 取色器
    type="datetime-local"   时间（年月日小时）
      time： 只有时间
      date： 只有年月日
      week： 第几周/年
      month： 第几月/年
value  值
name 数据名称
常用属性-----
    checked 单选和复选的默认选中
    selected 的默认选中
    disabled 禁止控件的编辑和提交
    for=要辅助input的id
    pattern：正则验证
    placeholder：提示文字信息（不兼容IE）
    autocomplete：是否保存用户输入值 on（默认）/off
    autofocus：指定表单获取输入焦点
    required：强制用户输入不能为空
<input type="text" name="user" list="valList" required/>
   <datalist id="valList">（为input中提示选择的内容，下拉框。）
       <option value="javascript">javascript</option>
       <option value="html">html</option>
       <option value="css">css</option>
   </datalist>
表单草稿箱
当用户想保存草稿箱时
为submit加入
    formaction="地址" 新的提交地址
    formnovalidate 取消验证
清除表单默认样式
    form{margin：0；}
    input，select，textarea{padding：0；margin：0；border：1px solid #000；}
    textarea{resize：none；overflow：auto；}
resize 属性规定是否可由用户调整元素的尺寸。
注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
     值               描述
    none         用户无法调整元素的尺寸。
    both         用户可调整元素的高度和宽度。
    horizontal    用户可调整元素的宽度。
    vertical      用户可调整元素的高度。
伪类
    :link{}      此链接未被访问过
    :visited{}   此链接已访问
    :hover{}     鼠标移入
    :active{}     鼠标按下
    L-V-H-A
：target     点击后出发hash值 类似锚点a
：checked     被选中的单选框或复选框
文本伪类
    p：first-letter  第一个字
    p：first-line   第一行
    p：selection    选中的颜色改变
    p：after       元素末尾
    p：before      元素开始
    p：not        （命的名） 排除掉谁
结构性伪类：
    box h2:nth-child(3){background:Red;}
找到h2标签的父级下边的第3个子元素,并且标签类型还必须是h2
    p:nth-of-type(3){background:Red;}
找到p标签的父级下的第3个p标签
    :first-child == :nth-child(1)
    :last-child == :nth-last-child(1)
    :first-of-type == :nth-of-type(1)
    :last-of-type == :nth-last-of-type(1)
    (其中括号里面的值可以是：odd（奇数）、even（偶数）、或者数学里面的数列（n、2n、）！)
IE6 兼容问题
    1、在IE6下子元素会撑开父级设置好的宽高
    2、max-width 最大宽度    min-width 最小宽度
     max-height 最大高度    min-height 最小高度
不兼容IE6
    3、在IE6下，不支持1px的点线
    4、元素内，除了内嵌还有其他类型的元素，行高会失效
    5、在IE6，7下，父级有边框,可能会造成子元素的margin值失效
解决办法:触发父级的haslayout
    6、关于标签兼容问题--------<!-- 引入html5标签支持的js文件来处理 -->
    7、IE6下只支持l-v-h-a这四个伪类,并且支持加给a标签
    8、在IE6下，每行元素宽度和父级的总宽度，相差超过3px，最后一行下margin 失效
    9、在IE6下，不支持给块标签加inline-block
    10、在IE6下，块元素有横向的margin和浮动的时候，横向的margin会被放大两倍ss
解决办法:给元素加display:inline
    11、在IE6下，高度不满19px的元素，高度会被当做19px来处理
解决办法:加overflow:hidden
    12、在IE6，7下，li本身没浮动，但是li里边的内容浮动了，li下边会多出几个像素的间隙
解决办法: 1.给li加浮动（当li下的空隙问题和最小高度问题并存的时候，给li加浮动）
                  2.给li设置vertical-align
    13、在IE6下，两个浮动元素之间有注释或者内嵌元素，并且元素的宽度和父级宽度相差小于3px，最后几个文字 会被复 制
    14、在IE6,7下，浮动元素父级有宽度的情况下不用请浮动
haslayout（触发）、元素会根据自己自身内容的大小，或者父级的大小来重新计算自己的宽高
haslayout触发条件：
       display: inline-block、 height: (任何值除了auto)、 float: (left 或 right)、position: absolute、 width: (任何值除了auto)、zoom: (除 normal 外任意值) zoom放大或缩小
    15、在IE6下，浮动元素和绝对定位元素是并列关系的时候，绝对定位元素会消失掉
解决办法:用div把绝对定位元素包起来
    16、在IE6，7下，子元素有相对定位的话，父级的overflow对它不起作用
解决办法:给父级也加相对定位
    17、在IE6下，父级的宽高是奇数的话，元素的right（bottom）有1px的偏差
    18、IE6,7,8不支持opacity、用filter:alpha(opacity=50);
    19、在IE6下，给输入类型的表单控件加border:none无效
解决办法:重置input背景
在IE6下，输入类型的表单控件上下各有1px的空隙
解决办法:给元素浮动
在IE6下，输入类型的表单控件输入文字的时候，背景会随着一块移动
解决办法:把背景加给父级
    20、在IE6下，子元素的margin -1px（超出父集边框，） 父集会自动包裹住子元素
解决办法：给父集加 position：relative
动画 animation
    @keyframs animate(名称随变起){
        0%{
            width=100px;
        }
        10%{
            width=500px;
        }
    }
样式内容：.box{animation:animate(名称)  3s（时间）  1s（延迟时间）  infinite（无限循环） altermate（反向运行）； }
transform：变换
    transform-origin：变还原点位置
（x轴方向 （left  center right  百分比%）
    y轴方向 （left  center right  百分比%）
    z轴方向 （left  center right  百分比%）
transform-style：preserve-3d  （做3d必须加）
    transform：scale（x，y）
    scale3d  （x，y，z） 缩放
    rotate  （deg角度）
    rotate  （x,y,z,deg角度）旋转
过渡属性：
    transition: property duration timing-function delay;
值 描述
    transition-property  CSS 属性的名称
    width、height
    transition-duration 过度时间（秒、毫秒）
    transition-delay 延迟时间（秒、毫秒）
    transition-timing-function 规定运动形式
    ease    逐渐变慢（默认值）
    linear   匀速
    ease-in  加速
    ease-in-out 先加速后减慢
    cubic-bezier（x1，y1，x1，y1） 贝塞尔曲线
滤镜：
    -webkit-filter:blur(5px);  //模糊，此处为5像素
    -webkit-filter:sepia(0.5);  //叠加褐色，取值范围0-1，此处表示50%的褐色
    -webkit-filter:brightness(0.5);  //亮度，取值范围0-1，5倍亮度（数字为0时为正常样式，为1时表示的是100%亮度，无 法看 到图片）
    -webkit-filter:hue-rotate(30deg); //色相（按照色相环进行旋转，顺时针方向，红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红- 红） 此处为叠加黄色滤镜
    -webkit-filter:invert(1);  //反色，取值范围0-1,0为原图，1为彻底反色之后，0.5为灰色
    -webkit-filter:saturate(4);  //饱和度，取值范围0~*,0为无饱和度，1为原图，值越高饱和度越大
    -webkit-filter:contrast(2);  //对比度，取值范围0~*,0为无对比度（灰色），1为原图，值越高对比度越大
    -webkit-filter:opacity(0.8);  //透明度，取值范围0~1,0为全透明，1为原图
    -webkit-filter:drop-shadow(17px 17px 20px black); //阴影
移动端写默认
宽度适应屏幕大小
    <meta name="viewport" content="width=device-width,user-scalable=no" />
加入JS 使最宽不超过540px  设置rem 为16分之一
    <script>
        var oHtml=document.getElementsByTagName("html")[0];
        var iWidth=document.documentElement.clientWidth;
        iWidth=iWidth>540?540:iWidth;
        oHtml.style.fontSize=iWidth/16+"px";
    </script>
清除样式:
    a{-webkit-tap-highlight-color:rgba(255,0,0,0);} 点击有暗影
    input{-webkit-appearance:none;}
    body *{-webkit-text-size-adjust:none;} 字体最小大小
解决滑动内容效果:
    <script>
        var oScroll= new mScroll("wrap");    wrap{指的是内容块}
    </script>               
处理已给像素边框！！
    <script>
        var iScale=1/window.devicePixelRatio;
        document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+iScale+‘,minimum-scale=‘+iScale+‘,maximum-scale=‘+iScale+‘" />‘);
    </script>
处理设备高度固定屏幕高度：
    <script>
        document.body.style.height=document.documentElement.clientHeight+"px";
    </script> 加入body第一个
响应式（媒询media）
媒体类型
    all 所有的媒体类型
    screen 彩屏设备
    print 打印设备
    handheld 手持设备
    braille 盲文触觉设备
    embossed 盲文打印机
    projection 投影
    speech 听觉设备
    TTY
    TV 电视
关键字
    and
    not
    only
媒询三种引入方式
    1.<link rel="nofollow" href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
    2.@import url("css/style.css");
    3.直接写入style里面。
    @media all
    {
        .box{
             width:100px;
          }
    }
弹性盒模型（需要加前缀）
    display：flex == display：inline-flex    类似浮动，不用清浮动
在改类型的元素内 子元素可以设置margin：auto  auto；
设置主轴方向（flex-direction：）
    row 从左向右排列（默认值）
    row-reverse 从右向左
    column 从上到下
    column-reverse 向下到上
主轴内元素对齐方式（justify-content：）
    flex-start 元素在开始位置 富裕空间在另一侧（默认）
    flex-end  元素在末尾位置富裕空间在起始处
    center     元素居中富裕空间平分左右两侧
    space-between 富裕空间在元素之间平分
    space-around   富裕空间在元素两侧平分
侧轴对齐 （align-items：为对齐元素的父集设置）
flex-start 元素在开始位置 富裕空间在另一侧（默认）
flex-end  元素在末尾位置 富裕空间在起始处
center     元素居中 富裕空间平分左右两侧
注意：align-self 也是侧轴对齐但是用来写在对齐元素的样式内！！！
换行 （flex-wrap：）
    nowrap（默认）
    wrap 换行
    wrap-reverse 反向换行
其中 主轴对齐方式 与 换行可以写集合
    flex-flow：row（主轴对齐方式）  wrap（换行）
堆栈伸缩行（algin-content：）
algin-content 会更改 flex-wrap 的行为
它和 align-items 相似，但是不是对齐伸缩项目，它对齐的是伸缩行。
flex-start
flex-end
center    
space-between
space-around  
oder（在元素的排列位置，给子元素加人）  oder=0（默认）
遮罩（mask）
    -webkit-mask：url（img）
    mask：用背景图片来覆盖掉图片。
删栏（columns）加浏览器前缀
    column-width 栏目宽度
    column-cunt   栏目列数
    column-gap   栏目距离
    column-rule   栏目间隔线
    column-fill   栏目高度是否统一
外联框架
    <iframe src="http://www.baidu.com#form" width="900" height="40" scrolling="no" frameborder="0"></iframe>
ioc 网页小标
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <link rel="nofollow" href="favicon.ico" rel="icon" />
    </head>
热区
    <map name="mt">
        <area shape="rect" coords="923,398,1271,504" rel="nofollow" href="http://www.baidu.com">
    </map>
   shape="rect" 矩形
   coords="左上角X,左上角Y,右下角X,右下角Y"
   shape="circle" 圆形
   coords="圆心的X,圆心的Y,半径"
   shape="poly" 多边形
coords="第1个点X,第1个点y,第2个点X,第2个点y,第3个点X,第3个点y......"
视频（优酷视频）:
    <iframe height=400 width=200 src="http://player.youku.com/embed/XMTM0NDEyMTQxNg==" frameborder=0  allowfullscreen></iframe>

原文：http://www.cnblogs.com/shenzikun1314/p/6125003.html