<!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=gb2312" />
<title>无标题文档</title>
<style>
*{
margin:0;
padding:0;
color:#fff;
}

/*
弹性布局

section {
width:80%;
height:20px;
margin:100px auto;
display:flex;
background:red;
}

div:first-child {
width:200px;
background:yellow;
}
div:nth-child(2) {
width:100%;
background:blue;
}
div:nth-child(3){
width:200px;
background:yellow;
}*/
/* float设置布局
section {
margin:100px auto;
width:80%;
background:red;
color:#000;

}

div:first-child {
width:200px;
float:left;
background:yellow;
}
div:nth-child(2) {
width:calc(100% - 450px);
background:blue;
float:left;
}
div:nth-child(3){
width:250px;
float:left;
background:yellow;
}
*/
/*定位的手段*/
section {
margin:100px auto;
width:80%;
background:red;
color:#000;
position:relative;

}

div:first-child {
width:200px;
position:absolute;
left:0;
top:0;
background:yellow;
}
div:nth-child(2) {
width:100%;
background:blue;
box-sizing:border-box;
padding-left:200px;
padding-right:250px;
}
div:nth-child(3){
width:250px;
position:absolute;
right:0;
top:0;
background:yellow;
}
</style>
</head>

<body>
<section>
<div>121</div>
<div>22</div>
<div>333</div>
</section>
</body>
</html>

css 固比固模型的更多相关文章

  1. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  2. CSS基础之盒子模型及浮动布局

    盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...

  3. 浅谈css中的盒模型（框模型）

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  4. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  5. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  6. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

  7. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  8. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  9. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  10. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

随机推荐

  1. 92）PHP，cookie代码补充

    (1)Cookie值,仅仅支持字符串类型. (2)Cookie键,可以写成下标数组形式. beifen.php <?php /** * @第一个值是name * @第二个值是value * na ...

  2. XML的打包与解析

    XML的打包与解析 一.XML语言的特点       1.XML独立于任何编程语言,允许人们按接收者容易解析的方式,对复杂数据进行编码.先来看一个简单的XML格式的文件: [XML] 纯文本查看 复制 ...

  3. async包 ES6 async/await的区别

    最基本的async 包 ApCollection.find({}).toArray(function (err, aps) { var num = 0; async.whilst( function ...

  4. python使用pip安装第三方库（工具包）速度慢、超时、失败的解决方案

    人生苦短,我用python!为什么很多人喜欢用python,因为包多呀,各种调包.但是调包有的时候也调的闹心,因为安装包不是失败就是很慢,很影响自己的工作进度,这里给出一个pip快速安装工具包的办法, ...

  5. 吴裕雄--天生自然 R语言开发学习：中级绘图

    #------------------------------------------------------------------------------------# # R in Action ...

  6. python 学员管理系统

    需求: 用户角色,讲师＼学员, 用户登陆后根据角色不同,能做的事情不同,分别如下 讲师视图 管理班级,可创建班级,根据学员qq号把学员加入班级 可创建指定班级的上课纪录,注意一节上课纪录对应多条学员的 ...

  7. 以后的IT路还很长（1）

    以后的IT路还很长(1) 最近有两位兄弟同事离职了,蛮可惜了,在一个战壕一起一.两年了,人各有志嘛!希望他们发展更好些! 目前的公司是个创业型的公司,公司从08年的50来个人,扩张到今年11年400多 ...

  8. Android apk签名详解——AS签名、获取签名信息、系统签名、命令行签名

    Apk签名,每一个Android开发者都不陌生.它就是对我们的apk加了一个校验参数,防止apk被掉包.一开始做Android开发,就接触到了apk签名:后来在微信开放平台.高德地图等平台注册时,需要 ...

  9. LNMP环境搭建--Centos7

    LNMP环境搭建--Centos7 | 刘鹏--博客 盒子 盒子 博客 分类 搜索 文章目录 在Centos7环境安装LAMP环境,备忘哈哈. 准备 首先去官网下载php,nginx 编译安装php ...

  10. Oracle的LOB（CLOB）大字段以及（SYS_LOB***$$）清理

    文章结构如下: 1.背景: 生产上查询那些大表然后进行清理,然而发现有SYS_LOB0000093441C00002$$这中表段占用30G(只保留一个月,如果保留更久会更大). 2.LOB介绍 Ora ...