web前端:容器内的行块盒和行盒

    作者:加减乘除t 更新于: 2020-03-13 20:29:15

    Web开发

      所谓网站(Website),就是指在网际网路(因特网)上,根据一定的规则,使用html等工具制作的用於展示特定内容的相关网页的集合。

      深度行盒与行块盒(空白,参考线,行盒右拉伸)

      容器内的行块盒和行盒

      

      

      

      ggg1

      

      ggg1

      ggg1

      

  

  

  ggg1

  

  ggg1

  

  ggg1

  

  

  

  

  ggg2

  ggg2

  

  ggg2

  

  

  

  ggg2

  ggg2

  

  ggg2

  ggg2ggg2

  

  

  

  

  ggg3

  

  ggg3

  ggg3ggg3

  

  

  ggg3

  

  ggg3

  

  

  

  

  ggg4

  

  

  style="display:inline-block;font-size:64px;background-color:rgb(52,247,3);">

  

  

  

  

  ggg5

  

  ggg5

  

  

  

  

  

  style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252,171,171);">

  ggg6

  

  

  style="display:inline-block;height:60px;width:100px;font-size:64px;background-color:rgb(252,203,171);">

  

  

  

  

  

  style="display:inline-block;height:40px;width:100px;font-size:64px;background-color:rgb(252,171,171);">

  

  

  style="display:inline-block;height:60px;width:120px;background-color:rgb(197,83,7);">

  

  ggg77

  

  总结

  1文字的大小由:font-size,font-family,line-height决定

  设置文字的相对大小时候px,em,百分比,文字的内容实际高度content-area通常高于设置的值(不同的font-family比例不同,同一种文字比例相同,按比例计算),而且还有字体设计者设置的默认行高(行高>=0)

  2图片(可替换元素)和无子元素的inline-block元素的行为类似,都是下外边距作为参考线

  3一个元素内部有行盒(或者行块盒),且font-size>0时,该元素会产生参考线

  4行盒子右边有行盒子(有文本的)或者行块盒(任意的,甚至宽高0,无子元素)会导致该元素右伸展

  5行块盒与行盒或者行块盒之间,如果之间有空隙发生空白折叠(代码书写的多个换行或者空格合并为一个),空白大小由该元素包含块的font-size大小决定

  6vertical-align可以设置行盒或者行块盒

  简单地说,网站是一种通讯工具,就像布告栏一样,人们可以通过网站来发布自己想要公开的资讯(信息),或者利用网站来提供相关的网路服务(网络服务),又或收集想要的信息。人们可以通过网页浏览器来访问网站,获取自己需要的资讯(信息)或者享受网路服务。

标签: 字体设计htmlweb

上一篇:web前端:易优CMS:小白学代码之notempty

下一篇:web前端:移动端分辨率+小程序的自适应单位RPX

为您推荐

课课家教育

未登录