发表于: 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的深度思考
遇到的问题:今日未写代码,所以没有遇到问题
评论