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>