为什么页面在x轴和y轴上都溢出，而且没有垂直居中？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS进阶知识

，所以为了让我们设计的页面在不同的浏览器上显示效果相同，就需要用resetcss。 ...y; //旋转中心点 x: X 轴偏移量，可为百分比、left、center、right。...沿着 x 轴扭转 y: 沿着 y 轴扭转需加 deg 单位 transform: skewX(xdeg); //沿着 x 轴扭转 transform: skewY(ydeg);...//沿着 y 轴扭转 transform: translateX(x); //x 轴偏移 transform: translateY(y); //y 轴偏移 transform...); //沿着 z 轴旋转 transform: rotate3d(x, y, z, adeg); x, y, z: 0 或 1 0 表不沿着该轴旋转, 1 表沿着该轴旋转。

2191 0

57道常被问的CSS面试题及答案汇总，帮你查漏补缺

如：transform:rotate(30deg): 二、移动translate 移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动...也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1...如transform:scaleY(2): 四、扭曲skew 扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形...）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。...具体使用如下： 1、skew( [, ]) ：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。

2.7K3 1

您找到你想要的搜索结果了吗？

是的

没有找到

57道CSS常问面试题及答案汇总

如：transform:rotate(30deg): 二、移动translate 移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动...也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1...如transform:scaleY(2): 四、扭曲skew 扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形...）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。...具体使用如下： 1、skew( [, ]) ：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。

2K1 0

CSS 实用手册

两个值，表示原点在 x 轴和 y 轴上的位置 ②. 三个值，表示原点在 x 轴 y 轴和 z 轴上的位置 (3). 2D 转换 ①....位移改变元素在页面中的位置语法：transform：value A. translate(x) 改变元素在 x 轴的位置 x 取值为正向右移动 x 取值为负向左移动 B. translate(x，y...) 改变元素在 x 和 y 轴的位置 x 取值为正向右移动 x 取值为负向左移动 y 取值为正向下移动 y 取值为负向上移动 C. translateX(x) 元素只在 x 轴上移动 D. translateY...(y) 元素只在 y 轴上移动 ②....缩小：0~1 之间小数 B. scale(x,y) 改变元素在 x 和 y 轴的比例 C. scaleX(x) 改变元素在 x 轴的比例 D. scaleY(y) 改变元素在 y 轴的比例 ③.

2.7K1 0

元素、文字垂直居中

场景设定：让一个50px*50px的Div在一个200px*200px的Div中垂直居中。...、垂直方向或者两个方向上平移元素 scale()、scaleX、scaleY 在水平方向、垂直方向或者两个方向上缩放元素 skew()、skewX、skewY 在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度...transform-origin属性的值值说明指定元素x轴或者y轴的起点指定距离 left、center、right 指定x轴上的位置 top、center、bottom 指定...y轴上的位置通过设置容器的flexbox居中方式 #content { display: flex; align-items: center; /* 垂直居中 */ justify-content...: center; /* 水平居中 */ } 文字垂直居中场景设定：让一个50px*50px的Div在一个200px*200px的Div中垂直居中。

1.7K2 1

前端入门5-CSS弹性布局flex声明正文-弹性布局flex

1.基础概念两根轴线当使用 flex 布局时，首先想到的是两根轴线：主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。...，justify-content 是能控制主轴上的排版，而这个属性则是用于控制交叉轴，通常两个都会一起使用，相互结合，可以达到一些类似页面居中效果。...在交叉轴方向没有设置大小，那么让 items 在交叉轴的方向充满 flex 容器的高度。...align-items (ps：flex 容器设置了 padding，所以 start 和 end 才没有贴靠边界 ) stretch 要能够生效，需要在 items 在交叉轴方向的不设置大小，如上图中主轴是水平方向...场景1: 在页面中把一个元素居中：item 水平、垂直方向都居中 .flex { display: flex;/* 声明这个元素作为 flex 容器 */ flex-direction:

1.2K2 0

2D变形(CSS3) transform

y) 1. 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位 translate 移动平移的意思 translate(50px,50px); 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动...可以改变元素的位置，x、y可为负值； ranslate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY(Y...)仅垂直方向移动（Y轴移动） 2.重点定义2D转换中的移动，沿X轴和Y轴移动元素 translate最大的优点：不会影响到其他元素的位置 translate中的百分比单位是相对自身元素的...scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） scaleX(x)元素仅水平方向缩放（X轴缩放） scaleY(y)元素仅垂直方向缩放（Y轴缩放） scale()的取值默认的值为...)宽和高都放大一倍，相当于没有放大 transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2) transform:(0.5,0.5):缩小

