在 VMware虚拟机软件 中安装的 Ubuntu虚拟机 的窗口不能自动调整大小的解决办法： 配置虚拟机时，发现屏幕大小太小，一般解决思路是：需要安装vmware tools ，屏幕就会自适应 。...3）在主文件夹里面或者子目录里创建或指定一个文件夹，将 VMwareTools-x.x.x-xxxxxxx.tar.gz 复制到该文件夹里面并解压到当前目录。 ...8）重启之后在VMware界面的菜单栏找到 “View” --> “Autosize” --> “Autofit Window” 选定它。 ...(中文版是：查看 --> 自动调整大小 --> 自动适应客户机大小 ) 9）Ubuntu分辨率调整，进入“系统设置”，找到 “显示” 点击进入调整你需要的分辨率，通常数值越大，界面就越大，能显示的内容就越多...至此配置成功，虚拟机可随VMware窗口大小自动调整。 问题解决之后的界面： ?
一、justify-content对齐问题描述 在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。...例如，假设每行4个元素，结果最后一行只有3个元素，则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话，那最后3个元素也是可以完美左对齐的。...last-child:nth-child(4n - 1)说明最后一行，要么3个元素，要么7个元素…… .list:last-child:nth-child(4n - 2)说明最后一行，要么2个元素，要么6个元素…… 在本例中...眼见为实，您可以狠狠地点击这里：动态匹配数量实现flex子项左对齐demo 三、如果每一子项宽度不固定 有时候，每一个flex子项的宽度都是不固定的，这个时候希望最后一行左对齐该如何实现呢？...您可以狠狠地点击这里：使用空白元素占位让flex布局最后一行左对齐demo 五、如果列数不固定HTML又不能调整 然而有时候，由于客观原因，前端重构人员没有办法去调整html结构，同时布局的列表个数又不固定
缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调 栅格化布局 将网页宽度人为的划分成均等的长度...改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。 ...然后 CSS 代码不能使用绝对大小，即不能指定像素 px 宽度，而只能使用相对大小 em 或者 %百分比、rem等。...同自适应布局一样，在书写 CSS 样式时，元素宽度不能使用绝对宽度，而要使用相对大小。 Media Queries 是响应式设计的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。...弹性布局（rem/em布局） 弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示
CSS盒模型：标准模型 + IE模型 标准模型 div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化 box-sizing:content-box;...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。...兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。...、根元素都需要调整display 26、css中link与@import的区别？...3、link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别。
其它情况下，该值将参与基线对齐 stretch 高度100%,宽度自动 align-self flex-start flex子元素在最上边 flex-end flex子元素在最下边 center flex...在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) 二、IE盒子模型 ?...，比如，ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。...通过它既可以做到只 修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。....% %百分比，相对长度单位，相对于父元素的百分比值 元素款到与字体大小使用区别： （1）尽量使用相对尺寸单位 使用相对尺寸单位计量，则在调整页面的布局的时候，不需要遍历所有的内部 DOM结构，重新设置内部子元素的尺寸大小
另一个是 box，当然 flex 中暂时并未设置弹性布局，在此留着备用，接下来的 box 设置了基础的宽高，我们此时可以看到以上示例的呈现效果如下： 接着我们在 flex 样式中增加 display...flex-direction 在伸缩布局中可以改变其主轴方向，主轴在此处是伸缩布局中的专业术语，指的就是你默认轴方向，值为 row 表示横轴显示为默认值，可以更改为 column 表示竖轴作为主轴，则显示为垂直显示...在此还需要注意，在主轴为 row 时高度不需要设置，在主轴为 column 时，宽度不需要设置： 显示如下： flex-flow 若此时见到了一个属性为 flex-flow 不要慌...flex-grow flex-grow 属性可以使其伸缩项（子元素）按照其空间内剩余内容进行扩充，例如如下代码： 该代码我设置了其伸缩项每个宽度为 100px，那么肯定不会填充满该行，当在某一项中设置了...flex-shrink 与 flex-basis 在 flex 子元素中设置宽度可使用 flex-basls，使用 flex-basls 的优先级比 width 高，即时同时使用 width 以及 flex-basis
注意： IE11 对 flexbox 的支持有点 bug。...margin-bottom: 10px;}img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px;} 用 rem 来调整全局大小...；用 em 来调整局部大小 在根元素设置基本字体大小后 ( html { font-size: 100%; }), 使用 em 设置文本元素的字体大小: h2 { font-size: 2em;}p...使用选择器 :root来控制字体弹性 在响应式布局中，字体大小应需要根据不同的视口进行调整。...你可以计算字体大小根据视口高度的字体大小和宽度，这时需要用到 :root: :root { font-size: calc(1vw + 1vh + .5vmin);} 现在，您可以使用 root em
要给居中元素一个宽度，否则无效该元素不可以浮动，否则无效BFC什么是BFC？BFC是W3C CSS2.1规范中的一个概念，在CSS3.0规范中已被修改为flow root。...何时使用padding：兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。...，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。...当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。CSS 引入方式？外部样式表。引入一个外部CSS文件；内部样式表。...em的值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。
一、流式布局简介 流式布局 又称为 百分比布局 / 非固定像素布局 ; 为 流式布局 中 盒子模型 设置 百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充...; 流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应不同尺寸的 设备屏幕 ; 当 设备屏幕尺寸 发生变化时 , 标签元素的尺寸也会相应地调整 ; 移动端流式布局注意事项...设置最大和最小宽度 : 在设置元素宽度时，需要考虑最小和最大宽度，以确保元素在不同设备上都能够正常显示。...最小宽度 : min-width ; 最大宽度 : max-width ; max-width: 980px; min-width: 320px; 使用响应式图片 : 在移动端流式布局中，图片大小也需要自适应调整...*/ width: 100%; /* 网页布局宽度 默认等于 设备宽度 */ /* 设置最大宽度 浏览器放大 网页布局不能超过
relative 相对的 (3). absolute 绝对的 (4). fixed 固定定位 注意：relative，absolute，fixed 被称之为 "已定位元素" 48. z-index 堆叠顺序，在已定位元素中调整堆叠顺序...(单行项目有效) A. flex-start 在交叉轴的起点对齐, 交叉轴为与主轴相反的轴 B. flex-end 在交叉轴的终点对齐, 交叉轴为与主轴相反的轴 C. center 在交叉中的中间对齐...只在 IE 下生效 这段文字只在 IE 浏览器显示 B. 只在 IE6 下生效 这段文字只在 IE6 浏览器显示<!...只在 IE6 以上版本上生效 这段文字只在 IE6 以上(包括)版本 IE 浏览器上显示 D. 只在 IE8 上不生效 <!...缩放 改变元素在页面中的大小 语法：transform：value A. scale(value) 表示横向和纵向等比缩放 a. 原始大小:默认值 1 b. 放大：大于 1 的数值 c.
；可能取值：none（默认值；无法调整尺寸），both（可调整宽和高），horizontal（可调整宽度），vertical（可调整高度） 不兼容IE浏览器！...在标准的W3C盒模型中：width+padding+border=元素实际宽度；height+padding+border=元素实际高度！...CSS3 flex box（弹性盒子！） CSS3中引进的一种新的布局方式。作用：用来适应不同的屏幕大小、不同的设备类型，确保元素有恰当的行为！...弹性子元素在纵轴上对齐方式：align-items:stretch（默认，拉伸以适应容器）；center（中心）；flex-start（开头）；flex-end（结尾）；baseline（基线上） 弹性子元素在横轴上对齐方式...：justify-content：flex-start（默认值，开头）；flex-end（结尾）；center（中心）；space-between（子元素平均分布在该行上）；space-around（子元素平均分布在该行上
1） 要求容器在宽度自由伸缩的情况下，A/B/C的宽度始终是1:1:1，如何实现，写出两种方法。...: flex; } .div{ flex-grow: 1; border: 1px solid #888; } ?...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...PX特点 IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
行内元素 与 块级元素 ❝在 HTML4 中，元素被分为两大类：inline 行内元素 和 block 块级元素 「行内元素」: 一个 行内元素只占据它自身的空间大小。...页面初始渲染，这是开销最大的一次重排 添加/删除可见的DOM元素 改变元素位置 改变元素尺寸，比如边距、填充、边框、宽度和高度等 改变元素内容，比如文字数量，图片大小等 改变元素字体大小 改变浏览器窗口尺寸...默认宽度为父元素宽度，可设置宽高，换行显示。如果不指定宽度，默认为100% 宽 none 元素不显示，并从文档流中移除 inline 行内元素类型。...❝解决方案: 可以使用 reset.css ，重置浏览器的css默认属性 ❞ ❞ 9. width：auto 和 width：100% 区别 ❝width : 100% : 它会的宽度等于父元素的宽度大小...即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。
IE6 下只能给 a 元素添加该伪类；b....移动端布局 我在之前的博文已经提到过了，Flex 弹性盒布局一般是用于移动端页面的，下面是一个移动端的布局，需要注意的是，在移动端页面，我们需要在头部添加 viewport，快捷键为 meta:vp，...及 device-height 属性，可能对包含基于视口高度调整大小及位置的元素的页面有用） initial-scale 属性控制页面最初加载时的缩放等级，maximum-scale 属性表示最小的缩放比例...、minimum-scale 属性表示最大的缩放比例，还有一个在上面没有出现到的属性 user-scalable=yes ，表示的用户是否可以调整缩放比例 下面我们通过 Flex 弹性盒布局来完成上面的淘宝页面在移动端的布局...，低则逐渐变灰，百分比值，0％ 表示灰色阴影，100％ 表示全色 亮度：同样也是一个百分比值，0％为黑色，100％为白色 透明通道：介于 0.0（完全透明）与 1.0（完全不透明）的数字 注释：在 IE9
、fixed 基础重点 relative：参照物为元素本身，即默认情况下在文档流中的位置； float：元素默认宽度为内容宽度；半脱离文档流（元素脱离文档流，内容不脱离文档流，即一种文字环绕图片的效果）...时不能平滑滚动（失去滚动惯性）的问题怎么处理？...: 设置元素空余空间分配权重：flex-grow: 设置元素超出分配空间权重：flex-shrink: 设置元素在主轴方向的基础长度：flex-basis: 设置元素在主轴方向的弹性...； rem：相对于根元素 html 的字体大小； vh vw：其中的 v 表示 viewpoint（视窗），所以这两个大小单位代表相对于当前视窗的大小，1vh vw 相当于百分之1的视窗高度 宽度。...1ch 表示一个0字符的宽度，因此只有在等宽字体的情况下，我们才能用 ch 来精确的调整字符的显示。 ex：相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
/* 分别设置多个属性 */ transition: height 1s ease, width 2s linear; } 1.2 动画animate 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片...在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 > ie9不支持，ie10以上才支持 属性 描述 可取值 @keyframes 规定动画。...> 注意此属性设置在子盒子上，浏览器自动按照order的大小排序盒子，默认都是0，如果相同的order则按照编写标签的顺序排放盒子。...缩小占比 2.10 设置子盒子默认占比宽度 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。...column-width 给列定义个最小的宽度。默认值为auto表示将根据column-count列的数量自动调整列宽。 column-count 最大列数。 columns 合写以上两个属性。
/* 分别设置多个属性 */ transition: height 1s ease, width 2s linear; } 1.2 动画animate 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片...在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 ie9不支持，ie10以上才支持 属性 描述 可取值 @keyframes 规定动画。...注意此属性设置在子盒子上，浏览器自动按照order的大小排序盒子，默认都是0，如果相同的order则按照编写标签的顺序排放盒子。...缩小占比 2.10 设置子盒子默认占比宽度 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。...column-width 给列定义个最小的宽度。默认值为auto表示将根据column-count列的数量自动调整列宽。 column-count 最大列数。
table + margin 优点：兼容性好，只用关心子元素的样式属性；解释：display:table 属性使得元素具有同 inline-block 一样的特性，容器大小取决于内容大小，并且具有宽高；...float + margin + (fix) 解决IE6下的3像素问题 优点：兼容性较好；解释：防止子元素清除浮动带来的问题，使用 position:relative; 来提高元素层级； ?...table 缺点：代码量较多；解释：display:table; 默认大小为内容大小；display:table-cell 不能设置 margin 属性；table-layout:fixed; 可以加速渲染...，布局优先，固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。...自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。； ? flex 缺点：性能一般；解释：flex 一般用于小范围布局，防止出现性能问题； ?
开发人员在开发过程中为了提高开发效率，常常会用到各种组件工具例如：jQuery，BootStrap，webpack，或者前端框架，如：VUE等。...HTML5页面布局 常用的页面布局方式有很多种，比如 最早的静态表格布局 通过栅栏划分页面的流式布局 根据屏幕大小自动调整内容的自适应布局 融和流式布局和自适应布局的响应式布局 以上布局主要通过使用css...中display、position和float属性相配合来实现，在确定位置以及清除浮动时，常常会遇到棘手问题（例如：垂直居中，屏幕适应）。...container中aside为浮动元素，宽度20%。main根据剩余宽度调整。 ?...1，自动充满aside剩余空间 Flex兼容性注意事项： l IE9不支持FLEX，建议IE11 l Safari 和 IOS 需要加 -webkit- 之前我们也写过FlexBox教程，更多的内容欢迎大家查看这篇文章了解
flex-shrink ： 指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。 flex-basis : 指定 flex 元素在主轴方向上的初始大小。...grid-auto-columns 属性: 默认是 auto 大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。...flex ：设置 flex 项的动态尺寸，表示每个 flex 项沿主轴的可用空间大小, 实际上它可以指定最多三个不同值的缩写属性。...- 指定 flex 元素在主轴方向上的初始大小 描述: 此属性指定了 flex 元素在主轴方向上的初始大小。...; } section { display: flex; } button { /* 给按钮设置大小，并设置值为 1 auto 的 flex 属性，此时调整浏览器窗口宽度将会根据宽度进行自适应
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
