接着说一些有关排版的一些东西
排版的标准 (子绝父相)
列如:
<body>
<布局> relative
<结构> absolute
<布局> relative
<结构> absolute
</结构> absolute
</布局> relative
</结构> absolute
</布局> relative
</body>
a是个行级元素 ,高不起作用
行级元素想设置宽高 只能用 行级块(display="line-block")
border的方向 先左上 在右上 之后右下 最后左下
border:9px 7px 3px 0;
css可以继承的标签有 :font系列;text系列;color;行高
white-space:nowrap (规定段落的文本换不换行)
word-wrap:break-word (规定单词换不换行)
<子绝父相> 中心思想
做一个三角形:宽高必须是0;
div{
width:0;
height:0;
border-top:transparent 1px solid;
border-left:transparent 1px solid;
border-bottom:transparent 1px solid;
border-right:transparent 1px solid;
}
标准流中 margin (外边距)为负数叫释放空间
margin(外边距)对布局的影响
属性值:数字 (数字分正负)
标准流中 (static)
margin-left:20px; 向右走20px
margin-left:-20px; 向左走20px
margin-top:20px; 向下走20px
margin-top:-20px; 向上走20px;
接下来就不一样喽
margin-right:-20px; (当前元素不动 ,后面的元素向左走)
margin-bottom:-20px;( 当前的元素不动,后面的元素向上走)
注意:margin为负数会增大元素的宽(前提:当前元素没有设置宽高)
position:absolute;(margin为负的情况)
position:absolute;(对body来说的,让边框居中)
top:50%;
left:50%;
width:200px;
height:200px;
border:red 1px solid;
margin-left:-100px;
margin-top:-100px; (知道元素的宽高)
当后面的宽不够了 margin-left:-20px; 会无形中增加20的宽
float中的margin为负数的情况,也是常用的圣杯布局
margin-left:-50px 当前的元素向左走 会覆盖前面的
margin-right:-50px 覆盖后一个元素 后面的元素向左走
margin为负 :无论在什么条件下都释放自己的空间,如果自己的宽高不够,就会把自己的宽高献出去
两种模式 (三个模块来说)
双飞翼 (两端自适应,中间固定)
圣杯 (两端固定,中间自适应)
边框阴影:box-shadow: 0 0 10px #888
负左右正 下正上方 阴影大小 颜色
尽量不要调图片的大小,那样会使图片失真,所以尽量改代码
文本超出后省略点 : text-overflow:ellipsis;