首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用这种技巧,可以大大地提高前端布局效率

使用百分比的 wrapper 我收到了有关使用百分比宽度(如max-width:90%)用于包装器不是使用padding-left和padding-right的答复。...我经常可以到直接在 'wrapper' 使用百分比宽度,如max-width: 90%。不是使用padding-left和padding-right。 ?...,但我更喜欢自己添加padding,不是依赖于百分比宽度。...问题是,当要将wrapper内的内容放置grid中时,该怎么办? 我们直接在 wrapper 添加 display: grid ? 我不建议您这样做,因为这与关注点分离的概念背道而驰。...内容紧贴边缘 由于左侧和右侧没有padding,因此内容粘在边缘。 这对用户是不友好的,因为使内容浏览变得更加困难。 ? 大屏幕的行长 大屏幕,由于行长太长,段落文本可能很难看清。

3.9K20

【移动端网页布局】流式布局案例 ② ( 实现顶部固定定位提示栏 | 布局元素百分比设置 | 列表样式设置 | 默认样式设置 )

一、样式测量及核心要点 1、样式测量 京东手机端 https://m.jd.com/ 顶部提示 使用京东 APP 打开网页的提示 , 是通过 固定定位 放置顶部的 , 当向上滑动界面的时候 , 该...关闭按钮 和 LOGO 按钮 包含两个图片 , 要为图片设置宽度 , 以及对齐方式 ; 这里特别注意 , 默认的图片对齐方式是基线对齐 , 只要不是基线对齐 , 随便设置 顶部 / 底部 / 中部 对齐都可以实现图像居中...: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中 */ text-align...font-size: 14px; /* 如果是苹果就是用苹果默认字体 如果不是苹果手机 就使用后啊面的字体 */ font-family: -apple-system...: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中 */ text-align

2K10
您找到你想要的搜索结果了吗?
是的
没有找到

【CSS】1287- 一行 CSS 实现 10 种强大的布局

这是营销网站的常见布局,例如,可能有一行 3 个项目,通常带有图像、标题,然后是一些描述产品某些功能的文本移动设备,我们希望它们能够很好地堆叠,并随着我们增加屏幕尺寸扩展。...您再次使用 repeat ,但这次使用 auto-fit 关键字不是显式数值。...这可以自动放置这些子元素。这些子元素的基本最小值为 150px ,最大值为 1fr ,这意味着较小的屏幕,它们占据整个 1fr 宽度,当它们达到 150px 宽度时,它们开始流到同一条线上。...对于这些卡片,它们被放置 Flexbox 显示模式中,使用 flex-direction: column 方向设置为 column。 这会将标题、描述和图像块放在父卡片内的垂直列中。...然后,应用 justify-content: space-between 第一个(标题)和最后一个(图像块)元素锚定到 flexbox 的边缘,并且它们之间的描述性文本以相等的间距放置到每个端点。

4.6K20

解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)

接下来我们具体说明一下这三个方法的简单使用。 一、代码初始化     我们基于如下这段HTML代码,id='content'的div元素id='box'的div张垂直居中。...这段代码本质做了这样几件事情:先把这个元素的左上角放置视口(或最近的、具有定位属性的祖先元素)的正中心,然后再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半),从而把元素的正中心放置视口的正中心...与常人的直觉不符的是,1vw 实际上表示视口宽度的 1%,不是 100%。        2)  与 vw 类似,1vh 表示视口高度的 1%。        ...五、绝对定位结合translate()方法 (不确定宽高的情况下)  使用绝对定位top和left设置为50%,再将元素本身使用translate分别沿着x和y轴移动-50%,此方法可以不知道div...虽然没有垂直居中效果,但也是完全可以接受的。   Flexbo 的另一个好处在于,它还可以匿名容器(即没有被标签包裹的文本节点)垂直居中

1.7K70

【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 字体 粗细 斜体 颜色 对齐 | CSS 标签显示模式 - 块级元素 行内元素 行内块元素 ) ★

