html+css小知识点

2014年9月9日22:52:37
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;} //转大写,转小写,转首字母大写
 
p {text-indent:2em;} //首行缩进两个字符
 
h1 {letter-spacing:2px;} //制定字符之间的距离
 
p.small {line-height:70%;}  //设定行距
 
div.ex1 {direction:rtl;} //设定文字方向
 
p{ word-spacing:30px;}  //单词之间空格
 
h1 {text-shadow:2px 2px #FF0000;}//设置文字阴影
 
 p{white-space:nowrap;} //对空白的处理
描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
 
border-collapse:collapse;  //表格边框折叠成单一的边框
 
caption {caption-side:bottom;} //表格标题位置,标题需要写成“<caption>Table 1.1 Customers</caption>”,作为table子元素
 
border:1px solid red;//边框
outline:green dotted thick;//轮廓线
 
margin外边框   padding内边框  content内容
 
 visibility:hidden可以让您隐藏某个元素,但它仍然需要像以前一样的空间。该元素将被隐藏,但仍然会影响布局。
 display:没有隐藏的元素,它不会占用任何空间。
 

position:fixed; //元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动:

position:absolute; //绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
 
span { float:left; 0.7em; font-size:400%; } <p><span>T</span>his is some text.</p>  //配合使用使首字母浮动在左侧
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
原文地址:https://www.cnblogs.com/lswit/p/3963613.html