星空网 > 软件开发 > 网页设计

CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面。自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊、内外边距啊这些耽误了不少时间。

反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法。其中可能中会有JS、CSS、HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础。

今天在码代码的过程中记录了几个问题,这几个问题自己确实也是迷迷糊糊答不上来的:

1.盒模型到底是啥?肯定不是简单的div..

2.行内元素和块级元素的区别和他们的特点是什么?

3.CSS的定位机制主要有哪几种?

 

第一个问题:盒模型到底是什么?(下面是我查资料看书自己总结的)

盒模型是CSS实现页面布局的一种思想:把页面的所有元素都看成一个类似于礼品盒的盒子,礼品盒可能会有好多层包装组成,那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下,盒模型是要把元素看成立体的,它确实有空间的属性,我在后面详细介绍。

盒模型的概念明白了,就该注意盒模型的种类了

目前有:标准盒子模型和IE盒子模型 2种盒模型。他们各自长这样:

CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

 

根据上图可以看出他们的不同:

标准盒模型:元素的width和height = content

IE盒模型:元素的width和height =( content+border+padding )

因为存在这样的差异,所以要满足跨浏览器的时候就会比较麻烦。当然两种方式肯定是标准盒模型比较好,这里有一个解决跨浏览器的方案:

网页顶部增加DOCTYPE的声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


这样会使所有浏览器按照W3C标准盒模型去解析页面元素,就满足了跨浏览器的要求了。

上面还提到了盒子模型是有空间的,主要表现在组成盒子的各个部分的层次不同。他们从上到下的顺序是

border----->content、padding----->background-image----->background-color----->margin 如下图

CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

第三个问题:CSS的定位机制主要有几种?

1.标准文档流形式(自上向下自左向右)

2.浮动float(主要针对块级元素设置)

3.绝对定位。

怎么样,是不是又有问题了。。。浮动是什么?绝对定位又是什么?人生真是一场场问与答啊!这两个问题明天解决。

2016年1月8日

不积跬步,无以至千里

 

PS:我查阅的大部分资料都是来自于网络,如有侵权,请联系我删除




原标题:CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

年终旺季在即:https://www.goluckyvip.com/tag/1222.html
日本热销产品:https://www.goluckyvip.com/tag/12220.html
日本电商市场:https://www.goluckyvip.com/tag/12221.html
j竞品分析:https://www.goluckyvip.com/tag/12223.html
中国9月外贸:https://www.goluckyvip.com/tag/12224.html
中国对美出口:https://www.goluckyvip.com/tag/12225.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
我的浏览记录
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流