前端入门学习

原创 知乎其微 教程 前端学习 176阅读 2018-06-02 00:17:40 举报

一个朋友准备入门前端,不知道怎么去学习,在此列了一些常用的方法

HTML常用标签

我觉得写代码不用刻意去记忆,写得多了自然就记住了,这些标签就记住这些常用的就可以了,大概知道怎么用就行了,你一个网页布局全部用div都可以

布局偏

说到布局我们就要了解几个点:

1.盒子模型

什么是盒子模型?
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
盒子中包含内容(content)、填充(也就是内边距padding)、边框(border)、边界(外边距margin), CSS盒子模式都具备这些属性。
其中每一个属性又包含了上右下左四条属性,如margin:

更多详细参考:
margin
padding
border

2.标签元素的类型

这个怎么理解,就是每一个元素默认有一个它自己在网页中所表示的框类型,如div,h1-h6,ul,ol,table,p等标签是一个块级元素,span,a是内联元素(也可称为行内元素)

块级元素特点:

占据它上级元素的100%宽度,即一整行;
高度,宽度,行高,外边距,内边距都可设置;
可以容纳其他块级元素,内联元素;

行内元素特点:

宽高不可设置;
和其他元素都在一行上;
宽度随内容增加而增加;
高度随字体大小而改变;
外边距只对左右生效;

内联块元素特点:

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。
和其他元素都在一行上;
元素的高度、宽度、行高以及顶和底边距都可设置。

相关知识点:
display各个属性的理解(常用属性值:block,inline-block,inline,table,table-cell,none)
更多详细内容参考:display详解

3.定位

定位是网页布局中不可缺少的一个部分,学好了元素的定位,就相当于开发静态网页成功了90%,为什么了,我们平时看到的网页都是由各种小盒子组合在一起,形成了一个视觉上一个完整的网页。

主要学习要点:position、float主要、了解z-index的功能

每一个元素都有它自己默认的定位方式,但是很多时候我们需要手动去改变它的定位方式,达到我们想要的效果,下面先说说position

3.1-position

position:initial
设置元素为默认

position:inherit
设置元素从父元素继承定位方式

position:absolute
设置元素为绝对定位方式,它定位是相对于 static 定位以外的第一个父元素进行定位。可能这句话不好理解,你只要知道它相对于它上面第一个元素定位为relative定位的元素进行定位。如果一直到body都没有,就相当于body来进行定位。

position:fixed
生成固定定位的元素,相对于浏览器窗口进行定位。

position:relative
成相对定位的元素,相对于其正常位置进行定位。

更多详情用法参考详解CSS position属性

3.2-float

float:left
元素向左浮动

float:right
元素向右浮动

float:none
元素不浮动

float:inherit
从父元素继承 float 属性的值。父元素如果是left,它就是float:left
更多详细内容参考:float详解

3.3-width & height
一般来说,网页布局少不了给元素添加宽度和高度,如果一个网页元素没有宽度高度,那么视觉效果不敢恭维,除了栅格布局还看得过去;
什么元素能给它定义宽高属性,文章开头就已经说了,块级元素,内联块元素等,和块相关的都可以定义宽高;

这个一个示例,给div宽高定义为300px and 200px

width了解其几个常用的属性值就行:固定的px(200px),百分比(以父元素宽度为基准的百分比),auto(默认)

以上就是页面的基本布局需要掌握的知识,下面讲一些网页常用的css属性用法!

一个比较全的css示例

以上css代码可以说占据我们日常开发样式中90%的地位

position属性
  • 理解它的几个定位方式及实际运用即可
margin属性
  • 理解它的拆分写(margin-left;margin-top;margin-right;margin-bottom)该怎么写,进阶的如果值为负值又是怎么样的效果;以及简写时候(margin:top right bottom left)对应的顺序即可
background属性
  • 背景——背景可以有单纯的背景颜色,或者背景图片,也可以是过渡的颜色渐变(css3),也可以是背景颜色和图片混合的显示方式
  • background-color用法
  • background-image用法
  • background-repeat用法
  • background-size用法
  • background-position用法
    比较全的背景简写
color & opacity属性
  • color用于文本颜色(color:red //设置文本为红色)
  • opacity设置元素的透明度(opacity:0.5 //透明度为50%)
font属性
  • 理解以下属性的用法
文本属性(Text)

文本这一块比较多,可以慢慢来,先来几个常用的

  • text-align属性
  • text-indent属性
    这个属性可以理解为文章段落开头空“多少距离”
  • line-height属性(段落行高)
    line-height详解
    这个不多说,上面pdf讲解很全面
  • white-space属性
  • word-break属性
  • word-wrap
  • letter-spacing
    以上属性的用法自行百度或者参考css3文档
  • text-shadow属性(文字阴影效果),用法和box-shadow一样
  • text-decoretion文本装饰
    该属性可以给文本添加下划线,上划线,栅格线

一般我们就用一个简写的

:underline就行了,如果有其他需求,比如线条的颜色,以及虚实,就需要写其他属性

--未完待续。。。

评论 ( 2 )
最新评论
知乎其微 1F 2018-06-05 11:12:15 2F

你理解这里的布局吗?这里的布局指盒子容器,并不包含文本输入框等

呵呵弟 2018-06-05 10:30:55 1F

你一个网页布局全部用div都可以

谁告诉你这么搞的?