初陆-的实习日记

2018.11.08

        做前端已经一个多月了,在学习了解了 Html 和 CSS 样式之后就开始尝试做自己的第一个项目,虽然过程中遇到了挺多问题,但是通过学习都可以解决。也许你们也会遇到同样的问题,所以这里就把遇到的问题和你们分享一下。布局小课堂要开课了,敲黑板,划重点,大家要拿小本本都记下来哦~

 

HTML元素分类

 

  Html 元素可以分为两类:块级元素和内联元素。

 

        块级元素包括:< div >、< h1~h6 >、< ol >、< ul >、< li >、< table >和< p >标签等等。块级元素的特点是每个块级元素都是从新的一行开始,并且其后元素也另起一行,它的高度宽度行高边距都是可以设置的。常用的内联元素则包括:< a >、< span >、< img >、< input >等。与块级元素不同的是内联元素和其他元素都在一行上,高度宽度行高边距都是不可设置的。下面我们就试一下。

 

块级元素:

 

 

1

 

2

内联元素:

 

3

 

4

 

        对于块级元素和内联元素的记忆,我的建议是通过平时的练习来加强记忆,靠死记硬背我不知道你们能不能记住,但是你们的小可爱我是记不住,无奈脸。

 

Html 三种布局方式

 

1、标准流

 

      网页中默认的布局方式,就是顺序布局,就是从左到右,从头到尾。

 

2、浮动( float )

 

       一个浮动盒可以向左或者向右移动,其边会挨着父元素的框或者另一个浮动元素的边框并且对齐;浮动盒需要一个可以容纳他的空间才会停止浮动,所以如果没有足够的水平空间来容纳,浮动盒会向下移动,直到空间合适;因为浮动盒不在普通流内,文档普通流中的块级元素感知不到浮动元素的存在。通俗的讲就是浮动的第一个元素会贴着它父元素的边框,第二个贴着第一个,以此类推,直到父元素的宽度不能容纳它,那它就只能排到第二排了。

 

3、定位( position )

 

        通过改变正常的标准流以非正常的方式,迫使元素脱离标准流,这就是 position 属性。position 属性决定了元素将如何认定,通过 top、right、bottom、left来实现位置的改变。position 中的可选属性:static、relative、absolute、fixed 和 inherit。static 是默认值,元素按照标准流方式正常显示;relative 是相对定位,使用了的元素仍处于正常的文档流中,我们可以通过使用 top、right、bottom、left 来改变元素的位置;absolute 是绝对定位,也可以改变属性来改变元素的位置,使其脱离文档流。在我看来,定位就是你想让它在哪它就能去哪。

 

5

6

       说了这么多,可能我们会把盒子模型和定位进行混用,对于盒子模型我们的定义是通过改变内边距( padding )和外边距( margin )来实现元素的移动,而定位是通过元素的位置移动来改变出现在网页中的相对位置。这就是盒子模型和定位的区别。

 

 

初陆  

未标题-1

 

上一篇:

微信

微博