web前端开发初学者十问集锦(2)

1.html中行内元素可以设置宽高吗?

行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高;而当设置了绝对定位或者浮动,会生成块级框(即变成块级元素),所以就可以设置宽高了。

2.img标签是行内元素为什么可以设置宽高?

准确来说,img是替换内联元素 replaced inline element,属于inline element类目。其特殊之处在于可以设置height/width/padding/margin,效果等于块级元素。

有一点需要注意的是,它在计算height/margin/width等值或在绝对定位的时候,有一些额外的规则。比如设定了width但未设置height, img的height会根据图片的大小按比列缩放。

3.html中行内块元素与行内元素和块级元素的区别?

在W3Cschool中查看CSS display属性的时候,发现display有一个取值为inline-block,其作用是将元素设置为行内块元素。如下图:

那么这个行内块元素与行内元素和块级元素有什么区别呢?首先说一下行内元素与块级元素的区别。行内元素又称为“内联”元素。

在CSS 框模型(又名盒子模型)中,一切元素皆为框(box,也称为”盒子”)。行内元素对应行内框,块级元素对应块级框,又叫块框。二者的区别在于:

(1)块级元素独占一行,行内元素不独占一行; 测试代码如下,IE10运行。

<html>
<body>
<div>
<span style="border:1px solid red;">some text</span>
<span style="border:1px solid red;">some text2</span>
<p style="border:1px solid red;">Some more text.</p>
</div>
</body>
</html>

运行结果如下:

(2)块级元素可以通过CSS width、height、边框,垂直内边距和外边距设置框的尺寸,但行内元素不可以,行内元素的高和宽只能由其包含的内容的高和宽决定。此外,行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。

IE10测试,测试代码:

<html>
<body>
<div>
<span style="border:1px solid red; width:150px;height:150px; margin-bottom:100px;">some text</span>
<span style="border:1px solid red;width:150px;height:50px;display:block;">some text2</span>
<p style="border:1px solid red;width:200px;height:50px;">Some more text.</p>
</div>
</body>
</html>

测试结果截图:

注意:对于行内替换元素,也可以设置宽高和垂直方向的内外边距。

(3)块级元素可以包含行内元素或块级元素,行内元素最好不要包含块级元素。因为不同浏览器有不同的容错处理,所以浏览器解析时可能会出错。

行内块元素:顾名思义就是行内的块级元素,拥有块级元素的特性但是却不独占一行,是行内元素与块级元素的折衷产品,这也是它与行内元素和块级元素的区别。其对应的框叫做行内块框。

4.CSS框模型中行框,块框,行内框,行内块框的理解。

由W3Cschool给出的框的定义可知:

行框:由一行形成的水平框称为行框(Line Box);行框是指本行的一个虚拟的矩形框,是浏览器渲染模式中的一个概念,并没有实际显示。行框高度等于本行内所有元素中行内框最大的值。当有多行内容时,每行都会有自己的行框。

块框:块级元素形成的框称为块框,又叫块级框。如div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”;

行内框:行内元素形成的框称为行内框,如a、span元素形成的框。注意,这里不要与行框相混淆。

行内块框:由CSS display属性设置为inline-block的行内块元素形成的框称为行内块框,又叫作行内块级框。

5.html中什么是替换元素,什么是非替换元素?

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如<div><span>就不同,而<strong><p>也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。

从元素本身的特点来讲,可以分为替换和非替换元素。

替换元素: 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。

(X)HTML中的<img><input><textarea><select><object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如:

<img src=”cat.jpg” /> 
<input type="submit" name="Submit" value="提交" />

浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。注意,几乎所有的可替换元素都是行内元素。

