布局

最新推荐文章于 2022-09-02 18:22:29 发布

什么石头

最新推荐文章于 2022-09-02 18:22:29 发布

阅读量303

点赞数

分类专栏： web前端学习 CSS 文章标签：布局 css

本文链接：https://blog.csdn.net/u012999771/article/details/48573647

版权

web前端学习同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

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:center
li,a{display:inline-block;width:80px; height:100%;}//inline-block
li{margin 0 10px;}

什么石头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局

display属性block默认宽度为父元素的宽度：影响元素大小可设置宽高：影响元素大小换行显示：影响元素的位置默认常见div p h1 ul form….属性inline默认宽度为内容宽度宽高设置无效同行显示属性：inline-block默认宽度为内容宽度可以设置宽高(会影响前续和后续元素的宽高)同行显示整块换行默认display:inline-block元素：in
复制链接

扫一扫

专栏目录