8873 0

Flutter 视图布局（一）

在布局 Widget 中 Row、Column、ListBody、ListView、Wrap、Flow 等都是用于整个页面布局的 Widget，因为这些都支持存在多个子元素，较 html 语言来说，它严格规定了哪些...没关系那我们用传统一点的 x、y 来转换一下：渲染 Row 是行，它是横向的，那么它的主轴是 x 轴，交叉轴是 y 轴。...渲染 Column 是列，它是纵向的，那么它的主轴是 y 轴，交叉轴是 x 轴。这样来说明的话应该可以理解了吧？什么？你说还不明白？我的天呐，怎么会有这样的人？既然这样的话那就别怪我放大招了！...（副）轴的垂直居中对齐，Column 交叉（副）轴的水平居中对齐 stretch 将 Row 子元素拉伸至交叉（副）轴高度相同，Column 子元素拉伸至交叉（副）轴宽度相同 baseline 需要与...用代码作为参考来看：它只影响垂直方向的行为，对水平方向并无影响，即是影响 Row 的交叉（副）轴和 Column 的主轴。

2.6K6 1

CSS-基础样式

0; } 固定定位 .my-content { position: fixed; left: 0; top: 0; } 定位元素层级注意 z-index 设置 -2 以下则在页面中不会显示...*/ text-align: center; /* 居右 */ text-align: right; } 垂直对齐方式 .my-content { /* 元素放置在父元素的基线上...Y、Z轴顺时针旋转40度 */ transform: rotateX(40deg) rotateY(40deg) rotateZ(40deg); /* 沿着X、Y、Z轴偏移100px....my-content { /* 内容溢出，出现x、y轴滚动条 */ overflow: auto; /* 内容溢出，隐藏溢出元素 */ overflow: hidden...; /* 内容溢出，出现x轴滚动条 */ overflow-x: auto; /* 内容溢出，出现y轴滚动条 */ overflow-y: auto; }

6643 0

【CSS】CSS 背景设置 ③ ( 背景位置-长度值设置 | 背景位置-长度值方位值同时设置 )

轴方向 10 像素 , y 轴方向 50 像素 ; 在水平方向上 , 背景图片距离盒子左边界有 10 像素 , 在垂直距离上 , 背景图片距离盒子上边界有 50 像素 ; /* 设置背景位置 - x 轴方向...x 轴方向 50 像素 , y 轴方向 10 像素 ; 在水平方向上 , 背景图片距离盒子左边界有 50 像素 , 在垂直距离上 , 背景图片距离盒子上边界有 10 像素 ; /* 设置背景位置 -...x 轴方向 50 像素 , y 轴方向没有设置 , 则在垂直方向上默认为居中 ; /* 设置背景位置 - x 轴方向 50 像素 , y 轴方向垂直居中 */ background-position:...50px center : 粉色区域是盒子的区域 , 图片背景位于盒子位置 x 轴方向 50 像素 , y 轴方向垂直居中 ; /* 设置背景位置 - x 轴方向 50 像素 , y 轴方向垂直居中...: 50px;*/ /* 设置背景位置 - x 轴方向 50 像素 , y 轴方向垂直居中 */ background-position: 50px center; /* 设置背景位置

2.8K2 0

CSS3笔记

2D转换 transform: translate(X,Y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 rotate()方法，在一个给定度数顺时针旋转的元素。...scale(X,Y)方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 skew() 方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜...否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。...flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。...center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

3.6K3 0

Android字体渐变效果

文字居中可以用两条辅助线，水平线与垂直线。然后在来看文字是否居中。代码 ⚠️ 底部会给出完整代码。这里看思路即可，不用复制代码。...*/ canvas.save(); //绘制文字X轴的位置【文字开始的位置】 float textX = viewWidth - textWidth / 2; //绘制文字Y轴的位置...– 这部分的像素点只在屏幕上绘制了一次。...蓝色 – 1次过度绘制– 这部分的像素点只在屏幕上绘制了两次。绿色 – 2次过度绘制 – 这部分的像素点只在屏幕上绘制了三次。...粉色 – 3次过度绘制 – 这部分的像素点只在屏幕上绘制了四次。红色 – 4次过度绘制 – 这部分的像素点只在屏幕上绘制了五次。

