定位方案（Position Schemes）
三种定位方案对比.png
- 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
float 水平布局
-
none (default)
-
left
-
right
-
元素一旦浮动后, 脱离标准流
-
朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
-
定位元素会层叠在浮动元素上面
float规则
- 不能与行内级内容层叠，行内级内容将会被浮动元素推出
-
比如行内级元素、inline-block元素、块级元素的文字内容, 都会被推出
-
利用此特性可以实现文字环绕功能
musk.png
- 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
-
设置line-height或者添加其他元素的时候会出现
demo1.png
-
浮动元素之间不能层叠
demo2.png
demo3.png
- 浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端
demo4.png
效果及代码实现.png
效果
1. 在浮动流中, 向相同方向浮动的元素, 先浮动的在前面
- 元素浮动之前在第几行, 浮动后就在第几行
div标签里面的内容是行内级的,并且不能被浮动元素覆盖
2. 多个浮动元素效果
-
如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
-
原因, 浮动有顺序
浮动顺序.png
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
向下浮动.png
training 原理部分
- 左浮找左浮,右浮找右浮
常用场景
- 解决行内级元素、inline-block元素的水平间隙问题
页数索引.png
- 实现豆腐块效果
豆腐块效果.png
重置样式 css reset
/* 重置样式 - CSS Reset */
ul, li, h2 {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}</pre>
练习二 伪元素实现 使用::after设置下划线
-
小图标, 不具有特别意义的, 用精灵图(背景图)实现,没必要用img
-
::after和::before 的display默认是inline
-
content不能省略
-
可以用::before和::after取代子元素, but不能滥用. eg.购物车图标
-
只能用于可有可无的元素, 重要内容不要用. reason: 本质是Css样式, 可能加载失败
清浮动的原因----高度坍塌(脱标的浮动元素的高度被算入父元素)
-
由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
-
父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
-
清浮动(清理浮动、清除浮动):解决父元素高度坍塌问题的过程
-
目的: 让父元素计算总高度的时候，把浮动子元素的高度算进去
清浮动常见方法
1. (推荐) 终极解决方案.
-
给父元素增加::after伪元素
-
不过伪元素不支持IE浏览器
-
好处: 纯CSS样式解决，结构与样式分离
.container::after {
content: "";
display: block;
clear: both;
height: 0;/*兼容旧浏览器*/
visibility: hidden;/*兼容旧浏览器*/
}
.container {
*zoom: 1;/*兼容IE6~7浏览器*/
}
- 绑定类名方法. 很常用
/*也可以用外联样式表*/
<link rel="stylesheet" href="css/clear-fix.css">
/*在要使用的元素上加上类*/
<ul class="clear-fix">
其他解决方案(不推荐)
1. 给父元素设置固定宽高 扩展性不好
2. 给父元素也设置浮动(很有可能导致所有元素浮动, 因为是一家子^^) ---------- BFC问题导致
3. 让父元素设置为绝对定位元素----- 因为绝对定位元素的高度会汇报...待补充)-------------BFC问题导致
-
给父元素设置display为inline-block、inline-table、table、table-cell、table-caption
-
给父元素设置overflow为visible(default)以外的值（比如hidden、auto、scroll）
-
方法3,4,5 改变了盒子特性 (不推荐)
-
方法6 改变了父元素对内容溢出的默认行为 (不推荐)
6. 给父元素设置一个空的块级元素,设置clear:both(结构与样式分离)
7. 设置空行属性
<br clear="all">
实现原则: 1.不要修改元素的类型 2. 要有扩展性 3. 要用纯css实现(不违反结构与样式分离)
clear 常用取值
-
left：要求元素的顶部低于之前生成的所有左浮动元素的底部
-
right：要求元素的顶部低于之前生成的所有右浮动元素的底部
-
both：要求元素的顶部低于之前生成的所有浮动元素的底部
-
none：默认值，无特殊要求
-
一般就只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠
清浮动 !!! warning
- 清浮动的时候, 若在整个父元素中需要有不算入高度的脱标元素, 设置其为子绝父相.
图片品质
-
50-80即可
图片格式选择.png
- 每一份单独的图片最好都保留一份PSD格式文件, 方便以后修改
CSS官方文档解读
文档属性值.png
组合 combinators
组合.png
出现次数 multipliers
出现次数.png
类型 types
类型.png
-
带有<>为新的复杂类型不能直接写, 需要点进去查看
-
''为已有的类型
网友评论