相对偏移 指定left top等属性就能够够完美控制一个元素的位置

如:

position:relative; left:2px;

今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会把另一个框顶到下一行,这个时候就可以用margin-right:-2px;将右外距设置为负数来解决!

css写表达式控制图片大小,当图片大小大于某一数值时,强制设置其宽 高为指定大小。

img { max-width: 163px; width:expression(this.width > 163 ? "163px":this.width); height:expression(this.width > 163 ? "163px":this.width); }

css <li> 横排显示,并指定宽度的方法。当直接用display:inline 的时候,<li>是横排了,但是指定不了<li>的宽度,这样在<li>有背景图片的时候不能够控制背景图片的偏离位置。这时候可以用display:block; float:left; 这样<li>依然是横排显示,而且还能够指定宽度,能够任意控制背景图片的位置了。

<li>的元素如何垂直对齐

 
 
首先设置li的高度 height:25px,如果你不设置line-height的话,他将top对齐,最好的办法是设置line-height的高度与li的高度一致,这样的话,文字在里的对齐方式就是垂直居中对齐的了。因为,文字在line-height的高度范围内是垂直对齐。
 
在切PSD图片的时候,虽然切迟来的是需要透明的,但是在切的过程中,适当将背景显示,能够清楚地看见图片的阴影,半透明的位置,切得才更加精准。
 
css选择器优先级排序
写在前面>写在后面>行内样式>ID选择器>class选择器>dom选择器
 

/* 交集选择器 只对P且class为pp1的元素有效 */

p.pp1{ background-color:black; color:White; }
        /* 并集选择器 所有选择到的元素都有效 */

.p1, .span1{ background-color:black; color:White; }

/* 直接后代选择器,用空格分开 这种空格为分隔符只影响所有后代元素 */

p b{ font-weight:700; background-color:White; }

/* 大于号,只影响直接后代元素 */

p>b{ font-weight:700; background-color:Maroon; }

一个盒子实际所占有的宽度是由 内容+内边距+外边距+边框组成。   注意border也是要占用宽度的。

border none与hidden都不显示边框,二者效果相同,只是运用在表格中时,hidden可以解决冲突问题。

当一个盒子设置了背景图片,背景图片覆盖的范围是padding和内容组成的范围(IE是这样,Firefox是padding + content _ border),并以padding的左上角为基准点平铺图像。

块级元素(block)会占一行,不管内容满不满一行。如:<ul li> <div>

行内元素(inline)占用的元素仅仅为内容的长度,当多个元素的内容都不满一行时,会自动显示在同一行。如:<span><a>

行内元素之间的水平margin为左边距+右边距(左边元素的margin-left + 右边元素的margin-right)。

块级元素之间的竖直margin为两者的较大者(上面的margin-bottom与下面的margin-top的较大者).

嵌套盒子之间的距离为子元素的margin+父元素的padding

附:HTML 块级元素与行内元素 

块元素(block element) HTML标签分类明细 
    * address - 地址

* blockquote - 块引用

* center - 举中对齐块

* dir - 目录列表

* div - 常用块级容易,也是css layout的主要标签

* dl - 定义列表

* fieldset - form控制组

* form - 交互表单 (只能用来容纳其它块元素)

* h1 - 大标题

* h2 - 副标题

* h3 - 3级标题

* h4 - 4级标题

* h5 - 5级标题

* h6 - 6级标题

* hr - 水平分隔线

* isindex - input prompt

* menu - 菜单列表

* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容

* noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

* ol - 排序表单

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

内联元素(inline element) HTML标签分类明细 
    * a - 锚点

* abbr - 缩写

* acronym - 首字

* b - 粗体(不推荐)

* bdo - bidi override

* big - 大字体

* br - 换行

* cite - 引用

* code - 计算机代码(在引用源码的时候需要)

* dfn - 定义字段

* em - 强调

* font - 字体设定(不推荐)

* i - 斜体

* img - 图片

* input - 输入框

* kbd - 定义键盘文本

* label - 表格标签

* q - 短引用

* s - 中划线(不推荐)

* samp - 定义范例计算机代码

* select - 项目选择

* small - 小字体文本

* span - 常用内联容器,定义文本内区块

* strike - 中划线

* strong - 粗体强调

* sub - 下标

* sup - 上标

* textarea - 多行文本输入框

* tt - 电传文本

* u - 下划线

* var - 定义变量

可变元素  HTML标签分类明细 
    * applet - java applet  

* button - 按钮  

* del - 删除文本  

* iframe - inline frame  

* ins - 插入的文本  

* map - 图片区块(map)  

* object - object对象  

* script - 客户端脚本

float:inherit;从父元素中继承float属性;

clear:left/right;消除左/右浮动盒子对本盒子的影响。 clear:both;清除两侧浮动对本盒子的影响。

