css或javascritp 居中一个float或一个块

CSS代码:

[cce_xml]
<style type="text/css">
    .con {
        position: relative;
        float: left;
        left: 50%;
        background: lightblue;
    }
    .box {
        position: relative;
        float: left;
        left: -50%;
        width: 100px;
        height: 100px;
        background: lightcoral;
    }
</style>
<body>
    <div class="con">
        <div class="box"></div>  
    </div>
</body>
[/cce_xml]

javascript代码:

[cce]
<body>
    <div id="con" class="box"></div>  
    <script type="text/javascript">
        var con = document.getElementById('con');
        con.style.position = 'relative';
        con.style.left = (document.body.offsetWidth - con.clientWidth) / 2 + 'px';
    </script>
</body>
[/cce]

jq代码:

[cce]
<body>
    <div class="box"></div>
    <script type="text/javascript" src="../js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
         $('.box').css({
              'position' : 'relative',
              'left' : ($(window).width() - $('.box').outerWidth()) / 2 + 'px'
          })
     </script>
</body>
[/cce]

CSS解决W3C和IE BOX MODEL不兼容问题

css代码:

[cce_html]
.box-sizing {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
[/cce_html]

1、W3C的标准Box Model:
/*外盒尺寸计算(元素空间尺寸)*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算(元素大小)*/
Element Height = content height + padding + border (Height为内容高度)
Element Width = content width + padding + border (Width为内容宽度)

2、IE)传统下Box Model(IE6以下,不含IE6版本或“QuirksMode下IE5.5+”):
/*外盒尺寸计算(元素空间尺寸)*/
Element空间高度 = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度)
Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
/*内盒尺寸计算(元素大小)*/
Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度)
Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

语法:
box-sizing : content-box || border-box || inherit

取值说明

1、content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度/高度(content width/height)即:Element Width/Height = border+padding+content width/height。

2、border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width/height-border-padding】)。

 

box-sizing现代浏览器都支持,但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀.

Css position:fixed 顶部固定层定位案例

代码:

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .box1 {
        width: 100px;
        height: 35px;
        background: red;
       /* position: fixed;*/
    }
    .box2 {
        width: 100px;
        height: 35px;
        background: green;
        margin-top: 15px;
    }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
    
</body>
</html>
[/cce]

在没设置定位前,为两个Box。现设置box1为position:fixed

box1脱离文档流,box2自动占位,box2的外边距自动变为box1的外边距。

如想保持原图不变进行如下设置:

[cce_html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .box1 {
        width: 100px;
        height: 35px;
        background: red;
        position: fixed;
        top:0;/*设置置顶*/
    }
    .box2 {
        width: 100px;
        height: 50px;
        background: green;
        margin-top: 50px;/*设置外边距是原外边距和box1高度之和*/
    }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
    
</body>
</html>
[/cce_html]

显示效果:

CSS 布局代码案例

一.单列布局

[cce]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>一列布局</title>
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-size: 30px
    }
    
    div {
        text-align: center;
        font-weight: bold
    }
    
    .main,
    .footer {
        width: 960px;
    }
    
    .head {
        width: 100%;
        height: 100px;
        background: #ccc
    }
    
    .main {
        height: 600px;
        background: #FCC;
        margin:0 auto;
    }
    
    .footer {
        height: 50px;a
        background: #9CF;
        margin:0 auto;
    }
    </style>
</head>

<body>
    <div class="head">head</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>

</html>

[/cce]

二.双列布局

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	.main {
		width: 800px;
		margin: 0 auto;
		background: green;
	}
	.left {
		width: 220px;
		background: #ccc;
		float: left;
		height: 500px;
	}
	.right {
		width: 580px;
		background: blue;
		float: right;
		height: 500px;
	}


</style>
<body>
<div class="main">
	<div class="left"></div>
	<div class="right"></div>
</div>

</body>
</html>
[/cce]

三.三列布局

1.使用float

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	.left {
		width: 33.33%;
		height: 500px;
		float: left;
		background: red;
	}
	.middle {
		width: 33.33%;
		height: 500px;
		float: left;
		background: blue;
	}
	.right {
		width: 33.33%;
		height: 500px;
		float: left;
		background: green;
	}


</style>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
</html>
[/cce]

2.使用绝对定位:

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	.left {
		width: 200px;
		height: 500px;
		background: red;
		position: absolute;/*绝对定位*/
		left: 0;
		top: 0;
	}
	.middle {
		height: 500px;
		background: blue;
		margin: 0 310px 0 210px;
	}
	.right {
		width: 300px;
		height: 500px;
		background: green;
		position: absolute;
		right: 0;
		top: 0;
	}


</style>
<body>
<div class="left">200px</div>
<div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quisquam incidunt excepturi. Reiciendis cumque architecto, cum explicabo illum quod tenetur aliquid facilis quibusdam mollitia eligendi. A pariatur deleniti eaque, iste.</div>
<div class="right">300px</div>
</body>
</html>
[/cce]

四.混合布局

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	.top {
		width: 100%;
		height: 100px;
		background: blue;
	}
	.main {
		width: 800px;
		height: 500px;
		background: red;
		margin: 0 auto;
	}
	.foot {
		width: 800px;
		height: 100px;
		background: green;
		margin: 0 auto;
	}
	.left {
		width: 300px;
		height: 500px;
		float: left;
		background: black;
	}
	.right {
		width: 500px;
		height: 500px;
		float: right;
		background: yellow;
	}
	.head {
		width: 800px;
		margin: 0 auto;
		height: 100px;
		background: red;
	}


</style>
<body>
<div class="top">
	<div class="head"></div>
</div>
<div class="main">
	<div class="left"></div>
	<div class="right"></div>
</div>
<div class="foot"></div>

</body>
</html>
[/cce]

使用相对和绝对定位混合布局:

[cce]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    
    .top {
        width: 100%;
        background: #ccc;
        height: 100px;
    }
    
    .foot {
        width: 100%;
        background: #ff6634;
        height: 50px;
    }
    
    .main {
        width: 100%;
        height: 500px;
        background: red;
    }
    
    .left {
        width: 200px;
        height: 500px;
        background: #0000fe;
        position: absolute;
        top: 100px;
        left: 0;
    }
    
    .right {
        height: 500px;
        background: #9acc99;
        position: relative;
        top: 0;
        right: 0;
        margin-left: 210px;
    }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="main">
            <div class="right">left</div>
            <div class="left">right</div>


    </div>
    <div class="foot">foot</div>
</body>

</html>

[/cce]