发表于: 2022-07-17 18:34:53

0 892





常见的inline元素、block元素、inline-block元素有哪些?它们之间有什么区别 


inline元素

inline元素全称Inline Elements

英文原意:An inline element does not start on a new line and only takes up as much width as necessary.

一个内联元素不会开始新的一行,并且只占有必要的宽度。



特点:

和其他元素都在一行上;

元素的高度、宽度、行高及顶部和底部边距不可设置;

元素的宽度就是它包含的文字或图片的宽度,不可改变。



block元素

block元素全称Block-level Elements

英文原意:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

一个块级元素总是开始新的一行,并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)



特点:

每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行);

元素的高度、宽度、行高以及顶和底边距都可设置;

元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。


inline-block元素

inline-block元素,英文释义:inline-block elements are like inline elements but they can have a width and a height.它像内联元素,

但具有宽度和高度。


特点:

和其他元素都在一行上;

元素的高度、宽度、行高以及顶和底边距都可设置

二.常见的inline元素、block元素、in





九宫格的布局你还能想到哪些办法实现?它们各自的优势劣势是什么?


设置垂直方向的padding撑开容器

示例

div.box {
width: 30%;
 padding-bottom: 30%;
 margin: 1%;
 background-color: orange;
 float: left;
 border-radius: 5%;
}
div {
width: 100%;
 padding-bottom: 30%;
}

优点:简洁明了,且兼容性好

缺点:填充内容后会出现问题


viewport 使用vw单位

示例


div.box {
width: 30vw;
 height: 30vw;
 margin: 1vw;
 background-color: orange;
 float: left;
 border-radius: 5%;
}
div {
width: 100vw;
 height: 100vw;
}


优点:简洁方便

缺点:浏览器兼容不好


vw(Viewport Width)、vh (Viewport Height)是基于视图窗口的单位,是css3的一部分,基于视图窗口的单位


IDE是什么?它和文本编辑器相比有什么优缺点?


文本编辑器

文本编辑器是计算机软件中的一种。主要用于用来编写和查看文本文件。


IDE

IDE是带有软件开发功能的“集成开发环境”。


集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,

一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。

所有具备这一特性的软件或者软件套(组)都可以叫集成开发环境。


优点

节省时间和精力。IDE的目的就是要让开发更加快捷方便,通过提供工具和各种性能来帮助开发者组织资源,减少失误,提供捷径。

建立统一标准。当一组程序员使用同一个开发环境时,就建立了统一的工作标准,当IDE提供预设的模板,

或者不同团队分享代码库时,这一效果就更加明显了。管理开发工作。首先,IDE提供文档工具,可以自动输入开发者评论,

或者迫使开发者在不同区域编写评论。其次,IDE可以展示资源,更便于发现应用所处位置,无需在文件系统里面艰难的搜索。


缺点

学习曲线问题。IDE基本上是比较复杂的工具,为了更好的熟练使用,需要一定的时间和耐心。

初学者的困难。对初学者来说,使用IDE来学习开发有相当的难度,不适合学习一种新语言时使用。

无法修复坏代码或设计。开发者不能完全依赖工具的便捷,还是必须保持专业水准和熟练度,开发的成果好坏主要还是看开发员的技术。




收获:以上



明天计划:完成接下来的任务





返回列表 返回列表
评论

    分享到