CSS基础知识汇总{主要内容:行高的定义、盒子模型}

一、行高line-height的定义及使用
在这里插入图片描述
行高指的是两行文字两条基线之间的距离
行高的作用:
1、让文字垂直居中(只要设置文字的行高值=当前文字所在容器的高度)
2、可以通过行高调整文字上下的间距(具体的使用测量还没待学习,后续更新)
二、盒子模型
1、边框(border)

border-color:  设置边框颜色
border-style:  设置边框样式的(none 默认没有边框、solid 实线边框、dashed 虚线边框、dotted 点线边框)
border-width: 设置边框的宽度

在这里插入图片描述
边框合写方式:

border:orange  dottted  20px
使用border属性连写的时候,必须设置border-style。
没有顺序的限制

单独设置每一条边框的样式合写方式:
在这里插入图片描述
去掉边框:

border-style: none  或者  border: none;

去掉轮廓线:

outline-style: none; 

获取鼠标焦点的时候设置样式:

input:focus {}

2、内边距(padding)
合写:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3、外边距(margin)
外边距特性:
垂直外边距塌陷:如果给子元素设置margin-top的时候,发现父元素也跟着子元素向下移动。
解决办法:
(1)给父元素设置边框
(2)给父元素设置overflow:hidden;
垂直外边距合并
在设置上下外边距的时候,会以最大值为准。
友情提示:不能给行内元素设置上下内外边距。
注意: 如果希望给行内元素设置上下内外边距,请进行模式转换!!!!!!!

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值