注:第二次作业减少了position属性的使用 更多的是使用margin和padding以及其他属性调节网页布局 并考虑网页兼容性问题。
盒模型的居中
水平居中
//html
<div class="father">
<div class="son“>
test
</div>
<div>
//css
//方法1 使用margin:0 auto 此方法若元素浮动则不起作用。
.father{
height: 500px;
width: 500px;
background: blue;
}
.son{
height:200px;
width: 200px;
margin:0 auto;
background: green;
}
//方法2 内联元素利用 text—align: center 实现水平
.father{
height: 500px;
width: 500px;
text-align: center;
background: blue;
}
.son{
height:200px;
width: 200px;
background: green;
display: inline-block;
}
//方法3 使用绝对定位实现:
.father{
height: 500px;
width: 500px;
position: relative;
background: blue;
}
.son{
height:200px;
width: 200px;
background: green;
position: absolute;
left: 50%;
margin-left: -100px; /*行宽的一半*/
}
垂直居中
//html同上
//css
//方法一 绝对定位实现
.father{
height: 500px;
width: 500px;
position: relative;
background: blue;
}
.son{
height:200px;
width: 200px;
background: green;
position: absolute;
top: 50%;
margin-top: -100px;/*行高的一半*/
}
//方法二 内联元素 vertical-align: middle;
通过为table-cell元素设置vertical-align:middle,可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的
//注:若要IE7-浏览器支持,则可以将其改为<table>表格结构
//注: 设置为table-cell的div不能使用浮动或绝对定位,因为浮动或绝对定位会使元素具有块级元素特性,从而丧失了table-cell元素具有的垂直对齐的功能。
.father{
height: 500px;
width: 500px;
background: blue;
display: table-cell;
vertical-align: middle;
}
.son{
height:200px;
width: 200px;
background: green;
}
flex布局之后会补充
div内文本溢出自动换行
word-break: break-all;white-space: normal;
break-all: 遇到换行的最后一个单词时,会把单词截断
break-word:遇到换行的最后一个单词时,会把最后一个长的单词放到新的一行。
svg格式的图片改变背景
通过改变fill属性 改变颜色
参考链接:
https://segmentfault.com/a/1190000011130780
https://blog.csdn.net/lan_liang/article/details/45228201