文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

每天10个前端小知识 【Day 17】

4.CSS 中有哪几种定位方式？ Static 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。...Absolute 绝对定位方式，脱离文档流，不会占用页面空间。...| end | center | stretch; } 属性对应如下： start：对齐单元格的起始边缘 end：对齐单元格的结束边缘 center：单元格内部居中 stretch：拉伸，占满单元格的整个宽度...stretch：拉伸，占满单元格的整个宽度（默认值） 应用场景 文章开头就讲到，Grid是一个强大的布局，如一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的，在以前的文章中，也有使用...作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验； 因此，在整个产品研发过程中，css性能优化同样需要贯穿全程。

11211
您找到你想要的搜索结果了吗？
是的
没有找到

JS:用rem来做响应式开发

但前一个项目做完之后我发现bootstrap虽好，但里面的各种样式我利用的很少，最多用到它排版，当网站最后上传的时候你会发现，即使压缩之后，它也会占用相当大的一部分，所以这次我想自己用原生写，响应式开发...2.媒体查询： 这个是css3中给出的，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样 式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等...（你还可以设置更多节点） 用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围； 3.还有就是css3的单位rem： rem就是将根节点html的font-size的值作为整个页面的基准尺寸...屏幕放大缩小这三个div也同样还在一行等比放大缩小 html 1 2 3 css html{font-size: 20px;} .container

6.1K10

从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

比如：如果设置的列的宽度大于自动计算的列的宽度，那么实际显示的效果以设置的列的宽度为准；如果设置的列的宽度无法填充整个屏幕，那么实际的宽度可能大于设置的宽度； 如果设置的列的宽度小于自动计算的列的宽度...设置列间隙大小*/ column-gap: 50px; /*4.设置列宽 原则：取大优先 1.如果人为设置宽度更大，则取更大的值，但是会填充整个屏幕，意味最终的宽度可能也会大于设置的宽度...--填充满整个屏幕 2.如果人为设置宽度更小，使用默认计算的宽度*/ column-width: 200px; } h4{ /*设置跨列显示：取值：1 / all */...子元素宽度不拉伸*/ } .third{ flex-grow: 2;/*third子元素宽度拉伸，拉伸的宽度占据父元素剩余空间的三分之二*/ } 3.2、flex-shrink 同 flex-grow...flex: [number]：这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例。

4K10

CSS

CSS注释 /*这是注释*/　　　 CSS的几种引入方式 行内样式 　　　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。...display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。...，都会占用你整个页面宽度的空间，看下面 　　　　然后我们看一下display的效果inline-block，高度宽度还可以设置，包含内联和块级标签的属性 　　　　还可以通过display：block...将内联标签改为块级标签的效果 　　　　看效果： 　　　　看效果　　　　 　　　　不占用位置，也不显示 　　　　来吧，大家练习一下，然后再继续学习~~~ CSS盒子模型 　　　　在css里面，...这里显示了个约等的值，别在意昂 　　　　这就看到了浮动的副作用，浮动起来以后脱离了你整个页面文档，然后两个c1的div标签，一个往左靠，一个往右靠，无法撑起自己的父级标签了，也就是那个c1的div标签

1.8K10

CSS盒子（Box）模型入门

