HTML——css--盒子模型与布局

--JR

已于 2024-08-06 15:28:06 修改

阅读量3k

点赞数 30

CC 4.0 BY-SA版权

分类专栏： HTML前端 Java 文章标签： html css 前端

于 2024-08-06 14:46:11 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/immnature/article/details/140930134

盒子：

html中任何一个元素如div、span等都可以看作盒子，每个元素本质属性都会存在一些区别

而这种现象则被称为盒子模型

盒子模型种类

1.块级盒子（标签、元素）：div ul li h1~h6

独占一行，对宽度高度支持

2.内联级盒子：span a

不独占一行，对宽度高度不支持

3.内联块级盒子：img input

不独占一行，对宽度高度支持

4.弹性盒子：

不论父级能不能放下子元素，子元素始终横向布局

盒子模型分区

内容区：

width:200px;

height:100px;

填充区：

padding:50px;

padding:50px,20px;上下，左右

padding:50px,20px，10px;上，左右，下

padding:50px,20px，10px，100px;上，左,右，下

单独一边设置:

padding-top: 10px;

padding-left: 10px;

padding-right: 10px;

padding-bottom: 10px;

边框区：

组成：

border-style:边框样式

border-color:边框的颜色

border-width:边框宽度

例：

1.分开写

border-color: black;

border-style: dashed;

border-width: 5px;

2.合着写

border:solid 10px blue;//不用区分顺序，也可以加 -方向来设置一条边

外边距：//调整元素和元素之间的间距

margin: 50px;

margin:50px,20px;上下，左右

margin:50px,20px，10px;上，左右，下

margin:50px,20px，10px，100px;上，左,右，下

水平方向上可以用 auto 来居中

注意：如果两个相邻元素都设置了间距，不是累加计算，而是按照大的走

例子：

.html

<!DOCTYPE html>
<html lang="en">
&

最低0.47元/天解锁文章

200万优质内容无限畅学

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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