Html5+css3-CSDN博客

本文链接：https://blog.csdn.net/matao_1125/article/details/80703906

前言

      初出茅庐至今，一直从事后端开发，说来惭愧，从业至今，几乎没有完整的开发过复杂的页面。近期公司开发一款app，商城模块使用h5开发，自己参与其中，才发现前端水这么深，想根据UI开发出一个页面没多大难度，但想真正写好一个页面却不容易，因此下决心想学好前端。
      古语有云，知其然知其所以然，事实证明，开发过程中遇到的所有问题、走过的所有弯路基本上都是不知其所以然导致。然冰冻三尺，非一日之寒，要想一蹴而就，肯定是行不通的。因此只能从基础入手、不断进行积累、完善、循序渐进，毕竟登高必自卑，行远必自迩嘛。之所以写博客，一是不习惯开发时没有理论支持，二则是自己前端水平的确太次，不想闭门造车，写出来好让各位道友看一看评一评，也好指出其中的纰漏、错误之处。
      互联网时代，是一个信息爆炸的时代，查阅了很多文章，但大多数文章都是流于表面，并没有真正解决我心中的困惑，每看完一篇文章，觉得对了对了，但反过来测试又发现错了错了，来来回回，已分不清对错，直到阅读到张鑫旭老师的《css世界》一书，对的，就在这本书里，我发现了对于我而言比较完美的解释
      言归正传，不知道大家在开发中会遇到哪些难点，就我而言，哪些元素可以设置内边距、外边距、宽、高，什么情况下可以设置内边距、外边距、宽、高，定位是相对什么定位这些乱糟糟、理不清的东西着实让人头疼。因此，我觉得有必要就元素的共同点进行一下分类

元素的分类

w3c在HTML4中，明确将元素分成了两大类: inline(内联元素)与block(块级元素)。但在HTML5中，已经废弃了这些术语，因为这些术语把元素和表现关联了起来，事实上HTML元素的这些表现，并非其自身的样式，而是浏览器的默认样式，这样也就解释了为什么在写样式表的时候，会存在那么多的兼容性问题。尽管HTML5中已不再使用这些术语，但这样划分的确是有助于开发中理解它们的含义，因此需要总结一下

块级元素（block）：块级元素大多为结构性标记，负责结构，有如下特点：
①独占一行；
②宽度缺省是它的容器的100%，除非设定一个宽度；
③高度，行高以及外边距和内边距都可控制；
④它可以容纳内联元素和其他块元素。
内联元素（inline）：行内元素大多为描述性标记，负责内容，有如下特点：
①不会独占一行；
②宽度就是它的文字或图片的宽度，不可改变；
③水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果；
④内联元素只能容纳文本或者其他内联元素。

注：这些特点涵盖了大多数html元素，其实与其说是内联元素与块级元素的特点，不如说是display：block和display：inline的特点，例如input元素，属于内联元素，其display值为inline-block，那其特点就不适用于以上的总结；这里边涉及到外在盒子、容器盒子（《css世界》），不做赘述

常用元素分类

标签	语义	元素类型
`<h1> to <h6>`	定义html标题`	`块级元素`
`<p>`	定义一个段落	`块级元素`
`<hr>`	定义水平线	`块级元素`
`<form>`	定义一个 HTML 表单，用于用户输入	`块级元素`
`<input>`	定义一个输入控件	`行内元素`（由于display属性为inline-block，因此可以设置宽高、内外边距）
`<textarea>`
`<textarea>`	定义多行的文本输入控件
`<article>`	定义一个文章区域	`块级元素`