发表于： 2019-03-22 23:18:30
1 700
今天完成的事：
1.提交了任务十一
2.开始任务十二的学习
明天的计划：
1.继续任务十二
2.基础知识查漏补缺
遇到的问题：
1.今天重写之前的任务四，发现一个问题，我之前用的是<i>标签，做出了竖条，但是i是行内元素，不能给高度，可是却生效了
收获：
1.针对问题，进行了探讨，引申出一个问题： img也是行内元素，可是为什么能设置宽高？
涉及到几个知识点 （1）可替换元素 与 不可替换元素
先从最基础的说，常见的块级元素有哪些？ 常见的行内元素有哪些？
块级： div、 section、 artical、 ul、 ol、 li、 table、 tbody、 th、 tr、 td、 p、 header、 footer、main、h1~h6
行内：a、 img、 input、 span、 i、 b、 button、 br、 label、 select、 textarea、 audio、 video、 em、 strong、 canvas、 cite、 code、 progress
它们之间明显的区别是？
块级元素：（1）会自动换行，独占一行 （2）宽度默认在横向，占满父元素的内容区域（也可以理解为宽度100%） （3）可以修改宽高 （4）块级内部可以添加块级、行内 （5）可以设置四个方位的padding margin
行内元素：（1）不会自动换行，也不独占一行 （2）宽度随内容增多而变大 （3）不可以设置宽高{line-height可以}，默认就是auto （4）行内元素内部不可以添加块级元素--待确认 （5）垂直方向（上下）不能设置padding margin
前面的开胃菜足了，那么主菜来了————为什么有些行内元素也可以设置宽高? 像<img> <input> <i>
(1)有些人第一反应就是，我display:block /// display:inline-block通过转化为块级和行内块级就可以设置宽高了，对没错，我们不仅可以改变display，还可以直接给行内元素设置 float table absolute来设置宽高，因为这样触发了BFC，直接生成了块级框。 但是这不是今天的讨论重点，看（2）
（2）我们只知道元素分为块级、行内，但其实还有一种分类方式：可替换元素和不可替换元素
何为替换元素？ 替换元素根据其标签的属性来决定元素的具体显示内容发///简单来说就是，替换元素里面的内容，我可以通过改变标签和属性来改变。 像input我可以改变里面的 type="password" "text"改变显示， Img我可以改变里面图片的width/height来控制尺寸。
所以回到问题，img是行内元素，但是它为什么能改变宽高？因为img还是可替换元素，所以我们可以改变内部元素的属性，从而达到控制img宽高的效果。
注意：几乎大部分的可替换元素是行内元素
返回列表
评论