CSS+DIV进行的页面布局（二）

最新推荐文章于 2024-07-18 17:34:14 发布

檬是柠檬的檬826

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量168

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_62343228/article/details/121009647

版权

CSS+DIV进行的页面布局

CSS+DIV进行的页面布局（二）

第一部分、在页面布局中常用的CSS属性
第二部分、CSS和HTML中的块元素和行内元素
- 1.块元素（block）
- 2.内联元素（inline）
第三部分、常用的浮动布局

第一部分、在页面布局中常用的CSS属性

1.visibility

visibility：元素是否可见

属性值	含义
visible	元素可见（默认值）
hidden	元素不可见

2.display

display：元素的显示方式

属性值	含义
none	不显示
block	块状显示
inline	显示在一行

3.visibility: hidden与display: none的区别

visibility: hidden：隐藏元素后，保留元素所占有的物理空间
display: none：隐藏元素后，不保留元素所占有的物理空间

第二部分、CSS和HTML中的块元素和行内元素

1.块元素（block）

块元素(block)：占据了全部的宽度,在前后都有换行符

    <h1></h1>
	<p></p>
	<div></div>
	<ul></ul>
	<table></table>
	<form></form>

注意：块元素的宽度(width)、高度(height)、内边距(padding)、外边距(margin) 都是可以控制的

2.内联元素（inline）

内联元素(inline)：只需要必要的宽度,不强制换行

    <span></span>
    <a></a>

注意：内联元素的宽度（width）、高度（height）、内边距(padding-top、padding-bottom)、外边距(margin-top、margin-botom)都是不可以改变的

第三部分、常用的浮动布局

1.一列固定宽度并自动居中

2.一列自适应宽度

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #d1{                 /* 一列固定宽度并自动居中 */
        width: 600px;
        height: 150px;
        background-color: blue;
        margin: auto;
    }
    #d2{                 /* 一列自适应宽度 */
        height: 150px;
        width: 75%;
        background-color: red;
        margin: auto;
    }
</style>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>

3.两列自适应宽度

<style>                /* 两列自适应宽度 */
    #side{
        width: 100px;
        height: 300px;
        background-color: cadetblue;
        float: left;
    }
    #main{
        width: 500px;
        height: 300px;
        background-color:yellowgreen;
        margin-left: 100px;
    }
</style>
<body>
    <div id="side"></div>
    <div id="main"></div>
</body>

4.两列固定宽度居中

原理：采用盒子嵌套方式实现,让外层的盒子自动居中

<style>
    #content{
        width: 600px;
        height: 300px;
        margin: auto;
    }
    #side{
        width: 100px;
        height: 300px;
        background-color: wheat;
        float: left;
    }
    #main{
        width: 500px;
        height: 300px;
        background-color: turquoise;
        margin-left: 100px;
    }
</style>
<body>
    <div id="content">
        <div id="side"></div>
        <div id="main"></div>
    </div>
</body>

檬是柠檬的檬826

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS+DIV进行的页面布局（二）

CSS+DIV进行的页面布局CSS+DIV进行的页面布局（二）在页面布局中常用的CSS属性visibilitydisplayvisibility: hidden与display: none的区别CSS中的块元素和行内元素在页面布局中常用的CSS属性visibilityvisibility：元素是否可见属性值含义visible元素可见（默认值）hidden元素不可见displaydisplay：元素的显示方式属性值含义none不显示
复制链接

扫一扫