CSS3:三个矩形，一个宽200px，其余宽相等且自适应满铺

最新推荐文章于 2020-12-23 03:59:04 发布
转载 最新推荐文章于 2020-12-23 03:59:04 发布 · 138 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/McQueen1987/p/3980714.html

某公司面试题：下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。使用CSS3中的功能实现它们的布局。

这里要用到的CSS3特性box-flex

box-flex ：属性规定框的子元素是否可伸缩其尺寸。可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。 

此外，元素的可伸缩行柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

 

思路：

1.定义如下html：

<body>
<div class="box">
<div class="item">column1</div>
<div class="item">column2</div>
<div class="item">column3</div>
</div>
</body>

2.对column1设置固定宽度，box-flex：0（表示固定宽度，不参与自适应宽度）width:200px;

3.对column2  column3设置box-flex：1（按照比例1自适应宽度）；

css代码如下：

<head>
    <style type="text/css">
    .box {
        background-color:green;
        display:-moz-box;
        display:-webkit-box;
        display:box;
        height:50px;
        line-height:30px;
        text-indent:10px;
    }
    .item {
        box-flex:1;
        -moz-box-flex:1;
        -webkit-box-flex:1;
        margin:10px;
        background:#fff;
        text-align:center
    }
    .item:first-child {
        box-flex:0;
        -moz-box-flex:0;
        -webkit-box-flex:0;
        width:200px;
        background:#fff;
        margin:10px;
        text-align: left;
    }
    .item:nth-child(2) {
        margin:10px 0
    }
    </style>
</head>

看看它的显示效果：

转载于:https://www.cnblogs.com/McQueen1987/p/3980714.html

