css相关 细节 优化 备忘

Posted 2020-06-09

<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{width: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

伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。

伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。