01 问 题 如果将一个 img 放在 div 或 span 里面，你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0，无效！...代码： div class="pic"> div> ... 02 原 因 因为 img 默认是按基线( baseline )对齐的。...对比一下图片和右边的 p, q, y 等字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高 03 解决方案 要去掉空格可以使用 vertical-align: bottom 或将 img 标签变为块级元素...至于什么是基线，还记得四线三格的英语写字本么？中间第三条线就是基线。
注意：实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或者矮。 如果只指定了一个方位名词，则第二个默认居中(left则意味着水平居中，top意味着垂直居中)。 如果参数是精确值，则第一个肯定是x ，第二个肯定是y。...如果参数是精确值，且只给了一个数值，则该数值一定是x坐标，另一个默认垂直居中。 如果参数是混合单位，则第一个值一定为x，第二个值为y坐标。...也可以填百分比：按照父元素的尺寸设置。 cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。...把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 <!
我们开发时候的1px 不是一定等于1个物理像素的(PC端相等，手机端不相等), 1px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。...-- 单位：长度、百分比、cover、contain cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（不考虑图片是否有超出部分） contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域...（如果主轴是x轴则水平居中） space-around 平分剩余空间 space-between 先两边贴边再平分剩余空间（重要） <!...再平分剩余空间 stretch 设置子项元素高度平分父元素高度 的 align-items 属性，如果没有父元素，则等同于 stretch span:nth-child(2) { /* 设置自己在侧轴上的排列方式 *
可设置的值 : 像素长度 : 单位 像素 px ; 百分比长度 : 百分比是 相对于父容器你的百分比 ; cover 值 : 等比例拉伸背景图像 , 使得背景图片完全覆盖背景区域 , 图片的部分内容可能显示不全...; contain 值 : 等比例拉伸背景图像 , 使得 宽度 或 高度 的其中一个达到父容器的尺寸 , 就不再进行拉伸 , 盒子模型部分内容可能显示空白 ; background-size 值设置一个值的情况...>div> 显示结果 : 2、宽高不等比例拉伸 - 同时设置 宽度 / 高度 的 像素值 / 百分比值 如果为盒子模型 同时设置了 宽度 和 高度 像素值 ,...则 图片的宽度和高度分别进行拉伸 , 以达到样式中定义的宽高值 , 宽高不会等比例拉伸 ; /* 宽高不等比例拉伸 */ background-size...>div> 设置 宽度 和 高度 的百分比值 : <!
项目之间的间隔相等 space-around：所有项目平分剩余空间。每个项目两侧的距离相等。项目之间的距离比项目与边框的间隔大一倍。...起点为上边，终点为下边；当主轴为垂直方向时，侧轴为水平方向，起点为左边，终点为右边 2. flex-end:侧轴终点对齐 3. center:侧轴中点对齐（垂直居中） 4. stretch(默认值):如果项目没有设置高度或者高度设置为...auto，则占满整个容器的高度，主轴为垂直方向时，则换宽度 5. baseline:项目的第一行文字的基线对齐 align-content 属性 align-content 属性定义侧轴上的子元素排列方式...默认值为 auto,表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。 如果一个项目的 flex-shrink 属性为 0， 其他项目都为 1，则当空间不足时，前者不缩小。
class="bgp"> div class="one">背景居中div> div> 注意： 如果参数的两个值都是方位名词，顺序不影响最后的结果...（如top left和left top相同） 如果只指定一个方位名词，则第二个默认居中。...如（left意味着水平居中，top意味着垂直居中） 如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200) 如果参数是精确值,...如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中) 1.4.1 知识补充-关于坐标系 在计算机中的坐标系和我们在高中阶段使用的坐标系的方向是不同的...cover 让图片完全覆盖元素，可能会被裁剪 100px 50px 指定宽高（第一个是宽度，第二个是高度） 50% 100% 相对父元素的宽度和高度进行缩放 inherit 继承父元素的 background-size
这里先以高度为宽度一半为例，也可以是其他任意比例。 一、思考如何实现 这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。...我们可以借助这个想法，根据元素高度，来为元素设置一个相应比例的高度即可。...二、实现方法1 - 通过 vw 视口单位实现 所谓视口单位(viewport units)是相对于视口(viewport)的尺寸而言， 100vw 等于视口宽度的 100%，即 1vw 等于视口宽度的...三、实现方法2 - 通过子元素 padding 实现 通过设置子元素的 padding 属性来实现，是比较常用，也是效果比较好的一种，这里需要理解的是：子元素的 padding 属性百分比的值是先对父容器的宽度而言...51.5%; 也是按照第一个方法，用图片原始尺寸的宽高比计算出来的，需要注意，这里将 .text 设置 height:0; 会出现高度比实际高的问题，因此为了避免这个情况，就需要设置 height:0;
这里先以高度为宽度一半为例，也可以是其他任意比例。 一、思考如何实现 这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。...我们可以借助这个想法，根据元素高度，来为元素设置一个相应比例的高度即可。...二、实现方法1 - 通过 vw 视口单位实现 所谓视口单位(viewport units)是相对于视口(viewport)的尺寸而言，100vw 等于视口宽度的 100%，即 1vw 等于视口宽度的 1%...：子元素的 padding 属性百分比的值是先对父容器的宽度而言。...: 51.5%; 也是按照第一个方法，用图片原始尺寸的宽高比计算出来的，需要注意，这里将 .text 设置 height: 0; 会出现高度比实际高的问题，因此为了避免这个情况，就需要设置 height
总结：主要原理就是 子元素的margin设置为百分比时，其具体像素值相对于父元素的宽度计算，如果margin-top...如果改为block元素，再加上宽度的设置，auto才会计算剩余空间。 margin自动填充width剩余部分的空间。不计算height是因为高度上不会有剩余空间。...不起作用 div class="box"> div class="test"> 原因：如果我不设置高度，我的高度也不会自动填充整个父元素的高度，就像内联元素不会自动填充父元素的宽度一样...margin-start/margin-end 适用于任何文档流： 如果文档流从左到右，则margin-start等同于margin-left 如果文档流从上到下，则margin-start等同于margin-top...如果文档流从右到左，则margin-start等同于margin-right 2018/07/24 18:48 ?
即使没有指定任何宽度或高度，图片会显示其实际尺寸。 二、设置具体的尺寸 CSS 允许我们设置元素的具体尺寸，通过使用固定单位（如像素、点等）来精确控制元素的宽度和高度。...class="fixed-size-box">固定尺寸div> .fixed-size-box 的宽度和高度被设置为固定的像素值，这确保了元素在所有屏幕和视口尺寸下保持一致的尺寸...class="container"> div class="box">百分比边距div> div> .box 的内边距设置为其宽度的...vw 表示视口宽度的百分比，vh 表示视口高度的百分比。这种方法非常适合创建全屏背景或响应式布局。 示例 : 使用视口单位 视口单位 div> .full-screen 元素的宽度和高度都设置为视口的 100%。
正值，阴影出现在元素底部；负值，则阴影出现在元素顶部 ③：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。...不允许负值 ④：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩 ：定义元素阴影的颜色。...如果该值未定义，阴影颜色将默认取当前最近的文本颜色 inset：定义元素的阴影类型为内阴影。... 百分比 用长度值指定背景图像在元素中出现的位置。可以为负值。 auto 背景图像的真实大小。...contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
今天介绍的是百分比适配,顾名思义,就是宽度使用百分比进行替代传统的具体像素适配!...接下来看一下百分比适配的问题 优缺点： 1.百分比不好计算 2.需要确定父级的宽度,百分比依照父级计算 3.宽度可以很好适配，高度无法确定， 4.可能会使形状严重改变！...> 简单来说,宽度很容易进行实现,但是高度的适配严重无法匹配!...比如在5%的宽度在不同设备指定的不同的宽度,相对于高度不易控制!...那么这个百分比适配存在什么必要,通常百分比适配结合其他的适配方案(例如viewport适配以及移动适配方案终极方式rem适配,稍后文章会详细介绍)
=1.0,user-scalable=”no”> /*参数说明： - width=device-width：宽度等于当前设备宽度 - Initial-scale：初始缩放比列（默认 1.0） - maximum-scale...如果不是彩色设备，则值等于 0 color-index 定义在输出设备的彩色查询表中的条目数。...如果没有使用彩色查询表，则值等于 0 device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。 device-height 定义输出设备的屏幕可见高度。...min-height 定义输出设备中的页面最小可见区域高度。...如果不是单色设备，则值等于 0 orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。 resolution 定义设备的分辨率。
历史： 1.固定布局：使用的是div aside article标签，width：xxx px;像素； 2.浮动 百分比的方式；width:100%; widht:90%,发现比刚才要好多了；还是有问题...弹性布局 非常easy:最外面的div,设置它的display:flex,设置成弹性布局即可。里面的width:30%; width:67%;,可以保持不变。如果都去掉了，注意看它的变化。...网页在手机上的比平板上要小，比pc上要小，之前都是针对的是pc设计，现在要考虑到平板，手机，手表，固定的网页无法适应不同的硬件设备。这时候就要对网页进行等比例的缩放，以适应屏幕。...这可确保填充和边框包含在元素的总宽度和高度中。...下表列出了 Bootstrap 处理翻页的 class。 如果要做投票，可以试下进度条。 3.3 Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。
z>0 的三维元素比正常大，而 z则比正常小，大小程度由该属性的值决定。 元素涉及 3d 变换时，perspective可以让我们眼睛看到 3d 立体效果，有空间感。...视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口) height：100% 铺满父容器的高度 height：100vh 铺满屏幕(viewport)的高度 "100vh...当页面加载时，将高度设置为 window.innerHeight 将正确地将高度设置为窗口的可见部分。 如果地址栏是可见的，那么 window.innerHeight 是全屏的高度。...如果地址栏是隐藏的，那么 window.innerHeight 将是屏幕可见部分的高度， 正如您所期望的那样。...给定背景图像位置的百分比偏移量是相对于 容器 的。
\\:==下标==，比[img][点击并拖拽以移动]如,中的2。 22 div> 9....如果 元素位于 元素内，则它表示文档联系信息。 如果 元素位于 元素内，则它表示文章的联系信息。 这个标语yyds是B站的一个梗 div> ...\\:标签定义一个短的引用。==浏览器经常会在这种引用的周围插入引号。== <!
主轴子元素排列方式 ; 使用该样式前 , 务必先设定主轴方向 ; justify-content 样式 属性值 说明 : flex-start , 默认值 , 默认 子元素 从头部开始 排列 ; 如果主轴方向是...从左到右 row 方向 , 则子元素 从左到右 排列 ; 如果主轴方向是 从右到左 row-reverse 方向 , 则子元素 从右到左 排列 ; flex-end , 子元素 从尾部开始 排列 ;...如果主轴方向是 从左到右 row 方向 , 则子元素 从右到左 排列 ; 如果主轴方向是 从右到左 row-reverse 方向 , 则子元素 从左到右 排列 ; center , 子元素 在主轴方向上...居中对齐 ; space-around , 平分剩余空间 ; space-between , 两侧的子元素贴两边 , 其它元素平分剩余空间 ; 设置父容器中 左右两边的子元素盒子贴父容器的左右两侧...-- 设置 meta 视口标签 --> viewport" content="width=device-width, initial-scale=1.0, user-scalable
垂直居中，左右10px，高度始终为宽度一半 问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。...父元素相对定位，那绝对定位下的子元素宽高若设为百分比，是相对谁而言的？...相对于父元素的(content + padding)值, 注意不含border 延伸：如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content, IE盒模型是content...2.触发条件 一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：下列方式会创建块格式化上下文： 根元素() 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position...避免外边距折叠 两个块同一个BFC会造成外边距折叠，但如果对这两个块分别设置BFC，那么边距重叠的问题就不存在了。 现有代码如下: <!
比如： div class="parent"> div class="child">div> div> 如果设置： .father{ width:200px; height:100px;...，则相对于直接非static定位(默认定位)的父元素的高度，同样 子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。...（5）border-radius border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，举例来说： div class="trangle">div>...百分比单位缺点 从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点： （1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位...四、自适应场景下的rem解决方案 1. rem单位 首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口...视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight...vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。...比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。 vmax相对于视口的宽度或高度中较大的那个。...class="left">leftdiv> div class="right">rightdiv> 兼容性问题(在移动端 iOS 8 以上以及 Android
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
