js学习-盒布局

最新推荐文章于 2022-03-27 13:03:39 发布
最新推荐文章于 2022-03-27 13:03:39 发布
阅读量214 收藏
点赞数
分类专栏： js学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48235555/article/details/106557903
版权

Display

1、display: inline-block / inline;
如果指定了宽度和高度，文字有可能会溢出
无论是inline-block 还是 inline ，效果是一样的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒的基本类型</title>
    <style>
        div{background: green;width: 50px;height: 50px}
        .div1{display: inline-block;}
        .div2{display: inline;}
    </style>
</head>
<body>
<h1>盒的基本类型</h1>
<div class="div1">在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</div>
<div class="div2">在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</div>
</body>
</html>

在这里插入图片描述
之前，如果需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但是这样会让我们的样式变的复杂，所以在CSS2.1中就追加了inline-block类型，使得并列显示多个block类型的元素操作变的很简单。
示例对比：
block类型
首先新建三个div元素，给前两个div使用float让前两个div元素并列显示，第三个div的话就会显示在前两个div元素的下部，但是因为前两个的高度不一样所以我们要使用clear属性清除浮动。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用inline-block类型来执行分列显示</title>
    <style>
        div.div{
            width:400px
        }
        div.div1{
            width: 200px;
            background-color: green;
            float: left;
        }
        div.div2{
            width: 200px;
            background-color: #ff6600;
            float: left;
        }
        div.div3{
            clear: both; /*clear属性清除浮动*/
            background-color: #d829ff;
        }
    </style>
</head>
<body>
<h1>使用inline-block类型来执行分列显示</h1>
<div class="div">
    <div class="div1">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
    <div class="div2">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
    <div class="div3">
        之前，如果需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但是这样会让我们的样式变的复杂，所以在CSS2.1中就追加了inline-block类型，使得并列显示多个block类型的元素操作变的很简单。
        示例对比：
        block类型
        首先新建三个div元素，给前两个DIV使用float让前两个div元素并列显示，第三个div的话就会显示在前两个div元素的下部，但是因为前两个的高度不一样所以我们要使用clear属性清除浮动。
    </div>
</div>
</body>
</html>

显示结果：
在这里插入图片描述

使用inline-block类型，可以直接将两个div元素进行并列显示，不需要使用float属性，也不需要使用clear属性。
在默认情况下，使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐，如果要实现顶部对齐，可以对div元素的样式加入vertical-align属性。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用inline-block类型来执行分列显示</title>
    <style>

        div.div1{
            width: 200px;
            background-color: green;
            display: inline-block;
        }
        div.div2{
            vertical-align: top;  /*顶部对齐*/
            width: 200px;
            background-color: #ff6600;
            display: inline-block; 
        }
        div.div3{
            width: 400px;
            background-color: #d829ff;
        }
    </style>
</head>
<body>
<h1>使用inline-block类型来执行分列显示</h1>
<div>
    <div class="div1">
        2、inline-block类型
        inline-block类型是css2.1中追加的一个盒类型。
        inline-block类型盒属于block盒的一种，但是在显示时具有inline类型盒的特点。
        例如：
        在DIV元素中分别将display设置为inline-block和inline后他们的效果一样。

        如果我们给他们都指定宽度和高度结果会是怎样？
<!--下面的</div><div>是紧连着的，是为了取消这两个div之间的间隔-->
    </div><div class="div2">
        2.2使用inline-block类型来执行分列显示
        在css2.1之前，如果需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但是这样会让我们的样式变的复杂，

    </div>
    <div class="div3">
        css2.1之前，如果需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但是这样会让我们的样式变的复杂，所以在CSS2.1中就追加了inline-block类型，使得并列显示多个block类型的元素操作变的很简单。

        示例对比：
        block类型
        首先新建三个div元素，给前两个DIV使用float让前两个div元素并列显示，第三个div的话就会显示在前两个div元素的下部，但是因为前两个的高度不一样所以我们要使用clear属性清除浮动。



    </div>

</div>
</body>
</html>

< / div>
< div id = “div2” >
的效果：

在这里插入图片描述
< / div> < div id = “div2” >的效果：
在这里插入图片描述

