CSS盒模型与浮动

css盒模型与浮动

盒模型

1个参数代表上下左右的数据
2个参数 第一个代表上下 第二个代办左右的数据
3个参数 第一个代表上 第二个代表左右 第三个参数代表下的数据
4个参数 代表上—右—下—左
margin:0px auto
标准盒模型 div宽=内容的宽
怪异盒模型 div宽=内容的宽+border+padding
外边距居中条件,一定要有宽,使用margin:0 auto;
rgba 带透明度的颜色

其他属性

transparent 透明色
opacity:0.3; 透明度
cursor:pointer; 手型
overflow:visible; 默认,溢出显示
overflow:hidden; 溢出隐藏
display:none; 隐藏

浮动

文档流:代表元素的布局宽高背景颜色等等
文本流:包含文字内容
左浮:不脱离文本流脱离文档流
右浮:既脱离文本流又脱离文档流
浮动带来的问题:对自身有影响都脱离文档流,对兄弟改变了布局,对父级造成了坍塌
清浮动:
1.给父设置高(不推荐)
2.给使用浮动元素后面添加空的块级元素
clear:both
3.after伪类清浮动
father:after{
content:“”;
display:block;
clear:both
}
4.在父容器上添加溢出隐藏属性: overflow:hidden;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值