当一个按钮被选中，之前选中的按钮就变为非选中的 。 submit：提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性，否则将“提交”两个字提交到服务器。...1.2.3.3 CSS样式规则 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练的使用CSS对网页进行修饰，首先需要了解CSS样式规则。...内嵌式CSS样式只对其所在的HTML页面有效，可以对多处标签统一设置样式，因此，仅设计一个页面时，使用内嵌式是个不错的选择。...：元素向左浮动 right：元素向右浮动 none：元素不浮动（默认值） 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。...选择器{clear:属性值;} 常用属性值： left：不允许左侧有浮动元素（清除左侧浮动的影响） right：不允许右侧有浮动元素（清除右侧浮动的影响） both：同时清除左右两侧浮动的影响 例如：
当某个子视图在加入到布局视图时，可以设定为向左还是向右浮动(float属性的值设置为left或者right)，这里的向左和向右是不能同时支持的，视图要么向左要么向右。...浮动布局视图8 可以看出，当A,B,C,D,E,F这几个视图向右浮动时，除了方向外，其他的规则是跟视图向左浮动的规则是一样的。...我们来考察当D视图向左浮动要插入到容器视图时，我们发现如果视图D浮动到视图C的右边并且上边和视图C保持一致时，视图D的布局宽度将会覆盖掉视图B的部分空间，如果出现了覆盖则是不符合浮动布局规则5中的定义的...通过上面的例子我们可以看出当一个布局视图中同时存在着向左浮动和向右浮动的子视图时，我们就有浮动布局的将新增规范8的定义如下： R8:当浮动布局中同时存在着向左和向右浮动的子视图时，向左浮动的视图剩余宽度的右边界是在不覆盖掉右边视图的情况下的最小向右浮动的视图的左边界...在默认情况下当我们建立的是一个左右浮动布局时，我们添加到布局里面的所有子视图默认都是向左浮动的，而当建立的是一个上下浮动布局时，我们添加到布局里面的所有子视图默认都是向上浮动的，因此当需要改动子视图浮动的方向则可以设置属性
当某个子视图在加入到布局视图时，可以设定为向左还是向右浮动，这里的向左和向右是不能同时支持的，视图要么向左要么向右。对于视图向右浮动来说，他的机制是和向左浮动是一样的。我们可以看如下的视图： ?...布局视图8 可以看出，当A,B,C,D,E,F这几个视图向右浮动时，除了方向外，其他的规则是跟视图向左浮动的规则是一样的。...我们来考察当D视图向左浮动要插入到容器视图时，我们发现如果视图D浮动到视图C的右边并且上边和视图C保持一致时，视图D的布局宽度将会覆盖掉视图B的部分空间，如果出现了覆盖则是不符合浮动布局规则5中的定义的...通过上面的例子我们可以看出当一个布局视图中同时存在着向左浮动和向右浮动的子视图时，我们就有浮动布局的将新增规范8的定义如下： 8.当浮动布局中同时存在着向左和向右浮动的子视图时，向左浮动的视图剩余宽度的右边界是在不覆盖掉右边视图的情况下的最小向右浮动的视图的左边界...在默认情况下当我们建立的是一个左右浮动布局时，我们添加到布局里面的所有子视图默认都是向左浮动的，而当建立的是一个上下浮动布局时，我们添加到布局里面的所有子视图默认都是向上浮动的，因此当需要改动子视图浮动的方向则可以设置属性
关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 参考示例 clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...注意：clear属性只会对自身起作用，而不会影响其他元素。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...none; /*删除列表默认的圆点样式*/ margin: 0; /*删除列表默认的外边距*/ padding: 0; /*删除列表默认的内填充*/ } /*li元素向左浮动
(可以说是完全无视) [1]浮动-定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。 ...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素...例如：下图例3 box1向右侧浮动，box2不设置clear属性时的示意图；例4中box1向右侧浮动，box2设置clear：right，表示右侧不允许出现浮动元素，则box2自动下移一行。 ?...同样的，如果是box1向左浮动，box2和box1则会出现重叠，如例5；但如果在box2中设置clear：left；表示左侧不允许出现浮动元素，则box2同样会下移。 ?
label 元素不会向用户呈现任何特殊效果，标签的作用是为鼠标用户改进了可用性，当用户点击标签中的内容时，浏览器就会自动将焦点转到和该标签相关联的控件上；标签在单选按钮和复选按钮上经常被使用...所属表单id列表">文本内容 关联控件的id一般指的是input元素的id；在html5中还新增了一个属性form，form属性是用来规定所属的一个或多个表单的 id 列表，以空格隔开；当标签不在表单标签中时，就需要使用form属性来指定所属表单； 元素没有特别的样式考虑——结构上， 是简单的行内元素，所以可使用和 或...2.2 CSS float 属性 float属性指定一个盒子（元素）是否应该浮动。 属性值: 值 描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。...一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
浮动元素在原文档流位置向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 文本和内联元素围绕浮动框排列。 块元素无视浮动框，按文档流定位。 包裹浮动框的父元素会忽略浮动框高度。...参考mozilla的定义：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear 当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方...这个行为作用时会导致[margin collapsing]不起作用。 当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。...，首先清除左浮动：clear: left;，这时，box 5移动到左浮动元素box 4的下面，在以float:left方式向左浮动。...*/ } clear float 1.png 如果在box 5清除右浮动：clear: right;，那么，它会移动到右浮动元素box 3的下面，再以float:left方式向左浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...取值方式： left：向左浮动 right：向右浮动 none：默认值，不浮动 详情参考： clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
3.浮动与清除浮动 3.1 浮动相关知识 float属性的取值： left：元素向左浮动。 right：元素向右浮动。 none：默认值。元素不浮动，并会显示在其在文本中出现的位置。...PS：如果想要元素超出，可以设置margin属性 如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。...如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐 重叠问题 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上...clear只对元素本身的布局起作用。...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
什么是浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： ? 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。...如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。 ?...如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”： ?...顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 总结一下： 1.当父元素不给高度的时候， 2.内部元素不浮动时会撑开 3.而浮动的时候，父元素变成一条线 4
浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...注意：clear属性只会对自身起作用，而不会影响其他元素。...overflow-x（设置水平方向） overflow-y（设置垂直方向） 十一、position定位 static static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
当z-index不起作用时，可能是由于以下几个原因：没有指定元素的定位属性：z-index属性只对定位元素（position属性值为relative、absolute或fixed）起作用。...例如，如果元素的position属性值为static（默认值），则z-index属性将不起作用。需要将元素的position属性值设置为relative、absolute或fixed。...当一个元素创建一个层叠上下文时，它的所有子元素都会受到父元素的层叠顺序影响。...在平时开发时，我们经常会使用（2）、（6）、（7），大部分元素的层叠水平都低于z-index为0的定位元素。为什么inline/inline-block元素的层叠顺序比浮动元素和块元素都高呢？...网页中展示最重要的是内容，因此内容的层叠顺序比较高，当发生层叠时，重要的文字和图片等内容优先暴露在屏幕上（如下图）。
浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...1.当都不设置浮动时： 当设置box1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了box1 2，使box12 从视图中消失。 当都设置为浮动时，box1 向左浮动直到碰到包含框，另外两个box向左浮动直到碰到前一个浮动框。 当设置box2的position为absolute时，它就会脱离文档，相当于不存在。 <!
(13)表单元素的标注label：当点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。...一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。...如果是右浮动，后面的文本流将环绕在它左边： 47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。...c.语法 position:relative,指定偏移量时：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。...important要写在分号的前面，但注意当网页制作者不设置css样式时，浏览器会按照自己的样式来显示网页。
元素浮动会让元素脱离文档流，从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。 什么是浮动 浮动元素脱离文档流并且向左或者向右移动，直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。...允许浮动元素出现在两侧。 right：在右侧不允许浮动元素。 left：在左侧不允许浮动元素。 both：在左右两侧均不允许浮动元素。 inherit：规定应该从父元素继承 clear 属性的值。...我们清除浮动的时候常用clear: both;，注意： clear属性只对块级元素起作用。 下面展示一个与clear值为both有关的例子。...不知道当大家看到这个结果的时候，是不是开始怀疑w3c中的解释了。实际上clear值为both指的是让自身和前面的浮动元素不相邻。...推荐： CSS中的浮动和清除浮动 张鑫旭《css世界》
不同点是float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止， absolute会覆盖文档流中的其他元素，即遮盖现象。...例如都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。 行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。...浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止。要想使元素浮动，必须为元素设置一个宽度（ width）。...有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素。...（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值 （2）当两个相邻的外边距都是负数时，折叠的结果是两者中绝对值较大的值。 （3）当两个外边距一正一负时，折叠的结果是两者相加的和。
当你给一个定位元素赋予了除 auto 外的 z-index 值时，你就创建了一个新的层叠上下文，其中有着独立于页面上其他层叠上下文和层叠层的层叠层， 这就相当于你把另一张桌子带到了房间里。 ?...webkit-overflow-scrolling 属性被设置 touch的元素 总结: 层叠上下文可以包含在其他层叠上下文中，并且一起组建了一个有层级的层叠上下文 每个层叠上下文完全独立于它的兄弟元素，当处理层叠时只考虑子元素...除了我们常用的横坐标和纵坐标， 盒模型元素还可以沿着"z 轴"层叠摆放， 当他们相互覆盖时， z 轴顺序就变得十分重要。...所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。 4....负z-index值：层叠上下文内有着负z-index值的定位子元素，负的越大层叠等级越低； 块级盒：文档流中块级、非定位子元素； 浮动盒：非定位浮动元素； 行内盒：文档流中行内、非定位子元素；
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。...计算BFC的高度时，浮动元素也会参与计算。...当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
