CSS基础知识汇总{主要内容:浮动特点,网页布局,清除浮动}

一、box-sizing
box-sizing有两个值:
当给一个盒子设置box-sizing: border-box;的时候,那么当前这个盒子的实际大小就是我们设置的宽度和高度的大小。
当给一个盒子设置box-sizing: content-box的时候,那么当前这个盒子的实际大小=盒子的内容区域(宽度和高度)+边框+内边距。
二、浮动
浮动的使用:
如果要实现图片和文字环绕的效果,我们给图片设置浮动即可。

  1. 因为文字不会受浮动的影响,所以文字不会被浮动的元素覆盖。
  2. 文字所在的标签依然会受到浮动的影响。

清除浮动的方式:
在网页布局中,如果一个父容器没有设置高度,同时该父容器中的子元素都设置了浮动,那么就会导致与父容器并列显示的容器跑到当前父容器的底部。如果遇到以上问题,我们需要清除浮动(将浮动的元素影响消除掉)
(1)使用clear属性清除浮动
clear:left | right | both;
首先在浮动的元素后面直接添加一个空标签
在这里插入图片描述
给当前这个用来清除浮动的空标签设置clear:both; 属性即可
在这里插入图片描述
(2)使用伪元素清除浮动(after)[推荐使用这种方式]
在这里插入图片描述
(3)给父元素设置overflow:hidden;
◆注意如果父元素中没有定位的元素,那么我们可以使用这种方式
◆如果父元素中有定位的元素且该定位的元素超出了父容器,那么不能使用这种方式。
三、overflow
在这里插入图片描述
四、盒子阴影
在这里插入图片描述
在这里插入图片描述
五、边框圆角
在这里插入图片描述
如果希望设置一个椭圆的效果:只要设置水平半径和垂直半径不一样就可以了。(默认情况下,如果我们设置一个值,那么代表水平半径和垂直半径是相等的)
在这里插入图片描述
六、边框合并
在这里插入图片描述
七、行高单位

目前我们在设置css样式中凡是涉及到单位问题,我们通通使用px.
行高单位:
px em 百分比 不带任何单位
例如:
line-height: 20px;
line-height: 2em:
line-height: 200%:
line-height: 2;
☞ 给单独一个标签设置行高,行高不同单位的不同效果:

◆如果设置的行高是以px为单位,那么最后文字的行高值就是我们设置的值,与文字大小无关。

◆如果设置的行高是以em为单位,那么最后文字的行高=设置的文字大小*设置的行高值,与文字大小有关。

◆如果设置的行高值是百分比,那么最后的文字行高=文字大小*设置的行高值

◆如果设置的行高值是个具体数字不带任何单位,那么最后的文字行高=文字大小*设置的行高值

☞如果给父元素设置行高,子元素的行高情况:

◆如果父元素设置的行高单位是px,那么子元素的行高=父元素设置的行高值(继承性)

◆如果父元素设置的行高值是em,那么子元素的行高=父元素文字大小*父元素设置的行值【先计算后继承】

◆如果父元素设置的行高值是百分比,那么子元素的行高=父元素文字大小*父元素设置的行值【先计算后继承】

◆如果父元素设置的行高值是具体值不带单位,那么子元素的行高=子元素文字大小*父元素设置的行值【先继承后计算】

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值