<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.CSS控制元素对齐的技巧</title>
<style type="text/css">
body {
background-color: lightcyan;
/*背景色透明,用在元素之间相互叠加时查看下面内容*/
/*background-color: transparent;*/
/*background-image: url('../images/bg/sky3-1.png');*/
/*也可以省略引号*/
background-image: url(../images/bg/sky3-1.png);
background-repeat: no-repeat;
/*为了兼容性先将背景图像设置为固定,再进行定位*/
background-attachment:fixed;
/*background-position: left center;*/
/*background-position: center center;*/
/*background-position: center;*/
/*background-position: 20% 50%;*/
/*background-position: 50px 200px;*/
/*background-position: left top;*/
/*拉升,因为比例原因会超出内容区*/
background-size: cover;
/*等比缩放完全适应内容区*/
/*background-size: contain;*/
/*宽度100%,高度会等比自适应,这时与cover参数效果是一样的*/
/*background-size: 100%;*/
/*宽度都为100%,拉抻铺满当前窗口可视区域*/
/*background-size: 100% 100%;*/
}
.beijing{
width: 300px;
height: 200px;
line-height: 100px;
text-align: center;
background-color: aquamarine;
/*可以通过js等方式来设置背景色透明*/
/*background-color: transparent;*/
border: 1px solid #363636;
}
.box1 {
width: 200px;
height: 200px;
background-color: #FFFF0A;
text-align: center; /*可以使内部行内元素水平居中*/
}
.box1 a {
line-height: 200px; /*子元素设置行高与父元素高度相同*/
}
.box2 {
width: 200px;
height: 200px;
background-color: #FC0107;
text-align: center; /*可以使内部多行行内元素水平居中*/
/*以下二个声明可以使多行文本垂直居中*/
display: table-cell; /*设置显示方式为表格单元格*/
vertical-align: middle; /*设置该单元格内的元素垂直居中*/
}
.box3 {
width: 200px;
height: 200px;
background-color: #66CCFF;
/*以下二个声明可以使块级子元素垂直居中*/
display: table-cell; /*设置显示方式为表格单元格*/
vertical-align: middle; /*设置该单元格内的元素垂直居中*/
}
.box3 .child {
width: 100px;
height: 100px;
background-color: #F4FF0A;
margin: auto; /*水平居中*/
}
.box4 {
width: 200px;
height: 200px;
background-color: #FD6FCF;
text-align: center; /*可以使行内元素水平居中*/
/*以下二个声明可以使块级子元素垂直居中*/
display: table-cell; /*设置显示方式为表格单元格*/
vertical-align:bottom; /*设置该单元格内的元素底边居中*/
}
.box4 ul {
margin: 0;
padding: 0;
/*line-height: 200px;*/
}
.box4 li {
list-style: none;
display: inline;
}
.list {
width: 350px;
height:500px;
/*background-color: lightskyblue;*/
border: 1px solid #696969;
border-radius: 2%;
color: #363636;
background-color: #fefefe;
}
.list h2 {
padding-left: 20px;
}
.item {
/*可看到到:ul默认margin-top:16px;padding-left:40px;*/
/*margin-top: 0;*/
/*padding-left: 0;*/
/*列表项前面的项目符号:可以是标记,也可以来自一张图片*/
/*background-color: #F4FF0A;*/
/*1.list-style-type:列表项标记;*/
/*实心小黑圆点:默认值*/
/*list-style-type: disc;*/
/*空心小圆点*/
/*list-style-type: circle;*/
/*实心小方块*/
/*list-style-type: square;*/
/*数字:将无序列表转为有序列表*/
list-style-type:decimal;
/*带前导0的数字*/
/*list-style-type:decimal-leading-zero;*/
/*去掉前面的样式*/
/*list-style-type: none;*/
/*2.列表项图像:list-style-image*/
/*list-style-image: url("../images/list.jpg");*/
/*3.设置列表页的位置*/
list-style-position: inside;
/*list-style-position: outside;*/
/*可以将列表符号的三要素:标志/图像 位置进行简写:*/
/*list-style: square inside;*/
/*符号和位置没有先后关系，先写哪个无所谓*/
/*下面进行一些美化：*/
padding: 10px;
}
.item li {
/*background-color: lightgreen;*/
}
.item li a {
text-decoration: none;
}
.item li a:hover {
text-decoration: underline;
color:#6CF;
font-size: 1.05em;
}
</style>
</head>
<body>
<h4>父元素一定是块元素,根据子元素不同分为以下几种:</h4>
1.子元素是行内元素:如:a,span <br>
a.水平居中:在父元素上设置: text-align:center;<br>
b.垂直居中:在行内子元素上设置行高与父元素相同: line-height
<div>
<a href="">PHP中文网</a>
</div>
<hr>
2. 子元素是多行内联文本
a.水平居中:父元素设置text-align:center
b.垂直居中:父元素设置:display:table-cell;vertical-align:middle
<div>
<span>php中文网</span><br>
<span>www.php.cn</span>
</div>
<hr>
3. 子元素是块元素:<br>
a.水平居中:子元素设置左右自动: margin: auto;<br>
b.垂直居中:与多行内联文本处理方式一致:display:table-cell;vertical-align:middle
<div>
<div></div>
</div>
<hr>
4. 子元素是不定宽的块元素:最常见的分页导航<br>
a.水平居中:子元素转行内元素,父元素加:text-align:center <br>
b.垂直居中:可给分页的ul加行高line-height=parent.height
c.底边居中:更为常用,与多行内联文本垂直处理方式一致,vertical-align:bottom;
<div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
<!--
背景设置的五个样式规则-->
1. 背景颜色: background-color
2. 背景图片: background-image
3. 背景图片的重复方式: background-repeat
4. 背景图片的定位方式: background-position
5. 背景图片的的是否固定: background-attachment
6. 背景图片大小设置: background-size
-->
<div>
<h2>PHP中文网 (<a href="">www.php.cn</a>)</h2>
</div>
<!--
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
-->
<div>
<h2>头条公告</h2>
<ul>
<li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
<li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
<li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
<li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
<li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
<li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
<li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
<li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
<li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
</ul>
</div>
</body>
</html>
博客列表 >第七课居中和背景图片居中平铺缩放行高等
第七课居中和背景图片居中平铺缩放行高等
- 家户通原创转载
- 2018年03月23日 22:42:36706浏览
上一条：PHP学习第6课作业0322下一条：03.23
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
