本文共 1607 字,大约阅读时间需要 5 分钟。
分类 (Classification)
1.把元素显示为内联元素/块级元素/隐藏元素 display p {display: inline} 把段落设置为内联元素,不会换行 span { display: block } 把行内元素元素span设置为块级元素 2.浮动属性 float (1)使图像浮动于一个段落的右侧 图像会浮动到右侧,并且添加了点状的边框。为图像添加了边距,这样就可以把文本推离图像 img {float:right;border:1px dotted black;margin:0px 0px 15px 20px;} (2)使段落的首字母浮动于左侧 span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } (3)创建水平菜单 ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;} li {display:inline} (4)创建无表格首页 http://www.w3school.com.cn/tiy/t.asp?f=csse_float6 3.定位:相对定位/绝对定位/固定定位 相对定位:relative 相对于原位置;原空间保留;会与移动后所在位置的内容叠加显示; 绝对定位:absolute 相对于负元素进行定位;原空间删除;会与移动后所在位置的内容叠加显示; 固定定位:fixed 相对于浏览器定位(其实是相对于HTML文件); 通过"left", "top", "right" 以及 "bottom"进行定位 4.使元素不可见 visibility visibility 值 描述 visible 默认值。元素是可见的。 hidden 元素是不可见的。 collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 visibility:hidden与display:none区别 visibility:hidden只是隐藏元素空间仍在 display:none是隐藏并删除该空间 5.改变光标cursor 值 描述 url 需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 default 默认光标(通常是一个箭头) auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针(一只手) move 此光标指示某对象可被移动。 e-resize 此光标指示矩形框的边缘可被向右(东)移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 n-resize 此光标指示矩形框的边缘可被向上(北)移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 s-resize 此光标指示矩形框的边缘可被向下移动(北/西)。 w-resize 此光标指示矩形框的边缘可被向左移动(西)。 text 此光标指示文本。 wait 此光标指示程序正忙(通常是一只表或沙漏)。 help 此光标指示可用的帮助(通常是一个问号或一个气球)。 6.清除元素的侧面 clear 值 描述 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。转载地址:http://xoyci.baihongyu.com/