CSS核心技术总结_html/css_WEB-ITnose

    在牛腩新闻发布系统的前台开发中，首次接触到了css+div进行网页设计的技术。整的来看，这是网页设计的最基础的部分，但也是最常用的部分，所以在这方面打好基础以后，对以后学习js、jq等更加有帮助，也更容易上手。

    Css的核心内容：标准流、盒子模型、浮动、定位。

    标准流：就是标签的排列顺序，代码里面的元素的顺序与网页上的实际排列元素是一致的就是标准流，当使用浮动或其他手段设置元素顺序的时候，元素就脱离了标准流。这里说明两个名词：块级元素和行级元素。

    块级元素：每个块级元素占据了一行，一行块级元素后面一般无法添加其他元素，只有浮动了的可以添加，且块级元素可以自动换行，一般作为容器出现，可以包含行级元素。最长见的就是div。

    行级元素：也叫内联元素，一般是基于语义级别的元素，只能容纳文本或其他内联元素。如span就是一个行级元素。

立即学习“前端免费学习笔记（深入）”；

    盒子模型：盒子模型是css的核心内容，理解了盒子模型的内容，对其他内容的理解有帮助，毕竟其他三个的排版也是以网页中的基本元素为操作对象的，而盒子模型所代表的就是网页中的操作元素。

从这个盒子模型中可以看出，在网页上面，元素之间是有距离的这个距离叫margin，是从上下左右四个方向的margin，利用margin可以设置各个元素之间的间距和位置，实现我们的排版。

    盒子的边框是border，同样有上下左右四个边，可以设置border的颜色、样式、粗细等属性，实现我们的目的。

    而盒子的内部的content是盒子的核心区块，这里放置我们需要展示的主要内容。Content块与盒子的边框之间也是有距离的，这叫padding，同样有上下左右四个边可以设置content在盒子中的位置，实现我们的排版。

    浮动：float属性定义元素在哪个方向浮动，以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

    如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

BibiGPT-哔哔终结者

B站视频总结器-一键总结 音视频内容

28

查看详情

    浮动与盒子模型联合起来，就可以实现网页元素的移动和设计，对一些特殊的排版要求来说，浮动是很有必要的移动手段。

    定位：分为相对定位、绝对定位和固定定位。

    相对定位：元素相对与自己原来的位置进行定位，可以通过设置自己的上下左右的边界距离来实现相对定位，无论是否进行移动，元素仍然占据原来的空间，可能会覆盖其他框。这里要说明一点是，网页都是以左上角为原点，向右为正，向下为正，如下图：

并不是常规的一个坐标，所有在设置元素的位置的时候要注意一点。

    绝对定位：明白了上面的坐标，那么就理解了绝对定位，是以坐标原点为参照点，进行坐标的设置定位。

    还有一种定位是固定定位，大家浏览网页的时候可能遇到一些广告，自己拖动滚动条往下移动的时候，讨厌的广告跟着滚动条往下移动，结果就是那个广告还是处在自己原来的地方，这就是固定定位。下图中的那个红包就是固定定位，看右边的滚动条都到下面了，这个红包还在在原来的位置。

    其实浮动float也是一种特殊的定位，这个需要自己的理解了。

    通过这些内容的学习，基本掌握了css的使用核心，在今后的工作学习中将发挥重要作用。

版权声明：本文为博主原创文章，未经博主允许不得转载。