1. 什么是DIV ?(块元素)

作用  :  一般用于配合CSS完成网页的基本布局。

2. 什么是SPAN ?(行内元素)

作用:一般用户配合CSS修改网页中的一些局部信息。

3. div 和 span 的区别

1. div 会单独的占领一行,span不会单独的占有一行。

2. div 是一个容器级的标签,而span是一个文本级的标签

3. 容器级的标签和文本级的标签的区别?

容器级的标签可以嵌套其他所有的标签

文本级的标签中只能嵌套文字/超链接/图片

容器级的标签:

div , h ,ul,ol,dl, li ,dt,dd....

文本级的标签:

span , p,buis,stong ,em ,ins, del .....

注意点:   哪些标签是文本级的,哪些标签是容器。不用特意去记忆,在企业开发中一般情况下要嵌套都是嵌套在div中,或者按照组标签来嵌套。

4. 在 html 中html 将所有的标签分为两类,分别是容器级和文本级。

在CSS 中CSS也讲所有的标签分为两类,分别是块级元素和行内元素。

1. 什么是块级元素,什么是行内元素

块级元素会独占一行

行内元素不会独占一行

块级元素:

p,div , h ,ul,ol,dl, li ,dt,dd....

行内元素:

span , buis,stong ,em ,ins, del .....

2. 块级元素和行内元素的区别?

2.1 块级元素

独占一行

如果没有设置宽度,那么默认和父元素一样宽

如果设置了宽高,那么就按照设置的来显示。

2.2  行内元素

不会独占一行

如果没有设置宽度,那么默认和内容一样宽。

行内元素不可以设置宽度和高度的。

2.3  行内块级元素

为了能够让元素既能不独占一行,

CSS元素显示模式转换:

块级  转  行内:是用 display : inline  设置

行内  转  块级: 是用 display : block 

能够实现把块级和行内元素同时转换,所有的块级都可以转化为行内,所有的行内都可以转换为块级。

display : inline-block   行内块级

快捷键,快速写出。

百度首页实战:

第一步,把网页布局划分不同部份。下图把百度首页分成了三个部份:

第二步:搭建框架:

第三步,分别设置各个部份的样式。

第一部份结构内容的写法:

然后,把该块的行内元素,放到块级标签里面,能够让元素独占一行。

第二部份结构内容的写法:大概的方式,先写行内元素,然后把行内元素放置到块级元素中进行显示,让其能够独占一行。这样理解,一个块,就是一行。

第三部份写法:竖线的书写方法,直接添加在行内员孙超链接后面。

第四步:把所有的行内元素加上快标签后,变更成块级元素。如上所示,全部加上<div> </div> 或者<p>  </p>

第五步:把元素居中。在样式中,<div> 标签中,加上对齐格式为:center; 把所有块级元素居中显示。

第六步,调整块级间元素间距,把顶部图片元素的高度拉伸,把第二块块级元素挤下去一点,留有空间。

第七步:调整输入框和按钮的样式和宽度:

sytle 部分:

格式结构部分:

第八步:拉开中间部份结构的高度。

样式部分:拉开行高,把第二行挤下去。

最后把各自的背景颜色删掉。

第九步:底部模块部分的高度拉伸

第十步: 字体样式的设置,设置body 样式。

第十一步,瑕疵的处理。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