html css菜鸟教程(css零基础入门教程)

编程之家2026-05-161162次浏览

大家好，关于html css菜鸟教程很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于css零基础入门教程的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

怎样制作html网页?制作网页的整体思路有：

在进行网页制作的时候，要明白网页的类型以及所需要的材料，并做好一个框架构想，这样利于网页的效果形成，对后期的建设有相应的链接作用和奠基作用。

先布局，再用CSS进行控制。

骨架搭好了，初始化样式。

注意：将CSS的样式导入到外部样式表时，要注意图片的位置，以及对外部样式表的引入。这点可以参照HTML文件和LING&MAODIANSHANG等

1、头部的背景图片的高度128px来自素材的图片高，容器的宽度大小也来自图片宽

2、图片的位置：当你在编写index.html页面代码时，出现一些图片路径时，那么先分清楚哪些是同级目录文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

书籍挺多的，刚开始还是建议先看下书打些理论基础再看网上的东西，因为感觉书上总结的比较全面。

入门推荐图灵的书籍：

1、《CSS3权威指南》

2、《HTML5权威指南》

老实说看完上面两本书HTML和css基本都有些基础了，然后就是可以看一下网上的教程了：

1、菜鸟教程

2、W3cshool

3、慕课网

4、极客学院

1,2主要文档类教程，3,4主要是视频类教程，并且感觉都不错，到后来你就可以看一些官方文档和别人的博客来学习了。

转自菜鸟教程

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（外边距），边框，填充（内边距），和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

转自链接

盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

2.标准盒模型下盒子的大小= content+ border+ padding+ margin

1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content+ border+ padding）；height指的是内容、边框、内边距总的高度

2.怪异盒模型下盒子的大小=width（content+ border+ padding）+ margin

建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！