<!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. Python:扫描目录下的所有文件

    扫描目录下的所有文件并返回文件的绝对路径 def fileListFunc(filePathList): fileList = [] for filePath in filePathList: for ...

  2. 科研伴我成长——上海交通大学ACM班学生在微软亚洲研究院的幸福实习生活

    每一年,微软亚洲研究院都会迎来一批"特殊的"实习生--他们既不是从五湖四海汇聚而来,也不是在读的硕士和博士.他们相识已久,知道对方的小秘密.小八卦,也相互敬佩.惺惺相惜--他们就是 ...

  3. _Random和_RandomString的使用区别

    __Random 函数介绍 作用:生成随机数 使用格式:${__Random(5,30,myResult_Random)},其中 第一个参数5,表示希望生成的数字最小的值,必填 第二个参数30,表示希 ...

  4. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  5. 读书笔记之 数字图像处理的MATLAB实现（第2版）

  6. Android蓝牙----打开,关闭操作

    ① 我们先在AndroidManifest里面增加我们的Bluetooth权限 <uses-permission android:name="android.permission.BL ...

  7. 吴裕雄--天生自然 PYTHON数据分析：钦奈水资源管理分析

    df = pd.read_csv("F:\\kaggleDataSet\\chennai-water\\chennai_reservoir_levels.csv") df[&quo ...

  8. 使用 Git 删除本地仓库和远端仓库文件

    使用 git bash 来删除 一.将文件(夹)添加到暂存区 这里假设本地和远端都有一个 test.txt 文件先在本地删除,通过 ·git status 查看通过git add test.txt 添 ...

  9. rpm报错warning: /var/tmp/rpm-tmp.1OZa8q: Header V3 DSA/SHA1 Signature, key ID 5072e1f5: NOKEY的解决

    参考链接:http://blog.51cto.com/zymin0823/1546537 报错: 解决:使用如下两个选项

  10. 2019DDCTF部分Writeup

    -- re Windows Reverse1 通过DIE查壳发现存在upx,在linux上upx -d脱壳即可,拖入IDA,通过关键字符串找到关键函数: main函数中也没有什么,将输入的字符串带到s ...