<!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. [LC] 226. Invert Binary Tree

    Invert a binary tree. Example: Input: 4 / \ 2 7 / \ / \ 1 3 6 9 Output: 4 / \ 7 2 / \ / \ 9 6 3 1 /* ...

  2. [LC] 240. Search a 2D Matrix II

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  3. 浏览器证书问题，chorm,ie,edge,safari都会去读系统证书，firefox例外

    坑爹 没想过浏览器兼容的问题. 为系统安装用户证书后, firefox一直无法连接 提示 连接 www.httpsserver.com:8985 时发生错误. SSL 对等端无法协商出一个可接受的安全 ...

  4. js - 常用的继承

    零.序言 参考资料:JavaScript常用八种继承方案: 注:1.此篇笔记是站在上述资料的肩膀上的一篇小结: 2.阅读之前建议温习一下 js 中的 prototype 和 constructor:( ...

  5. CRISPR/Cas9|InParanoid|orthoMCL|PanOCT|pan genome|meta genome|Core gene|CVTree3|

    生命组学: 泛基因组学:用于描述一个物种基因组,据细菌基因组动力学,因为细菌的基因漂移使得各个细菌之间的基因组差异很大,(单个细菌之间的基因组差异是以基因为单位的gain&loss,而人类基因 ...

  6. AVFoundation Programming Guide(官方文档翻译4)Editing - 编辑

    新博客:完整版 - AVFoundation Programming Guide 分章节版:- 第1章:About AVFoundation - AVFoundation概述- 第2章:Using A ...

  7. Spring中@Resorce和@Autowired的区别

    @Resource的作用相当于@Autowired,只不过@Autowired按byType自动注入,而@Resource默认按 byName自动注入罢了.@Resource有两个属性是比较重要的,分 ...

  8. 通用 mapper的简单使用

    通用 MAPPER的简单使用 官方  https://mapperhelper.github.io/docs/2.use/ 依赖 <dependency> <groupId>t ...

  9. 吴裕雄--天生自然 python开发学习笔记：pycharm无法使用ctrl+c/v复制粘贴的问题

    在使用pycharm的时候发现不能正常使用ctrl+c/v进行复制粘贴,也无法使用tab键对大段代码进行整体缩进.后来发现是因为安装了vim插件的问题,在setting里找到vim插件,取消勾选即可解 ...

  10. 2020 倒计时 1 天，Python 工程师找工作更难了？

    Python 是最神奇的编程语言. 无意引战,我说的是"神奇",不是"最好",并不想去"撼动" PHP 的地位.               ...