css相关 细节 优化 备忘

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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{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
伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。

以上是关于css相关 细节 优化 备忘的主要内容,如果未能解决你的问题,请参考以下文章

关于std::thread以及std::condition_variable的一些细节备忘

代码片段如何使用CSS来快速定义多彩光标

h5性能优化,细节决定结果。

Flutter 布局备忘录

AJAX相关JS代码片段和部分浏览器模型

几个关于js数组方法reduce的经典片段