2020年10月13日
定位小结
摘要： 定位模式 是否脱标占有位置 移动位置基准 模式转换（行内块） 是否使用 静态static 不脱标，正常模式 正常模式 不能 几乎不用 相对定位relative 不脱标，占有位置 相对于自身位置移动 不能 基本单独使用 绝对定位absolute 完全脱标，不占有位置 相对于定位父级移动位置 能 要和定 阅读全文
posted @ 2020-10-13 21:33 xiaochong123 阅读(84) 评论(0) 推荐(0)
定位知识点
摘要： 定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。 static 静态定位 relative相对定位 absolute绝对定位 fixed 固定定位 1 静态定位(static) - 了解 - 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位 阅读全文
posted @ 2020-10-13 20:51 xiaochong123 阅读(269) 评论(0) 推荐(0)
2020年10月12日
css属性书写顺序
摘要： 按照下述1 2 3 4 5的顺序进行书写。 （1）定位属性：position display float left top right bottom overflow clear z-index （2）自身属性：width height padding border margin backgroun 阅读全文
posted @ 2020-10-12 22:03 xiaochong123 阅读(170) 评论(0) 推荐(0)
清除浮动及清除浮动的方法
摘要： 一、为什么要清除浮动 因为父盒子很多时候不方便给高度，由于浮动元素不在占有原文档流的位置，所以他会对后面的元素排版产生影响 准确的来说，并不是清除浮动，而是清除浮动后造成的影响 本质：清除浮动主要是为了解决父级元素因为子级元素浮动引起内部高度为0的问题，清除了浮动之后父级就会根据浮动的子盒子自动检测 阅读全文
posted @ 2020-10-12 21:58 xiaochong123 阅读(209) 评论(0) 推荐(0)
2020年10月11日
margin合并和塌陷问题
摘要： 一、外边距合并 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。 阅读全文
posted @ 2020-10-11 11:30 xiaochong123 阅读(196) 评论(0) 推荐(0)
css特性-层叠性，继承性，优先级
摘要： 1.层叠性：多种css样式的叠加 原则： 1.样式冲突时遵循 就近原则，哪个样式离结构近，折行哪个 2.样式不冲突时，不会层叠 口诀：长江后浪推前浪，前浪死在沙滩上 2.继承性：子标签会继承父类的某些标签，如文本颜色和字号 注意： 1.前档的使用继承可以简化代码，建简化css样式的复杂度 2.子元素 阅读全文
posted @ 2020-10-11 10:58 xiaochong123 阅读(151) 评论(0) 推荐(0)
css属性简写
摘要： 1.font系列 font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; font-family: Arial, sans-serif; font：font-style font-weight font-si 阅读全文
posted @ 2020-10-11 10:51 xiaochong123 阅读(87) 评论(0) 推荐(0)
css布局之双飞翼布局
摘要： 双飞翼布局：为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 实现思路： 1.首先创建一出dom文档结构如下： 1 <div class="container"> 2 <div class="center"> 3 <p>主体内容区</p> 4 </div> 5 <div class="left" 阅读全文
posted @ 2020-10-11 10:11 xiaochong123 阅读(139) 评论(0) 推荐(0)
css布局之圣杯布局
摘要： 圣杯布局：都为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染） 实现思路： 使用float布局框架 ， 用margin为负值 ， position: relative定位优点 （1）兼容性好，兼容若有主流浏览器，包括万恶的IE6 （2）可以实现主要内容的优先加载 实现代码如下： 阅读全文
posted @ 2020-10-11 09:35 xiaochong123 阅读(112) 评论(0) 推荐(0)
2020年10月10日
css布局之等高布局
摘要： 等高布局： 一、假等高布局 原理：利用内外边距相抵消，注意父元素设置"overflow:hidden"，列变宽，其他列等高变化 优点：结构简单，兼容所有浏览器 缺点：伪等高，需要合理控制margin和padding值配合 1 <div class="parent"> 2 <div class="bo 阅读全文
posted @ 2020-10-10 20:58 xiaochong123 阅读(111) 评论(0) 推荐(0)
　 //雪花飘落效果