学习代码(盒模型与CSS浮点)

本文围绕CSS展开,介绍了盒模型相关知识,包括外边距参数设置、居中条件,以及标准和怪异盒模型的区别;阐述了CSS隐藏的方法,如使用rgba颜色、opacity设置透明度等;还讲解了CSS浮动,分析了浮动带来的问题及清浮动的几种方式。

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

一、盒模型:

margin-left: 212px;
margin-right: 212px;
1个参数代表上下左右的数据
2个参数··第一个代表上下。·第二个代表左右的数据
3个参数 第一个代表上 第二个代表左右 第三个参数代表下的数据
4个参数 上 右 下 左
外边距居中条件,一定要有宽。使用margin: auto;

类型:

标准盒模型 div宽=内容的宽
怪异和模型div宽=内容的宽+border+padding
box-sizing: border-box;(代码块)

二、CSS隐藏:

rgba带透明度的颜色,
transparent透明色
opacity: 0.3; 透明度
overflow: visible; 默认,溢出显示
overflow: hidden;溢出隐藏
display: none;隐藏

三、CSS浮动:

文档流:包含元素的布局宽高背景颜色等等
文本流:包含文字元素内容
左浮:不脱离文本流脱离文档流
右浮: 脱离文本流也脱离文档流
父盒子高度=divl+div2+div3+div4+div5的高 父盒子高度=坍塌
浮动带来的问题,对自身有影响都脱离文档流,对兄弟改变了布局,对父级造成了坍塌*
清浮动
1、给父设置高 (不推荐)
2、给使用浮动元素后面添加空的块级元素,clear:both 、
在浮动元素的父级上清楚浮动
3、after伪类请浮动
4、在父容器上添加溢出隐藏属性overflow: hidden;
father: :after!
content:.
display: block;
clear: both;
overflow: hidden;

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值