2、使用inline-block类型来显示水平菜单
实现水平菜单
第一种方法：ul 列表和 li 列表项目，li 元素隶属于block类型下的list-item类型，所以并列显示的话，就要使用float属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul与li</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            padding: 20px 20px; /*第一个数值是高度改变，第二数值是宽度改变*/
            background: #2292ff; /*蓝色*/
            border-right: solid 2px #b224ef; /*紫色*/
            width:50px;
            list-style: none; /*每个列前面的点消失不见*/
            text-align: center; /*文字处于中心位置*/
            float: left; /*使每个li元素能水平排列，而不是竖直排序*/
        }
        a{
            color: #fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h1>使用ul与li类型来显示水平菜单</h1>
<ul>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
    <li><a href="http://www.baidu.com">首页</a></li>
</ul>
</body>
</html>

显示结果：
在这里插入图片描述第二种方法：使用inline-block，可以得到同样的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul与li</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            display: inline-block;/*inline-block,减少了float属性与list-style*/
            padding: 20px 20px; /*第一个数值是高度改变，第二数值是宽度改变*/
            background: #2292ff; /*蓝色*/
            border-right: solid 2px #b224ef; /*紫色*/
            width:50px;
            text-align: center;
        }
        a{
            color: #fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h1>使用ul与li类型来显示水平菜单</h1>
<ul>
    <li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li>
</ul>
</body>
</html>

3、inline-table类型
新增属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>inline-table类型</title>
    <style>
        table{
            display: inline-table;
            vertical-align: bottom; /*默认状态下文字是顶部对齐*/
            border: solid 3px #ccc;
        }
        td{
            border: solid 3px #898989;
        }
    </style>
</head>
<body>
<h1>inline-table类型</h1>
这里是文字内容
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
这里是文字内容
</body>
</html>

没有inline-table:
在这里插入图片描述
有inline-table:
在这里插入图片描述

4、list-item类型
可以将多个元素作为ul列表来显示，同时可以在元素的开头加上列表的标记

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>list-item类型</title>
    <style>
        div{
            display: list-item;  
            list-style-type: circle; /*在元素开头加上列表标记*/            
            margin-left: 30px;
        }
    </style>
</head>
<body>
<h1>list-item类型</h1>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
</body>
</html>

显示结果：
在这里插入图片描述
5、run-in类型或compact类型
run-in类型的元素将被包括在后面的block类型的元素的内部
compact类型的元素将被放置在block类型的元素左边

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>run-in类型或compact类型</title>
</head>
<body>
<h1>run-in类型或compact类型</h1>
<dl class="run-in">
    <dt>run-in类型</dt>
    <dd>run-in类型的元素将被包括在后面的block类型的元素的内部</dd>
</dl>
<dl class="compact">
    <dt>compact类型</dt>
    <dd>compact类型的元素将被放置在block类型的元素左边</dd>
</dl>
</body>
</html>

dl元素可以定于列表：在这里插入图片描述
加上run-in与compact：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>run-in类型或compact类型</title>
    <style>
        dl.run-in dt{
            display: run-in;
            border: solid 2px #d829ff;
            background-color: #cccccc;
        }
        dl.compact dt {
            display: compact;
            border: solid 2px #d829ff;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<h1>run-in类型或compact类型</h1>
<dl class="run-in">
    <dt>run-in类型</dt>
    <dd>run-in类型的元素将被包括在后面的block类型的元素的内部</dd>
</dl>
<dl class="compact">
    <dt>compact类型</dt>
    <dd>compact类型的元素将被放置在block类型的元素左边</dd>
</dl>
</body>
</html>

显示结果：
在这里插入图片描述
6、在CSS3中与表格相关的元素：
在这里插入图片描述
实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3中所有与表格相关的元素</title>
    <style>
        div.table{
            display: table;/*整个表格*/
            border: solid 3px #ccc;
        }
        div.table-caption{
            display: table-caption; /*整个表格的标题*/
        }
        div.thead{
            display: table-header-group;/*表格的表头部分*/
        }
        div.tr{
            display: table-row;/*表格的一行*/
        }
        div.td{
            display: table-cell; /*表格中的单元格*/
            border: solid 3px #898989;
            padding: 5px;
        }
    </style>
</head>
<body>
<h1>CSS3中所有与表格相关的元素</h1>
<div class="table">
    <div class="table-caption">表格标题</div>
    <div class="thead">
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
        </div>
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
        </div>
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
        </div>
    </div>
</div>
</body>
</html>

显示结果：在这里插入图片描述
7、none元素
指定none后，该元素不会被显示
下面实例可以实现鼠标移上去隐藏，移动后显示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>none类型</title>
    <style>
        div#a{
            width: 500px;
            height: 500px;
            background-color: #cccccc;
        }
        div#b{
            display: block;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        div#a:hover div#b{
            display: none;
        }/*hover是鼠标移动上去*/
    </style>
