博客列表 >326作业

326作业

陈小伟宝宝的博客
陈小伟宝宝的博客原创
2018年03月26日 15:25:36722浏览

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>326作业</title>

<style type="text/css">

.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;

}

.box4 li {

list-style: none;

display: inline;

}

</style>

</head>

<body>

1.子元素是行内元素

<div>

      <a href="">PHP中文网</a>

</div>

<hr>


2. 子元素是多行内联文本

<div>

<span>php中文网</span><br>

<span>www.php.cn</span>

</div>

<hr>


3. 子元素是块元素:<br>

<div>

<div></div>

</div>

<hr>


4. 子元素是不定宽的元素

<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>

</body>

</html>

微信图片_20180326151908.jpg


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议