web前端-HTML-div语法

文章详细介绍了CSS中的盒子模型,包括边框、边距、内边距的设置,以及盒子的宽度、高度和背景颜色。重点讲解了使用display:flex实现内部盒子的弹性布局,包括X轴和Y轴的对齐方式,并给出了多盒子布局的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

N.1 <div>盒子语法属性介绍

1)盒子边框

border:1px solid red;

2)盒子边距属性

(1)外边距属性

margin 简写属性。在一个声明中设置所有外边距属性。

margin-bottom 设置元素的下外边距。

margin-left 设置元素的左外边距。

margin-right 设置元素的右外边距。

margin-top 设置元素的上外边距。

其中:margin:(auto ,auto);

第一个表示top和bottom上下关系,第二个表示left和right左右关系

因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居中)

(2)内边距属性

padding 使用简写属性设置在一个声明中的所有填充属性

padding-bottom 设置元素的底部填充

padding-left 设置元素的左部填充

padding-right 设置元素的右部填充

padding-top 设置元素的顶部填充

3)盒子宽高属性

width: 600px;

height: 300px;

width: 95%; 宽如果设置百分比的话,就以浏览器的窗口大小为100%。

4)盒子背景颜色

background-color: green;

5)盒子嵌套处理

(1)内部盒子悬浮

 常见的有三种方法可以让div横向排列,分别是flex 弹性盒模型、float 浮动 和 通过inline-block 行块标签等。这里讲解

display: flex;

(2)内部盒子x轴对齐

[1] justify-content : flex-start ; 默认靠右对齐  

 

[2] justify-content : flex-end; 靠左对齐

[3] justify-content : center ; 水平居中    

[4] justify-content : space-around;平均分布(左右有间隔)  

  

[5] justify-content : space-between;平均分布(左右无间隔)

   

[6] 当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例 flex-shrink 属性或复合属性 flex 相关。  

   

 (3)内部盒子y轴对齐

[1] align-items: flex-start从上到下

[2] align-items: flex-end从下到上

[3] align-items: center; 挤在一起居中(垂直居中)

[4] align-items: fstretch拉伸(默认值)

N.2 操作案例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>多盒子的布局</title>

<style>

.box {

display: flex; /*盒子内“子盒子”悬浮并列*/

justify-content: center;/*盒子内“子盒子”的x轴盒子居中*/

align-items: center; /*盒子内“子盒子”的y轴盒子居中*/

border:1px solid red;/*边框*/

margin:40px auto;/*外部大盒子左右轴居中,距离上下40px */

width: 99%;/*宽占浏览器窗口的99%*/

height: 200px;

}

.box1 {

background-color: yellow; /*背景颜色*/

margin:10px;/*外边距*/

width: 100px;

height: 150px;

}

.box2 {

background-color: green;

margin:10px;

width: 200px;

height: 150px;

}

.box3 {

background-color: red;

margin:10px;

width: 300px;

height: 150px;

}

</style>

</head>

<body>

<div class="box">

<div class="box1">第一个盒子</div>

<div class="box2">第二个盒子</div>

<div class="box3">第三个盒子</div>

</div>

<div class="box">

<div class="box1">第一个盒子</div>

<div class="box2">第二个盒子</div>

<div class="box3">第三个盒子</div>

</div>

<div class="box">

<div class="box1">第一个盒子</div>

<div class="box2">第二个盒子</div>

<div class="box3">第三个盒子</div>

</div>

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

研发咨询顾问

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值