可以通过下面这个公式将像素转换为em：px/16=em 链接样式 a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active...，遵循正常的文档流对象。...重叠的元素 z-index属性指定了一个元素的堆叠顺序 一个元素可以有正数或负数的堆叠顺序 overflow 属性用于控制内容溢出元素框时显示的方式。 值 描述 visible 默认值。...auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。...元素居中对齐 元素水平居中margin: auto; 文本水平居中text-align: center; 垂直居中 - 使用 line-height 垂直居中 - 使用 position
引言 在网页布局中，经常会涉及到将一个元素固定放置在某些位置的操作： 或者把某些元素固定在页面某个位置，不会随着网页滚动而滚动。 以上效果，标准流做不到，浮动也无法轻易做到。...概述及分类 定位：将元素固定在某一位置，又称为摆放元素。...作用：在定位中摆放元素 准备代码： 常见偏移样式（标准流和浮动无法设置偏移） 总结： 1 、 标准流和浮动无法设置边偏移 2 、 相对定位的边偏移，是 相对于 元素原先在标准流中的位置...祖父和父都存在定位（相对、绝对、固定）时，子元素边偏移从 最近父元素 的左上角开始 4 、 为了布局方便，更多采取： 子绝父相 6. ...但无法解决垂直居中问题，只能不断设置 margin 来解决，不但费时费事，而且无法动态改变。
display：none 隐藏元素本身，隐藏后的元素不占有位置 ---- 垂直方向居中： 第一种： 第二种：left: 50% 第三种...: hidden 无论是否溢出，都显示滚动条overflow: scroll 根据是否溢出，自动显示或隐藏滚动条 overflow: auto white-space: nowrap;（设置文字在一行显示...这张大图片称之为精灵图 减轻服务器的压力，提高页面加载速度 ---- 背景图片大小：background-size background-size：宽度 高度 /百分比 contain 等比例缩放 cover 将背景图片等比缩放...translateY(-50%) 行内元素、行内块元素、并列关系的垂直居中对齐 设置vertical-align: middle ---- 垂直的用法： 文本框和表单按钮无法对齐 input和img无法对齐...div中的文本框，文本框无法贴顶问题 div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题 使用line-height和vertical-align: middle 让img标签垂直居中问题
fixed 固定定位，相对于浏览器窗口进行定位 静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。...在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。...相对定位relative 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。 注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。...绝对定位的盒子水平/垂直居中 普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了 定位的盒子也可以水平或者垂直居中，有一个算法。
一、居中 1. 居中对齐元素 将块元素水平居中对齐(像 ) , 使用 margin: auto; 设置元素的宽度将阻止它伸展到容器的边缘。...然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间： 这个div是居中的。...居中对齐文本 将元素内部的文本居中, 使用text-align: center; 这些文本是居中的。...这似乎是一条为滚动条预留空间. 因此，总是声明 !...solid #73AD21; padding: 10px; } 提示： 当将元素使用浮动对齐时，总是为body元素定义边距和填充。
margin 和 auto 关键字 对于margin，最常见的用例是将已知宽度的元素水平居中。 请考虑以下示例： ?...这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。 我们可以使用下面方法让具有绝对定位元素居中： 设置的宽度和高度。...但是，在多语言网站上工作时要当心颠覆这些价值观。 更好的是，使用flexbox或grid属性，以防使用它们完成工作。 如果没有，那么请使用自动页边距作为最后的选择，而应使用CSS逻辑属性。...overflow 属性 当我们有一个元素时，我们应该考虑它应该包含的最小和最大内容。如果内容超过了最大值，那么我们需要显示一个滚动条。
right 右侧偏移量，定义元素相对于其父元素右边线的距离 # 静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。...所谓静态位置就是各个元素在HTML文档流中默认的位置。 在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。...# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...可以将元素的定位模式设置为绝对定位。...固定定位完全脱标，不占有位置，不随着滚动条滚动。 # 叠放次序（z-index） 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
overflow: auto; -webkit-overflow-scrolling: touch; 4.修改滚动条样式 隐藏 div 元素的滚动条 div::-webkit-scrollbar...边角，即两个滚动条的交汇处 div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大...，父级元素使用 overflow-hidden 截掉滚动条部分。...visibility-hidden：元素隐藏，但元素仍旧存在，页面中无法触发该元素的事件。...实例化后返回一个新的对象，当我们对这个新的对象进行操作时就会调用我们描述中对应的方法。
，如果元素没有已定位的父元素那么它的位置相对于 static(默认的静态定位)，即没有定位，遵循正常的文档流对象，静态定位的元素不受top、left、right、bottom影响。...relative(相对定位)，其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。 fixed，元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 浮动 clear 指定不允许元素周围有浮动元素。...left right none 布局-水平&垂直对齐 要水平居中对齐一个元素(如 ), 可以使用 margin: auto; 文本在元素内居中对齐，可以使用 text-align: center; 导航栏
因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。...content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 追加元素 这种方法，在 content 元素外插入一个 div。...例如：窗口缩小) content 不会被截断，滚动条出现 缺点： 唯一我能想到的就是需要额外的空元素了，可能对于某些强迫症患者来说是不愿意的(这个方法的应用应该也很广) 设置宽度 这个方法使用了一个 position...但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。...缺点： IE(IE8 beta)中无效 无足够空间时，content 被截断，但是不会有滚动条出现 如何让文本水平垂直居中 css居中属性
在实际的工作中，我们用到了哪些标签，就给那些标签进行重置内外边距。...2.制作翻转按钮效果：将两张图片进行合成； 八、CSS技巧 [1]:让盒子水平居中，只需将盒子的左右外边距margin设置为auto，即margin:5px auto； [2]:让盒子的中的内容垂直居中...[5]:CSS常见布局方式：一行一列居中、一行两列居中、两行两列、三行两列、三行三列. [6]:当父元素没有指定高度并且子元素有浮动时，这个父元素的高度不会自动增加....[7]:在给盒子的父盒子加居中时，一定要有宽度才能使得父盒子居中....auto(在必须时对象内容才会被裁切或显示滚动条) hidden(不显示超过对象尺寸的内容) scroll(总是显示滚动条) 2.Zoom
如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。即我们不设置宽，会自动填满整个横向宽度，如下： 但是高度的计算方式完全不一样。...事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。...因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。...即父元素的高度只是一个缺省值：height: auto;我们设置height：100%时，是要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。...全部代码如上，可以看到设置了line-height为100%没有居中，这是为什么呢，因为这时候的%是相对于字体尺寸的？所以直接作用于没有绝对高度的元素是不行的。
第一类：属性值 true或者 false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中...android:layout_centerInparent 相对于父元素完全居中 android:layout_alignParentBottom 贴紧父元素的下边缘 ...android:scrollbarThumbVertical设置垂直滚动条的drawable android:scrollbarTrackHorizontal设置水平滚动条背景（轨迹）... android:scrollbarStyle设置滚动条的样式 android:fitsSystemWindows设置布局调整时是否考虑系统窗口(如状态栏) ...android:scrollbarSize设置滚动调大小 android:fadingEdge 设置拉滚动条时 ,边框渐变的放向 android:drawingCacheQuality
一、水平居中布局与滚动条跳动的千年难题 当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~ 例如，妇女之友大淘宝的首页： ?...开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现，占据可用宽度，margin: 0 auto主体元素自然会做偏移——跳动产生。...你说像知乎这样子，高度随内容而定的页面，显然就无法驾驭；而第1种方法overflow-y: scroll，在页面高度较小的时候，依然会保留一个丑陋的灰色的滚动栏，这其实又回到了IE当道的旧社会时代。...左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！...您可以狠狠地点击这里(IE10+)：页面出现滚动条的时候没有跳动demo demo页面中，标题和下面的妹子都是居中效果。
1) 、文本选择颜色 当你访问网站或阅读博客时，你经常使用鼠标选择文本，它只是蓝色选择白色文本。你可以通过自定义文本颜色选择使你的网站脱颖而出。 ? 使用选择伪元素为你网站上的文本提供个人风格。 ?...你可以将 CSS scroll-behavior 属性与 html一起用作选择器，以启用整个 HTML 页面的平滑滚动。 ?...6) 、文本居中显示 有时将 div 元素居中可能令人生畏，但你只需几行 CSS 即可将任何 div 居中。 ?...不要忘记设置 display:grid; 对于父元素，然后使用 place-items 属性。 ? 7)、 自定义滚动条 默认滚动条对用户没有吸引力，你可以做的是自定义此滚动条。 ?...我们只用 CSS 就能做到这一点，如果你想在跨浏览器上获得全面支持，最好使用 JavaScript 库来制作滚动条。 ?
水平居中 行内元素 .parent{ text-align:center } 块级元素 .son { margin: 0 auto; } **子元素含 float ** .parent{..., 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断。....son { position: absolute; top: 50%; transform: translate( 0, -50%); } top:50% 父元素空间不够时,...子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条。...子元素会被截断, 但不会有滚动条。
overflow调整溢出部分的显示,取值如下： image.png 取值 作用 visible 默认值，溢出部分可见 hidden 溢出部分隐藏 scroll 强制在水平和垂直方向添加滚动条...auto 自动在溢出方向添加可用滚动条 边框 边框实现 语法： border: width style color; 边框样式为必填项，分为： 样式取值 含义 solid 实线边框 dotted...特殊： 1）margin:0; 取消默认外边距 2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中 3）margin:-10px;元素位置的微调 单方向外边距：只取一个值...元素设置浮动,就具有块元素的特征,可以手动调整宽高 “文字环绕”:浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示 常见问题 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示...堆叠次序 元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上： 属性 : z-index 取值 : 无单位的数值,数值越大,越靠上 堆叠： 定位元素与文档中正常元素发生堆叠
定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。...定宽块级元素水平居中(方法四) 当元素开启决定定位或者固定定位时， left 属性和 transform 属性即可实现水平居中。...行内块级水平垂直居中方案 步骤如下： 容器元素行高等于容器高度 通过 text-align: center; 实现水平居中 将子级元素设置为水平块级元素 通过 vertical-align: middle...定位实现水平垂直居中方案(二) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素的偏移量，值为50% 通过外边距-值的方式将元素移动回去 实现CSS代码如下： .parent {...定位实现水平垂直居中方案(三) 步骤如下： 使子元素相对于容器元素定位 子元素开启绝对定位 将子元素拉满整个容器 通过margin:auto实现水平垂直居中 实现CSS代码如下： .parent {
总结： 1.工作中用的比较少，因为加了静态定位，元素也是标准流 2.偏移值对静态定位无效 使用场景：通常是将已经设置过定位的元素还原成标准流 我们以后所说的定位不包含静态定位 2.相对定位 相对于自身在标准流的位置进行定位移动...（一般都会配合相对定位，但不是绝对的都是相对定位） 父相子绝 ---- 案例： 1.让盒子水平垂直居中（水平居中，垂直也居中） <title...总结： 1.会脱离文档流，不占据标准流的空间 2.不继承父元素的宽高，需要给自身定义宽高 3.margin:auto对固定定位的元素不起作用 4.不会随着滚动条滚动，永远固定在浏览器窗口中的位置...（移动的出发点：浏览器窗口，滚动条对设置了固定定位的元素无效） 使用场景：常用于网页右下角的“回到顶部”，或网站左右两侧的广告 案例： 京东最右侧的小列表 案例效果图 ?..."img/5.jpg" /> 四种定位总结 定位模式 是否脱标占有位置 是否可以使用边偏移 移动位置基准 静态static 不脱标，正常模式
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
