最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。...水平居中直接加上标签即可，或者设置margin:auto;当然也可以用下面的方法 下面说两种在屏幕正中（水平居中+垂直居中）的方法 放上示范的html代码： MAIN 方法一： div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可....main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px...和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。
盒模式是 CSS 中一个重要的概念，即元素在页面所占据的空间位置，盒模型的属性包括：内容 (content)、填充 (padding)、边框 (border)、边界 (margin)，盒模型一共分为两种...W3C 的盒模型很相似，但有一点是非常不同的，这就是：内边距和边框并不被包含在计算的范围内，这就意味着，如果元素也有内边距 padding 和边框 border，那么实际内容区域将会缩小，为它们腾出空间...，无论如何调整，整个容器的结构是固定的，不会改变的；而在标准盒模型中，我们在调整 padding 和 margin 的同时，往往会将容器本身的结构打乱，需要重新设置内容 content 的尺寸 CSS...值 描述 none 让元素隐藏、消失，不占据空间位置 block 让元素呈现块属性特点 inline 让元素呈现行属性特点 inline-block 行内块元素，让元素呈现行元素跟块元素的特性a.块元素的宽度默认由内容决定... 由运行结果可以得知，行元素在水平方向上设置的 padding 生效，竖直方向上的不生效，虽然元素的范围增大了，但是，由于行元素的高度是由内容决定的，所以加了上下 padding 以后会与临近行的元素产生干涉
·在 CSS3 中 : 表示伪类， :: 表示伪元素·想让插入的内容出现在其他内容前，使用::befroe。...flex-shrink：定义项目的缩小比例；默认为1，即 如果空间不足，该项目将缩小；所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；flex-shrink为0：空间不足时，该项目不会缩小...试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。如何让DOM元素不显示在浏览器的可视范围内？...3.超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了解决：改变css 属性的排列顺序L-V-H-ACSS 预处理器Less sassSass、Less...被点击访问过的超链接样式不再具有hover和active了，解决方式是改变CSS属性的排列顺序：L-V-H-A(linked, visited, hover, active)。
固定底部内容 这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。 这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。...使用固定定位，在内容高于窗口高度时，就会挡住我们的内容。 随着CSS3的来临，最完美的实现方式是使用Flexbox。...我的例子里面用了transform: scale(1,1)作为悬停时的图片特效，这个transform是用于改变任何元素的属性的，然后scale是用于放大（整数就会放大）或者缩小（负数就会缩小）元素的。...知识总结 object-fit — CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。...某天在阅览国外的一些前端设计和框架的时候，我突然发现国内多数的前端开发者都不再怎么使用CSS3做出一些很好玩的布局和特效了。
只是在 .masonry 容器中使用的 CSS 不一样； 在 .masonry 中是通过采用 flex-flow 来控制列，并且允许它换行 这里关键是容器的高度，我这里要显式的设置 height 属性，...当然除了设置 px 值，还可以设置100vh，让 .masonry 容器的高度和浏览器视窗高度一样 记住，这里 height 可以设置成任何高度值（采用任何的单位），但不能不显式的设置，如果没有显式的设置...="item"> css 内容 .masonry { width...// item 的 top 值：第一行：top 为 0 // 其他行：必须算出图片宽度在 item 宽度的缩小比例，与获取的图片高度相乘，从而获得 item 的高度 //...window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } } // 页面尺寸改变时实时触发
然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。...不显示对应的元素，在文档布局中不再分配空间（回流+重绘） 该问题会引出 回流和重绘 用CSS实现三角符号 /*记忆口诀：盒子宽高均为零，三面边框皆透明。...如何使用rem或viewport进行移动端适配 rem适配原理： 改变了一个元素在不同设备上占据的css像素的个数 rem适配的优缺点 优点：没有破坏完美视口 缺点：px值转换rem太过于复杂(下面我们使用...overflow属性，或者设置高度 建立伪类选择器清除浮动 //在css中添加:after伪元素 .parent:after{ /* 设置添加子元素的内容是空 */ content: '...CSS预处理器是一种语言用来为CSS增加一些变成的特性，无需考虑浏览器兼容问题，例如你可以在CSS中使用变量，简单的程序逻辑、函数等在编程语言中的一些基本技巧，可以让CSS更加简洁，适应性更强，代码更直观等诸多好处
优点： content 可以动态改变高度(不需在 CSS 中定义)。...这意味着对象必须在 CSS 中指定固定的高度。...div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 追加元素 这种方法，在 content 元素外插入一个 div。.../div> 优点： 适用于所有浏览器 没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现 缺点： 唯一我能想到的就是需要额外的空元素了，可能对于某些强迫症患者来说是不愿意的...缺点： IE(IE8 beta)中无效 无足够空间时，content 被截断，但是不会有滚动条出现 如何让文本水平垂直居中 css居中属性
只是在 .masonry 容器中使用的 CSS 不一样： 在 .masonry 中是通过采用 flex-flow 来控制列，并且允许它换行。...这里关键是容器的高度，我这里要显式的设置 height 属性，当然除了设置 px 值，还可以设置100vh，让 .masonry 容器的高度和浏览器视窗高度一样。... 73 74 css 内容： 1...5 6 //item的top值：第一行：top为0 7 // 其他行：必须算出图片宽度在item宽度的缩小比例，与获取的图片高度相乘，从而获得item的高度 8 //...document.documentElement.clientHeight || document.body.clientHeight 65 } 66 } 67 68 69 70 // 页面尺寸改变时实时触发
在说分辨率的时候我们常常会把大的值说在前面，所以在PC端屏幕宽度比高度的值要大一点，第一个值一般是指的宽度第二个值为高度。 移动端正好相反，手机一般宽度都是小于高度，所以第一个值是宽度。...如果我故意设置操作系统分辨率为512*384（水平和垂直各缩小1倍），那么此时css定义的1px像素的盒子在屏幕中的显示的宽度比原来高分辨率的宽度增加一倍，所以CSS中的像素只是相对，不是绝对的。...也就是说浏览器改变宽高，视口跟着改变。 2.2 移动端视口 在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。...由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。...class="box"> 2.2.4 理想视口(ideal viewport) 所谓的理想视口是： 第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。...介绍下粘性布局（sticky）（网易） 参考回答： position 中的 sticky 值是 CSS3 新增的，设置了 sticky 值后，在屏幕范围（viewport）时该元素的位置并不受到定位影响...亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。...清除浮动的方法 参考回答： clear 清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式：{clear:both;height:0;overflow:hidden;} 给浮动元素父级设置高度...当用CSS给给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。 18. 如何触发重排和重绘？
CSS3教你实现前言 loading效果在实际开发中是很常见的，尤其是在Ajax请求的时候，可以给用户一个很好的交互体验。 CSS3 实现效果 首先我们来看看需要实现的效果。...基本的div元素 基本的div元素是一个小的圆形。 基本的div元素 定义动画 定义的动画主要是改变div的高度，在完成50%的时候达到最高值，完成100%时恢复到原来高度。...loadingC 在loadingA和loadingB中是通过给高度和宽度增加动画实现的，而loadingC是通过给五个div增加纵向位移实现的。...div-2的CSS代码如下所示。 loadingG基本样式 在loadingH中，div-1内有四个div，分别表示转动的四个圆点，也是通过绝对定位计算偏移位置。...结束语 今天这篇文章主要是教大家如何使用CSS3的动画特性去实现loading效果，完全可以不用借助于第三方库，大家也动动手自己实现一下吧。全部代码的话在微信公众号群文件获取！
text-overflow text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择： clip：修剪文本 ellipsis：显示省略符号来代表被修剪的文本 text-shadow...其他的新特性还包括flex弹性布局、Grid栅格布局，这两个布局在以前就已经讲过，这里就不再展示，除此之外，还包括多列布局、媒体查询、混合模式等等… 4....怎么使用 CSS 如何画一个三角形 盒子模型，默认情况下是一个矩形，实现也很简单。...为了让两个盒子高度自动，需要设置: align-items: flex-start 三栏布局 实现三栏布局中间自适应的布局方式有： 两边使用 float，中间使用 margin 两边使用 absolute...盒内元素的高度撑开容器的高度。 优点： 结构简单直观 可以结合 flex的其他功能实现更多效果，例如使用 order属性调整显示顺序，让主体内容优先加载，但展示在中间。
19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 20、对line-height是如何理解的？ 21、元素竖向的百分比设定是相对于容器的高度吗？...CSS盒模型：标准模型 + IE模型 标准模型 div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化 box-sizing:content-box;.../*设置标准盒子*/ 怪异模型|IE模型 div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化 box-sizing:border-box...19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。...1、在css样式表中书写时，id选择符前缀应加"#“，class选择符前缀应加”." 2、id属性在一个页面中书写时只能使用一次，而class可以反复使用 3、id作为元素标签用于区分不同结构和内容
CSS常用实例 web前端开发中，会用到css实现各种网页布局，以下是我列出的几种常见实例，如果本文有错误的地方，也请指正。...-- 表格实现左右布局最简单, 两个td搞定, 这里我就不写详细CSS了。 好处：不用考虑左右内容的高度，两个td的高度始终相同，也不用清除浮动 坏处：但总是感觉这种实现方式比较low，不够优雅。...class="panel"> 三、元素宽高等比放大缩小 相信不少同学在移动端网页开发中，都插入过图片吧，试问一下，你的图片比例是否可以跟随屏幕尺寸的变化而不变？...你肯定会说，我只设置宽度为100%，高度不就自动按比例缩放了嘛？如果是非图片元素，又如何实现等比放大缩小？ 那还不简单嘛？...看下面的margin, padding的设置 效果：屏幕宽度发生变化时，margin-left, padding-top的大小也在随之改变，这样我们就已经实现了元素的等比缩放了 原理：margin,padding
在开始之前我们先了解几种布局 固定布局/弹性布局 固定布局顾名思义，就是一个固定大小的设计，然后让内容在大屏中居中，小屏中有滚动条 body{ width: 1200px; margin...} } 这段css表示的意思就是当前视口至少要有800像素，才会给.container选择器加上对应的css样式，你可以加入很多这样的条件，调整页面显示的最佳尺寸，改变相应的样式，这种行为被称为断点...同时在设计项目的时候，我们可以先完成一个手机端的页面，然后通过断点的方式不断完善pc的展示效果，这种通常被叫做移动优先设计 现代自适应布局 在很久之前，我们经常使用float进行多列布局，但是出现css3...10，添加上对应的样式，同时给每个区块加上对应的名字、颜色和高度（模拟内容的填充），小屏幕上不显示slider的内容 .container { display: grid; grid-template-columns...，并且布局的改动在grid的加成下变得异常简单明了 其实最本质的内容就是对不同的屏幕加载不同的css样式，你也可以使用媒体查询的方式加载css样式 <link rel="stylesheet" type
缩放图片 开始时是一张全屏的图片，在滚动过程中慢慢变成另一张图片，接着这张图片以屏幕正中间为基准点慢慢缩小，在缩小的过程中，这张图是定在屏幕中央的，缩小到一定值的时候，图片随着滚动条滚动。 ?...父元素的高度不能低于 sticky 元素的高度（参考上面原理解释） sticky 元素仅在其父元素内生效（参考上面原理解释） 还有一个不得不提的就是兼容性，我们可以在 `Can I use`[4] 官网看看...我们需要知道什么时候开始进行翻盖或者合盖操作，这个可以让图片在屏幕正中间的时候，让其开始动画。...其他内容 IMG2 // ... 其他内容 预览效果图 ?
CSS 的玩法可与 SKetch 或者 Photoshop 的玩法不一样。 在本文中，我将向你展示如何以统筹全局的思维实现 CSS 布局，根治布局难产的顽疾。...因为 Flex 容器会默认： 把子项排成一行； 让子项与其内容等宽，并 —— 把所有子项的高度拉平为最高子项的高度。 我们可以用 align-items 属性来控制垂直方向的对齐方式。...，并且让子项保持各自的高度。...因为 CSS 在竖直方向上有 margin 坍塌现象。当上下两个 margin 短兵相接时，数值大的 margin 会 “吃掉” 小的。详情参见 CSS 技巧：margin 坍塌。...em 随字号改变而改变，因此可以用 1em 来表达 “我想让文字下方的 margin 和文字的高度一样，不论文字高度是多少”。 现在的效果如下： ? 现在让我们把图片缩小一些，并将其设置为圆形。
, 二倍精灵图设置步骤 : 缩小精灵图 : 在 Firework 中 , 将精灵图缩小一半 ; 测量坐标 : 在缩小一半的精灵图中测量坐标 ; 设置代码 : 将代码中的 background-size...中的垂直居中对齐 - 行高 = 内容高度 ( 总高度 - 边框高度 - 内边距高度 ) 普通盒子模型中 , 设置垂直居中对齐时 , 直接设置 内容高度 = 行高 即可 ; 由于采用的是 CSS3 样式..., 该模式下 , 设置的 height 高度 = 内容高度 + 边框高度 + 内边距 ; 如果要设置垂直居中 , 只能设置其中的 行高 = 内容高度 , 要把 2 像素的边框去掉 ; 因此在该 CSS3...设置行高 = 26 会偏下 上面的设置 高度 不等于 行高 原因是 这是 CSS3 模型 CSS3 中的垂直居中是在 边框 + 内边距 + 尺寸 的总高度中垂直居中...-- 搜索栏提示内容 --> 输入搜索信息 <!
直接设置父元素高度， 弊端:必须知道父元素的高度 (2). 让父元素也浮动 弊端:对后续元素会产生影响 (3)....，取值整数，默认为 1，即空间不足时，等比缩小，取值 越大，容器大小改变时，缩小的越严重 注意:取值为 0，即不缩小 ④. flex-basis 指定项目占据主轴的剩余空间大小，取值为数字 A. auto...父元素的高度如果参照上级元素设为100%,那么在弹性布局时，子元素也参照父元素设为100%,子元素将无法显示，解决方案时将子元素设为固定高度 63....缩小：0~1 之间小数 B. scale(x,y) 改变元素在 x 和 y 轴的比例 C. scaleX(x) 改变元素在 x 轴的比例 D. scaleY(y) 改变元素在 y 轴的比例 ③....位移 改变元素在 z 轴上的位置 语法：transform：translateZ(z) ④. transform-style 定义如何在 3D 空间中呈现被嵌套的元素 A. flat 默认值，子元素不保留其
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
