div+css布局基础知识理解_html/css_WEB-ITnose

程序员文章站 2022-03-20 19:48:45

...

牛腩新闻发布系统用到了很多的BS的技术，而我们看到的精美的网页很大一部分是由div+css技术实现的，div+css是一种网页布局方式。

是HTML的标签,它构成的是块级元素，在有它标记的内容的前后都会换行符，在web页面上表现为一个div元素的前后都会自动的换行。它可以将大的页面分解为多个部分。然后在css中可以分别的对这些部分进行样式的设置，而且和table布局相比div+css将内容和样式表现分离开。

要学习一样技术就要从掌握它的基础概念开始，就来看看在div+css中的基础概念。

首先来看看div表现在页面上显示的效果

首先在html中写好标签，其中标签是行内的

    测试1    测试2    测试3
    测试4

在管理的CSS中设置好样式

.cs { /*给所有class是cs的加上边框*/border:2px solid #00f;}

结果：span标记的占据的位置大小是和内容一样大的，而div标记的则占据了一整行。

标准流：可以理解为在web页面上显示内容的顺序和在HTML中写入的内容的顺序是一致的就符合标准流。

如上例中，测试1、测试2、测试3、测试4，在web中的显示顺序是和在html中写入的顺序一样的。其中因为测试1和测试2是标记的，所以会在同一行中显示。测试3本应该接着测试2 显示但是因为使用

标记，所以在它的前面会有换行符，导致测3另起一行。测试4同理

盒子模型：首先来看个图

Content：内容区，相当于是我们放到盒子中的物体的大小。但是在盒子模型中“物体的大小”是可以使用height和width属性进行调整的。

Padding：内边距，分为上下左右。相当于是我们放入盒子物体到盒子的边框的距离。这四个距离也都是可调的。

Border：边框，即盒子的厚度，也可调。

Margin：外边距，分为上下左右。以上三部分可以看做一个装有物体的盒子，而盒子和盒子之间以及盒子和其他边框之间的距离则由margin来决定。

浮动：使用了浮动的元素会脱离标准流。如下图

第一个为没有使用浮动的，三个元素按顺序显示，第二个图是对元素1使用了左浮动，这样元素1 就脱离了标准流，所以在标准流中只有元素2和元素3，它们还是按顺序显示。

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

相对定位：元素相对自己原来的位置进行定位，如下例：

未使用相对定位之前

对测试二使用相对向右定位之后

它没有脱离标准流，只是相对自己原来的位置进行偏离。

绝对定位：元素相对距离自己最近的已定位的父标签进行定位。

情况一

在HTML中

        		测试一
    	测试二
    	测试三
  
       在CSS中
           .yellow{		/*不使用position进行定位*/	  }	  .green{		position:absolute;/*使用position进行定位*/	  }	  #cs2{		position:absolute;right:30px;	  }
  
     
  
  情况二
     在CSS中
  
           .yellow{		position:absolute;/*使用position进行定位*/	  }	  .green{		/*不使用position进行定位*/	  }  	  #cs2{		position:absolute;right:30px;	  }
  
       
  
  
  情况三
           如果没有定位的父类标签，元素的绝对定位则是以浏览器的边框为准。
  
  
  小结
      Div+css是很重要的设计网页布局的技术，而对这些基础知识的掌握能够更好的帮助我们设计好网页被样式。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章
相关视频



html下拉菜单文字怎么变小


HTML里怎么设置thead表头的颜色


html5中元素能拉伸宽度吗


html中怎么清除li黑点


div+css布局基础知识理解_html/css_...




框架初始类文件


前端应用


MVC目录结构规划


博客前后台功能介绍





网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论











专题推荐


独孤九贱-php全栈开发教程全栈  170W+
主讲：Peter-Zhu  轻松幽默、简短易学，非常适合PHP学习入门


玉女心经-web前端开发教程入门  80W+
主讲：灭绝师太  由浅入深、明快简洁，非常适合前端学习入门


天龙八部-实战开发教程实战  120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习