一、CSS 字体文本样式 1、CSS 字体设置 CSS 字体设置 : 大小设置 : font-size 属性值 的单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ; font-size...em ; 百分比 ; line-height: 24px; 文本垂直居中 : 设置 行高 = 高度 样式 , 文本即可在 盒子模型 中 垂直居中 ; div { height: 200px;...属性值如下 : em 值 : 字符宽度倍数 , 如果在 汉子段落 设置 2em , 就是首行缩进 2 个汉字 ; 推荐使用 ; px 值 : 指定 缩进像素值 , 不常用 ; 百分比值 : 指定...指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ; 块级元素 : div 标签 独占一行显示 , 对应 块标签 ; 行内元素 : span 标签可以 一行放置多个进行显示...块级元素 和 行内元素 ; 2、行内元素 行内元素 可以 一行中 同时放置多个 , 常见的行内元素有 : 链接标签 : 行内标签 : 文字相关标签 : , ,

22510

CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)

一、px,em,rem,vw的简单介绍 ? 1、px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。...如果使用em的话,有个好的建议,就是body的font-size设置成62.5%,也就是16px * 62.5% = 10px。这样的话1em = 10px,方便我们计算。...这样有个很大的有点就是使用rem后不会受到对象内文本字体尺寸的影响,而且只需要改变根元素就能改变所有的字体大小。...和百分比不一样的是,vw始终相对于可视窗口的宽度,百分比和其父元素的宽度有关。 vh就是可视窗口的高度了。...所以我们可以根元素设置vw和vh,然后根元素上限制最大最小值,然后配合body设置最大最小宽度。

1.6K10

居中那些事情

文本垂直居中 文本垂直居中 单行的时候 line-height: 30px; height: 30px; 如果是多行,那么可以考虑这样子 padding: 30px 0; 这样上下间距一样了,多行无压力...class="wrap0"> 我好 2 容器比较大,但容器和图片宽高是不固定的,那么图片需要如何做自适应处理呢 水平方向上,依然还是使用内联元素文本居中方式就可以实现...垂直方向上,其实可以想想如果是文本是否还有其他垂直居中方式,vertical-align,让行内元素居中对齐。...,如何来做居中处理呢 首先来看看水平方向上如何处理 默认内容放置容器中,内容和容器左边是对齐的,那么理论是内层容器需要向左移动,才能实现对齐。...实际是不行的,margin-top的值是基于父元素的宽度来计算的,不是基于高度。所以。。。。 我们也可以通过一些特殊的方式去改变计算方式。

74630

CSS进阶知识

回流:当页面中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流,就是页面第一次加载的时候。...,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。...块级元素可以继承的属性 text-indent、text-align 浏览器默认属性值问题   由于各浏览器对于HTML标签都存在预设值,所以为了让我们设计的页面不同的浏览器显示效果相同,就需要用...: 0 auto; //子元素margin:auto;或者margin:0 auto;均可 } /* 也可用于多行文本垂直居中,直接编写文本即可。...设计哲学 RWD 常用绝对单位 px pt 常用相对单位 % (以父节点为基准的百分比) em (预设 16px) rem (root em,预设 16px),我们也可以通过 html { font-size

19810

居中那些事情

文本垂直居中 文本垂直居中 单行的时候 line-height: 30px; height: 30px; 如果是多行,那么可以考虑这样子 padding: 30px 0; 这样上下间距一样了,多行无压力...class="wrap0"> 我好 2 容器比较大,但容器和图片宽高是不固定的,那么图片需要如何做自适应处理呢 水平方向上,依然还是使用内联元素文本居中方式就可以实现...垂直方向上,其实可以想想如果是文本是否还有其他垂直居中方式,vertical-align,让行内元素居中对齐。...,如何来做居中处理呢 首先来看看水平方向上如何处理 默认内容放置容器中,内容和容器左边是对齐的,那么理论是内层容器需要向左移动,才能实现对齐。...实际是不行的,margin-top的值是基于父元素的宽度来计算的,不是基于高度。所以。。。。 我们也可以通过一些特殊的方式去改变计算方式。

1.1K100

前端学习(7)~css学习(一):字体属性和文本属性

