1、CSS包含：标准文档流，浮动，绝对定位
标准文档流的特点：从上到下，从左到右，输出文档内容
盒子模型：块级元素（div ui li dl dt p）与行级元素（span strong img input）
盒子模型：边框（border）外边框（margin）内边框（padding）内容（content）
盒子3D模型：border、 content+padding 、background-img、background-color、margin
<html>
<head>
<style type="text/css">
.a{
border:1px solid #CCC; padding: 30px 10px<!--第一个代表上下的距离，第二个代表左右的距离-->; width:225px;}
.b
{
background:url(../../aaa/0044.jpg) repeat;}
</style>
</head>
<body>
<div class="a b"><img src="../../aaa/1026/aaa/201502161055436380.jpg" width="50">
<img src="../../aaa/1026/aaa/201502161055561562.jpg" width="50">
<img src="../../aaa/1026/aaa/201502161056148701.jpg" width="50">
<img src="../../aaa/1026/aaa/201502161056243854.jpg" width="50"> </div>
</body>
</html>
2、网页自动居中
沿用上面的数据：
<html>
<head>
<style type="text/css">
*
{margin:0px;padding:0px;}
#warp
{<!--用warp包裹住整个页面，设置居中，则整个页面就居中-->
border:1px solid #FF0; width:250px; margin:0 auto;<!--如果想让页面居中，当设置margin属性为auto时，不能设置浮动属性或者绝对定位属性；margin左右设置为auto，而且设置width为定值-->}
#header
{
border:1px solid #0F0; width:100%<以warp规定的页面宽度为标准>; height:100px;<!--高度一般不写-->}
#mid
{
border:1px solid #903; width:100%; height:100px;}
#foot
{
border:1px solid #FF0; width:100%; height:100px;}
.a{
border:1px solid #CCC; padding: 30px 10px; width:225px;}
.b
{
background:url(../../aaa/0044.jpg) repeat;}
</style>
</head>
<!--页面分为上中下三部分 header是头 mid是中间 foot是结尾-->
<body>
<div id="warp">
<div id="header"></div>
<div id="mid">
<div class="a b"><img src="../../aaa/1026/aaa/201502161055436380.jpg" width="50">
<img src="../../aaa/1026/aaa/201502161055561562.jpg" width="50">
<img src="../../aaa/1026/aaa/201502161056148701.jpg" width="50">
<img src="../../aaa/1026/aaa/201502161056243854.jpg" width="50"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
3、float浮动与清除
特点：元素会左移或者右移直至碰到容器为止 ，设置了浮动的元素仍然会处于标准文档流之中
当元素没有设置宽度值而设置了浮动属性，元素的宽度随内容的尺寸变化而变化
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻其后的元素
清除浮动的方法：1、clear:both ;clear:left;clear:right
2、width:100%(或者固定宽度)+overflow:hidden
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float浮动布局</title>
<style type="text/css">
.box1{
height:50px; background-color:#3F9; float:left}
.box2{
height:50px; background-color:#03C; float:right}
p
{
clear:both;}
body
{
font-size:12px; font-family:楷体;}
</style>
</head>
<body>
<div class="box1">fafhgdlfhdfui</div>
<div class="box2">方便哈收到部分速报给我个iehieghwgn</div><!--对p标签产生影响-->
<p>对公女uilr哦能女尼看了吗joeif奖我国偶就诶哦叫我人工湖给ibnethrhirsdv东方</p>
<div class="box2">方便哈收到部分速报给我个iehieghwgn</div>
<p >fbsdbvskkjfjk空间的不死哦该内容ngogiorg尽快公布日锅包肉ihb</p>
<div class="box1">fafhgdlfhdfui</div>
</body>
</html>
4、横向两列布局
父元素没有浮动，而子元素中有浮动，则要从父元素中消除浮动，使用overflow
<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">
*{ margin:0; padding:0;}
.warp{ background:#0F3; margin:0 auto; width:450px;}
.a{ background:#900; width:100%;}
.b{ background:#FF0; width:100%; overflow:hidden;}
.c{ background:#00F; width:100%;}
#left{ background:#FC0; width:280px; float:left;}
#right{ background:#666; width:150px; float:right;}
#le{ background:#0FF; width:250px; float:left; margin-top:15px;}
p{ clear:both;}
</style>
</head>
<body>
<div class="warp">
<div class="a">头部</div>
<div class="b">
<div id="left">在那遥远的地方，有位好姑娘</div>
<div id="right">不要问我从哪里来，也不要问我到哪里去，我像爱一阵风，人之所见，解=皆是我的栖所</div>
<div id="le">你是风儿我是沙，缠缠绵绵永不分离</div>
<p>主题内容</p></div>
<div class="c">版权归属</div>
</div>
</body>
</html>
时间： 2024-12-28 12:53:45