绝对定位position:absolute; 对其他盒子完全没影响,相当于从HTML代码中抽取了出来,会覆盖在其上面。其位置的设定是,当其有定位属性父元素(有position属性,且position属性不为static),以其父属性为定位基准,如果没有则以浏览器为定位基准。当两个块级元素设置为abosolute属性时,可以通过设置z-index属性的值来决定哪一个元素显示i在上面,值大的显示在上面。

!important 提升优先级,使该条语句不会被后面的语句覆盖。

IE6能识别*,但不能识别 !important,  IE7能识别*,也能识别!important;  FF不能识别*,但能识别!important; 另外再补充一个,下划线"_",  IE6支持下划线,IE7和firefox均不支持下划线。

1em表示其父元素中字母m标准宽度。1ex则表示字母x的标准高度。  注意是跟父元素比。

font-size:4em; line-height:1.5; float:left;   这样的设置,可以使第一个字母,占三行显示。

text-indent:2em;可以设置为首行速进2父元素的大小个字位置。

verticla-align 垂直对齐方式,一般只是竖直方向上有效。如果文字放在DIV中不会有效果。如果文字只有一行,只要设置line-height与height一样就可以实现居中对齐。

技巧1 背景颜色设置得与渐变背景图片的最下面颜色一样,就可以实现整个页面无论多长都有和谐的效果。

PNG图片的位越小,文件体积越小。但是8位与24位在IE6中并不支持透明。

通过设置a 的 display:block就可以实现鼠标移入块内就变手形,而不是移动到文字上才行。

为了防止鼠标指针经过时造成边框的跳动,可以再通常状态添加于背景色相同边框,在移动时才变色。

css学习日记的更多相关文章

  1. 小白CSS学习日记-----杂乱无序记录(3)

    1.后代选择器 .antzone li { } class='antzone' 所有子孙后代中的li   2.子选择器 .antzone > li { } class='antzone' 的子一 ...

  2. 前端学习日记之HTML、CSS 简单总结

    前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...

  3. Zend Framework学习日记(2)--HelloWorld篇(转)

    Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...

  4. JavaWeb学习日记----XML基础

    1.XML基础: XML全称为eXtensible Markup Language;即可扩展标记型语言,同HTML一样使用标签来操作.它的可扩展性体现在标签可以由自己定义,可以是中文标签. XML用途 ...

  5. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  6. Linux学习日记-使用EF6 Code First(四)

    一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是  请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...

  7. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  8. css学习归纳总结(二) 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  9. css学习归纳总结(一) 转

    原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...

随机推荐

  1. Mac安装zsh oh-my-zsh

    我们将安装 zsh ,其拓展功能和主题将由 oh-my-zsh 提供.其中Env.sh 文件用于维护别名(aliases),输出(exports)和路径改变(path changes)等等,以免影响  ...

  2. forget word _a

    forget word a~   一再,铺音前     1● ab 2● ac 3● ad 4● af 5● ag 6● an 7● as 8● at 9● ap 10● ar

  3. httpclient 连接参数

    http.socket.timeout(读取超时) 套接字毫秒级超时时间(SO_TIMEOUT),这就是等待数据,换句话说,在两个连续的数据包之间最大的闲置时间. 如果超时是0表示无限大的超时时间,即 ...

  4. TMemo Ctrl + A

    http://delphi.about.com/od/adptips2004/a/bltip0804_4.htm Here's how to implement the code for the CT ...

  5. 破解电视盒 运营商送的,各种型号。通用 TTL 破解电视盒,更新华为悦盒

    ZTE   ZXV10B860AV1.1 准备工作,准备一个优盘,里面放上当贝桌面的apk 准备ttl线,淘宝10元以内包邮. 把优盘插打盒子上,打开盒子,用ttl连接上,只连gnd tx rx ,V ...

  6. 拷贝构造函数(define)

    1.拷贝构造函数是一种特殊的构造函数,具有单个形参,此形参是对该类型的引用. 当定义一个新对象并用一个同类型的对象对它进行初始化时,将显示使用拷贝构造函数. 2.当将该类型的对象传递给函数或从函数返回 ...

  7. ESXi6.5中将虚拟机从厚置备转换为精简置备

    本文来自:https://blog.csdn.net/wangjingkaibear/article/details/77097041 用ESXi做虚拟化,创建了一个原始虚拟机并安装好系统做好基本设置 ...

  8. 解决:People下面选择分享可见联系人,选择多个联系人后通过短信分享,短信中只显示一个联系人

    问题描述: [操作步骤]:People下导入导出中选择分享可见联系人,选择多个联系人后通过短信分享 [测试结果]:短信中只能显示一个联系人 [预期结果]:可以显示多个联系人 经过代码分析,从compo ...

  9. git的时候 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

    更改Ubuntu服务器的时候,提交git出错: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE ...

  10. 降低版本安装flashPlayer

    运行regedit,打开注册表. 搜索flash,找到FlashPlayer文件夹. 打开里面的safeversions,把里面高版本的项目删除就可以了. 安装低版本的并设置不自动更新.