zoukankan      html  css  js  c++  java
  • css相关 细节 优化 备忘

    <p>标签不能再包含<p>,也不能包含<div>,<div>可以包含<p>
    a 和 img 标签是特殊的行内元素,a标签可以包含div等,几乎所有的可替换元素都是行内元素,例如<img>、<input>等等,替换元素一般有内在尺寸,所以具有width和height,可以设定。例如你不指定img的width和height时,就按其内在尺寸显示,也就是图片被保存的时候的宽度和高度。
    对于表单元素,浏览器也有默认的样式,包括宽度和高度。
     
    margin-top/bottom(padding-top/bottom)百分比以最近的块级祖先元素的宽度计算
     
    dt 标签的属性重新设置只是白白浪费,增加页面渲染负荷

    padding 属性值极少的标签有,其他标签无需浪费时间重新渲染

    要是前后没有直接的浮动元素,使用clear:both就是多余的

    inline水平的元素对很多CSS样式都不起反应,例如height/width, clear, margin-top/margin-bottom, vertical-align, overflow等

    block水平的元素对vertical-align属性没有作用。

    a{display:inline-block; *display:inline; *zoom:1;}
    这是设置元素的inline-block属性,但是对于inline行内元素来说,后面的两个样式就是多余的,因为display:inline-block可以让inline水平的元素表现的就如同真正的inline-block水平一样。

    margin负数可以增大标签的宽度,不需要用width

    input ,textarea select 本身有文字大小,不会跟随父级标签,所以需要重新设置
    input,textarea,select{font-size:100%}

    文本框及文本域100%自适应显示,光标通常需要与左边保持一定距离
    input{92%; padding-left:4%; padding-right:4%;}

    根据 CSS 规范,inline 元素只能包含 block 元素或 inline 元素中的一种。如果出现了混合内容,则应创建匿名的 block 呈现器,以包裹 inline 元素。

    transform 的旋转rotate默认的是以元素的 50% 50% 为源点来旋转的
     
    overflow:hidden/scroll/auto 也会使文件有包裹性,能够把float元素封在里面,通常拿来修复float影响,重现获得高度
    zoom在 IE6 7 上有包裹性,变成块元素, 本元素放大
     
    宽度百分比都是相对于父块状元素的宽度值的,font-size的百分值是相对于向外的第一含有font-size属性的层的font-size大小而言的,而这里的vertical-align,有些不拘一格,是相对于此标签继承的line-height值决定的。同时宽元素宽度默认100%,但是高度没有,应该是出于布局考虑。
     
    隐藏滚动栏
    document.body.style.overflow="hidden";
     
    伪元素在css3的写法是::after,都是以双冒号开头,而css2的写法则是这样:after,并且需要把伪元素(pseudo element)和伪类(pseudo classes)区分开来,他们拥有伪类的写法,但是却不是伪类,目前已知的伪元素就只有5个,分别是before,after,first-line,first-letter,selection
    伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
    伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。
  • 相关阅读:
    mysql 导入导出
    spring3.1 profile 配置不同的环境
    <context:annotation-config />和 <context:component-scan
    NPM 使用介绍
    产品每生产一个消费一个
    通过Lock对象以及Condition对象实现多线程同步
    Spring定时任务的几种实现
    详解java定时任务
    设计模式-享元模式
    堆栈简析
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5159798.html
Copyright © 2011-2022 走看看