CSS随记

  • 在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

    注释:float属性不具有继承特性,就是说子元素不会继承父元素的浮动属性。

           在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

  • clear 属性定义了元素的哪边上不允许出现浮动元素。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
  • position 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对absolute或fixed流中的默认位置偏移.

        注释:

        relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。

        absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将  以body坐标原点进行定位,可以通过z-index进行层次分级。

         fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

  • margin:10px 5px 15px 20px;
    • 上外边距是 10px
    • 右外边距是 5px
    • 下外边距是 15px
    • 左外边距是 20px
  • 当在html中引用外部样式表后,那么在样式表文件中定义的样式就相当于在html头文件中定义的样式了。但事实证明并非如此,它依然存放在定义的文件中被一起下载到客户端。这一点从background-image的url属性定义的实践上也可以清楚地看出,在定义url时,如果是绝对地址当然没什么问题,如果是相对地址,那么,一定要相对style.css所在的路径,而不必考虑即将引用它的html文件的路径。

              PS:background-image:url(../pic/logo.jpg)

  •  background-position:{位置值} 属性设置背景图像的起始位置。

    使用百分数定位时,其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说,百分数定位是改变了背景图和元素的对齐基点。不再像使用像素和关键词定位时,使用背景图和元素的左上角为对齐基点。例如上例的background-position: 100% 50%; 就是将背景图片的100%(right) 50%(center)这个点,和元素的100%(right) 50%(center)这个点对齐.
    使用数值需要注意的是,当只有一个数值时,这个值将用于横坐标,纵坐标将默认是50%。

  • text-indent:-999px;
    就是把该元素内的文字移到屏幕外面去,让我们肉眼看不见,有时候是因为如某栏目名称的文字或者logo的文字已经用背景图片代替了,我们不需要眼睛看见那些文字,但是希望搜索引擎可以搜到,就可以用这个把文字“隐藏”的属性。虽然眼睛看不见,但是搜索引擎或者盲人用的软件能知道。

  • cursor:pointer;
    把这个样式的值赋给某一元素后,当鼠标移到该元素上,鼠标变为手的形状。

  •  label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
  • 只添加属性名称该属性就会生效应该使用prop();只存在true/false的属性应该使用prop()。
  • 为什么不直接写宋体,而是这样‘\5b8b\4f53’用?
    当你的:网页、css 编码是 utf8 时,某些情况下直接写:宋体、微软雅黑之类的中文字体名字,会出现不能识别导致字体设置失效的问题,如果把字体名字转成对应编码如:‘\5b8b\4f53’,就不会出现这个问题。

  • CSS border-collapse 属性
    border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。

posted on 2013-08-09 21:09  我竟然比我还帅  阅读(140)  评论(0编辑  收藏  举报

导航