本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position、float、overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是CSS中不一样...盒子模型的padding,绝对不是直接作用在文字的,而是作用在“行”的。 为了严格保证字在行里面居中,我们的工程师有一个约定: 行高、字号,一般都是偶数。...如何让单行文本垂直居中 小技巧:如果一段文本只有一行,如果此时设置行高 = 盒子高,就可以保证单行文本垂直居中。这个很好理解。 上面这个小技巧,只适用于单行文本垂直居中,不适用于多行。...如果想让多行文本垂直居中,还需要计算盒子的padding。...list-style-position 设置何处放置列表项标记。参阅:list-style-position 中可能的值。 list-style-image 使用图像来替换列表项的标记。

1.8K20

前端入门学习--CSS

padding: 10px; } 文本居中对齐 如果仅仅是为了文本元素内居中对齐,可以使用 text-align: center; .center { text-align: center...使用CSS你可以转换成好看的导航栏不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的。我们的例子中我们将建立一个标准的HTML列表导航栏。...鼠标移动到div 时显示提示信息。提示文本放在内联函数上(如 span) 并使用class=”tooltiptext”。...显示的图像将是我们CSS中指定的背景图像宽度:46px;高度:44px; - 定义我们使用的那部分图像background:url(img_navsprites.gif) 0 0;定义背景图像和它的位置...屏幕和纸上的文件不同,通常需要一个更大的字体,sans - serif字体比较适合在屏幕阅读,serif字体更容易纸上阅读。

27.6K20

关于 vertical-align 你应该知道的一切

如上图所示,第一个元素基线是子元素”文本“的基线,第二个是盒子的底边缘,默认基线对齐,两个元素基线位置不一致,所有会产生上图现象,知道了原因,我们只需设置元素的 vertical-align 属性为...) img 设置浮动或者绝对定位 (如果布局允许的话) Demo 2:近似垂直居中 x <...如图所示(为了更明显我使用了色块来标识),当子元素(图片)设置了 vertical-align:middle,并不是绝对居中只能说是近似居中。...2、“空白节点” 可以受具有继承特性的 CSS 属性影响,于是,我们可以通过其他东西来做调整,让字符的中线和字符内容中心线在一起,或者说一个位置就可以了。...那如果父级的高度是随着内容的变化变化的怎么办?此时无法给父级设置一个特定的值,也不能使用百分比,因为 line-height 是根据字体的大小来计算的。

2.6K20

常见的几种 CSS 水平垂直居中解决办法

水平垂直居中主要包括三类:基本文本类,图像类,其他元素类 但,也是由一些方法可以实现的,下面就来谈谈了解到的10中方法。...二、使用 vertical-align 加上这个属性,不过line-height也不能丢 如果不加上那个line-height的属性的话,div会认为你vertical-align的是默认高度,不是自定义设置的高度...三、把容器当作表格单元 table可以设置vertical-align,自然能实现居中,所以我们可以模拟出一个table 使用display:table和display:table-cell的方法,前者必须设置父元素...,后者必须设置子元素,因此我们要为需要定位的文本再增加一个元素: html,body,div {margin: 0;padding:...Internet Explorer 6中对父元素进行定位后,如果再对子元素 进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的

1.2K10

从box-sizing:border-box属性入手,来了解盒模型

为了避免这种问题,可以使用属性box-sizing来调整框模型。使用border-box,来框模型更改成这个新的模型。...;                  ②display:flex--允许你处理一些困扰CSS已久的一些传统布局问题,如布置一系列弹性等宽容器或者垂直居中内容(目前,flex布局移动端使用较为广泛);...,并开始可用空间内居中。...②max-width属性的另一个好处是可以容器内的媒体(如图像和视频)控制容器内(响应式图片):             在上述例子中,图像会引起一个问题--起初它的显示正常,但当容器变得比图像更窄时...max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此,当父容器宽度缩小到小于图像的宽度时,图像会一起缩小。

1.5K20

从box-sizing:border-box属性入手,来了解盒模型

为了避免这种问题,可以使用属性box-sizing来调整框模型。使用border-box,来框模型更改成这个新的模型。...padding:2.5px 8px; text-align:center; } ③游览器模拟的320px,375px和414px尺寸下,显示的效果图: 二、盒模型的其他属性...; 那么最终呈现的效果是:当父容器最小和最大宽度限制内时,它将填满整个视口宽度;当父容器超过1280px宽度时,布局保持1280px宽,并开始可用空间内居中。...②max-width属性的另一个好处是可以容器内的媒体(如图像和视频)控制容器内(响应式图片): 在上述例子中,图像会引起一个问题–起初它的显示正常,但当容器变得比图像更窄时...max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此,当父容器宽度缩小到小于图像的宽度时,图像会一起缩小。

