发表于: 2018-06-13 16:51:35

1 582


今天完成的事情:(今天尝试对任务三进行布局,对以往知识进行回顾:

行内元素指的是书写完成后不会自动换行,并且元素没有宽和高。块级元素写完后会自动换行,有宽高可以修改。还有一种特殊的元素叫做行内块元素。

大致分内是:行内元素有:heda   meat   title  lable  span  br  a   style  em  b  i   strong

块级元素有:body  from  select  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  cnter  div

行内块元素常见的有: img  input  td 。

盒子模型:内容(CONTENT)就是盒子里装的东西;

而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;

边框(BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,每个HTML标记都可看作一个盒子。

float模型的clear属性:clear 属性规定元素的哪一侧不允许其他浮动元素。clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下

em.px.pt.%的对比:

1.“Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示。一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt。Ems在本质上是可伸缩的,所以2 em相当于24 pt,.5 em相当于6 pt等。ems由于其可伸缩性和适应移动设备的特性在web文档中正变得越来越受欢迎。

2.像素(px):像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。

3.点(pt):点通常用于印刷媒体(任何打印在纸上的媒体,等等)。一个点等于一英寸的1/72。点更像像素,他们是固定大小的单位,不能伸缩。

4.百分比(%):百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。

) 

明天计划的事情:(把任务三布局完成) 
遇到的问题:(在今天布局任务三的时候,有几个问题,第一就是对盒子模型理解不够透彻,不知道怎么去设置这四个属性才能达到预期效果,然后就是对px与%之间的区别,与怎么使用%去展示不理解,还有就是用ul或者div标签的时候,布局没法让下面两个图片平行展示,没法让文字贴着图片) 
收获:(收获首先就是巩固了基础知识,对任务三有了一定的布局能力,对盒子模型有了深入理解,使用padding与margin来让各个盒子板块分开,对%还不是很理解,不知道是如果继承父元素的。对float模型有一定的理解。使用clear属性:clear:both可以清楚左右的浮动元素。行级元素不另起一行,块级元素另起一行,布局下面两个图片时应该用行级元素


返回列表 返回列表
评论

    分享到