首页 > 代码库 > html css 笔记

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="http://www.mamicode.com/#">  超链接

    <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="http://www.mamicode.com/50" step(部署控制,每次移动多少)="10"

    type="number" 数字选择

    max="9" min="1" value="http://www.mamicode.com/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="http://www.mamicode.com/javascript">javascript</option>

       <option value="http://www.mamicode.com/html">html</option>

       <option value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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>

html css 笔记