网站顶部,信息流优化师发展前景,泰安招聘信息最新招聘2022,深圳建站软件1、纯文本的排列。文档流就像我们的文本内容一样#xff0c;所有的文字都会紧挨着#xff0c;一个个排列下来#xff0c;如果到了边界#xff0c;就会换一行排列。当然如果敲回车或者按下空格键一般都会认为是一个词间距#xff0c;因为英文中每个单词之间是有距离的…1、纯文本的排列。文档流就像我们的文本内容一样所有的文字都会紧挨着一个个排列下来如果到了边界就会换一行排列。当然如果敲回车或者按下空格键一般都会认为是一个词间距因为英文中每个单词之间是有距离的不像中文每个汉字连在一起的。所以不管你敲了几个回车不管你敲了几个空格。程序都认为只有一个词间距的空格距离。我们把这种现象称为空白折叠现象。下图中的红色箭头就是我们敲了回车和敲了空格的效果。2、文本和图片的排列因为图文排版的原因图片的宽度是一个整体。不像文字可以中间分开因此在图文一起的时候我们会发现图片作为文档流中的内容也是和一个文字元素一样紧挨前一个文字后面的文字也紧跟着图片。但是如果一行剩下的位置不够图片的宽度就会自动换一行。因为图片和一个文字元素一样因此图片的高度大于文字的高度就会把这一行撑高图片越高行越高。在同一行的文字默认就会在图片的下端。如果你希望文字相对在图片的中间位置那么就需要给图片设置一个CSS样式vertical-align: middle;注意一定是给图片设置不是给文字设置。当然如果我们设置两个张图注意观察下面的两张图中间的缝隙原因在于之间是换行的。根据上面文字的特征这里必然也会产生一个空格如何解决这个问题呢起始有很多手段最简单的是把两个标签连接写不要换行3、块元素和行内元素刚才我们所说的都是行内元素也就是内容添加后会自动放在一行如果页面的剩余的宽度比要放入的元素小那么就会自动换行。除了文本和图片还有一些其他的HTML标签也是行内元素。例如:行内元素span...span行内元素a...a 链接br 换行b...b 加粗strong...strong 加粗img srcimg/1.jpg 图片sup...sup 上标sub...sub 下标i...i 斜体em...em 斜体del...del 删除线u...u 下划线input typetext 文本框textarea ...textarea 多行文本select ...select 下拉列表上面所有的行内元素如果直接写在代码中都会存在同一行中。当然换行br会将后面的元素都放在另外一行了。有时候我们希望一个内容可以自己独立成行。这样我们就有了块元素。块元素会独立成行与行内元素做明显的区分。例如addressaddress地址文字center...center 居中h1...h1 标题一级h2...h2 标题二级h3...h3 标题三级h4...h4 标题四级h5...h5 标题五级h6...h6 标题六级hr 水平分割线p...p 段落pre...pre 预格式化blockquote...blockquote 段落缩进 前后5个字符ul...ul 无序列表ol...ol 有序列表dl...dl 定义列表table...table 表格form...form 表单div...div块容器块元素和行内元素具体有哪些区别呢。行内元素块元素同行输入行内元素就会自动同行输入块级元素自动换行并且独立占有一行其它行内元素不会和它同行的。设置宽高行内元素部分内容是不可以设置宽高的例如span容器,a超链接标签等等当然有些还是可以通过CSS样式更改宽高的例如inputimg,textarea等非文字的标签块元素直接可以设置宽高如果没有设置就会根据该元素的父级容器的宽自动设置100%高度是根据内容撑开的如果没有内容块元素默认高度是0这点很重要。4、行内元素和块元素的互相转换行内元素和块元素可以互相转换的例如(1) 行内元素转换为块元素这是默认的行内元素这是转换后的。我们发现文字块换行了而且独立占有一行在这里我们设置display:block(2) 块元素转换为行内元素这是默认的div的块元素样式设置为行内元素后。我们发现宽高失效了。一旦块级元素设置为行内元素原来设置的宽高就会失效(3) 块元素和行内元素转换为行内块元素有时候我们想让容器(不是textArea或者input)既有宽高又可以排列在同一行中我们可以转换为行内块容器。尤其是我们希望将多个不同宽高的容器放在同一行中并且可以通过margin调节他们的位置(注意行内元素不能通过margin调节垂直位置因为他们都是同一行的)这时候行内块元素就非常有必要了。块元素变成行内块元素行内元素变行内块元素我们发现这两个效果都是一样的。大家可能觉得这样很棒了我们可以利用图文混合排列做成网页了但是注意我们转换成了行内块元素他们就是在行内了任何一个更改了marginTop都会撑开了行高。就会变成这样到此为止我们就认识了标准的文档流如果想在这种标准文档流中排版出复杂的图文混排那基本上很难。因此我们就要学习浮动。浮动就是让容器脱离了这个标准文档流就像浮动在页面上一样。关于这个问题我们在下一篇中详细介绍。
