HTML&&CSS
jsfantasy
虚心、实腹、弱志、强骨
展开
-
CSS定位之相对定位
在下面代码中,有三个盒子,如何才能把中间的盒子移动到第三个盒子的右边 定位练习1 .box1{ width: 100px; height: 100px; background-color: red; } .box2{ width: 100px; height: 100px; background-color原创 2017-07-22 15:49:56 · 265 阅读 · 0 评论 -
CSS之解决高度塌陷问题(三)
.box1{ border: 1px solid red; } .box2{ width: 100px; height: 100px; background-color: blue; float: left; } /* * 解决高度塌陷方案二 * 可以在高度塌陷的父元素的最后,添加一个空白的div *原创 2017-07-23 21:48:35 · 322 阅读 · 0 评论 -
CSS之清除浮动clear
.box1{ height: 100px; width: 100px; background-color: red; float: left; } .box2{ height: 200px; width: 200px; background-color: yellowgreen; /* * 由于受到bo原创 2017-07-23 21:46:04 · 322 阅读 · 0 评论 -
css练习之导航条
*{ margin: 0px; padding: 0px; } .nav{ /*去除项目符号*/ list-style: none; background-color: grey; width: 1000px; margin: 50px auto; /*解决高度塌陷问题*/ overflow: hidden原创 2017-07-22 20:26:08 · 447 阅读 · 0 评论 -
CSS之高度塌陷问题解决方案
.box1{ border: 10px red solid; /* * 根据W3C的标准,在页面中都有一个隐含的属性叫Block Formatting Context * 简称 BFC,该属性可以设置打开或者关闭。默认是关闭的。 * 当开启元素的BFC后,元素将会有一下特性: * 1、父元素的外边距不会和子元素重叠 *原创 2017-07-22 18:10:39 · 772 阅读 · 0 评论 -
CSS之高度塌陷问题1
.box1{ /* * 为box1设置边框 * 宽度和父元素一样宽 * 高度被内容撑开 */ border: 10px red solid; } .box2{ width: 100px; height: 100px; background-color: blue; /* * 在文档流中父元原创 2017-07-22 18:08:36 · 375 阅读 · 0 评论 -
CSS浮动之三
.box1{ /* * 在文档流中,子元素的宽度默认占父元素的全部 */ /*height: 100px;*/ background-color: yellow; /* * 当元素设置浮动以后,会完全脱离文档流 * 块元素脱离文档流后,高度和宽度被实际任荣撑开 */ /*float: left;*/ }原创 2017-07-22 17:19:07 · 244 阅读 · 0 评论 -
CSS浮动之二
*{ margin: 0px; padding: 0px; } .box1{ width: 100px; height: 100px; background-color: #bfa; float: left; /* * 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围 * 所以我们可以用浮动来设置文字环绕效原创 2017-07-22 17:18:04 · 263 阅读 · 0 评论 -
CSS属性之浮动flow
浮动练习 /* *问题:如何让三个方块横着排列 * 方法1、可以把块元素变为行内块元素 * */ .box1{ width: 100px; height: 100px; background-color: red; /*display: inline-block;*/ /* * 如果希望块元素水平排列,原创 2017-07-22 16:24:01 · 951 阅读 · 0 评论 -
CSS定位之元素的层级
定位练习1 .box1{ width: 100px; height: 100px; background-color: red; position: relative; } .box2{ width: 100px; height: 100px; background-color: yellow; positio原创 2017-07-22 15:57:08 · 4544 阅读 · 0 评论 -
CSS定位之固定定位
固定定位 .box1{ width: 100px; height: 100px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: yellow; /* * 当position元素为fixed原创 2017-07-22 15:55:03 · 387 阅读 · 0 评论 -
CSS定位之绝对定位
绝对定位01 .box1{ width: 100px; height: 100px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: yellow; /* * 当position属性设置为absolu原创 2017-07-22 15:52:44 · 334 阅读 · 0 评论 -
CSS之解决高度塌陷问题方法终极版
.box1{ border: 1px solid red; } .box2{ width: 100px; height: 100px; background-color: blue; float: left; } /* * 通过after伪类添加一个空白的块元素,然后对其清除浮动 * 而且不会在结构中添加div原创 2017-07-23 21:49:44 · 2048 阅读 · 0 评论