收集 常用CSS样式的笔记
position:absolute; 任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 h2 元素: h2 { position:absolute; left:100px; top:150px; }浏览器支持 所有主流浏览器都支持 position 属性。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 inherit 规定应该从父元素继承 position 属性的值
---------------
padding-bottom 属性设置元素的下内边距(底部空白) p { padding-bottom:2cm; }
-----------------
clear 属性设置一个元素的侧面是否允许其他的浮动元素。 语法: Object.style.clear=left|right|both|none 可能的值 值 描述 left 在左侧不允许浮动元素 right 在右侧不允许浮动元素 both 在左右两侧均不允许浮动元素 none 默认。允许浮动元素出现在两侧。
<head> <style type="text/css"> img { float:left; } </style> <script type="text/javascript"> function clearLeft() { document.getElementById("p1").style.clear="left"; } </script> </head> <body>
<img src="/i/ct_beatles.jpg" />
<p id="p1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<input type="button" onclick="clearLeft()" value="Clear left side of text" />
--------------------------------------------
p { border-style:solid; } TIY 浏览器支持 所有浏览器都支持 border-style 属性。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 可能的值 值 描述 none 定义无边框。 hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。
------------------
font-weight 属性设置文本的粗细。 可能的值 值 描述 normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 100 200 300 400 500 600 700 800 900 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 inherit 规定应该从父元素继承字体的粗细。 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 例子 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px 例子 3 margin:10px 5px; 上外边距和下外边距是 10px 右外边距和左外边距是 5px 例子 4 margin:10px; 值 描述 auto 浏览器计算外边距。 length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 % 规定基于父元素的宽度的百分比的外边距。 inherit 规定应该从父元素继承外边距。