CSS知识梳理03
letter-spacing 字间距
word-spacing 词间距
text-transform 大小写转换
word-wrap 超长单词自动换行
1 <html> 2 <head> 3 <title>文本属性</title> 4 <meta charset="utf-8" /> 5 <style> 6 p{ 7 /*设置字母之间的间距*/ 8 letter-spacing:10px; 9 10 /*设置词间距：设置空格的距离*/ 11 word-spacing:30px; 12 13 /*大小写转换*/ 14 text-transform:uppercase; 15 text-transform:lowercase; 16 text-transform:capitalize; 17 18 border:1px solid red; 19 width:300px; 20 21 /*设置超长变态的单词自动换行*/ 22 word-wrap:break-word; 23 } 24 </style> 25 </head> 26 <body> 27 <!-- 车祸现场 --> 28 <p>one car come, ONE car GO, two car pengpeng, people die!</p> 29 <p>男人没了女人 不能活</p> 30 <p>Pneumonoultramicroscopicsilicovolcanoconiosis</p> 31 </body> 32 </html>
list-style
list-style-type 类型
值：
none 不显示符号（常用）
circle 空心圆
...
其他请参考：./list-style-type.html
list-style-image
值： url(图片路径)
list-style-position
值：
outside 默认值，在li的外边
inside 在li的里边
1 <html> 2 <head> 3 <title>列表属性</title> 4 <meta charset="utf-8" /> 5 <style> 6 ul{ 7 /*取消前面的小圆点*/ 8 /*list-style-type:decimal; 9 list-style-image:url(./img/yue.png); 10 list-style-position:inside;*/ 11 12 /*统一设置*/ 13 list-style:url('./img/hu.png') none inside; 14 } 15 li{ 16 border:1px solid red; 17 } 18 </style> 19 </head> 20 <body> 21 <ul> 22 <li>我和她相爱5年了</li> 23 <li>可惜她的家人极力反对</li> 24 <li>我很痛苦</li> 25 <li>特别是她de[[[</li> 26 <li>既然扬言要打死我</li> 27 </ul> 28 </body> 29 </html>
表格属性：
table-layout
border-collapse
1 <html> 2 <head> 3 <title>表格属性</title> 4 <meta charset="utf-8" /> 5 <style> 6 table{ 7 /*将表格的布局设置为固定的，不会随着内容而变宽*/ 8 table-layout:fixed; 9 10 /*设置单元格的边是合并还是独立的*/ 11 border-collapse:collapse; 12 } 13 td{ 14 /*超出显示省略号的组合拳*/ 15 /*text-overflow: ellipsis; 16 white-space: nowrap; 17 overflow: hidden;*/ 18 } 19 </style> 20 </head> 21 <body> 22 <table width="800" border="1" cellspacing="0"> 23 <tr> 24 <td>html</td> 25 <td>合同目录</td> 26 <td>陈冠希饭陈冠希饭陈冠希饭陈冠希饭</td> 27 <td title="jlsadjflkjdlsfjdslkfjajkdflasdfjlk" style="word-wrap:break-word">jlsadjflkjdlsfjdslkfjajkdflasdfjlk</td> 28 <td></td> 29 </tr> 30 <tr> 31 <td>html哥</td> 32 <td>HTML</td> 33 <td>html的</td> 34 <td></td> 35 </tr> 36 </table> 37 </body> 38 </html>
布局相关的属性：
1. 盒子模型
盒子的组成： 有内容、内边距、边框、外边距
2. 相关属性
width/height 内容的宽高
padding 内边距
border 边框
margin 外边距
3. 盒子的宽高
盒子的宽 = 内容的宽 + 左右内边距 + 左右边框！
1 <html> 2 <head> 3 <title>盒子模型</title> 4 <meta charset="utf-8" /> 5 <style> 6 p{ 7 width:150px; 8 height:150px; 9 10 padding:30px; 11 border:20px solid blue; 12 margin:50px; 13 } 14 </style> 15 </head> 16 <body> 17 <p>北京、南京、东京，西京被唐僧取走了！</p> 18 <a href="">百度</a> 19 </body> 20 </html>
border 设置盒子的边框
border-width 设置边框的宽度
border-style 边框的样式
值：
none 木有线
solid 实现
dashed 虚线
dotted 点线
double 双实线
...
具体的值请参考：border-style.html
border-color 边框的颜色
border-left
border-right
border-bottom
border-top
1 <html> 2 <head> 3 <title>边框属性</title> 4 <meta charset="utf-8" /> 5 <style> 6 p{ 7 width:30%; 8 height:50%; 9 10 11 /*默认为黑色、3px*/ 12 /*border-style:solid; 13 border-color:red; 14 border-width:10px;*/ 15 border:solid red 10px; 16 } 17 18 div{ 19 border-top:100px solid red; 20 border-bottom:100px solid blue; 21 border-left:100px solid green; 22 border-right:100px solid yellow; 23 24 25 width:0; 26 } 27 </style> 28 </head> 29 <body style="height:300px;background:pink"> 30 <p>北京、南京、东京，西京被唐僧取走了！</p> 31 <div></div> 32 </body> 33 </html>
padding
padding:4边;
padding:上下 左右;
padding:上 左右 下;
padding:上 右 下 左;
padding-top
padding-left
padding-right
padding-bottom
margin
margin:4边;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
1 <html> 2 <head> 3 <title>margin和padding属性</title> 4 <meta charset="utf-8" /> 5 <style> 6 p{ 7 width:30%; 8 height:50%; 9 10 border:10px dotted red; 11 12 /*设置内边距*/ 13 padding:30px; 14 padding:30px 40px; 15 padding:30px 40px 50px; 16 padding:30px 40px 50px 60px; 17 } 18 19 </style> 20 </head> 21 <body> 22 <p>北京、南京、东京，西京被唐僧取走了！</p> 23 </body> 24 </html>
块级 block
一般用来搭建主体框架
1. 独占1行
在标签后面写普通文本，如果普通文本换行显示了，则前面的标签为块级
2. 如果没有设置宽度，默认会继承父元素的宽度；高度不会继承；
3. 块级元素可以嵌套其他标签，但是p、h1~h6标签不要嵌套其他块级
常见的块级：div/p/h1~h6/ul/li/ol/table/form/hr...
行级 inline
一般用来标记具体的内容
1. 在同一行显示
2. 设置宽高无效;margin外边距，上下无显示，左右正常;padding有效
常见的行级：span/a/b/i/em/strong...
行内的块级 inline-block
一般是表单标签比较多
1. 既在同一行排列，又可以设置宽高
2. 常见的inline-block标签： button/img/input/select/textarea/label
1 <html> 2 <head> 3 <title>块级和行级的特性</title> 4 <meta charset="utf-8" /> 5 <style> 6 7 </style> 8 </head> 9 <body style="width:500px"> 10 <!-- 块级 --> 11 <p>北京、南京、东京，西京被唐僧取走了！</p> 12 <p> 13 <b>钓鱼要到岛上钓，不到岛上钓不到</b> 14 </p> 15 <div>无意义的块级sadflksjdlfkjdslj</div> 16 17 <hr style="width:1264px;"> 18 19 <!-- 行级 --> 20 <span>无意义的行级</span> 21 <b style="width:100px;margin-left:30px">加粗</b> 22 <a href="" style="padding:50px">百度</a> 23 24 <!-- inline-block --> 25 <button style="width:200px">宇宙康复中心——宇康</button> 26 </body> 27 </html>
label标签
方式一：将文本和标签包裹在一起
<label><input type="radio" />男的</label>
方式二：用label的for属性，for属性的值要和表单的id值相对应
<input id="yao" type="radio" />
<label for="yao">我要选择妖怪</label>
1 <html> 2 <head> 3 <title>label标签</title> 4 <meta charset="utf-8" /> 5 </head> 6 <body> 7 性别： 8 <label><input type="radio" />男的</label> 9 <input type="radio" />女的 10 <input id="yao" type="radio" />妖的 11 <input type="radio" />鬼的 12 <input type="radio" />畜生 13 14 <label> 15 <input style="width:100px" type="checkbox" />同意您的霸王条款 16 </label> 17 18 19 <label for="yao">我要选择妖怪</label> 20 </body> 21 </html>
display 设置元素的显示方式
值：
none 隐藏元素
block 显示为块级
inline 显示为行级
inline-block 显示为行内的块级
了解：
list-item
table
table-caption
table-row
table-cell
1 <html> 2 <head> 3 <title>display属性</title> 4 <meta charset="utf-8" /> 5 <style> 6 .two{display:none;} 7 /*相邻选择器：紧挨着.one的.two*/ 8 .one:hover~.two{ 9 display:block; 10 } 11 12 .box{ 13 display:list-item; 14 } 15 </style> 16 </head> 17 <body> 18 <p class="one">黄老邪</p> 19 <b>小三</b> 20 <p class="two">丁春秋</p> 21 <ul> 22 <div class="box">###########</div> 23 <div class="box">###########</div> 24 <div class="box">###########</div> 25 <div class="box">###########</div> 26 <div class="box">###########</div> 27 <li>#############</li> 28 <li>#############</li> 29 <li>#############</li> 30 <li>#############</li> 31 </ul> 32 </body> 33 </html>
浙公网安备 33010602011771号