Inline boxes 不会影响垂直间距，它们不是用于确定布局，只是用于构建块内的样式 Inline boxes 的宽度基于其所容纳的内容，而与父容器的宽度无关 改变 Box 的行为 我们可以使用...CSS display 属性覆盖 HTML 元素的默认 box 类型。...当你有两个垂直边距彼此相邻的盒子时，它们会折叠。不是将边距加到一起，而是仅显示最大的边距。...垂直外边距折叠最可能发生的两种简单情况: 两个紧邻的兄弟元素的外边距发生折叠 父子元素的外边距发生折叠 首子元素与父元素的上外边距发生折叠 尾子元素与父元素的下外边距发生折叠 预防边距折叠 有时我们确实希望防止边距折叠...Content Boxes and Border Boxes Content Boxes 我们定义的 width 属性仅表示内容的宽度。
width表示：数值（px），百分号（占比，相对父元素）。center标签，居中。 特殊字符，对应的字符编码表。手册-->符号。...列表标签：有序ol（order list，属性type更换样式，start起始位置）、li（每一项）。无序列表ul（unorder list，type），li（每一项）。...属性对应，让input输入框获取焦点（套入输入框的提示文本）），指定输入项的描述信息。...也可以通过style标签中写入的@import引入css文件。 css格式： 选择器{属性:属性值;xxx:xxx;}。...拓展选择器：*表示选择所有元素，并集选择器（选择器1,选择器2{}），子选择器（选择器1 选择器2{}选择元素1下的元素2），父选择器（父标签 > 子标签{}，作用于父标签） 属性选择器（元素名[属性名
因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。 现在，让我们开始吧。 间距类型 CSS 中的间距有两种类型，一种在元素外，另一种在元素内。...根据 W3C，以下是针对该问题的一些解决方案： 给父元素添加边框 将子元素显示更改为 inline-block 更直接的解决方案是将 padding-top 添加到父元素。...因此，导航项的宽度取决于它们的内容。 以下是解决方案： 设置导航项的最小宽度 增加水平填充 在分隔符的左侧添加额外的边距 最简单更好的解决方案是第三种，即添加一个margin-left。...关于解决方案 #2，它没有 CSS 特异性问题。 但是，它仅适用于一个列堆栈。 更好的解决方案是通过向父元素添加负边距来取消不需要的间距。...我们是否应该根据父级的显示类型（Flex、Grid）来设置它们的样式 让我们一一解决上述问题。 调整间隔组件 可以创建一个接受不同变化和设置的元素。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。...@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。...属性指定了弹性子元素在父容器中的位置。...space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。...则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
获取元素节点信息常用属性： 名称 描述 innerHTML 返回元素内包含的所有HTML内容（文本和标签），类型为字符串 parentNode 返回指定节点的父节点 children 返回指定元素的子元素节点集合...（5）代码如下，需要判断input输入框是否为密码类型，请补全横线处代码。....________ if (inputType === "password") { // 判断密码 } 答案：getAttribute(‘type’) 需要判断输入框的类型...DOM 添加： 名称 描述 createElement(tagName) 创建一个由标签名称tagName指定的HTML元素 appendChild(node) 将一个节点插入到指定父节点的子节点列表的末尾处...对象： 名称 描述 platform 返回操作系统类型 userAgent 返回用户代理头的值 5. screen对象： 名称 描述 availWidth 返回屏幕的宽度（不包括windows任务栏）
仅支持单 class 选择器，不支持样式继承 Weex 样式内不支持标签选择器、属性选择器、ID选择器、后代和子层级选择器、相邻选择器，以及 CSS3 中增加的各种计数选择器等。....className 式的类型选择器。...而且不设置子元素的宽度，父元素的 align-items 为默认的 stretch 时，子元素将自动拉伸填充侧轴宽度。...对于 Web 页面 flex 多行布局的情况，我们给父元素设置 flex-wrap: wrap; 属性后，通常根据每行子元素数量设定子元素宽度的百分比。...但之前说过，Weex 内不支持百分比单位，而 flex-grow 达不到这样的效果。 所以只能假定，父元素一定是占满屏幕宽度，子元素根据 750px/n 来设置宽度。
换句话说，我们编写的 CSS 是这些算法的输入，就像传递给函数的参数一样。如果我们想真正熟悉 CSS，仅仅学习属性是不够的；我们必须学习算法如何使用这些属性。...它们通常具有固定的宽度和高度，这就是为什么许多其他我们可能想要使用的属性在这些元素上不起作用的原因。我们可以通过将它们的显示属性更改为inline-block来更改此行为。...默认布局模式是流式布局，但我们可以通过更改父容器上的display属性来选择使用Flexbox： display:block display:flex 当我们将 display 设置为 flex 时，我们创建了一个...在这种情况下，限制因素是父元素没有足够的空间容纳一个宽度为 2000px 的子元素。因此，子元素的大小被缩小，以「适应空间」。 这是 Flexbox 哲学的核心部分。...第一个子元素始终是第二个子元素宽度的 2 倍。 flex-basis和width设置了元素的假设大小。
设置 padding 内边框，此时盒子的宽度将会被撑大，可以查看一下示例，后先使用以上 css 样式的显示内容如下： 的 height 去掉： 将会发现其伸缩盒子内的元素依旧有高度，这些高度为父元素的最大高度： 正常情况下，未设置伸缩盒子，其子元素将不会存在高度...此时我再将子元素的宽度设置为 1000，那么该子元素宽度和肯定大于其页面最大宽度： 那如此设置会怎样呢？以下是呈现效果： flex-wrap 此时所有子元素将会均分其父元素宽度。...flex-grow flex-grow 属性可以使其伸缩项（子元素）按照其空间内剩余内容进行扩充，例如如下代码： 该代码我设置了其伸缩项每个宽度为 100px，那么肯定不会填充满该行，当在某一项中设置了...在 flex 子元素中不经可以设置子元素的填充，还可以设置子元素的收缩，但需要注意，生效需要子元素宽/高大于父容器最大宽高：
css元素溢出 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。 overflow的设置项： 1、visible 默认值。...-- 第2个子元素div匹配 --> 2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反） 3、E:first-child：匹配元素类型为E且是父元素的第一个子元素...4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素 5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素 6、E:nth-of-type(n)：匹配父元素的第n...个类型为E的子元素 7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反） 8、E:first-of-type：匹配父元素的第一个类型为E的子元素 9...、E:last-of-type：匹配父元素的最后一个类型为E的子元素 10、E:only-of-type：匹配父元素中唯一子元素是E的子元素 11、E:empty 选择一个空的元素 12、E:enabled
父级有定位 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 子绝父 这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。...就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。...type属性值： 类型**** 使用示例**** 含义**** email**** 输入邮箱格式 tel**** 输入手机号码格式 url**** 输入url格式 number**** 输入数字格式...，不论元素的类型 :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。...perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素 理解透视距离原理： translateX(x) 仅水平方向移动**（X轴移动） 主要目的实现移动效果 translateY
伪类：以冒号为前缀，被添加到一个选择器末尾的关键字，样式在特定状态下才被呈现到指定的元素 CSS 2.1 E:first-child 匹配父元素的第一个子元素 E:link 匹配所有未被点击的链接...() 作用类似，但是仅匹配使用同种标签的元素 E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1) E:first-of-type 匹配父元素下使用同种标签的第一个子元素...默认宽度为父元素宽度，可设置宽高，换行显示 none 缺省值。象行内元素类型一样显示 inline 行内元素类型。...因为子元素脱离了父元素的文档流，所以父元素失去了高度，导致了塌陷。要解决这个问题，就是让父元素具有高度。...# 关于媒体查询 是什么 媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制样式表范围的表达式组成，例如宽度、高度和颜色 媒体查询在 CSS3 中出现，允许内容的呈现针对一个特定范围的输出设备而进行裁剪
.type=”email” 限制用户输入为email类型（必须含有@符，@符前后内容不能为空） 2.type=”url” 限制用户输入为url类型（必须含有http://,并且后面内容不能为空） 3.type...:first-of-type 匹配父元素下指定类型的第一个子元素 eg: .uls li:first-of-type{background:pink;} 匹配.uls下li这种类型的第一个子元素 注：...:first-of-type 《=》 :nth-of-type(1) 都是匹配父元素下指定类型的第一个子元素 8....:last-of-type 匹配父元素下指定类型的最后一个子元素 eg: .uls li:last-of-type{background:yellow;} 匹配.uls下li这种类型的最后一个子元素 注...:only-child 匹配父元素下唯一一个子元素 12. :only-of-type 匹配父元素下指定类型的唯一一个子元素 13.
匹配语法规则的第一个子串是2，而根据第5条语法规则，这是一个项。匹配语法规则的第二个子串是 2 + 3，而根据第 3 条规则（一个项接一个运算符，然后再接一个项），这是一个表达式。...下一个匹配项已经到了输入的结束。2 + 3 - 1 是一个表达式，因为我们已经知道 2 + 3 是一个项，这样就符合“一个项接一个运算符，然后再接一个项”的规则。...这适用于在本地进行更改而不影响周围元素的情况，例如在文本字段中插入文本（否则每次键盘输入都将触发从根节点开始的布局）。 5.5 布局处理 布局通常具有以下模式： 父呈现器确定自己的宽度。 ...父呈现器依次处理子呈现器，并且： 放置子呈现器（设置 x,y 坐标）。 ...父呈现器根据子呈现器的累加高度以及边距和补白的高度来设置自身高度，此值也可供父呈现器的父呈现器使用。 将其 dirty 位设置为 false。
最常见的就是 www.*.*, m.*.*。 但是在响应式网页设计中，服务器向所有设备展现的HTML代码都是相同的，仅通过使用CSS用于改变设备上页面的呈现方式。...因此，对于大于600px的界面，我们的column元素的宽度相对其父元素的50％。 虽然媒体查询对于响应式网页设计是必不可少的，但许多其他新的CSS功能也在浏览器中得到广泛采用和支持。...我们设置main标签设置为flex-wrap: wrap，这个设置为允许其内部子节点在父节点中换行， flex-basis: 100% 是指我们的div节点的宽度是相对于父节点宽度的100％（图1）。...，我们设置其宽度为父级宽度的33％（图2）。...最后，宽度和高度为100％会使子级iframe元素成为其父级的100％。父级.videoWrapper完全控制建立此宽高比布局。
在本文中，我将介绍有关CSS中的间距，实现此间距的不同方法以及何时使用 padding 或 margin 所需的所有知识。 间距类型 CSS中的间距有两种类型，一种在元素外部，另一种在元素内部。...另一个与边距折叠相关的例子是子节点和父节点。...根据W3C，以下是针对该问题的一些解决方案： 在父元素上添加 border 将子元素显示更改为 inline-block 一个更直接的解决方案是将 padding-top 添加到父元素。 ?...请注意，分隔符周围的间距现在相等，原因是导航项没有特定的宽度，而是具有padding。结果，导航项目的宽度基于其内容。...使用CSS Grid，你可以很容易地使用 grid-gap 添加间距。此外，你不需要关心网格项的宽度或底部空白，CSS Grid 为你做者一切！
4.vw Viewport width 视窗宽度。1vw = 视窗宽度的1%，1vw就是当前屏幕宽度的1%， 对比： width:100%; 设置元素宽度占父元素的宽度100%。...(1)B:first-child 作为父元素的第一个子元素B，作用和(3)相似； (2)B:last-child作为父元素的最后一个子元素B； (3)A B:nth-child(n) 在父级中查第n...个子元素是不是B，不分类型； (4)B:first-of-type 选择父元素内B类型的第一个元素B； (5)B:last-of-type 选择父元素内B类型的最后一个元素B； (6)A B:nth-of-type...如果是右浮动，后面的文本流将环绕在它左边： 47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。...显示类型就会自动变为 以display:inline-block(行内块状元素)方式显示，此时可设置元素的 width和 height，且默认宽度不占满父元素。
list) 无序列表，直接子元素只能是li li(list item) 列表中的每一项 定义列表 – dl – dt - dd dl( definition list ) 定义列表，直接子元素只能是...属性写法 input元素的使用 表单元素使用最多的是 input 元素 input元素有如下常见的属性: type: input的类型 text:文本输入框(明文输入) password:文本输入框(密文输入...: both; select和option的使用 option是select的子元素，一个option代表一个选项 select常用属性 multiple:可以多选 size:显示多少项 option常用属性...) 属性(id属性、class属性、普通属性) {}(内容) $(数字) 隐式标签 CSS Emmet 结构伪类 - :nth-child :nth-child(1) 是父元素中的第1个子元素...(1) :last-of-type，等同于:nth-last-of-type(1) :only-child，是父元素中唯一的子元素 :only-of-type，是父元素中唯一的这种类型的子元素 下面的伪类偶尔会使用
，然后再利用定宽度块状居中的margin的方法，使其水平居中。...优点：只需在子元素child上设置css样式，不用关心父元素的 缺点：兼容性较差，如果需要兼容，更改html样式，改为table样式 css -->css">...；inline-block默认宽度为内容宽度,然后给父元素设置text-align 优点：兼容性较好，甚至可以兼容IE6 缺点：子元素会继承父元素的text-align，使子元素里的内容也水平居中 宽度往左偏移50%；结果是水平居中 优点：因为position：absolute;脱离文档流，所以不会影响其他的子元素； 缺点：transform是css3的内容，所以兼容性较差...类型的子元素都有用。
red; /*加一个边框 调试样式 最后要删除或者更改**/ width: 428px; /*设置宽度 必须要和主进程中设置的一样 不能大于主进程中设置的宽度 否则会出现滚动条*/...注册页面 我们改进一点 因为qq的注册是一个连接到web页面去申请qq号码的 不过我做的是点击注册将界面切换到注册界面,只不过是 在写注册界面代码之前先将父组件种的login注释掉备用 (别删除哦) 在父组件中引入...Register组件 注册的逻辑是这样的 在注册界面输入手机号和图形验证码 获取到短信验证码输入之后跳转到下一步输入密码 如果将全部的逻辑写到一个组件中会导致太长 虽然有办法解决 但是之后使用动画就很难看了...我们有很多办法在子组件通知父组件去显示不同的文字 作者给出两个方案: 1: 通过子组件给父组件传值 2: 使用vuex 3: 将footer拆分到各个组件中 我们代码中使用拆分就行了 比较简单点 将父组件的...子组件加入: import '@/assets/css/animate.css' 之后我们在代码中加入效果就行了 将父组件改成: <div class="bg"
box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。...内容框是框内容显示的区域–包括框内的文本内容，以及表示镶嵌子元素的其他框； ②padding表示一个CSS框内边距–这一层位于内容框的外边缘与边界的内边缘之间；...详情介绍可以查看之前的文章：实现输入框input在获得焦点时外边框不变蓝 点击打开链接 （5）CSS框类型，通过display属性来设定元素的框类型： 最常见的display...; 那么最终呈现的效果是：当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。...而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