1.2K1 0

前端面试题归类-css

就可以让子元素不定宽高水平垂直居中了。文字在垂直和水平方向重叠的两个属性分别是什么？垂直方向：line-height。...flex-start 默认值从头部开始如果主轴是x轴，则从左到右flex-end 从尾部开始排列(但元素的顺序还是从左到右)center 在主轴居中对齐(如果主轴是x轴则水平居中)space- around...nowrap 默认值，不换行wrap 换行●align-content :设置侧轴上的子元素的排列方式(多行)设置子项在侧轴.上的排列方式并且只能用于子项出现换行的情况(多行) , 在单行下是没有效果的...,再平分剩余空间stretch 设置子项元素高度平分父元素高度●align-items :设置侧轴上的子元素排列方式(单行)该属性是控制子项在侧轴(默认是y轴).上的排列方式在子项为单项(单行)的时候使用...弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。如何让DOM元素不显示在浏览器的可视范围内？

1.6K4 0

鸿蒙应用开发从入门到入行 - 篇2:HarmonyOS开发快速基础入门

如图，左上角为坐标轴起点（原点），从左至右为X轴，从上至下为Y轴然后在Column布局容器里，因为默认情况下Column是让子组件从上往下排列，所以把y轴这根轴称之为主轴，x轴称之为交叉轴默认情况下，Column...会让子组件在主轴方向，默认是从起点开始排列对齐，而在交叉轴方向是默认居中因此，我们会发现上述案例两个Text，在Y轴最顶端（因为Y是主轴），在X轴居中（因为X是交叉轴）能否修改子组件在主轴、交叉轴上的排列呢...如何让上述案例两个文字，无论垂直还是水平方向都居中呢？...Row的主轴是X轴，交叉轴是Y轴设置主轴方向的排列方式通过上图发现，属性依然叫justifyContent，取值依然是HorizontalAlign的六个值，效果一样，只不过变成了在x轴（水平方向排列）...，首尾子组件在主轴起点和终点也有间距且间距相等alignItems：设置子组件在交叉轴排列方式（用在Row代表设置垂直方向）VerticalAlign.Start：子组件在水平方向起点对齐VerticalAlign.Center

2781 0

初识flex布局

flex-direction,flex-wrap 主轴与侧轴在flex布局中，分为主轴和侧轴两个方向，也叫做行和列，x轴和y轴默认主轴方向是x轴水平向右默认侧轴方向是y轴垂直向下 flex-direction...flex-start 默认值从头部开始，如果主轴是x轴侧从做到右 flex-end 与flex-start相反 center 在主轴居中对齐（如果主轴是x轴侧水平居中） space-around 平分剩余空间...（单行）* stretch默认，使子元素的高度拉伸填充父容器（在子元素不指定高度的情况） flex-start顶部对齐 flex-end底部对齐 center垂直居中 flex-warp控制是否换行 nowwap...flex-direction:row stretch使子元素的高度拉伸填充父容器（在子元素不指定高度的情况） center垂直居中 flex-start顶部对齐 flex-end底部对齐 space-between...默认自动 flex flex-grow和flex-shrink的复合属性,简单理解为占多少份 anign-self：设置单个子元素的对齐方式值描述 center 垂直居中 flex-start 顶部对齐

