ZG前端学习系统day05 2020-11-6

css标签的分类(按照其显示类型进行)
block (块级元素)
1 在不设置宽的时候 宽度等于父元素的宽度 , 不设置高的时候 默认情况下 是0
2 可以设置宽高 和支持盒子模型的所有属性
3 独占一行
inline(内联元素)
1 宽高由内容进行决定的
2 不可以设置宽高 某些盒子的模型是不支持的
3 并不是独占一行 并排排列 存在间隙
inline-block
既有块的特性也存在内联的特性
浮动
float:left float:right
浮动的特点
1.浮动后的元素脱离了文档流不占位置了
2.浮动后的元素类似于行内块元素可以设置宽高
3 如果不设置宽高他的宽高是由内容撑开的
浮动场景
让兄弟间的块元素在一排展示
浮动条件
1必须有父元素
2 兄弟元素都要浮动
浮动产生的问题:高度塌陷
解决

1 在尾部添加一个额外标签 并且使用clear:both
2 在父元素上添加overflow:hidden 等操作进行bfc规范
3after伪元素
::after{
content:‘’;
display:block;
clear:both;}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值