css div web design (2) layout and positioning_html/css

css div web design (2) layout and positioning_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:00:18

Original

1664 people have browsed it

In web design, it is very critical to be able to control the position of each module on the page. Different from the traditional table positioning, the css div positioning method is more flexible. This blog will introduce it to you. Layout and positioning of css divs.

1. Box model

As can be seen from the picture, the scope of the box model includes margin, border, padding, and content.

One thing to point out is that the box model representation in IE is slightly different from that in Firefox:

The content part of the IE box model includes border and pading.

The content part of the box model in Firefox does not include border and padding.

2. Element positioning

1. Float positioning

float means floating and plays an important role in CSS layout. Here are some examples An example.

<span style="font-size:18px;"><html><head><title>float属性 clear</title><style type="text/css"><!--body{	margin:5px;	font-family:Arial;	font-size:13px;}.block1{	padding-left:10px;	margin-right:10px;	float:left;					/* 块1向左浮动 */}h3{	background-color:#a5d1ff;	/* 标题的背景色 */	border:1px dotted #222222;	/* 标题边框 */	 clear:left;					/*清除float对左侧的影响 */}--></style>   </head><body>	<div class="block1"><img src="building2.jpg" border="0"></div>		<div>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</div>	<h3>CSS的概念</h3>	<div>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div></body></html></span>

Copy after login

The result at this time is

If float:left is commented out, the result is as follows:

2. position positioning

a. position:static|no positioning

position:static is the default value for positioning of all elements, generally No need to indicate, unless there is other positioning that needs to be cancelled.

<span style="font-size:18px;">#div-1 { position:static;}</span>

Copy after login

b. position:relative | Relative positioning

When using position:relative, you need top , bottom, left, right four attributes to cooperate to determine the position of the element.
If you want the div-1 layer to move 20px down and 40px to the left:

<span style="font-size:18px;">#div-1 { position:relative; top:20px; left:40px;}</span>

Copy after login

c. position:absolute|Absolute positioning

Use absolute Layers in front or behind the positioned layer will think that this layer does not exist and will not affect them at all.

3. z-index positioning:

The z-index attribute is used to position the upper and lower positions when overlapping.

<span style="font-size:18px;"><html><head><title>z-index属性</title><style type="text/css"><!--body{	margin:10px;	font-family:Arial;	font-size:13px;}#block1{	background-color:#fff0ac;	border:1px dashed #000000;	padding:10px;	position:absolute;	left:20px;	top:30px;	z-index:1;					/* 高低值1 */}#block2{	background-color:#ffc24c;	border:1px dashed #000000;	padding:10px;	position:absolute;	left:40px;	top:50px;	z-index:0;					/* 高低值0 */}#block3{	background-color:#c7ff9d;	border:1px dashed #000000;	padding:10px;	position:absolute;	left:60px;	top:70px;	z-index:-1;					/* 高低值-1 */}--></style>   </head><body>	<div id="block1">AAAAAAAA</div>	<div id="block2">BBBBBBBB</div>	<div id="block3">CCCCCCCC</div></body></html></span>

Copy after login

The results are as follows:

The above is the css div Layout and positioning, in the next blog I will introduce to you the mixed use of css and javascript, css and jquery, and css and ajax.