zoukankan      html  css  js  c++  java
  • html5随笔

    访问同一网站的文件时最好使用相对URL;

    HTML5不允许将nav、aside嵌套在adress元素中;

    main元素是HTML5新添加的元素,一个页面只能使用一次;role='main'

    可以将一个article嵌套在另一个article中;

    一个article中可以包含一个或者多个section元素;

    出于SEO和可访问性的目的,最好将重要的内容放在前面,可以通过css改变它们在浏览器中的显示顺序;

    对于与内容有关的图像(如:图表、图形、带有说明文字的插图),使用fugure而非aside;

    一个figure中只允许出现一个figcaption;

    现代浏览器在默认情况下会对figure添加40px的左右外边距;

    不要用alt文本代替图像的caption;

    对于标识和其他非照片类图像,可以考虑使用SVG;

    一定要按照下面的顺序定义规则:link,visited,focus,hover,active(LVFHA)

    Font-family属性是继承的,但有几个元素不会继承,select,textarea,input

    (可以强制继承 select,textarea,input{font-family:字体;})

    Font stracks字体栈;

    Background-clip;控制元素背景显示的范围;

    Background-origin;控制..开始的位置;

    Html5 shiv ;(可以让IE8及更早版本在打印时能够正确的处理新的html元素)

    Normalize.css  重置样式表;

    设置为inline-block方便为其加上下内边距,不需要使用块级元素则用inline;

    Visiibility隐藏元素时,元素及其内容应该出现的位置会留下一片空白区域。隐藏元素的空白区域仍会在文档流中占据位置;

    浮动元素的display属性会变成block,哪怕设置为inline依旧是block;

    Vertical-algin属性仅使用于行内元素,不能应用于块级元素;

    Polyfill,shim;

    Border-radius:10px;                                  四个角都是10px;

                                   10px 20px;                                   左上,右下;右上左下;

                                   25 10 50                                      左上;右上左下;右下;

    可以在border-radius声明后面增加一条:background-clip:padding-box;避免有时背景会透过圆角;

    text-shadow属性的参数设置取值:

    box-shadow属性的参数设置取值:

    x-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

    y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;

    阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

    阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;

    阴影扩展半径spread:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,让整个阴影位于元素内部;

    阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色,在Firefox/Opera下表现为黑色(已验证),建议不要省略此参数。

    为了兼容各主流浏览器并支持这些主流浏览器的较低版本,在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式

    指定多重背景不需要使用厂商前缀;

    生命是一场华丽的绽放!
  • 相关阅读:
    Activiti6详细教程
    Nginx 与 Tomcat : 413 Request Entity Too Large(请求实体太大)
    windows下安装pytorch
    vim编辑器常用操作
    el-dialog 里面的组件不刷新问题
    el-dialog 里面的 el-form 重置表单问题
    ElementUI树形表格默认展开
    设计模式之 工厂方法模式
    linux创建一个proc代码示例
    redis的安装及使用
  • 原文地址:https://www.cnblogs.com/clown3/p/5618660.html
Copyright © 2011-2022 走看看