非替换元素: (X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。例如:

<span>非替换元素</span>

段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

6.应用float浮动属性之后对html元素的影响?

主要有两个影响, (1)浮动的框脱离文档的普通流,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。可参见:CSS 浮动

(2)在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。这样的话就可以对浮动后的行内元素应用高和宽的属性了。可参见:CSS float 属性

浮动元素生成的块级框,其宽度不会默认扩展至其父容器,而是默认为其包含元素的宽度。这一点跟inline-block元素相同。

7.web前端开发相关代码如何注释?

(1)JavaScript代码如何注释? 可使用如下两种注释方式:

第一种,使用双斜杠:

//JavaScrit代码

第二种,使用/**/:

/*JavaScrit代码*/

(2)CSS代码注释方式 使用/**/,如下:

<style type="text/css">
/*css代码*/
</style>

(3)html代码注释方式 使用HTML <!--...-->标签进行注释,例如:

<!-- html代码  -->

8.margin:0 auto;无法使div水平居中

再使元素进行居中的时候,我们要清楚需要居中的元素的类型,对症下药。这里要注意对于浮动的元素,text-align和vertical-align和margin:0 auto;都是无效的。

行内元素(inline element):水平居中显示,我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的,我们的行内元素就相当于一行之内的文字了,所以可以使用这个方法。

行内块级元素(inline-block):对其父级元素添加text-align:center;

块级元素(block):块级元素就对其本身添加margin:0 auto;如果是对div进行水平居中的话,需要显示设置该div的宽度width。

9.如何让浮动的div水平居中?

元素垂直居中: 对于页面上的块级元素,我发现设置CSS样式margin:auto 0;或者vertical-align:middle;都没有效果。显然,对于浮动的元素,上面两种方法来进行垂直居中是无效的。那么我们如何来处理这个问题呢,今天我们来探讨下。

(1)使用margin-top:n%; 来实现,需要一点点的算法。先计算自己内容的高度,再计算容器的高度,算出自己内容的高度占整个容器高度的百分比。100%减去自己内容高度的百分比除以2得出的百分比就是 margin-top:百分比的数值。

(2)或者将当前浮动的div的定位方式设置为relative,absolute,然后使用top:n%的方式。百分比的计算方式如上。

浮动的元素水平居中: 不能对其父元素应用text-align:center;也不能对其使用margin:0 auto;这些都是无效的。

可以效仿上面浮动的元素垂直居中的方法。这里提出一个冗余的方法。就是增加一个wrapper,包裹浮动的元素,并将wrapper设置为display:inline-block;然后对wrapper的父元素应用text-align:center;这里的wrapper一般使用div。当然,浮动的元素垂直居中也可以使用此方法,缺点就是多增加了一个wrapper。

10.CSS绝对定位之后为什么以浏览器窗口作为父元素呢?

因为绝对定位定位之后,其参考的父元素是第一个定位非static定位的祖先元素。

一图胜千言,其中根元素为<html>元素,注意,<html>元素不是浏览器窗口。包含块判定总流程图如下:


参考文献

[1]W3Cschool 一切皆为框 [2]替换元素,非替换元素 [3]CSS 行框 [4]inline-block和block元素水平居中显示 [5]http://www.zhihu.com/question/24475073 [6]http://www.zhihu.com/question/19926700

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lzj_learn_note

前端开发学习──CSS(1)

HTML 标签原本被设计为用于定义文档内容,但随着HTML的 发展,为了满足页面设计的更多要求,HTML增加了许多的显示功能,导致HTML变得越来越杂乱,页面也...

1321
来自专栏Create Sun

没人看系列----css 随笔

1633
来自专栏向治洪

React Native布局之FlexBox

概述 FlexBox(弹性框布局):英文全称the flexible box Module,FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。 ...

2307
来自专栏葡萄城控件技术团队

深入CSS,让网页开发少点“坑”

 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Sta...

1979
来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

3177
来自专栏大数据钻研

你不得不了解的HTML知识

这次要细说的只是块级元素和行内元素的内容,如有不对,请轻喷。 块级元素和行内元素 默认情况下块级元素会始终占居一行,而行内元素并不会。除了 table 元素的 ...

2786
来自专栏coding for love

CSS入门3-认识html之元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

863
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

3602
来自专栏编程

深入CSS,让网页开发少点“坑”

问题:我怎么才能收到你们公众号平台的推送文章呢? 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的...

19410
来自专栏岑志军的专栏

HTML标签分类

3549

扫码关注云+社区

领取腾讯云代金券