【静态页面架构】CSS之其它元素

最新推荐文章于 2021-11-08 15:52:14 发布

weixin_34085658

最新推荐文章于 2021-11-08 15:52:14 发布

阅读量78

点赞数

原文链接：https://segmentfault.com/a/1190000016184023

版权

CSS架构

其他元素；

块级元素与内联元素；该元素独占一行只以垂直方向排列
内联元素；该元素不会独占一行，只以水平方向排列(不能设置宽高)
行内块级元素；该元素不会不会独占一行，还是水平方向排列，(可设置宽高)

<style>
        h1{
            width: 200px;
            height: 200px;
        }
        /*块级元素；元素独占一行，以垂直方向排列*/
        a{
            width: 200px;
            height: 200px;
        }
        /*内联元素；元素不会独占一行，以水平方向排列
        不能设置高度和宽度是由内容如文本，图片和其他元素撑起
        */
        img{
            width: 200px;
        }
        /*行内块级元素；该元素不会不会独占一行，还是水平方向排列，(可设置宽高)
        */
    </style>
</head>
<body>
<h1>爱新觉罗</h1>
<a href="#">这是链接</a>
<img src="/imgs/b.jpg">
</body>

1.display属性；

block；表示用于设置块鸡元素
inline；表示用于设置内联元素
inline-block；表示用于设置行内块级元素

<style>
        div {
           display: 设置 inline;
           <!--表示内联元素-->
        }
        span{
            display:block;
            <!--表示设置块级元素-->
        }
    </style>
</head>
<!--页面元素显示类型(display)决定浏览器的默认样式-->
<body>
<div>呼延觉罗</div>
<div>爱新觉罗</div>
</body>

2.结构元素；

header元素；是用来设置具有引导和导航的结构

main元素；是用来设置页面的主要内容

footer元素；是用来设置根元素的页脚

<style>
        header{
            height: 100px;
            background-color: yellow;
        }
        main {
            height: 800px;
            background-color: blue;
            /*背景颜色*/
        }
        footer{
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<header>
    <!--nav元素表示导航（导航栏的容器）-->
    <nav></nav>
</header>
<!--页面顶部-->
<main>
    <article>
        <!--article元素，表示文章，独立结构-->
        <section></section>
    </article>
    <aside></aside>
    <!--aside元素作为侧边栏-->
</main>
<footer></footer>
<!--页面的底部-->
</body>

weixin_34085658

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【静态页面架构】CSS之其它元素

CSS架构其他元素；块级元素与内联元素；该元素独占一行只以垂直方向排列内联元素；该元素不会独占一行，只以水平方向排列(不能设置宽高)行内块级元素；该元素不会不会独占一行，还是水平方向排列，(可设置宽高)<style> h1{ width: 200px; ...
复制链接

扫一扫