7321 0

CSS笔记

CSS笔记 link rel=”stylesheet” href=”文件名” margin:0px auto;（块级元素居中）和width：的组合写2个数：第一个代表上下，第二个代表左右写3个数:第一个代表上...scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。...skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。...x轴重复) repeat-y(y轴重复) background-position:（x,y）设置背景的坐标，偏移量定位布局(position：) position：static:静态定位 (没有改变他们的位置.../在x轴重复排列/ background-repeat : repeat-y; /在y轴重复排列/ 指定背景位置 background-position : 90% 90%; /背景图片x与y轴的位置

7711 0

移动开发-Flex布局

flex-direction 和 flex-wrap flex-direction 设置主轴的方向: 主轴与侧轴: 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x 轴和y...flex-end 从尾部开始排列 center 在主轴居中对齐（如果主轴是x轴则水平居中） space-around 平分剩余空间 space-between 先两边贴边再平分剩余空间（重要） flex...-设置子元素是否换行: 默认情况下，项目都排在一条线（又称”轴线”）上。...（默认是y轴）上的排列方式在子项为单项（单行）的时候使用属性值说明 flex-start 从上到下 flex-end 从下到上 center 挤在一起居中（垂直居中） stretch 拉伸（默认值...） align-content 设置侧轴上的子元素的排列方式（多行）: 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的属性值说明 flex-start

1.3K1 0

css面试点四：css3弹性盒子模型-flex布局详解

flex容器有两根轴:水平主轴就是x轴(main axis)和竖直轴也是y轴(cross axis) 采用Flex布局的元素，被称为Flex容器(flex * container)，简称“容器”。...>; } justify-content属性：定义项目在主轴上的对齐方式。...space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline; } align-items属性：定义在交叉轴上的对齐方式...所以，容器必须设置flex-wrap：···；项目的属性：设置在项目上的属性也有6个。...如果所有项目都为0，则当空间不足时，项目撑破容器而溢出。 flex-basis属性：定义在分配多余空间之前，项目占据的主轴空间。默认值为auto，浏览器根据此属性检查主轴是否有多余空间。

1.5K2 0

Flexbox布局指南

Flexbox布局按照宽和高涉及的基本概念名称有main axis(主轴)和cross axis(交叉轴，和主轴垂直)，主轴起点边称为main start,主轴终点边称为main end，交叉轴起点边称为...cross axis（和主轴垂直交叉的轴）:与主轴垂直的轴称作交叉轴。...诚然，其它的布局系统会很快的补充上 flexbox——比如 grids 和 regions，但这种称述并不完全准确。CSS 不是语义化的，没有哪一个 CSS 特性就是固定做某件事情的。...正如我们看到的，flexbox 解决了设计者在布局上正面临的诸多问题。...来看一个实际例子：首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后通过margin偏移的方式来实现。

1.8K7 0

flex水平居中垂直居中属性的记忆方式

今天在群里聊天有人说 flex的那几个居中属性好难记，时不时都要尝试一下，或者查看一下文档，现在我把我自己的记忆方式分享一下。。。...总结 justify-content主要是针对主轴（水平轴，x轴，row）上的居中方式 align-items主要是针对交叉轴（垂直轴，y轴，column）上的居中方式 align-content是针对多行的时候交叉轴...（垂直轴，y轴，column）上的居中方式（在单行显示时align-content: center一点效果都没有，但是今天发现Mac上的Chrome76竟然有效果，但是单行在旧版和其他浏览器还是无效的，...记忆方式 justify-content 的两个单词开头字母为 jc即警察的意思，我们看过X战警，因此是针对x轴的居中；警察肯定有肌肉（row），所以也可以理解为是row上面的居中方式；警察也是一个国家的主要...，I明显是竖直的，所以代表Y轴上的居中方式; 我比较喜欢交叉爱的记忆。

2.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