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

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

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

时间: 2024-11-05 18:48:56

css相关 细节 优化 备忘的相关文章

css四中定位总结备忘

css布局的核心是position属性,position:static || relative || absolute || fixed static是默认的属性 相对定位: 相对定位相对的是它原来在文档中的位置(或者默认位置).接下来,可以使用top.right.bottom.left属性来改变它的位置. 绝对定位三特性: 1.设置成绝对定位后默认的宽度变成内容宽度 2.设置成绝对定位的部分脱离文档流 3.绝对定位的默认参照物为第一定位祖先/根元素 固定定位: 固定定位元素的上下文是视窗,它不

linux 相关代码路径备忘。

https://github.com/torvalds/linux/blob/master/net/core/dev.c?utf8=%E2%9C%93#L7736昨天 11:35 https://github.com/torvalds/linux/blob/master/net/core/sock.c?utf8=?#L56110:27 https://github.com/torvalds/linux/blob/master/net/core/dst.c?utf8=%E2%9C%93#L1541

HttpContext.Current.Session.SessionID相关问题及备忘

今天Tony提到说我们系统中会利用如下代码来判断用户是否过期. if (string.IsNullOrEmpty(UserContext.ConnectionSessionId)) { LogUIFactory.Current.Debug(HEARTBEAT_DISCONNECTION_LOG_2); timeout = true; } 但是我做实验发现,在page load的时候,打印出来的sessionid是一直在变化的: protected void Page_Load(object se

OpenCV相关基础操作备忘

1.循环读取N张图片进行处理 int i= 1; while (i<= 10) { string imageName = format("%d.jpg", i); image = imread(imageName, IMREAD_GRAYSCALE); namedWindow("Gray_image", CV_WINDOW_AUTOSIZE); imshow("Gray_image", I); i++; while (1){ if (wai

平台相关产品(备忘)

C++编译优化备忘

基于GCC测试:http://www.tutorialspoint.com/compile_cpp11_online.php const A& a=fun() 与 A a= fun() 1.方法fun返回值为 const A& 时,前者比后者 减少一次拷贝构造 1 #include <iostream> 2 3 using namespace std; 4 5 class A 6 { 7 8 public: 9 10 A() { 11 cout << "-

JqGrid相关操作备忘 方法列表

JqGrid相关操作备忘 方法列表 1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选

备忘:CSS术语词汇表——张鑫旭

一.叨点什么 写文章的时候经常用到一些CSS方面的专业词汇.但是毕竟芳华年少不在,脑袋有点秀逗了,很多名词都记不住,这种感觉比厕所便秘还难受.比如今天居然记不起来公司公认脸蛋最pp的同事的名字,没想到我会记不住美女的名字.我觉得我背后一阵萧瑟的秋风吹起,自己俨然成了漫画里面的程序猿—— 某天闲逛到nimbupani,发现有专门展示CSS术语的文章,哇咔咔,感觉好像咬到一口正宗的高邮咸鸭蛋一样,不过人家的是英文,所以我还要本地化润饰处理,然后,就可以留给自己备忘的哈,的说. 二.CSS词汇我来也

CSS布局参考 IE的If条件注释使用备忘

内容提要:在CSS布局中,还常常用到IE Hack.if IE起着非常大的作用! 关键字:Div CSS IE Hack if IE什么意思呢?下面就列举了一些在CSS常见的HACK控制语句. 作为IE的IF条件注释使用备忘,大家可以参考,有经验欢迎与网友分享. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if