块级盒子与内联盒子 在CSS中我们广泛地使用两种“盒子”，块级盒子（block box）和内联盒子（inline box）。这两种盒子会在页面中表现出 不同的行为方式。...块级盒子：div、p、h1； 内联盒子：span、a、strong。 块状盒子特性 独占一行； 支持所有css样式； 不写宽度的时候，跟父元素的宽度相同； 所占区域是矩形。...弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。 Tips / 提示 通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。...1 默认值，表示当子元素宽度超出flex容器时，将其宽度收缩至父元素的100% 0.5 宽度减少父元素的50% 0 不对flex容器中的子元素宽度进行收缩 大于1 还是宽度收缩至父元素，与1效果相同...Tips / 提示 为什么要去掉前缀grid-？因为发现这个间隙的问题不止在grid布局中会出现，因此去掉了前缀使其也可以应用在其他布局中。
实用的css3属性 1、display:flex||inline-flex display flex inline-flex 解释 将对象作为弹性伸缩盒显示 将对象作为内联块级弹性伸缩盒显示 项目中的应用...我当时写过一个因为子元素浮动让div自适应高度的解决办法，使用的是css方法解决的。...在没有测试之前，有的人可能会认为.main会占据整个一行，但是，测试结果是，它会根据子元素所有的div大小自适应宽度和高度 ---- 2、属性align-items 项目中的应用 属性值 解释 flex-start...再次注意: stretch，子元素设置高度为auto,不能固定高度才能在父容器中被拉伸 ?...> 让一个80*80px的方块，在1s内宽度由80px到150px,并且透明度由1变成0 如果还想添加别的属性，只需在.block中设置初始的属性，在.block:hover中设置要达到的最终值
他们当中一部分是容器（父元素，称为“伸缩容器”container），另一部分是子元素（称为“伸缩项目” flex item）。 常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流。...，是内联还是块取决于设置的值。...6.align-items（适用于父容器） 这个主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式。可以把他想像成侧轴（垂直于主轴）的“justify-content”。...为什么？ 因为当你在加的时候无所谓，但是在减的时候，如果只计算赋予的 shrink 值，那么很有可能最后减少的宽度比 basis 大，于是 item 的宽度就变成负值。 那我们该怎么修正？...把 basis 当成参数计算进去，这样就能保证减少的宽度永远小于 basis。 所以我们可以得到修正后的公式，一样以最左边为例子，最后计算出来减少 60px，于是 item 就变成 140px。
伪类：以冒号为前缀，被添加到一个选择器末尾的关键字，样式在特定状态下才被呈现到指定的元素 CSS 2.1 E:first-child 匹配父元素的第一个子元素 E:link 匹配所有未被点击的链接...匹配 E 元素的第一个字母 E:before 在 E 元素之前插入生成的内容 E:after 在 E 元素之后插入生成的内容 # display 有哪些值 值 说明 block 块类型。...默认宽度为内容宽度，不可设置宽高，同行显示 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示 list-item 像块类型元素一样显示，并添加样式列表标记 table 此元素会作为块级表格来显示...内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top...# 关于媒体查询 是什么 媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制样式表范围的表达式组成，例如宽度、高度和颜色 媒体查询在 CSS3 中出现，允许内容的呈现针对一个特定范围的输出设备而进行裁剪
要给居中元素一个宽度，否则无效该元素不可以浮动，否则无效BFC什么是BFC？BFC是W3C CSS2.1规范中的一个概念，在CSS3.0规范中已被修改为flow root。...float浮动为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。...何时使用padding：兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。...该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。...两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪费在了失败的查找上面。
在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。 弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。...31、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？...flex-end 从侧轴终点到起点 center 居中 stretch 拉伸对齐，想要拉伸效果得子元素设置高度 flex-wrap 控制子元素是否换行 nowrap 默认，不换行 wrap 换行 align-content...解决办法：给橙色块添加overflow: hidden（生成了一个BFC）。浮动元素父元素还存在高度塌陷问题，解决方法：父元素生成一个BFC。 absolute布局的有点是简单直接，兼容性好。...这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
，遇事不决「flex/grid」 ❞ 文章概要 水平居中 垂直居中 水平&垂直居中 知识点简讲 元素分类 在CSS世界中，基本上分为「两类」元素 块级元素 行内元素 常见的块级元素有div/li/table...内联元素：「元素的外在盒子具有内联性」，具体表现就是 该元素可以和文字在一行显示。 更进一步的讲，我们可以将 display为inline或者inline-*的元素，简单的划分为内联元素。...块级元素 固定宽度 这两个是&的关系，两者缺一不可。并且，根据前置知识中关于margin:auto的介绍。很自然就会想明白为何通过maring:0 auto就可以将定宽的块级元素水平居中了。...我们继续来解释下，首先，块级元素定宽，也就是说该元素「流动性」消失了，不会100%于父级元素的宽度了。换言之，就是该元素在水平方向无法将父元素填充满。...div class="flex-center"> 我是一个多行文本信息 bala bala div> 在父级元素，一劳永逸的设置子元素居中样式 .flex-center {
如: span{ color:red; } 外部式:把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在中，html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。...元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。...流动布局模型具有2个比较典型的特征: 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的 宽度都为100%。实际上，块状元素都会以行的形式占据位置。...) 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元 素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开发中可以发挥极大的作用。...这时子元素与子元素之间的间距是最左边和最右边子元素与父元素间距的2倍。 注意： 当所有子元素的宽度之和大于父盒子的宽度时，所有子元素的宽度会平均收缩，变窄，以适应父盒子的宽度。...示例： .first{ flex-grow: 1; /*first子元素宽度拉伸，拉伸的宽度占据父元素剩余空间的三分之一*/ } .second{ flex-grow: 0;/*second...子元素宽度不拉伸*/ } .third{ flex-grow: 2;/*third子元素宽度拉伸，拉伸的宽度占据父元素剩余空间的三分之二*/ } 3.2、flex-shrink 同 flex-grow...（在子元素未设置高度时有效） baseline:以子元素中文本基线对齐来来对齐*/ 问题： align-items 既然写在父元素中，是对所有子元素在侧轴方向的对齐方式进行设置。
：1.给父级设置高度，不够灵活2.给父级设置overflow:hidden 但不设置高度，这样可以使父级随子级最大的高度变化而变化，自适应无法解决的问题1.元素平分父级元素 需要计算，而且不一定能均分2....元素之间的间距如果想要均匀分布的话，也需要计算，而且也不一定均分3.书写比较繁琐，代码冗余2.内联块级元素布局 向所有想要横着布局的元素使用 displsy:inline-block让元素变为内联块级元素内联块级元素的特点...复合属性 控制弹性盒子内子元素的缩放比例flex-grow:拉伸因子*{ padding: 0; margin: 0;}.top{ width: 800px; background...width: 800px; background: yellow; height: 200px;}按照比例进行拉伸，把剩余的200px，按照2：1：3的比例分给子元素flex-shrink:...; }flex-start 元素都在左边/上边 代表元素在排列方向的开始位置分布flex-end 元素在排列方向上的结束位置分布（右/下）center元素在排列方向的中间位置分布space-between
padding值，保证总宽高不变 II.padding不允许设置负值 III.背景可以延伸到padding区域 IV.当需要调整子元素在父元素中的位置关系时，可以通过给父元素设置padding来实现 容器溢出...元素类型及转换 一、html元素类型 html元素分为三大类：块元素，内联元素，可变元素 注：也可将html元素分为这样三类：块元素，内联元素，内联块状元素 1.块元素 常见块元素：div,p,ul,...，独占一行，自上而下排列 c) 块状元素可以定义自己的宽度和高度，以及盒模型中的任意属性（如margin，padding，border） d) 块状元素可以作为一个容器容纳其他的块元素和内联元素 2.内联元素...常见内联块状元素：img,input,select,textarea 内联块状元素特点： a) 即具有内联元素特点，在一行逐个进行显示 b) 又具有块状元素特点，可以定义宽度和高度，以及盒模型中的任意属性...例如：根据img标签的src属性决定在网页中显示什么样的图片 根据input标签的type属性决定在网页中显示什么类型的input控件 2.非置换元素 除了置换元素，大部分html元素都是非置换元素，其内容直接显示在浏览器中
内联块元素在其兄弟元素之间添加了一点空间，因为它将元素视为字符。...由于应用于父元素 .card__content 的填充，边框不会粘在边缘上。 是的，你猜对了！ 负边距是解决办法。...我在检查 Facebook 的新设计 CSS 时，首先注意到了这一点。 我们将内联样式div设置为width ：16px， 它的唯一目的是在左边缘和包装器之间添加一个空间。...以下是我想到的一些问题： 间隔组件如何在父组件中获取其宽度或高度？它将如何在水平和垂直布局中工作？例如：堆栈内的间隔符与添加左侧空间的间隔符。...例如，根据视口宽度设置具有最小值和最大值的边距。 答案是肯定的！ 我们可以。 最近，CSS 数学函数在 Firefox 75 中得到支持，这意味着它们在所有主流浏览器中都受 CanIUse 支持。
对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。 10.display 有哪些值？说明他们的作用。 block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。...•假设给内联元素的前后各生成一个宽度为0的内联盒子（inlinebox），则这两个内联盒子的paddingbox外面的包围盒就是内联元素的“包含块”； •如果该内联元素被跨行分割了，那么“包含块...解决办法： 对于margin-top合并，可以进行如下操作（满足一个条件即可）： •父元素设置为块状格式化上下文元素； •父元素设置border-top值； •父元素设置padding-top值； •...清除浮动的方式 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。...（1）内联元素也可以作为“包含块”所在的元素； （2）“包含块”所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素； （3）边界是paddingbox而不是contentbox
内联块元素在它的兄弟元素之间添加了一点空间，因为它将元素视为字符。...> 注意，我添加了一个包装器，并且每个按钮现在都包装在其自己的元素中。...那是一个 div>，内联样式宽度：16px，它唯一的作用是在左边缘和包装器之间增加一个空白空间。 引述这本React游戏手册中的内容。...在水平布局和垂直布局中，它将如何工作？ 我们是否应该根据其父项的显示类型（Flex，Grid）对它们进行样式设置 让我们一一解决上述问题。 调整间隔组件的大小 可以创建一个接受不同变化和设置的间隔。...你看出来有什么灵活性了吗？对于尺寸调整部分，可以根据其母体的尺寸调整间隔的尺寸。 对于上面的内容，也许你可以做一个叫 grow 的prop，可以计算成 flex-grow:1 在CSS中。
对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。 10.display 有哪些值？说明他们的作用。 block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。...解决办法： 对于margin-top合并，可以进行如下操作（满足一个条件即可）： •父元素设置为块状格式化上下文元素； •父元素设置border-top值； •父元素设置padding-top值； •...清除浮动的方式 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后， 不会影响块级元素的布局，只会影响内联元素布局。...（1）内联元素也可以作为“包含块”所在的元素； （2）“包含块”所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素； （3）边界是paddingbox而不是contentbox...如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用CSS中的word-break:break-all。 69.为什么 height:100%会无效？
CSS 选择器是从右往左解析的，这样效率较高，从子元素向上寻找父元素的情况在大多数正常情况下都比正向从父元素查找子元素要快得多，从左到右的查找在大多数规则读到最后（最右）才会发现是不匹配的，这样会做费时耗能...对于定宽的非浮动元素我们可以在 CSS 中用 margin:0 auto 进行水平居中；对于浮动元素可以父子元素同时向一个方向浮动，父元素设置 left:50%； 11、position 的值 relative...相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。...使用 absolute 布局，通过设置left:0;right:0;top:100px;bottom:0;来自动拉伸子容器，同时父容器设置布局。...利用 ex 可以实现内联图标与段落的垂直居中。
Relative 相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间...当元素为此定位时，如果该元素为内联元素，则会变为块级元素，即可以直接设置其宽和高的值；如果该元素为块级元素，则其宽度会由初始的100%变为auto。...Fixed 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。 当父元素使用了transform的时候，会以父元素定位。...一个好的类名应该是描述他是什么而不是像什么 避免！important，可以选择其他选择器 尽可能的精简规则，你可以合并不同类里的重复规则 8.CSS匹配规则顺序是怎么样的？...stretch：拉伸，占满单元格的整个宽度（默认值） 应用场景 文章开头就讲到，Grid是一个强大的布局，如一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的，在以前的文章中，也有使用
对于多个内联元素，也可以使用text-align：center: div class="desk"> flex; justify-content: center; } 对于多个内联的项目，也可以正常工作： image.png CSS Grid 使用网格容器时，图中的盘子将根据其网格区域居中....desk { display: grid; justify-content: center; } image.png 块元素 Auto Margin 宽度和高度已知的块元素可以通过设置margin-left...，它们应该包装在一个元素中，然后让这个父元素居中。...在已知元素宽度的情况下，可以使用负边距代替CSS transform。
图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。...：相对于包含块的宽度，以百分比值为外边距。...可以在父元素的css属性中增加 overflow: hidden这一属性后 父元素不再随子元素而改变 或者在父元素之前加上一个空元素: .div-outer::before { content: "...percentage：相对于包含块的宽度，以百分比值为内边距。...取值： flex-start：元素向主轴起点对齐。 flex-end：元素向主轴终点对齐。 center：元素在侧轴居中。 stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