CSS .box { background-color: hotpink; color: #fff; } The Content Content非常清晰。...它是具有特定宽度和高度的元素的内容。可以使用CSS属性的高度和宽度设置固定的高度和宽度，也可以由内容本身决定。 ? 现在，有一件事让人有点困惑，那就是使用内联或块级元素。...使用内联和块级元素（Using Inline and Block Level Elements ） 为了刷新您的内存，内联元素和块元素之间的区别在于块元素占用了容器宽度的100%，而内联元素只占用了内容需要的空间量...当使用inline-block时，元素具有内联元素的行为(只占用内容的空间)，但是您可以像使用块元素那样操作它。 现在，当我们有一个块级元素时，我们可以给它一个宽度和高度。...HTML CSS .box { height: 200px; width: 200px; background-color

91720

CSS Grid 那些鲜为人知的内幕

在这个示例中，我们说第一列应该占用1个单位的空间，而第二列占用3个单位的空间。这意味着总共有4个单位的空间，这成为分母。第一列占据了可用空间的1/4，而第二列占据了3/4。...❞ 对比上面两个例子，尽管我们根本没有改变grid-column的配置(grid-column:1 /-1)，虽然列数增加了，但是每个例子中的子项都跨越了网格的整个宽度！...start：将网格与容器的开始边缘对齐 end：将网格与容器的结束边缘对齐 center：将网格置于容器的中心 stretch：重新调整网格项的大小，以使网格填充容器的整个宽度 space-around...我们可以使用 justify-items 属性： start：将项目与其单元格的开始边缘对齐 end：将项目与其单元格的结束边缘对齐 center：将项目置于其单元格的中心 stretch：填充单元格的整个宽度...特定网格子元素」的对齐方式 其值为以下几个： start：将网格项与其单元格的开始边缘对齐 end：将网格项与其单元格的结束边缘对齐 center：将网格项置于其单元格的中心 stretch：填充单元格的整个宽度

10710

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

在CSS中实现 wrapper 目前我们已经了解了wrapper基础知识和优点，接下来我们来具体的看看在 CSS 如何使用它。 设置宽度 ? 实现wrapper第一件事就是要确认它的宽度。...-- Content --> 不建议这样做，因为wrapper元素可以在另一页上使用，这可能会无意间破坏布局。...在其中，wrapper可防止内容占据视口的整个宽度。 ? 主内容需要添加 wrapper 吗？ 这要看情况。 让我们探讨两种最常用内容区间的设计。 第一个以其内容为中心，并受特定宽度限制。 ?...在上面的示例中，你可能需要让标题扩展到整个页面的宽度，而不是受wrapper宽度的限制。...流动背景，固定内容 Lea Verou 在她的《CSS Secrets》一书中介绍了一种有趣的技巧，该技巧可用于流动背景（占据整个视口宽度）且内部带有wrapper部分。 让我们回顾一下常见的做法。

3.9K20

寒假提升 ｜ Day6 CSS 第四部分

写出案例，证明CSS属性的继承性 当给父元素div(类名为box)设置font-size,color,text-align这些属性时,由于这些属性具有继承性,所以该父元素下的所有子元素(p,span,div...可以和其他行内级元素在同一行,不可以设置宽度和高度,宽度和高度由内容决定 inline-block：让元素同时具备行内级、块级元素的特征 ;可以和其他行内级元素在同一行,可以设置宽度和高度,默认宽度和高度由内容决定...:hidden 会占据元素应该占据的空间 rgba设置颜色,将a的值设置为0 rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素 opacity设置透明度, 设置为0 设置整个元素的透明度...padding、border都布置在width、height外边 border-box padding、border都布置在width、height里边 box-sizing: content-box 元素的实际占用宽度...= border + padding + width 元素的实际占用高度 = border + padding + height box-sizing: border-box 元素的实际占用宽度

1.3K20

详解瀑布流布局的5种实现及oject-fit属性，附源码

设置宽或高 100% 因为图片其本身的独特性： 不设置宽高的情况下会按原有的尺寸显示在网页中。即有多大，显示多大。 在非等比缩放的情况下会被拉伸变形。 设置宽度或者高度时，会保持原宽高比进行缩放。...不不不，这才是刚刚开始，精彩的还在后面。后面的布局才更加精彩。 多图片的布局 上面一直在说的都单张图片的显示。只要我们把图片用合适的方式放进容器即可。如果是图片列表呢？...CSS3 column 属性 关键思路： column-count：指定列数 column-gap: 设置列之间的间距 关键代码： <div class="waterfall-width-column...Flex布局 首先给图片一个固定高度，然后利用flex-grow的比例分配的特性 给图片设定object-fit属性让其保持比例充满容器 .waterfall-height-css { display: flex

1.2K20

前端之CSS

例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。当浏览器读到一个样式表，他就会按照这个样式表来进行文档如何进行格式化（渲染）。...CSS注释 /*这是注释*/ # 注释是代码之母 CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式，不推荐大规模使用....id="i1">2 3 外部样式 外部样式就是讲css写在一个单独的文件中，一般以.css结尾，就叫css文件，然后在html页面进行引入即可...display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。...display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 Example1 <!

1.5K60

全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)

(多列布局), 以及最后再了解一下CSS 表格布局（它是传统的布局方式，在当前开发中不建议使用，我们简单了解即可）等技术进行讲解。...column-rule-width：设置分割线宽度 # Table 布局 display: table (不建议，简单了解) display: table-row-group ：该元素的行为类似于...温馨提示: fr 单位 分配的是可用空间而非所有空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。...，让网格自动创建很多列来填满整个容器 */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 所有行都位于隐式网格内...grid-row: 2; } /* 占用第2行，三列 */ aside { grid-column: 1; grid-row: 2; } /* 占用第3行，一到四列 */ footer {

26620

那些与 IE 相伴的日子

然而安装的虚拟机比较占用空间，这个时候，借用另一台 Windows 系统的电脑，访问 Webpack (https://webpack.docschina.org/) （或其他编译打包器）配置的局域网下的页面地址...当我设置图片标签的 src 的时候， IE 浏览器自动将原图片的宽、高设置成了 的属性，这样导致我使用 CSS 只设置宽度为 1200px 而没有设置高的时候， 的生效高度便是原图的高度...IE 情况下，使用 8 位色值，不但最后两位的不透明度无法生效，反而整个颜色设置都不能生效，下面是一个简单的 Demo 来模拟这种情况，标题的颜色设置不生效，所以呈现出默认的黑色状态。 ? ? ?... 4 等分 4 等分 4 等分 4 等分 CSS 代码 .wrapper-2 { height: 100px;

96920

水平垂直居中深入挖掘

CodePen Demo -- Centering in CSS 居中多个元素 对于如下稍微复杂点的结构： ...，如果不手动添加边距(margin 或者 gap)，会贴在一起 不限制方向的话，flex 默认是水平排列，grid 是竖直排列 非常重要的一点，grid 布局下的子元素的宽度，所有子元素的宽度会被强行拉伸至最宽的一个子元素的内容的宽度...CodePen Demo -- Centering in CSS 3 margin: auto 由于需要均分剩余空间，所以表现并不好，无法按照我们设想的 5px 宽度进行间隔 让元素多到溢出 OK，接下来...，我们让内容再多一点，多到溢出整个容器，看看有什么不一样。...最后 本文知识点比较细，也表明 CSS 虽然简单，但是不代表它容易。我们日常工作中用到的很多属性其实还有很多细节可以挖掘深入。

97420

容器查询 cqw 和 CSS 数学函数 max

我们实现了这样一种效果： 文本内容不超过容器宽度，正常展示 文本内容超过容器的情况，内容可以进行跑马灯来回滚动展示 像是这样： 但是，之前的方案，有一个很明显的缺点，如果我们事先知道了容器的宽度，那么没问题...，但是如果没法确定容器的宽度，也就文本宽度不确定，容器宽度也不确定的话，那么整个效果会有一点瑕疵。... 其中，div 为容器，span 为文本内容。同时，我们利用容器查询，设置父容器 marquee 为容器查询的容器，并且将基于容器的inline-size 维度。...那么： width: 100% ，对于 span 行内元素而言，其文本长度就是其整个的宽度，100% 代表的就是文本内容的长度 width: 100cqw 表示的是设置了容器查询的 .marquee 的宽度...marquee { to { transform: translateX(min(100cqw - 100%, 0px)); } } 效果如下： 这样，到今天，我们可以轻易的实现： 文本内容不超过容器宽度

1.4K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券