1 块元素排斥其他元素与其一行,内部可以容纳其他块元素和行元素,有高度宽度,可以有四个方向的MARGIN属性,
如DIV,P,H1-H6,HR等都是块元素;
2 行元素可以一行,不能包含块元素,无法定义高度和宽度,可以定义MARGIN-LEFT,MARGIN-RIGHT,无法定义MARGIN-TOP和MARGIN-TOP;
常见的有SPAN,STRONG,S,U,A,EM标签
3 使用DISPLAY:inline 行内元素 display:block 块元素;
inline-block:行内块元素 ,有如下特点:
1) 可以定义WIDTH和height;
2) 可以和其他行内元素一行;
常见的有IMG标签和INPUT标签
<style type="text/css">
span
{
display:inline-block;
width:60px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
4 display:none和visibility:hidden区别;display:none为彻底的无了这个空间,visibility:hidden为看不到,但依然占据空间;
5 display:table-cell,可以让图片垂直居中
<style type="text/css">
div
{
display:table-cell;
width:150px;
height:150px;
border:1px solid gray;
vertical-align:middle;
text-align:center;
}
img{vertical-align:middle;}
div+div{border-left:none;}
</style>
</head>
<body>
<div><img src="images/haizei1.png" alt=""/></div>
<div><img src="images/haizei2.png" alt=""/></div>
<div><img src="images/haizei3.png" alt=""/></div>
6 等高布局
可以使用display:table-cell完成;
<style type="text/css">
#wrapper{display:table-row;}
#img-box
{
display:table-cell;
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/
width:150px;
border:1px solid red;
}
#text-box
{
display:table-cell;
width:200px;
border:1px solid red;
border-left:none;
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="img-box">
<img src="images/haizei1.png" alt=""/>
</div>
<div id="text-box">
<span>《ONE PIECE》(海贼王、航海王)简称“OP”,是日本漫画家尾田荣一郎作画的少年漫画作品。在《周刊少年Jump》1997年34号开始连载。描写了拥有橡皮身体戴草帽的青年路飞,以成为“海贼王”为目标和同伴在大海展开冒险的故事。</span>
</div>
可以看到,两个DIV的高度相等,自动适应,高度由内容中最大的决定;
7 自动平分元素
当父元素{display:none};
子元素{dispplay:table-cell;}
如果父元素给定一定的高度,则父元素宽度就根据子元素的个数进行自动平均划分;
<style type="text/css">
*{padding:0;margin:0;}
ul
{
list-style-type:none;
display:table;
width:300px;
}
li
{
display: table-cell;
height:60px;
line-height:60px;
text-align:center;
color:White;
}
ul li:nth-child(1){background-color:Red;}
ul li:nth-child(2){background-color:Orange;}
ul li:nth-child(3){background-color:Blue;}
ul li:nth-child(4){background-color:silver;}
ul li:nth-child(5){background-color:Purple;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
8 去除INLINE-BLOCK元素间距
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type:none; font-size:0;}
li
{
display:inline-block;
width:60px;
height:60px;
line-height:60px;
font-size:30px;
text-align:center;
color:White;
background-color:Purple;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
设置父元素:font-size:0去除
css 小结3
猜你喜欢
转载自jackyrong.iteye.com/blog/2363867
今日推荐
周排行