布局

来源:互联网 发布:mac mini 2014 换内存 编辑:程序博客网 时间:2024/05/02 06:44

display

属性block

  • 默认宽度为父元素的宽度:影响元素大小
  • 可设置宽高:影响元素大小
  • 换行显示:影响元素的位置
    默认常见div p h1 ul form….

属性inline

  • 默认宽度为内容宽度
  • 宽高设置无效
  • 同行显示

属性:inline-block

  • 默认宽度为内容宽度
  • 可以设置宽高(会影响前续和后续元素的宽高)
  • 同行显示
  • 整块换行
    默认display:inline-block元素:input textarea select button,…

属性:none

display:none和visbility:hidden的区别在于hidden会占据文档流位置;

布局

块级元素的水平居中

<!DCTYPE html><html><head>    <meta charset="UTF-8">    <title>块级元素水平居中</title>    <style>        *{margin:0; padding:0;}        .content{width:300px;height:300px; background-color:pink;}        .content{margin:0 auto;}//水平居中    </style></head><div>    <div class="content">Content areas</div></div>

布局–居中导航

html结构

<ul>    <li><a href="#">推荐</a></li>    <li><a href="#">歌单</a></li>    <li><a href="#">大牌DJ</a></li>    <li><a href="#">歌手</a></li>    <li><a href="#">新碟上架<a/></li></ul>

css样式

ul{text-align:center; height:300px; line-height:30px;}//text-align:centerli,a{display:inline-block;width:80px; height:100%;}//inline-blockli{margin 0 10px;}
0 0
原创粉丝点击