首先我们需要了解

对于元素格式的转换各自都有各自不同的使用方法已经理论知识;透彻弄懂才能思路清晰去解决问题
三种元素格式:inline(行元素)/block(块元素)/inline-block(行级块元素) ;

  • block
    1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
    2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
    3. block元素可以设置margin和padding属性。
  • inline
    1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
    2. inline元素设置width,height属性无效。
    3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  • inline-block
    1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

如果要改变以上标签这一特性,可以在css中定义display去随意改动元素模式进行相关设置。

解决多图在一行或多标签文段在一行解析:

但是在行级元素的标签中应用定位(position)/浮动(float)那么标签会自动改为inline-block;
行级元素都具有文本特性,当两个行级元素处于一行时,如果在他们之间加空格,那么也会跟正常文本一样分隔开;

解决文字搭配图片在一行解析:
行级元素或者行级块元素,如果一个是图片一个是文字,那么底对齐

如果标签包含图片和文字那么是文字底对齐,如果都是文字(哪怕字号不一样),是底对齐;如果不喜欢底对齐可以使用(vertical-align)调整对齐方法

baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom使元素及其后代元素的底部与整行的底部对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length将元素升高或降低指定的高度,可以是负数。
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。

去掉网页中图片间隔:
图片之间有空格的原因:凡是带有inline的元素/标签,都有文字特性(文字之间总有空隙);几个img在一块,中间总有空隙;因为img是inline-block;
 方法一:因为具有文本属性,将需要去除空隙的图片放在一行,源码中间不能存在间隔

eg: <img src="logo.jpg"> <img src="logo.jpg">

图片间的间隙就会自然去除;

 方法二:通过css样式:margin-left 改变成负数,那么图片之间会嵌入进去,从而达到去掉空隙的目的;(这种方法也可以运用到盒子与盒子中但是若存在边框,边框重叠部分会加深,就需要去除边框利用其他属性在这解释表单重叠加深去除方法)

扩展:在表单中当我们添加了边框,又把每个单元格的边距去除后,表单就会出现边框重叠的问题,使得边框线变粗,这时我们就可以设置border-collapse: collapse来设置边框,它把重叠的边框合并在一起,成为一个边框,实现单线边框的效果。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