文章标题

月亮与风

于 2015-10-30 22:01:22 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/u011447350/article/details/49517679

版权

my name is jams

int main(){
  int a =0;
}

布局

display
设置元素的显示方式
display: block| inline | inline-block|none

1. display:block

例如： div p h1-h6 ul form

默认宽度为 父元素宽度

可设置宽高

换行显示 (前后都换)

2. display:inline

默认宽度为 内容宽度 span a label cite em

不可设置宽高

同行显示

元素内换行

3. display:inline-block

默认： input textarea select button

默认宽度为内容宽度

可设置宽高

同行显示

超出则整块换行

4. display: none
设置元素不显示

5.dispalay:

与visbility: hidden区别
hidden只是不显示，但仍占据原来的位置

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style type="text/css">
       ul{ text-align:center;width: 100%;height:30px; line-height: 30px;background-color: red;}
       li,a{display: inline-block;width: 80px;  height:100%;}
       li{margin:0 5px;list-style: none;}
       a{text-decoration: none; color:#fff;}
     </style>
</head>
<body>
<div class="content">
  <ul class="m-nav">
       <li> <a href="#">推荐</a> </li>
       <li> <a href="#">歌单</a> </li>
       <li> <a href="#">大牌</a> </li>
       <li> <a href="#">歌手</a> </li>
  </ul>
</div>
</body>
</html>

元素叠加效果

定位：

position: static| relative | absolute|fixed 设置定位方式

top right botom left z-index 设置位置、与参照物之间的距离

同时设置top botom 若未设置宽高，会使元素撑开

未设置z-index时候，根据文档流的位置，默认为0；

position:

relative: 仍在文档流中，参照物为元素本身

常用场景：改变元素在文档流中的层级（盖住其他相邻元素），绝对定位的参照物

absolute:    默认宽度为内容宽度

               不在文档流中（后面元素会占据其位置）

              参照物为第一个定位祖先/ 根元素

轮播头图：

月亮与风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文章标题

my name is jamsint main(){ int a =0;} 布局display 设置元素的显示方式display: block| inline | inline-block|none1. display:block 例如： div p h1-h6 ul form默认宽度为父元素宽度可设置宽高换行显示 (前后都换)2. display:inline默认宽度为内容宽度 span
复制链接

扫一扫