1.2K10

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

后果是支持它的网页该属性正常展示,不支持它的网页该属性不生效,但也不影响用户的基本使用。...设计师想要的 retina 下 border: 1px,其实是 1 物理像素宽,不是 1 CSS 像素宽度,对于 CSS 而言: dpr = 1 时,此时 1 物理像素等于 1 CSS 像素宽度;...通常可以,有一些通用的优化手段: 消除多余的图像资源 尽可能利用 CSS3\SVG 矢量图像替代某些光栅图像 谨慎使用字体图标,使用网页字体取代图像中进行文本编码 选择正确的图片格式 为不同 DPR...完整的一个字体资源实在太大了,所以我们应该尽可能的使用用户设备已有的字体,不是额外去下载字体资源,从而使加载时间明显加快。...它也表示一个系列不是某一款单一字体。使用 font-family: Segoe UI 可以 Windows 平台及 Windows Phone 上选取最佳的西文字体展示。

3K32

CSS属性汇总--(6) 定位属性3

对于相对定义元素,如果 top 和 bottom 都是 auto,其计算值则都是 0;如果其中之一为 auto,则取另一个值的相反数;如果二者都不是 auto,bottom 取 top 值的相反数。...允许指定负长度值和百分比值。这会使元素降低不是升高。表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。          该属性有以下几种可选值: baseline   默认。...元素放置父元素的基线上 sub           垂直对齐文本的下标。...super        垂直对齐文本 top            把元素的顶端与行中最高元素的顶端对齐 text-top     把元素的顶端与父元素字体的顶端对齐 middle      把此元素放置父元素的中部...Js语法:object.style.zIndex="1" 下面的例子演示了z-index 用于一个元素放置于另一元素之后。

1.8K20

用AI快速生成一个网页(名侦探柯南~灰原哀主题网页),适合大学生web期末大作业

该类元素的宽度设置为 1300px,高度设置为 700px,并使用margin: 0 auto;实现水平居中。...通过background属性设置背景图像,并使用center center图像居中显示,no-repeat确保图像不重复,background-size: cover;使图像完全覆盖元素。...此外,确保图片文件正确放置相应的路径中,以便在页面上正确显示图片。成果展示4、创建一个区域,宽1300px高300px,背景是一张图片,内容里面有几行文字,最左侧50px的地方,上下居中。...main-container 元素设置了宽度、高度和背景图片,并使用相对定位来定位其子元素.content。.content 元素使用绝对定位,将其放置左侧 50px 并垂直居中。....footer 元素设置了宽度、高度、背景颜色和文本颜色,并使用绝对定位将其放置主要内容下方 30px 处,且水平居中。请确保 "image-url.jpg" 替换为你实际的背景图片路径。

12010

Web-CSS

---- 取色方式 网页里的颜色,可以chrome的调试模式下获取 其他颜色可以使用QQ的截图软件: 直接按c键,可以复制rgb颜色值 按住shift再按c键,可以复制16进制颜色值 ---- 4.文本...lightblue; height: 200px; } 补充知识点:长度单位 单位 描述 px 设备的像素点 % 相对于父元素的百分比 em 相对于当前元素的字体大小 rem 相对于根元素的字体大小...有时,一些特殊情况下,该值可以使元素居中。...: 1px solid #CCC } ---- 12.浮动 float float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。...---- align-items CSS align-items属性所有直接子节点的align-self值设置为一个组。 align-self属性设置项目在其包含块中交叉轴方向上的对齐方式。

8.5K20
领券