发表于： 2018-06-11 22:26:33
1 505
今天完成的任务
a.任务3左上角图片不用absolute来定位
b.任务4button按钮的修改：button有个默认样式是立体效果，覆盖了父div,改为空白效果
c.关于布局定位的3种方法的深入实践
d.任务1-2的深度思考于温习
明天的计划
a.任务3的深度思考与实践
b.inline-block与float的深入学习
c.有实践把flex知识点带上顺便多学点拓展知识
遇到的问题
开始并没有深刻领悟到(并没有认识到input是内联块元素）块元素，内联元素还有内联块元素的区别和特点，所以在没有转换input为block元素的时候一直在用text-align: center;来进行居中定位
，后来发现了重点后学习了一番，解决。
收获
HTML文件里开头的Doctype有什么作用：
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。（深度思考的时候发现以前没认真看，所以也算今天的收获把，谨记最后一句提升划重点。）
常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别
block :常见的有：div p h1-h6 ol ul dl table blockquote form
inline 常见的有：span a strong em label input select textarea img br
inline-block常见的有：input img button texterea label。
inline是内联元素，block是块级元素，inline-block是内联块元素。
一个内联元素不会开始新的一行，并且只占有必要的宽度。
一个块级元素总是开始新的一行，并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)
内联块元素它像内联元素，但具有宽度和高度。
从上内容就很容易看出，区别主要是三个方面: 一是排列方式 二是宽高边距设置 三是默认宽度。
(1)块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
(2)块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
(3)块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
特点：
inline元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、宽度、行高及顶部和底部边距不可设置；
(3)、元素的宽度就是它包含的文字或图片的宽度，不可改变。
block元素:
(1)、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;
(2)、元素的高度、宽度、行高以及顶和底边距都可设置;
(3)、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
inline-block元素:
(1)、和其他元素都在一行上；
(2)、元素的高度、宽度、行高以及顶和底边距都可设置
拓展知识：
插入img下面会有空白
1、给图片img标签display:block
2、定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。
3、定义容器里的字体大小font-size为0。
（虽然不用img，看到的知识点能学一下算一下）
总结：今天也就学了这一些，我主要感觉我的收获主要在于：
1.不盲目认为absolute的重要性（以前认为这个元素有很多地方是无可代替的，今天成功用其他方法复原它的效果后明白了）
2.思维不固化，多用其他可以代替的元素实践实验一下（今天就是多试了十几次吧，成功学到3种定位方法）
3.inline-block和float感觉功能相似，应该在很多地方可以互换使用，确定了明天学习知识点。
返回列表
评论