css杂记

对于亚洲文字,块级元素的css拥有默认的while-space:normal,当定义width后,文字能自动换行。
而对于连续的英文、数字, 则不能自动换行,必须在给容器的css添加word-break:break-all或者word-break:break-word, 才能实现自动换行
ie使用table-layout:fixed强制table的宽度,多余内容将隐藏。内层td,th采用word-break来换行


细线表格
talbe{
border:1px solid red;
border-collpase:collapse;/*是单元格的线重叠(删除单元格之间的空白)*/
width:300px;
table-layout:fixed;/*强制表格宽度*/
}
td,td{
border:1px solid red;
}
caption
{
caption-size:bottom;
}
<table>
<caption>this is caption</caption>
<tr>
   <th>sdf</th>
   <td>sdf</td>
</tr>
<tr>
   <th>fsdf</th>
   <td>fsdf</td>
</tr>
</talbe>


p{
text-align:justify;/*文字两边垂直对齐*/
}

ul{
list-style:none;/*不是写在li里的*/
padding:0px;/*去掉li前的空白, 默认的padding-left是有值的*/
}

p{
letter-spacing:10px;/*每个文字之间的间距*/
word-spacing:10px;/*控制空白的大小*/
}

 

 

align: 设置table单元格里的文本对齐方式,css里并没有此属性

text-align:设置block元素里的文本(包括子block元素里的文本)对齐方式


盒子模型:

Width =width + padding-left + padding-right + border-left + border-right
Height =height + padding-top + padding-bottom + border-top + border-bottom

文字垂直居中

把height和line-height设成一致就可以了,例如

li{

     height:50px;

     line-height:50px;

}

你可能感兴趣的:(css杂记)