</head>
<body>
<h1>none类型</h1>
<div id="a">
    <div id="b"></div>
</div>
</body>
</html>
kaka_hikun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js-Flexbox盒子布局
weixin_34187822的博客
11-19 225
这个年轻的时候，我在项目中其实很少用到； 现在老了，发现了他的好处，我就开始慢慢用到了； 但是其实我对他还是不熟悉的，很陌生，在此做个笔记，加油 转载于:https://www.cnblogs.com/liuqingxia/p/9982255.html...
css布局方式_（14）把“可以动的盒子”更优雅地展示： 常用的“布局” | CSS
weixin_39583222的博客
11-29 113
原创：itsOli@前端一万小时本文版权归作者所有，未经授权，请勿转载！本文节选自“语雀”私有付费专栏「前端一万小时|从零基础到轻松就业」响应式布局原理？?上方面试题“参考答案详解”，请点击文末“前言：拿到一张设计稿，我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替，以前很多老的布局方式现在也慢慢淡化了，那哪些是我们最基本最常用的布局方式呢？本篇给出答案，属...
js学习-多栏布局、盒布局、弹性盒布局
weixin_48235555的博客
06-07 338
多栏布局 1、column-count属性 写法： -webkit-column-count: 栏目数； -moz-column-count: 栏目数； 2、column-width属性：指定栏目的宽度 -webkit-column-width: 值； -moz-column-width: 值； 缩小页面时，不会像column-count属性不变栏目数，会根据页面宽度显示恰当的栏目数 3、column-gap属性：指定栏目与栏目之间的距离 -webkit-column-gap: 值； -moz-column
JavaScript伸缩盒布局、网格布局学习
weixin_45654590的博客
09-12 515
day10 15mins伸缩盒布局二级目录三级目录网格布局 伸缩盒布局 二级目录 三级目录 网格布局
java script 如何将盒子里的东西布局360度。
itearn的博客
05-30 311
520       *{margin:0;padding:0;} .top {height:100px;width:400px;margin:60px auto;font-size:30px;font-family:"华文行楷";} .box{width:310px;height:310px;margin:auto; perspective:800px;}     .b
原生JS经典小项目-网页布局
05-18
在IT行业中，JavaScript（简称JS）是Web开发中不可或缺的一部分，尤其在网页布局方面，它提供了动态和交互性的用户体验。本项目"原生JS经典小项目-网页布局"旨在通过实际操作来深入理解和掌握JS在网页布局中的应用，...
前端-移动端布局-案例
03-20
- Flexbox（弹性盒布局）：Flexbox模型提供了一种更为灵活的布局方式，支持项目沿主轴和交叉轴排列，适用于一维布局。 - Grid布局：Grid布局允许在二维空间内对元素进行精确定位，更适合复杂和多列的布局需求。 -...
JavaScript_学习创建具有时尚视差效果和便当盒布局的现代网站本课程涵盖了从时尚的UI设计到移动优先原则的所有内容
最新发布
05-20
在本课程中，我们将深入探讨如何使用JavaScript来创建一个具有时尚视差效果和便当盒布局的现代网站。JavaScript作为Web开发中的核心技术，是实现动态交互性和用户界面更新的关键工具。这个课程旨在帮助开发者掌握...
学校实训项目-创意布局 瀑布流博客模板.zip
09-04
学生需要学习和应用CSS选择器、盒模型、定位（如绝对定位和相对定位）、浮动以及响应式设计。特别是对于瀑布流布局，需要掌握媒体查询（Media Queries）来实现不同设备上的适配，以及Flexbox或Grid布局来实现动态多...
网页设计与制作（HTML+CSS+JS）-3期（KC003） KC003050000006 单元设计_任务6 运用盒模型网页布局
07-14
本单元主要关注的是运用盒模型进行网页布局，这是网页设计中的核心概念之一。盒模型，也称为CSS盒模型，是描述网页元素如何布局的一种理论模型，包括元素的内容(content)、内边距(padding)、边框(border)和外边距...
JS_div田字格布局
jiangminyan的博客
06-27 829
--> #ozmsDiv{ float: left; } #rbmsDiv{ float: left; } #dgmsDiv{ float: left; clear: left; } #cctvmsDi
JavaScript-页面布局-div布局-盒子模型
插件开发
03-27 3985
文章目录1.盒子模型2.定位方式3.排列属性-float和clear4.块和内联属性5.作者答疑   在使用Html构建界面时，最关键的标签是div，这是一个有着各种属性的块状标签，能够以绝对定位和相对定位的方式构建各种界面模型。 1.盒子模型   div标签在界面排版时，使用的是盒子模型，如下图所示，主要有3大属性来标识相对关系，padding标识内部内容距离border的距离，border边框的宽度，margin是border距离外部元素的距离。使用这三大距离，可以有效控制该元素与周边元素的相对距离。如
用js实现网页中小广告弹出
weixin_44830968的博客
04-22 4101
1.首先先规定一个盒子；将广告内容放入盒子中。 2.在css样式中修改盒子大小，规格等； 3.在js中设小广告出现。
js实现滑动菜单大全(包含Tab滑动，选项卡滑动，横向滑动，竖向滑动)
数元技术博客
05-18 1072
[code="html"] 选项卡 首页 嘿嘿，无视div原始class值。 测试 继续无视h3原始class值。 无聊 h3没有值也可以～ 傻蛋 div没有值一样可以～ 首页 嘿嘿，无视容器原始class值。 测试 继续无视h3原始class值。 无聊 h3没有值也可以～ ...
CSS —— 盒子模型（Flexbox 布局方式）
ZhaoYLi 的编程学习笔记
05-11 1万+
目录 传统盒模型 Flexbox 布局方式 Flexbox 核心概念 Flex 容器属性 flex-direction ：项目元素排列的方向 flex-wrap ：项目元素排列方式 justify-content ： 项目在主轴上的对齐方式 align-items ：项目在交叉轴上的对齐方式 align-content ：多行项目的排列方式 Flex 项目属性 order ：项...
解决：并排的两个div底部对齐
weixin_34407348的博客
04-02 2149
我希望在页面上画2个栈，并列起来，并且其内容是动态的，高度、宽度都可变，但是要保持底部对齐，如图： 实现的代码如下： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=GBK"&gt; &lt;title&gt;Insert title here&lt;
弹性盒子(灵活布局)详解
热门推荐
wyhstars的博客
11-04 2万+
2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。 读了本篇文章，大家将会知道：Flex布局相较于传统布局方式有哪些优点； 为什么我们要采用Flex布局来进行页面设计； 我们如何通过Flex布局来设计页面。 传统布局——基于盒子模型，依赖 display 属性、position属性、float属性。 它对于那些特殊布局
js实现盒子的拉伸
小屋博客
10-13 8075
拉伸盒子     前面我们实现了将一个盒子就行移动（拖拽），在这里我们将对盒子本身的大小进行操作，将盒子拉宽或者拉高。首先我们也是布局，给出一个盒子。 *{margin: 0;padding: 0;border: none;} body{padding: 100px;} #box{width: 150px;height: 100px;backgrou
div 中的控件底部对齐_div靠下 小div盒子靠下居于大div盒子底边与底边对齐
weixin_39874881的博客
01-17 1948
div靠下篇小div盒子靠下居于大div盒子底边，靠下的小div盒子与大盒子底边对齐无论大div盒子高度多高，小div盒子都居于大div盒子下面与大div底边对齐紧靠紧贴。一般这种不确定的布局要求，通常我们会使用css绝对定位布局来实现。这里DIVCSS5通过实例方法介绍如何使用绝对定位方法让一个对象内小对象居于对象底边。宽度为400px;高为300px;，设置一个红色边框样式。里面放2个小盒子宽...
《CSS网站布局实录》学习笔记：Web标准与CSS布局初探
学习笔记的第一部分可能涵盖了Web标准的概述，以及如何开始使用CSS进行基本的布局设计，例如盒模型、定位方式（如静态、相对、绝对和固定定位）、浮动元素以及响应式设计的基础概念。这些内容将为后续的布局技术，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值