首页 >web前端 >html教程 >div+css布局基础知识理解_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-24 11:49:34996浏览

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

是HTML的标签,它构成的是块级元素,在有它标记的内容的前后都会换行符,在web页面上表现为一个div元素的前后都会自动的换行。它可以将大的页面分解为多个部分。然后在css中可以分别的对这些部分进行样式的设置,而且和table布局相比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 显示但是因为使用

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

 

盒子模型:首先来看个图

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

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

  Border:边框,即盒子的厚度,也可调。

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

 

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


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


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

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

      未使用相对定位之前


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

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

 

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

情况一

     在HTML中

         

<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>

情况二

   在CSS中

<span style="font-size:24px;">         .yellow{		position:absolute;/*使用position进行定位*/	  }	  .green{		/*不使用position进行定位*/	  }  	  #cs2{		position:absolute;right:30px;	  }</span>

情况三

         如果没有定位的父类标签,元素的绝对定位则是以浏览器的边框为准。

小结

    Div+css是很重要的设计网页布局的技术,而对这些基础知识的掌握能够更好的帮助我们设计好网页被样式。

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:web页面放到手机页面,缩放问题_html/css_WEB-ITnose下一篇:移动设备页面高度不足时min-height 的尴尬处理_html/css_WEB-ITnose

相关文章

查看更多