行盒和文本样式和边框类的一些样式

#行盒的特点 1. 行盒可被折断,内容折断换行(英文单词间折断,中文文字间折断) 2. 连续行盒水平排列 3. 空白折叠规则适合于行盒内部和行盒之间 4. 水平方向上的margin和padding设置内容之间间距,垂直方向margin和padding无效 5. word-break截断位置可继承,默认值是normal,取值有keep-all(对所有的文字在空白和标点符号位置截断),break-all(英文字母间可截断,中文文字间可截断)

#行盒的位置 1. 行盒的定位体系必定是常规流,浮动和绝对定位的行盒会变成块盒 2. 行盒在包含快中,避开浮动和常规流盒子 3. 包含行盒的块盒,可使用text-align调整它内部的对齐方式 4. 行盒之间的对齐方式,可使用vertical-align调整,vertical-align:bottom可消除与他父级包含块之间的间隙 #文本类的样式 1. text-decoration:none; 去除下划线 2. text-indent:32px; 首行缩进 3. text-transform:upper case 全部变大写 text-transform:lower case 全部小写 4. word-spacing :30px; 词间据 5. letter-spacing:30px;字间距 6. text-shadow:10px 20px 30px pink;第一个值时水平方向的延伸距离,第二个值是垂直方向延伸距离,第三个值是阴影范围 7. text-decoration:line-through;这是贯穿线 #文字类样式 1. font-weight:bold;字体加粗 2. font-style:italic;斜体 font-style:oblique;也是 3. font-family:"1,2,3,宋体"表示选择字体,从1开始选择,直到这种字体能出现 4. @font-face{ font-family:f53; src: url("路径") },f53是自己命名的 #边框类样式 1. border-radius:10px 20px;,当宽度和高度相等时border-radius:50%,就是一个圆 2. box-shadow:10px 20px 30px 20px red inset;第一个和第二个值表示水平和垂直方向上 的延伸,第三个值是模糊值,第四个是阴影范围 3. 吧高和宽都设为0,另外三边颜色设为透明色(transparent)可以得到三角形