文本居中以及背景图片设置的几个方法:
一 居中及对齐
1.margin设置区块元素水平居中
margin:0 auto;设置左右外边距的大小,控制元素的水平居中。
<style>
.center{
margin: 20px auto;
width: 600px;
border: 3px solid green;
text-align: center;
}
</style>
<body>
<div class="center">
<p>使用margin进行元素的居中</p>
</div>
</body>
注:width不能设置为100%,是没有效果的。
2.position属性设置元素的左右对齐
<style>
.right{
position: absolute;
right: 0;
width: 300px;
border: 3px solid pink;
padding: 10px;
z-index: 0;
}
<style>
<body>
<div class="right">
<p>我是右对齐的区块</p>
</div>
</body>
</html>
3.float属性设置左右对齐
<style>
.right1{
float: right;
width: 300px;
border: 3px solid purple;
padding: 10px;
}
</head>
<body>
<div class="right1">
<p>我是浮动右对齐的区块</p>
</div>
</body>
</html>
4.padding属性设置水平垂直居中
<style>
.padCenter{
padding: 70px 0;
border: 3px dotted yellow;
text-align: center;
}
</style>
<body>
<div class="padCenter">
<p>我是用padding垂直居中的元素</p>
</div>
</body>
</html>
5.line-height属性设置水平垂直居中
<style>
.lineCenter{
line-height:300px;
border: 3px solid #33ff33 ;
height: 300px;
}
</style>
<body>
<div class="lineCenter">
<p>我是利用行高进行水平居中的元素</p>
</div>
</body>
</html>
6.绝对定位和transform属性设置水平垂直居中
<style>
.poCenter{
border: 3px solid #ff88c2;
height: 200px;
position: relative;
}
.poCenter p{
position: absolute;
top: 50%;
left: 50%;
/*对水平垂直居中进行修正*/
transform:translate(-50%,-50%);
}
</style>
<body>
<div class="poCenter">
<p>我是利用绝对定位进行水平垂直居中的元素</p>
</div>
</body>
</html>
浮动的注意点:坍塌问题
1 .在最后一个div中加入样式<div style="clear:none"></div>清除浮动
2. bfc 在父级元素添加float:left/right等加强边框
3. .clear{contain"";display:block;说明此区域为块状height:0;visibility:hidden;clear:both;}
二 背景图片设置
background-img:url();
background-repeat:no-repeat;/repeat-x/repeat-y
background-position:50% 50%;图片垂直居中
background-size:cover;//图片被包裹最适合
background:transparent;//图片透明
background-attackment:fixed;//图片固定
文本设置
Text-align:center 文本居中
Text-align:justify 文本左右对齐
Text-indent: 第一行缩进
Text-transform:capitalize 字母首个大写
Text-decoration:none 超链接字体去掉下划线
Text-decoration:line-through 横穿字体线
word-spacing:1px;词与词之间间隙
letter-spacing:1px;字与字之间间隙