important方式来强制让样式生效，不讲道理的操作，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护，使用方法： 万不得已可以使用!...也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 ...在 CSS 中，任何元素都可以浮动。...总结一下：为什么要有浮动啊，是想做页面布局，但是浮动有副作用，父级标签塌陷，所以要想办法去掉这个副作用，使用了clear来清除浮动带来的副作用，我们当然也可以通过设置标签为inline-block来实现这种布局效果.../body> 来再教大家一个pycharm的用法，自定义快捷键： 然后点击apply和ok： 在到html页面中也一个hya： 就看到了这些文字
理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，经过我看过的一些文章，加入自己的理解。我得出文档流的定义如下： 从左至右，从上至上的布局。...文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。...网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position来控制。...b和c都为左浮动 很明显a没有被撑开了。原因是它们浮动了就不再占空间了。既然没有空间可占，那就等于容器里没有东西，所以不撑开。解决办法是在黄色DIV的后面加个DIV，然后清除浮动。...让他有空间可占，自然就撑开了。试试！ 总结： 1、 CSS的定位机制有3种：普通流、浮动和定位。 2、 文档流：从上到下，从左到右，一个挨一个的简单或者叫正常布局。
（按照默认的规则排列的） 脱标的元素不占标准流的位置 浮动因为脱标的特性（脱离标准流了，不占位置，会盖住其他的标准流的盒子）， 所以，在使用上有一个口诀：要浮全浮（要浮动的话兄弟元素都浮动） <!...水平方向） 浮动的盒子一排装不下的时候会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定） 右浮动会颠倒盒子顺序 浮动的盒子压不住文字和图片 尽量在标准流的盒子里面浮动 闭合浮动 浮动带来的问题：浮动元素撑不开父级容器...解决办法（闭合浮动）： 强行给父盒子添加高度 （不推荐，不利于后期维护） 创建一个新的块级盒子放在浮动元素的最后面，给这个盒子添加一个css属性：clear:both;（不推荐，会产生一个多余的盒子...） 用伪元素闭合浮动 （推荐，书写一个公共类就可以使用） 给父元素添加overflow:hidden; (在某些特定场景下使用不了) 伪元素 就是在当前元素内容的前面或者后面追加一个盒子 这个盒子由css...渲染 伪元素特性： 1、伪元素由css渲染 所以不会增加你的DOM（html结构）开销 2、伪元素默认是行内元素 可以进行转块等处理 3、伪元素不管有没有内容 content这个值一定不能少
问题的由来 有这样一种情形：在一个容器（container）中，有两个浮动的子元素，如图一。 （图一 设计视图是一个父容器中含有二个浮动的子元素） 请问HTML代码应该怎么写？...在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。...那么，有没有不修改HTML代码的方法呢？ 4. 解决方法二：浮动的父容器 另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。...Mastery一书的中译本《精通CSS 高级Web标准解决方案》第154页，人民邮电出版社，2007） IE使用Layout概念来控制元素的尺寸和位置。...如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。
BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。...当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。...在IE中，元素使用“布局”概念来控制尺寸和定位，分为拥有布局和没有布局两种情况，拥有布局的元素由它控制本身及其子元素的尺寸和定位，而没有布局的元素则通过父元素（最近的拥有布局的祖先元素）来控制尺寸和定位...通俗说就是url中的#选中的id元素将被css选择。在完成没有js的菜单，选项卡时如果不考虑ie8则可以使用这种新的办法。...示例中div1的清除浮动并没有效果，因为他没有办法影响div2，如果设置div2清除浮动，则元素本身会向下一行，示例代码如下： <!
有外边距margin,有内边距外边框 BFC的特性 1.在BFC中，盒子从顶端开始垂直地一个接一个地排列 2.盒子垂直方向的距离由margin决定，在同一个BFC区域的两个相邻盒子的margin会发生重叠...3.在BFC中每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘（border-left）(对于从右到左的格式来说，则触碰到最右边缘) 意思就是子盒子设置边距是从父元素的border开始的...4.BFC区域不会与浮动盒子产生交集，而是紧贴浮动边缘，自适应 意思就是BFC区域的盒子不会和浮动的盒子连在一起，如下 .father{ width:300px; height:200px... father盒子设置左浮动，txt是一篇文章盒子 由图可见，文章盒子与蓝色盒子重合在一起了导致我们的文章显示不正常，因为蓝色盒子设置了左浮动，对于这种解决办法就是给文章盒子创建...BFC区域，我们给文章盒子加上overflow属性 正常显示 5.计算BFC的高度时，自然也会检测浮动的盒子高度 这个在上一篇CSS清除浮动我们讲到，给元素添加overflow属性（创建BFC）也可清除浮动
2、CSS注释 /*这是注释*/ 三、CSS的几种引入方式 1、行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。...; color:blue; } before 和 after 多用于清除浮动。 7、选择器的优先级 7.1 CSS继承 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。...也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。...4.3 float 在CSS中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。...关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止； 由于浮动框不在文档的普通流中，所以文档的普通流中的块级框表现得就像浮动框不存在一样。
" href="xxx.css"> 选择器 全局选择器： *{ margin: 0; padding: 0; } 元素选择器：HTML文档中的元素，p、b、div、a、img、body...repeat-y 只向垂直方向平铺 no-repeat 不平铺 background-size属性： 值 说明 length 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，...td { text-align:right; } td { height:50px; vertical-align:bottom; } 表格填充：如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性... 第二个元素 h1~p{ color:red; } 盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子...- 盒子的内容，显示文本和图像 弹性盒模型 弹性盒子是 CSS3 的一种新的布局模式 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列
position有哪些取值和行为啊）就悲剧了…… 说到position，那么稍微对css有所了解的必然能马上说出它的四个属性值：static 、relative、absolute、fixed。...3.BFC BFC（Block Formatting Context 块格式化上下文）：是W3C CSS 2.1 规范中的一个概念，在CSS3中被修改为flow root。...转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）...创建了BFC的元素会按照如下的方式对其子元素进行排列： 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。...在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）， 即使存在浮动也是如此（尽管一个子元素的内容区域会由于浮动而压缩
.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，标记也是写在标记中，使用的语法如下： 1 2 3 4 5 <style type="text/<em>css</em>...假如某个<em>div</em><em>元素</em>A是<em>浮动</em><em>的</em>，如果A<em>元素</em>上<em>一个</em><em>元素</em>也是<em>浮动</em><em>的</em>，那么A<em>元素</em>会跟随在上<em>一个</em><em>元素</em><em>的</em>后边(如果一行放不下这两个<em>元素</em>，那么A<em>元素</em>会被挤到下一行)；如果A<em>元素</em>上<em>一个</em><em>元素</em>是标准流<em>中</em><em>的</em><em>元素</em>，那么A<em>的</em>相对垂直位置不会改变...盒子重叠现象，一般是由于相邻两个<em>DIV</em><em>一个</em><em>使用</em><em>浮动</em><em>一个</em>没有<em>使用</em><em>浮动</em>。...3、clear:both:对自己起作用，加载时判断左右两边<em>有没有</em><em>浮动</em><em>元素</em>，如<em>div</em>2加了此属性，其后面有<em>div</em>3，其实<em>和</em>clear:left作用差不多，因为加载<em>div</em>2时即判断两边<em>有没有</em><em>浮动</em><em>元素</em>，此时<em>div</em>3...整段代码<em>就</em>相当于在<em>浮动</em><em>元素</em>后面跟了个宽高为0<em>的</em>空<em>div</em>，然后设定它clear:both来达到清除<em>浮动</em><em>的</em>效果。 之所以用它，是因为，你不必在<em>html</em>文件<em>中</em>写入大量无意义<em>的</em>空标签，又能清除<em>浮动</em>。
; color:blue; } before和after多用于清除浮动。 选择器的优先级 CSS继承 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。...其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图： ? 除此之外还可以通过添加 !import方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!...也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 ...，第二个用于左－右； 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下； 提供四个参数值，将按上－右－下－左的顺序作用于四边； float 在 CSS 中，任何元素都可以浮动。...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。...解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。...解决的办法是给FLASH设置透明 19.怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位,与外补丁负值的方法...FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式...所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显 示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。
目前为止我们只浮动了一个div元素，多个呢？ 下面我们把div2和div3都加上左浮动，效果如图： ? ...div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3...本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。 ? ...可以看出div2的右边有一个浮动元素div1，那么我们可以在div2的CSS样式中使用clear:right;来指定div2的右边不允许出现浮动元素，这样div2就被迫下移一行，排到div1下边。...为了减轻读者心理压力，本文没有任何CSS、HTML代码，因为现在很多教程上来就是一大堆CSS代码，看到就烦，别说细读了。 最后预祝读者阅读愉快，开心掌握知识。 参考
那么上面:这个符号连接的就是伪类，帮助我们做一些样式用的，本质是一个css 伪元素介绍 首先要明白的是伪元素是html标签本身的属性，和css没有关系，只是我们使用css样式将这个东西展现了出来，这是一点...简而言之，html中没有，但是可以被css操作的可以理解为伪元素, <!...以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。...这里当外层元素的宽度不够支持内部元素的宽度总和的时候，浮动的元素是直接就换到下一行了 当我们将元素清除浮动以后，我们就可以直接使父级看到他们，我们可以直接在原来的基础上新加一个p元素，然后给p元素进行浮动的清除...这样就使用伪元素巧妙的将浮动的问题解决了，这个解决办法是比较合理的。
3.2.1 浮动生来其实是为了文字环绕效果： CSS的 float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。...解决办法：给需要浮动显示的子元素加上浮动 1.2.2 两个兄弟元素，需要并排无间隙显示：第一个 float:left;。...: top; 1.8 文字复制问题：两个浮动元素中间，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中） 解决办法1：两个浮动元素中间避免出现内联元素或注释...3.2.1 浮动生来其实是为了文字环绕效果： CSS的 float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素环绕它。...: top; 1.8 文字复制问题：两个浮动元素中间，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中） 解决办法1：两个浮动元素中间避免出现内联元素或注释
文/小魔女 1 本文简介 面试大厂,HTML/CSS,JS,网络基础这三块硬知识是必不可少的 我整理了一些备考笔记，分享给大家 初中级前端到高级前端的蜕变，从基础知识开始~ 分享小魔女的音乐 2 块元素和行元素...figure添加标题时，与figcaption元素结合使用。 dialog:表示几个人直接的对话。与dt和dd元素结合使用，dt表示讲话者，dd表示讲话内容。...2.2 行内元素和块元素的区别 HTML元素分为行内、块状、行内块元素三种。...❝BFC（块状格式化上下文，独立的盒子，布局不受外部影响，但是如果同一个BFC中，同级块状元素的margin-top和margin-bottom会重叠） ❞ 只要元素满足下面的任一条件，都会触发BFC特征...保护有用的浏览器默认样式而不是完全去掉 一般化样式：为大部分html元素提供 修复浏览器自身的bug 优化css可用性 解释代码 7.5 如何做到一个list中奇数和偶数行的背景色不一样？
....此处写CSS样式 3·导入式 将一个独立的CSS文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，标记也是写在标记中...此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3、div4组成的流。 目前为止我们只浮动了一个div元素，多个呢？...div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3...div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3...本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。 ?
文本主要内容 标准文档流 标准文档流的特性 行内元素和块级元素 行内元素和块级元素的相互转换 浮动的性质 浮动的清除 浏览器的兼容性问题 浮动中margin相关 关于margin的IE6兼容问题 标准文档流...行内元素和块级元素的分类： 在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。 从HTML的角度来讲，标签分为： 文本级标签：p、span、a、b、i、u、em。...现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样： 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。...办法是：移民！脱离标准流！ css中一共有三种手段，使一个元素脱离标准文档流： （1）浮动 （2）绝对定位 （3）固定定位 浮动的性质 浮动是css里面布局用的最多的属性。...同样，float还有一个属性值是right，这个和属性值left是对称的。 性质3：浮动的元素有“字围”效果 来看一张图就明白了。我们让div浮动，p不浮动。 ?
浮动元素可能引起的问题 1.父元素的高度无法被撑开，影响与父级元素同级的元素 2.与浮动元素同级的非浮动元素会跟随其后 3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构 清除浮动有什么解决办法...一般来说有三种办法。 1.使用空标签清除浮动 在所有浮动标签后面添加一个空标签并定义CSS属性 clear:both 对比图：div未被撑开 ? ?...加个空标签就可以，弊端是增加了无语义标签 html,body,div{ margin: 0;padding: 0;} .box{border...2.使用overflow 给包含浮动元素的父元素标签添加CSS属性，overflow:hidden or auto; zoom:1 ,其中zoom:1用于兼容IE6,目的是为了触发hasLayout...3.使用after伪对象清除浮动。 但该方法只适用于非IE浏览器，还要注意的是使用的时候要记得为需要清除浮动元素的伪对象设置height:0; 否则该对象会比实际高出若干像素。
浮动可以让一个元素脱离标准流，向左或向右移动并占据其父元素的剩余空间。浮动元素不会影响其他元素的布局，但是它们会创建一个新的块级框，可以设置宽度和高度。...overflow: hidden 是一个 CSS 属性，用于控制元素的内容是否超出其容器的边界。它可以清除浮动，但前提是浮动发生在该元素内部。...当一个元素包含浮动时，如果不使用 clearfix 方法或其他技术来清除浮动，可能会导致父元素高度塌陷。为了解决这个问题，可以在父元素上设置 overflow: hidden,这样就可以清除浮动了。...其实每个属性都有使用的场景，本来想的是用flex布局和js动态判断解决的，后面用浮动3句代码就轻松解决了！...图片【选题思路】实际项目中遇到的一个问题，用js加css结合就可以实现，有没有更好的解决途径呢？回顾纯css找到了最优解，分享给大家，获取还会有更简洁的写法。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