CSS Grid布局实战：10个经典案例带你玩转网页布局
小白菜的博客
05-23 822
本文的目的是帮助读者全面掌握CSS Grid布局，并通过实际案例展示其在网页设计中的应用。范围涵盖了CSS Grid布局的基础概念、核心原理、具体操作步骤以及10个经典的实战案例。本文适合有一定HTML和CSS基础，想要进一步提升网页布局能力的前端开发者、网页设计师以及对网页设计感兴趣的初学者。本文首先介绍CSS Grid布局的核心概念和相关术语，然后通过故事引入的方式解释核心概念。接着详细阐述核心概念之间的关系，并给出原理和架构的文本示意图以及Mermaid流程图。之后讲解核心算法原理和具体操作步骤，介绍
CSS进阶-第五篇：深入 CSS 布局-Grid 布局（一）：基础概念与创建
最新发布
无
04-10 158
和属性用于定义网格的行轨道和列轨道的尺寸。它们的值是一系列用空格分隔的长度值、百分比或其他尺寸单位。上述代码定义了一个包含两行两列的网格。第一行高度为 100 像素，第二行高度为 200 像素；第一列宽度占网格容器宽度的 30%，第二列宽度占 70%。像素（px：像素单位提供了固定的尺寸，适用于需要精确控制网格轨道大小的场景，例如创建固定宽度的侧边栏或固定高度的页眉。但使用像素单位可能导致布局在不同屏幕尺寸下缺乏灵活性。百分比（
前端面试题
落叶、等秋风
03-02 511
1、你做过的最满意的前端作品？ 2、你了解哪些新技术？ 3、你是怎样接触前端的？ 4、你对你的学校和专业怎么看？ 5.下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。 已知HTML结构是： column 1 column 2 column 3 5.解答：
纯HTML+CSS实现DIV做矩形运动
你的大数据学长
02-18 5627
纯HTML+CSS实现DIV做矩形运动预计效果代码关键代码解释结果展示 预计效果 代码 该代码可在我的GitHub中找到，链接在此 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DIV做矩形运动</title> ...
微信小程序例子——使用画布组件绘制一个长200px，宽100px的长方形
FutrueJet的博客
10-26 5985
微信小程序例子——使用画布组件绘制一个长200px，宽100px的长方形
使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局
热门推荐
Hey_Sarah
08-18 2万+
box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。 displ
阿里2014前端线上笔试题
weixin_30530939的博客
10-28 218
8月20号阿里巴巴前端岗位校园招聘的线上笔试题，因为是面向2014界的应届生，哥不符合要求了，但也看了看题，哥也不是什么前端大拿，必然无法评价题的质量了，不过玉伯，寒冬等大拿都评价题还是不错的，区分度很好，由于题目是随机的，囧。自码答案，有误欢迎指正，部分问题还没添加答案~ No.1 下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使...
CSS3来绘制一个3维立体游泳圈_使用css3绘制出各种几何图形
weixin_35775807的博客
12-23 276
1、圆形示例:思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：html:复制代码代码如下:css:复制代码代码如下:.size{width:200px;height: 200px;background: #8BC34A;}.example1{border-radius:100px;}2、自适应椭圆思路：border-radius 这个属性还有...
《CSS Secrets》读书笔记（3）
前端向朔
01-07 5232
三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来，本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》，做笔记的过程中我会根据自己的过往经验加上自己的理解和看法，用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人，如果你是新手，阅读起来可能有点吃力，同时，笔记也是针对我个人的查漏补缺，有些知识点并不会记录进去。 文章目录形状自适应的椭圆平行...
CSS3学习笔记总结，你值得拥有（呕心沥血之作，涵盖CSS3所有知识点）
孙叫兽的博客
08-21 4066
注意：本文演示的运行结果使用的是在线编译器，只显示body里面的内容，大家可以用浏览器进行查看完整效果包含head。 简介 CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 边框 用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
网易前端笔试题
Freya_yyy的博客
08-07 1017
部分前端笔试题，仅供参考： 1．<canvas width="250" height="250"></canvas>有个矩形长20px，高10px,CSS中width：250px height：500px，请问这个矩形渲染出来的实际面积（A）？ A.400 B.200 C.300 ...
html+css制作带三角的矩形
BuptMelody的专栏
02-26 4799
网上有很多html+css制作带三角的矩形的方法，我在这里列举其中一种，兼容bootstrap3。我们先来看一个三角在左边的对话框的效果图 矩形就不必说了，矩形的border-radius也不用说了，圆角可以自己设置，可以直接用bootstrap中的类。下面说下矩形左边的小三角，我们可以这么设置。右边的矩形我们标记为类log-content，左边的小三角我定义为类triangle，在html中的代
阿里前端线上笔试题以及答案总结
TTO_OTT的专栏
03-27 6017
阿里前端笔试总结
实现一个div，左边固定div宽度200px，右边div自适应
xiaobing_hope的专栏
11-01 1万+
实现一个div，左边固定div宽度200px，右边div自适应<div class= "container"> <div class="left"></div> <div class="rigth"></div> </div><style> /*方法一： BFC(块级格式化上下文)*/ .container{ width:10
HTML5中的canvas绘制三个矩形
itscassie_的博客
09-14 1828
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;绘制三个矩形&lt;/title&gt;         &lt;style&gt;             body{                 w
学习一种矩形通过css定义宽高等比例自适应的方法
yzy85的专栏
06-06 3114
1、原理：当用百分比定义高宽的时候以及padding的时候，padding和margin都是相对于父元素的宽度来计算的，我们可以利用这一属性来实现我们的需求，通过设置元素的width:50%; padding_bottom:50%; height:0;，高度与padding_bottom的比例值也可设置为其他，此时高度由padding-bottom撑开并保持，百分比宽度，百分比padding均使用...
使用css如何让一个宽度为200px的div水平居中，（要求兼容ie，可提供多种方法）
LuckXinXin的博客
04-08 978
1)：给div设置width:200px margin:0 auto 2）：给父div设置：display:flex; justify-content:center; 子div设置：width
2014阿里前端线上笔试题解答
midii的专栏
10-08 1714
No. 1 题目： 下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。 已知HTML结构是： class="box"> class="item">column 1 class="item">column 2 class="item">column 3 解答：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值