发表于： 2018-09-11 17:08:11
1 548
今日主要完成：以前只做任务，没有仔细看每个练习过后的深度思考，接下来会把每个练习的深度思考看一下，
今天主要完成任务一的深度思考
今日收获：
1.HTML文件里开头的Doctype有什么作用？
答：根据W3school的解释：
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
2.如何理解盒模型及其content、padding、border、margin？
盒模型：根据自己的理解，每一个html标签都是一个方块，然后这个方块里边可以再装方块，可以这样 一层层的嵌套下去
盒模型可以分为两类：IE盒模型和w3c标准模型
w3c盒模型：盒子的width和height只包含content，不包含border和padding，盒子的大小可以通过 padding和border改变
IE盒模型： 盒子的width和height包含border和padding，即width=content+padding+border，盒 子的大小是固定的
使用哪个盒模型可以通过box-sizing属性控制，默认值为content-box，即标准盒模型；
如果将box-sizing设为border-box则用的是IE盒模型。
不论是那种盒模型，都可以通过margin来改变盒子相对于父盒子的位置
3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？
答：常见的inline元素有：a,span,br,i,em,strong,label,q,var,cite,code
block元素有： div,p,h1...h6,ol,ul,dl,table,address,blockquote,form
inline-block元素：img,input
区别：
inline元素的特点：
（1）inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会 新换一行，其宽度随元素的内容而变化。
（2）inline元素设置width,height属性无效，元素的宽度就是它包含的文字或图片的宽度
（3）inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin- left, margin-right都产生边距效果， 但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
block元素的特点：
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行（一个块级元素独占一行
（2）元素的高度、宽度、行高以及顶和底边距都可设置
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个 宽度。
inline-block元素的特点：
（1）和其他元素都在一行上；
（2）元素的高度、宽度、行高以及顶和底边距都可设置
区别：
| 独占一行 | 设置宽高 | 竖直方向的margin，padding | 水平方向的margin，padding | |
| inline | 否 | 否 | 否 | 是 |
| block | 是 | 是 | 是 | 是 |
| inline-block | 否 | 是 | 是 | 是 |
明日计划：任务9 以练习2的深度思考
遇到的问题：今日未写代码，所以没有遇到问题
返回列表
评论