css学习日记

相对偏移 指定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就可以实现鼠标移入块内就变手形,而不是移动到文字上才行。

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

时间: 05-28

css学习日记的相关文章

canvas学习日记一

由于工作的需求,促进我学习html5 canvas技术,canvas是html5最强大的元素之一.使用它可以在浏览器中做一番奇妙的事情.大家或多或少都听过canvas的强大用处,我这里就不再赘述了. canvas的强大功能是通过canvas的context对象表现出来的,该环境变量是可以从canvas元素身上获取. 下面先看一个canvas的例子方便讲解:在canvas上显示一个字符串,该字符串大致与canvas水平垂直居中.代码如下: <!DOCTYPE HTML> <html lan

JavaWeb学习日记----XM第二天

1.XML基础: XML全称为eXtensible Markup Language;即可扩展标记型语言,同HTML一样使用标签来操作.它的可扩展性体现在标签可以由自己定义,可以是中文标签. XML用途: 同HTML一样可用于显示数据,但是不是XML的主要用途.XML我们多用来存储数据. 应用: 1).不同应用之间数据的传输,利于程序之间的维护 2).用来表示生活中具有层级关系的数据 3).多用于文件配置 XML语法: 1).XML的文档声明: 创建一个文件,后缀名为.xml 在写XML之前,首先

CSS学习之float解析

转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.下面解释下这个定义中的几个名词的概念: 文档流:在html中文档流即为元素从上至下排列的顺序. 脱离文档流:元素从正常的排列顺序被抽离. 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding). 二.float

学习日记之状态模式和Effective C++

状态模式(State):当一个对象内在状态改变时,允许改变其行为,这个对象看起来像是改变了其类. (1),状态模式主要负责解决的是当控制一个对象转换的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类中,可以把复杂的判断逻辑简化. (2),状态模式的好处是将与特定状态相关的行为局部化,并且将不同状态的行为分割开来. (3),将特定的状态相关的行为都放入一个对象中,由于所有与状态相关的代码都存在于某个ConcreteState中,所以通过定义新的子类可以很容易地增加新的状态和

css学习感言

在培训学校学习了一个多月了,最近主要讲的是css,准确的说老师上课讲css用了8天的时间,讲课的速度飞快,可能是对于我这种零基础的学生来说吧,感觉学起来很吃力,不过在这个过程中也学到了许多知识,这里主要介绍一下css中选择器权重的问题,css中选择器分为三类1.元素选择器2.类选择器3.id选择器4.通配符 ,这里主要介绍前三类. 元素选择器:例如table,input,button等他们分别表示一大类,称之为元素.它的权重是最小的,相当于日常生活中重量单位的一克.它是对一大类比如table,i

学习日记

五一耍了三天,自己的计划有泡汤,那种制止力哪里去了,不过我认真起来还有有废寝忘食的时候,不过希望这种时候多一点,回家妈妈告诉我,她给老师打电话了的,老师说了我的一些情况,不过我没有老师说的那么好,学习在班上算中等.我觉得还算不上吧!任重而道远吧. Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置文件中很多变量是经常改变的,这样做也是为了方便用户,让用户能够脱离程序本身去修改相关的变量

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

学习日记之解释器模式和Effective C++

解释器模式(interpreter):给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子. (1),如果一种特定类型的问题发生的频率足够高,那么可能就值得将该问题的各个实例表述为一个简单语言的句子.这样可以构建一个解释器,该解释器通过解释这些句子来解决该问题. (2),当一个语言需要解释执行,并且你可将该语言中的句子表示为一个抽象的语法树时,可使用解释器模式. (3),容易改变和扩展文法,因为该模式使用类来表示文法规则,你可以使用继承来改变和扩展该文法