深入解析CSS第五章弹性子元素的大小——读书笔记

最新推荐文章于 2022-03-28 22:35:45 发布
最新推荐文章于 2022-03-28 22:35:45 发布
阅读量160 收藏
点赞数
分类专栏： HTML\CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnitaSun/article/details/113182616
版权

5.2 弹性子元素的大小

  • flex属性控制弹性子元素在主轴方向上的大小

在这里插入图片描述

  • 将主容器设置为Flexbox
    在这里插入图片描述
  • 使用flex属性设置列宽
    在这里插入图片描述
5.2.1 使用flex-basis属性
  • 它的初始值是auto，此时浏览器会检查元素是否设置了width属性值。如果有，则使用width的值作为flex-basis的值；如果没有，则用元素内容自身的大小。如果flex-basis的值不是auto, width属性会被忽略
    在这里插入图片描述
5.2.2 使用flex-grow属性
5.2.3 使用flex-shrink属性

以上属性可以看这篇博客，写的很好

Anita-Sun
关注
专栏目录
幕客学习CSS3全面基础知识点
zoucanfa的博客
01-02 865
CSS基础什么是CSS3？ CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。 在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览
前端学习笔记
weixin_44360988的博客
10-30 1146
JS js对象是通过引用来传递的，我们创建的每个递归函数是在一个函数通过名字调用自身的情况下造成的 function factorial (num) { if (num <= 1) { return 1; } else { return num * factorial(num - 1); } } call apply bind继承 第二个参数不一样，call()第二个参数是数，apply()第二个参数是数组 模块化：公共&私有方法（闭包） 块级作用域（通常称为私有作用域）的匿名函
第五章 CSS常用属性笔记
weixin_30902675的博客
11-11 91
1. span标签 突显，强调局部文字的作用. 2.字体样式 font-size: 字体大小 font-style:normal,italic(倾斜) font-weight:normal,bold(加粗) font-familty:字体类型(楷体) font:样式 粗细 字体大小 字体类型. 3.文本样式 color: 文本样式 text-align: 水平对齐方式(left,c...
【全面系统讲解CSS】学习笔记-第五章 CSS效果
摩羯座de杰杰陆的博客
11-29 767
第五章 CSS效果一、效果概念1.1、box-shadow1.2、text-shadow1.3、border-radius1.4、background1.5、clip-path1.6、3D变换1.7、CSS面试 一、效果概念 1.1、box-shadow Box-shadow：64px 64px 24px 40px rgba(0,0,0,0.4) Box-shadow：64px 64px 2...
CSS笔记5
qq_47157937的博客
01-12 159
文章目录CSS浮动（float）传统网页布局的三种方式标准流浮动浮动的特性 CSS浮动（float） 传统网页布局的三种方式 网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应的位置，CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序） 普通流（标准流） 浮动 定位 标准流 浮动 浮动的特性 ...
CSS基础：flex布局子元素被撑大（文本省略号）
u011863822的博客
03-28 6120
flex布局不但会让盒子撑大，而且还有自己在再使用超过文本长度使用省略号无效，所以聊一下解决方法。
flex布局怎么设置子元素大小_如何讲清楚Flex弹性盒模型？(中)
weixin_39640195的博客
11-29 1558
上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式这篇讲解子元素的一些属性.如何对子项目进行排序?弹性盒模型第一次可以让我们方便的对元素进行排序使用 order属性, 它的默认值是0元素按照order顺序排列如何定义子项目大小?flex布局提供另外一个属性 flex-basis它用来设定元素在主轴方向的大小注意主轴可以是row方向, 也可以column方向另外, 某...
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 5023
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
面试分享：两年工作经验成功面试阿里P6总结
weixin_45556713的博客
09-12 6022
前言 本文主要给大家带来一些我面试的经历和经验，希望对正在求职的同学有所帮助。我先大致说下面试之前的个人情况：2017年7月正式入职海康威视数字技术股份有限公司，使用Vue.js技术栈。 我写的篇幅可能有点长，如果只想看成功的面试请直接从阿里企业智能事业部（一面）开始，大家见谅哈。 这里推荐阅读之前写的文章（前面两篇实用型，后面两篇对面试应该会有帮助）： Vue CLI 3结合Lerna进行UI框...
简历资料
刘群智的博客
07-27 1874
专业技能 1.移动端前端开发，PC端前端开发 　　在阿里的几次面试中，总是被问到移动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局 等方面的不同，但是还是很不系统，所以这里做一个总结。 第一： PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机， 一般浏览器使用的都是webkit内核，所以说做移...
CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
ktutu的博客
06-20 7058
使用场景在移动端屏幕宽度有限的前提下，使用横向滚动的方式展示更多的内容。在这样的需求下，希望父元素作为容器，其宽度可以又横向排列资源的总宽度动态撑开，超过祖父元素的宽度；在不超过祖父元素时，自动继承100%的宽度。DOM结构如下： <div class="grantparent"> <div class="parent"> <div class="child
沿主轴控制Flex子元素的比例
让世界更美好！
03-15 4887
原文地址：Controlling Ratios of Flex Items Along the Main Axis 译者注： 在html中若一个元素的css设置为display: flex， 则这个元素就是flex container , 其子元素为flex item， 若是直译过来就是弹性容器和弹性项目 。 但是译者认为直译过来不好理解， 且不变记忆（就像我们常说TCP而不会说传输控制协...
纯CSS让子元素突破父元素的宽度限制
热门推荐
王为仁的博客
06-01 2万+
纯CSS让子元素突破父元素的宽度限制 在写样式中，我们可以经常看到这样的情况 代码如下 &lt;div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;"&gt; 父元素 &lt;div style="border: 1px solid blue;height: 100px;w...
弹性盒子 Flex 子元素高度塌陷
weixin_30794491的博客
01-25 2104
弹性盒子 Flex 子元素高度塌陷 数据来源：https://blog.csdn.net/sinat_36539161/article/details/81663971 先看看页面整体布局：· wrap 弹性布局，分 head、main；· head 弹性布局，分 h2、i ；问题：head 高度塌陷。高 32px，变成：24.03px...
响应式设计：固定比例（弹性盒子）
小头Sophia
12-30 7552
1.固定的百分比    （聚划算的手机站点） 2.决绝两边盒子宽度固定，中间盒子宽度随浏览器的大小而变化的问题（固比固的方法） 示例代码： html> lang="en"> charset="UTF-8"> 固比固的方法 /* 清空所有的margin和padding */ *{
flex弹性布局基本属性
web_hwg的博客
03-01 646
参考文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 注：父元素设为flex后，子元素的float、clear和vertical-align属性将失效 一、容器属性 1、flex-direction：属性决定主轴的方向（即项目的排列方向） row（默认值）— — 主轴为水平方向，起点在左端。 row-reverse...
css3弹性盒子（二）弹性子元素
weixin_45846139的博客
04-19 2119
之前说完弹性容器的属性，再来看看弹性子元素的属性。弹性盒子由两部分组成，设置好弹性容器之后，再将子元素设置好，一个完整的弹性盒子就写好了。要想写好子元素，就需要了解子元素的属性。 弹性盒子 弹性子元素属性： 1、order 控制弹性容器里子元素的顺序，数值小的排在前面，可以为负值 值为 ： 整数 2、flex-grow 设置弹性子元素的扩展比率 设置弹性子元素的扩展比率，不允许为负值...
Flex 子元素高度塌陷
sinat_36539161的博客
08-15 7338
先看看页面整体布局： · wrap 弹性布局，分 head、main； · head 弹性布局，分 h2、i ； 问题：head 高度塌陷。 高 32px，变成：24.03px（PS里：chrome是23px，IE是24px）。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"...
css和css3弹性盒模型实现元素宽度（高度）自适应
花花的博客
06-06 9540
一、css实现左侧宽度固定右侧宽度自适应1、定位&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自适应&lt;/title&gt; &lt;style&gt; *{
CSS入门与HTML5元素详解——第1天笔记
在"CSS第1天笔记"中，本课程作为前端与移动开发学院的基础课程，旨在引导学员快速入门CSS，总共涵盖6天的学习内容。第一天主要回顾了HTML基础知识，并介绍了CSS的基本概念和应用。 首先，回顾了HTML的基本元素，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值