牛腩新闻发布系统用到了很多的BS的技术，而我们看到的精美的网页很大一部分是由div+css技术实现的，div+css是一种网页布局方式。
要学习一样技术就要从掌握它的基础概念开始，就来看看在div+css中的基础概念。
首先来看看div表现在页面上显示的效果
首先在html中写好标签，其中标签是行内的
<span style="font-size:24px;"> <span class="cs">测试1</span> <span class="cs d2">测试2</span> <div class="cs">测试3</div> <div class="cs d1">测试4</div></span>
在管理的CSS中设置好样式
<span style="font-size:24px;">.cs { /*给所有class是cs的加上边框*/border:2px solid #00f;} </span>结果：span标记的占据的位置大小是和内容一样大的，而div标记的则占据了一整行。
标准流：可以理解为在web页面上显示内容的顺序和在HTML中写入的内容的顺序是一致的就符合标准流。
如上例中，测试1、测试2、测试3、测试4，在web中的显示顺序是和在html中写入的顺序一样的。其中因为测试1和测试2是标记的，所以会在同一行中显示。测试3本应该接着测试2 显示但是因为使用 盒子模型：首先来看个图 Content：内容区，相当于是我们放到盒子中的物体的大小。但是在盒子模型中“物体的大小”是可以使用height和width属性进行调整的。 Padding：内边距，分为上下左右。相当于是我们放入盒子物体到盒子的边框的距离。这四个距离也都是可调的。 Border：边框，即盒子的厚度，也可调。 Margin：外边距，分为上下左右。以上三部分可以看做一个装有物体的盒子，而盒子和盒子之间以及盒子和其他边框之间的距离则由margin来决定。 浮动：使用了浮动的元素会脱离标准流。如下图 第一个为没有使用浮动的，三个元素按顺序显示，第二个图是对元素1使用了左浮动，这样元素1 就脱离了标准流，所以在标准流中只有元素2和元素3，它们还是按顺序显示。 定位：分为相对定位和绝对定位。 相对定位：元素相对自己原来的位置进行定位，如下例： 未使用相对定位之前 对测试二使用相对向右定位之后 它没有脱离标准流，只是相对自己原来的位置进行偏离。 绝对定位：元素相对距离自己最近的已定位的父标签进行定位。 情况一 在HTML中 情况二 在CSS中 情况三 如果没有定位的父类标签，元素的绝对定位则是以浏览器的边框为准。 小结 Div+css是很重要的设计网页布局的技术，而对这些基础知识的掌握能够更好的帮助我们设计好网页被样式。标记，所以在它的前面会有换行符，导致测3另起一行。测试4同理
<span style="font-size:24px;"> <div class="”yellow”"> <div class="”green”"> <div id="cs1" class="cs">测试一</div> <div id="cs2" class="cs">测试二</div> <div id="cs3" class="cs">测试三</div> <p></p> <p> 在CSS中</p> <pre name="code" class="sycode"><span style="font-size:24px;"> .yellow{ /*不使用position进行定位*/ } .green{ position:absolute;/*使用position进行定位*/ } #cs2{ position:absolute;right:30px; }</span>로그인 후 복사
<span style="font-size:24px;"> .yellow{ position:absolute;/*使用position进行定位*/ } .green{ /*不使用position进行定位*/ } #cs2{ position:absolute;right:30px; }</span>로그인 후 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
