前端【3】--CSS布局，CSS实现横向布局，盒子模型

已于 2025-01-18 22:57:21 修改
阅读量1.7k 收藏 26
点赞数 8
CC 4.0 BY-SA版权
分类专栏： # 前端 文章标签： 前端 css
于 2025-01-16 22:24:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73704268/article/details/145189861

盒子分类

1、块级盒子

2、内联级盒子

3、内联块级盒子

4、弹性盒子 

5、盒子内部分区

方法一：使用 float 普通盒子实现横向布局

方法二：使用 display: inline-block 内联块级元素实现横向布局

方法三：使用弹性盒子 flexbox（推荐）

1、父级属性：

 2、子级属性：

示例：

往期文章：

前端【2】html添加样式、CSS选择器-CSDN博客

盒子分类

1、块级盒子

块级元素布局：块级元素的特性，独占一行，竖向排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素</title>
    <style>
        div {
            width: 200px;
            height:
了解本专栏 订阅专栏 解锁全文 超级会员免费看
HTML——css--盒子模型与布局
immnature的博客
08-06 3062
html中任何一个元素如div、span等都可以看作盒子，每个元素本质属性都会存在一些区别而这种现象则被称为盒子模型。
CSS面试问题准备-----CSS布局篇之Flex布局
QAQTHREE的博客
03-22 492
CSS布局 弹性盒子(Flexbox) 概念：弹性盒子是用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外空间，收缩以适应更小的空间。 为啥要使用弹性盒子呢？ 我们知道传统的布局方式通常使用display、float和position来实现的。但是由于他们在某些方面的的局限性，让人难以完成任务或完成起来很复杂。比如以下需求： 在一个父内容里垂直居中一个块内容。 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
div+css横向布局
12-18
div+css横向布局
css横向排列_Re: 从零开始の CSS 学习笔记——布局（上）
weixin_39628271的博客
11-23 775
主要内容：float 布局、flex 布局布局是什么把页面分成一块一块，按左中右、上中下等排列布局分类两种固定宽度布局，一般宽度为960/1000/1024px （淘宝pc）不固定宽度布局，主要靠文档流的原理来布局（常用在移动端、响应式，会跟随设备宽度变化）还记得吗文档流本来就是自适应的，不需要加额外的样式第三种布局响应式布局意思就是PC上固定宽度，手机上不固定宽度也就是一种混合布局布局的两种思路...
网页布局必修课：CSS盒模型全面解析
最新发布
qc123455的博客
06-20 1156
CSS盒模型是网页布局的核心概念，将每个HTML元素视为由内容区、内边距、边框和外边距组成的矩形盒子。内容区通过width/height设置，内边距(padding)和边框(border)围绕内容，外边距(margin)控制元素间距。默认box-sizing为content-box，总宽度=width+padding+border+margin；使用border-box时，width直接包含padding和border。垂直方向的外边距会发生折叠（取较大值）。合理运用盒模型属性能有效控制布局效果，如通过ma
CSS实现横向布局
m0_73971785的博客
08-25 2502
问题：使用float后，所在父级元素无高度会导致下方元素向上移动。设置弹性盒子内多行的分布方式，（设置于父级元素）取值包括。把三者的宽度初始值设为一样的，压缩比例也设置为一样的。2.元素之间的间距均匀分布，需要计算且不一定能均分。2.元素之间的间距均匀分布，需要计算且不一定能均分。设置弹性盒子内元素的排列顺序（作用到子元素）2.父级元素不设置高度，给父级元素中增加。1.元素均分父级，需要计算且不一定能均分。1.元素均分父级，需要计算且不一定能均分。控制弹性盒子内子元素是否换行，取值包括。
CSS：盒子模型 与 多种横向布局方法
Cosmoshhhyyy的博客
08-09 2977
本文详细介绍了css中的盒子模型的区域划分和多种横向布局方法的优缺点。
css横向布局的几种方式
热门推荐
叶新东老师的博客
11-28 1万+
    首先我们先看看 html部分  bodyTip 内的三个标签我们需要让他们横向显示并且根据浏览器宽度平均显示 &lt;body&gt; &lt;!--头部--&gt; &lt;div class="head"&gt; 我是头部 &lt;/div&gt; &lt;div class="bodyTip"&gt; &lt;!--左边--&gt;
12、CSS3的flex布局（弹性布局、弹性盒子模型）
weixin_45065754的博客
04-05 1006
1、CSS3的flex布局 flex布局 基础知识 display:flex 元素变成一个flex容器 容器内部的元素 叫做flex元素或者flex项目(flex-item)，默认不换行，高度占100% 优点 比浮动布局更简洁，更易于维护 2、flex-direction属性（设置元素是横向还是纵向的 ） flex-direction属性 设置元素(flex-item)水平垂直方向 row(默认值) 主轴为水平方向，起点在左端 row-reverse 主轴为水
css相关内容:盒子模型
weixin_74384492的博客
08-06 1050
在HTML学习中，我们了解到，每个标签的本质都是形成一个独立的空间，用于各种操作。各种标签形成的独立的空间就是盒子模型。简单来说，盒子模型就是各种标签的抽象化产物。我们可以针对盒子模型进行各种参数设置，达到样式优化的效果。
css常用指南，弹性盒子模型、块标签横向排列、标签放一行、弹性盒子模型内的布局
Rockandrollman的博客
01-02 1084
css常用指南，弹性盒子模型、块标签横向排列、标签放一行、弹性盒子模型内的布局
css横向导航条
03-01
NULL 博文链接：https://virgoooos.iteye.com/blog/274358
CSS盒子布局
CMB102653的博客
12-02 418
目录 1、边框border 2、外边距margin 3、内边距padding 补充：display 用一张图来形象的描述盒子布局： 最中间“content”是盒子的内容，border是盒子的边框，边框外为外边距 ---margin，边框内是内边距----padding 1、边框border border-（top right bottom left）指定边框四个边的其中一边 border 边框属性是以下各个边框属性的简写属性： border-width 设置四个边框的
前端盒子布局
yufengxiaojiang3的博客
07-27 1215
前端盒子布局 方法一 position 分别使用 position：absolute|| fixed,脱离文档流，相对父级一级一级查找，第一次出现position的容器进行定位自身位置会被后面的元素占用， 或者是relative，相对自身定位，自身的位置依然保留在文档流中，使用top,left,bottom,right进行定位 方法二 浮动 分别对需要浮动的元素添加float，同时，浮动...
css 横排
php菜鸟技术天地
06-14 1115
&lt;style type="text/css"&gt; .aa { list-style-type: none; float:left; width:100px; } &lt;/style&gt; &lt;ul&gt; &lt;li class="aa"&gt;百度知道&lt;/li&gt; &lt;li class="aa"&amp
【CSS布局】盒子模型
qq_59084325的博客
09-24 1647
【CSS布局】盒子模型（超详细）
CSS 的布局 盒子
GoodManS的CSDN
10-29 1498
了解CSS相关盒子的内容
css横向导航栏布局,CSS04--对齐、 布局、导航栏
weixin_42405980的博客
08-03 2440
我们接着上一章，继续学习一些有关对齐、布局、导航栏的内容。1.水平块对齐：1.1 margin：把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素.center {margin-left:auto;margin-right:auto;width:70%;background-color:red;}1.2 position：使用 position 属性进行左和右对齐....
CSS3 盒布局
actorWen的博客
12-13 522
盒布局是CSS3发展的新型布局方式。 相比于传统的浮动布局，盒布局更加灵活，使用方法也相对简单。 开启盒布局的方法，就是把display属性值设为box或inline-box。 开启盒布局时，可同时设置如下； display: -webkit-box; /*兼容webkit内核*/ display: -moz-box; /*兼容Gecko内核*/ display: box; /
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值