高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲box2多高,box1就多高。此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素, 导致父元素的高度丢失,就是我们说的高度塌陷问题。父元素一旦高度塌陷,则它下边的元素会向上移动, 导致整个页面的布局混乱 。 定 ...
分类:
Web程序 时间:
2018-04-23 18:49:21
阅读次数:
1453
.test1 { color:white; height: 50px; line-height: 50px; background:black; } .test2 { 在文档流浮动起来,块级自动沾满行取消,宽度自适应内容,视同行内元素,紧跟着兄弟元素,相对位置不变,后面的元素会前移动 positio ...
分类:
Web程序 时间:
2018-04-20 16:14:12
阅读次数:
178
空白折叠的前提是在html标准文档流的前提下 定位和浮动脱离文档流之后就不会有空白折叠了相对定位不会脱离标准文档流 第一种去除的办法是直接在HTML内去除所有空格 第二种去除办法是给要去除空白折叠元素的父元素加font-size : 0 第三种去除办法是给元素设置margin-top:-4px :f ...
分类:
Web程序 时间:
2018-04-20 16:09:35
阅读次数:
988
出现溢出的情况:1.行内元素不换行内容超出包含块外边界2.块元素宽高超出包含块外边界为什么会出现overflow:hidden失效的问题:大多数情况下是给当前元素设置了position:absolute定位属性,导致脱离文档流,当前元素不再受包含块的约束了解决办法:给包含块设置position:relative;让包含块重新获取管辖权
分类:
其他好文 时间:
2018-04-20 11:45:25
阅读次数:
133
Python web前端 10 bootstrp 1、媒体查询 2、布局容器 3、栅格系统 4、排版 5、表格 6、表单 7、按钮 8、图片 9、辅助类 10、字体图标 11、下拉框 12、按钮组 13、输入框组 14、导航 15、导航条 16、分页 17、进度条 ...
分类:
编程语言 时间:
2018-04-12 16:17:52
阅读次数:
186
此时是有效果显示的因为html文档流默认是从上往下,从左往右进行显示的,所以此时是有效果的。那如果此时把#son的块元素的margin-right:20px; 是没有效果的此时是没有效果的,如图所示:如果此时想要margin-right有效果的话,必须让#son这个块元素是在右边显示的,所以可一个#son这个元素往右浮动,float:right;那么此时就会有效果的。效果如图所示:
分类:
其他好文 时间:
2018-04-12 16:16:11
阅读次数:
115
CSS第二天: CSS内边距属性:padding 填充 Padding:一个数字,指的是四个方向是一样的(上右下左) Padding-top,padding-right,padding-bottom,padding-left Padding:两个数字 Padding:10px 20px; 指的是上下 ...
分类:
Web程序 时间:
2018-04-11 23:04:24
阅读次数:
277
css的两栏布局是比较经典的布局之一,一般是左(右)边定宽,右(左)边自适应。 实现的方式也比较多,今天主要介绍3种。 1.浮动方法,使第一个div浮动起来脱离文档流,下面的div自动向上 2.绝对定位法 此方法的原理是将左侧的div设置为position:absolute,右侧默认宽度,并将mar ...
分类:
Web程序 时间:
2018-04-11 15:47:46
阅读次数:
187
清除浮动的几种方式和兼容性处理 在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷) 知道浮动和为什么要清除浮动之后我们可以 ...
分类:
其他好文 时间:
2018-04-09 21:04:07
阅读次数:
174
写在前面:本文参考阮一峰的网络日志及部分网友知识综合讲解,只要能讲清楚就行嘛哈哈哈 1 flex布局 1.1 引入 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。 CSS 标准为我们提供了 3 种布局方式:标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞 ...
分类:
其他好文 时间:
2018-04-09 13:07:45
阅读次数:
233