高度宽度自适应问题

宽度自适应:默认情况下块状元素,当宽width不设置时,子元素跟随父元素而变化。
高度自适应:1,当元素height不去设置或者成height:auto;元素的高度是被内容撑开的。
元素高度自适应窗口高度
设置方法:html,body{height:100%;}
注:如果设置子元素的高度跟随父元素的高度变化而变化,那么父元素必须有高度。
最小高度设置:min-height;
高度塌陷出现的场景:
当子元素有浮动,父元素没有高度时,父元素会出现高度塌陷。
注:height或min-height,浮动子元素不会撑开父元素的。
解决:1.父元素添加高度,遇到高度自适应时,就用不了。
2. 给父元素添加overflow:hidden,当遇到定位设置时就不好呢用了,
弊端:隐藏掉定位在当前元素外围的内容。
3.给浮动的元素下方添加一个div空的(块元素),并给这个元素添加,clear:both;这会 造成元素多余
4.万能清除浮动发:.clear:after{content:“”;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
伪对象选择符
1)、::after : 与content属性一起使用,定义在对象后的内容。

语法:选择符::after{content:”文字”;} 选择符::after{content:url(图片路径);}
在某个元素后面用css形式添加图片,文本、
div::after{content:url(logo.jpg);}div::after{content:“文本内容”;}
2)、::before: 与content属性一起使用,定义在对象前 的内容 div::before{content:“在其前放内容”;}
3)、::first-letter 定义对象内第一个字符的样式。
说明:(该伪元素只能用于块级元素)
4)、::first-line:定义对象内第一行的样式。
注:(该伪元素只能用于块级元素。)


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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值