<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="v.js"></script>
</head>
<style>
*{
margin: 0;padding:0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height:10%;
background:yellow;
}
section{
width: 80%;
margin: 0 auto;
background:red;
}
footer{
width: 100%;
height: 60px;
background:blue;
}
.h_content{
width: 80%;
margin: 0 auto;
background:#ccc;
text-align: center;
display: table;
height: 100%;
}
.h_content ul{
text-align: center;
width: 60%;
background: #aaa;
height: 30px;
display: table-cell;
vertical-align: middle;
}
.h_content li{
display: inline-block;
width: 30px;
background:purple;
margin-right: 15px;
height: 30px;
}
.s_content{
position: relative;
overflow: hidden;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 200px;
}
.c_l{
position: absolute;
width: 200px;
top: 0;
left: 0;
height: 200px;
background: #ffaacc;
}
.c_m{
position: absolute;
width: 200px;
top: 0;
left: 200px;
background: #aaa;
margin-bottom: -2000px;
padding-bottom: 2000px;
word-wrap: break-word;
　　 word-break: break-all;
/*文字换行*/
line-height: 30px;
}
.c_r{
background: #aaccdd;
margin-left: 400px;
height: 200px;
}
.c_l2{
width: 300px;
height: 200px;
background: #ddaacc;
}
.c_r2{
background: #00ff00;
margin-left: 300px;
height: 200px;
margin-top: -200px;
}
.c_l3{
float: left;
background: #aabbcc;
height: 200px;
width: 150px;
}
.c_m3{
height: 200px;
background: #ccbbaa;
margin: 0 150px;
}
.c_r3{
float: right;
background: #aabbcc;
height: 200px;
width: 150px;
}
table{
width: 100%;
border: none;
text-align: center;
vertical-align: middle;
color: #fff;
font-size: 20px;
}
table td:nth-child(1){
background: #f0f;
}
table td:nth-child(3){
background: #f0f;
}
table td:nth-child(2){
width: 600px;
height: 200px;
background: #ddaacc;
}
</style>
<body>
<header>
<div class="h_content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
</ul>
</div>
</header>
<section>
<!-- 定位实现自适应 -->
<div class="s_content">
<div class="c_l">左侧宽高固定</div>
<div class="c_m">中间不设置高度，通过margin，padding与左右元素对齐</div>
<div class="c_r">右侧宽度占满剩余的空间</div>
</div>
<!-- margin-top负值实现自适应布局 -->
<div class="s_content">
<div class="c_l2">左侧宽高固定</div>
<div class="c_r2">右侧宽度占满剩余的空间</div>
</div>
<!-- 两侧宽度固定，中间自适应 -->
<div class="s_content">
<div class="c_l3">左侧宽度固定</div>
<div class="c_r3">右侧宽度固定</div>
<div class="c_m3">中间宽度不固定</div>
</div>
<table cellspacing="0">
<tr>
<td>左侧自适应</td>
<td>中间宽度固定</td>
<td>右侧自适应</td>
</tr>
</table>
</section>
<footer></footer>
</body>
</html>

css布局篇的更多相关文章

  1. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  2. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  3. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  4. html+css 布局篇

    float 做了float后有一些不好的影响. 1.背景不能显示 由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景 ...

  5. CSS布局篇——固宽、变宽、固宽+变宽

    学了前端挺久了.近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看. 1.最简单的当然是一列或多列固宽 比如两列固宽: <1> ...

  6. 3.实战HTML+CSS布局（实例入门篇）

    转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. 第九篇、CSS布局

    <!--css布局 标准流:从上到下 从左到右 脱离标准流:(浮在父控件的最左边或者最右边)(类似ios在window上添加的控件) 1.float: 2.position: absolute( ...

  9. [面试仓库]CSS面试题汇总--布局篇

    一,盒模型   说到 CSS 布局这块的内容,首当其冲的就是我们的盒模型宽度计算问题,在开始我们的问题之前,我们首先要搞懂这些概念: 盒模型里面的内容(content): 也就是实实在在要展现的内容, ...

随机推荐

  1. 实用iPhone Cydia插件

      BadgeClear(角标清除):可以清除App推送所在图标右上角出现的红色角标.在桌面长按图标后,图标开始左右摇动,再双击图标即可清除点击的图标角标.   Bitesms(短信):收费插件,具有 ...

  2. GFStableList Adapter

    STL中,list的优点是插入.删除性能极佳(时间复杂度只需O(1)即可),而且非常重要的在删除节点后,其迭代器不失效,但list查找却不擅长.map由于其实现的数据结构为rb-tree,因此,其插入 ...

  3. JS读取文件,Javascript之文件操作 (IE)

    一.功能实现核心:FileSystemObject 对象      要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象. 二.FileSystemObject ...

  4. java 属性

    //非静态类 不能定义静态属性/方法/静态类, 可以定义静态常量属性. public class A{ public class B{ public static String  _str; //❌, ...

  5. 转： memcpy的用法总结

    1.memcpy 函数用于 把资源内存(src所指向的内存区域) 拷贝到目标内存(dest所指向的内存区域):拷贝多少个?有一个size变量控制拷贝的字节数:函数原型:void *memcpy(voi ...

  6. 读取pdf文件 .选择了itextsharp 库

    此库还是比较成熟.看博客园很多文章都介绍了此库 用法 如果项目用到读取pdf.  我这只是提供个思路.或者提供个方法.用itextsharp 能方便实现 StringBuilder text = ne ...

  7. android host

    74.125.20.31 market.android.com 74.125.20.31 developer.android.com 74.125.20.31 android.googlesource ...

  8. js中undefined,null,NaN的区别

    1.类型分析: js中的数据类型有undefined,boolean,number,string,object等5种,前4种为原始类型,第5种为引用类型.var a1;var a2 = true;va ...

  9. v$session_wait p1 p1raw p1_16

    SQL> select * from v$mystat where rownum<2; SID STATISTIC# VALUE ---------- ---------- ------- ...

  10. 【日语】アップデート(update)一吻定情OP

    ねぇ~気づいてる? nee ~ kizu iteru ?呐~注意到吗? 私はアップデートしているよwatashi ha appude^to shiteiruyo我期待更新 いつか届きますようにitsu ...