xiaoqiyan 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu
27 文章
0 评论
13968 浏览
0 当前访客
ღゝ◡╹)ノ❤️

前端学习之CSS Day08 怪异盒模型

(补充)line-height

行高设置和盒子高度一样时,内容就垂直居中

文本段落间的间距,顶到顶,中线到中线,底到底

内外边距差别

要控制同级元素之间距离使用外边距

什么时候使用padding,什么时候使用margin

只有一个内容的话推荐使用margin

有多个内容的话使用padding,但是盒子会变大,这样的话不会计算多次

补充

图片设置大小,宽度设置固定,高度设置自动

元素(块)高度默认是100%

元素(行内)宽度,默认是根据内容来的

同一行如果多个元素高度相加大于父元素的宽度,会换行显示

外边距穿透

没有边框或者padding的时候会穿透

怪异盒模型

box-sizing: border-box;

内容的权重非常高

当内外边距和边框宽度相加 < 内容width的时候 总宽度就是width设置的值,压缩content内容区域

当内外边距和边框宽度相加 > 内容width的时候 总宽度就是内边距+边框,content内容区域没了

主要用于手机端

两种盒子模型区别

**主要区别在于盒子的整体宽度高度计算方式不同 **

  1. 用途:正常盒模型主要用于PC端,怪异盒模型主要用于手机端。
  2. 原理:正常盒模型的大小是由内到外的,由内部决定外部的大小;而怪异盒模型是由外而内的。
  3. 可以同时设置 box-sizing属性来使用这一特性,是其改变border宽度也不影响其他元素;
  4. box-sizing:简单理解就是盒子大小基于什么计算的;


标题:Python
作者:肖祺彦
地址:url

评论
取消