css学习小结
网站1：can i use 用于查看浏览器兼不兼容
网站2：mdn 查看元素属性 类似w3shcool
网站3：17素材网 用于下素材
网站4：SegmentFault
网站5：掘金
1. 定位参照于谁块来定位？
没有定位：包含块
相对定位: 元素本来的位置
绝对定位：包含块
如果最近的祖先元素中存在定位元素，则这个定位元素就是包含块
如果没有，包含块为初始包含块
固定定位 : 视口
ps：怎么判断包含块：
1.如果没有定位（static）或者是相对定位（relative），那么包含块就是祖先元素区域
2.如果是fixed，包含块为初始包含块（html）
3.如果是absolute
1.祖先元素没有定位 -------初始包含块（html）
2.祖先元素有定位，但是是行内元素-------初始包含块（html）
3.以上条件都不满足-------祖先元素
图片来源：http://w3help.org/zh-cn/kb/008/
2. 什么是初始包含块？
是一个视窗大小的矩形，但不是视窗本身
3. 默认值和继承
left top right bottom width height 默认值为auto 不可继承
margin padding 默认值 0 不可继承
4. 百分比参照于谁
width margin padding:包含块的width
height:包含块的height
left:包含块的width
top :包含块的height
5. 浮动
浮动提升半层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> *{ padding: 0px; margin: 0px; } </style> <body> <div style="width:100px;height:100px;background: purple;float: left;"> aaaaa </div> <div style="width:200px;height:50px;background:red;"> bbbbbbbbbbbb </div> </body> </html>
6. 三列布局
两边固定，当中自适应
中间列要完整的显示
中间列要优先加载
实现方式：定位、浮动、圣杯、双飞翼
7. fixed（解决ie6 fixed无效方法）
使用绝对定位来模拟固定定位
1.禁止系统滚动条
2.将滚动条加给body
3.让body的尺寸变为视口的尺寸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> *{ padding: 0px; margin: 0px; } html{ height:100%; overflow: hidden; } body{ height: 100%; overflow: auto; } #content{ position:absolute; left: 30px; top:50px; background: purple; width: 100px; height:100px; } </style> <body> <div id="content"> </div> <div style="height: 2000px;"> </div> </body> </html>
8. BFC
bfc--block formatting-context 块级格式上下文
bfc布局规则：
1.内部的box会在垂直方向一个接一个地放置（意思就是：块级元素单独占一行）
2.bfc区域不与浮动box重叠 （以下为验证）
3.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
必须同时满足3个条件才会出现以上情况：1.在同一个bfc下
2.相邻的两个元素
3.相邻的两个元素还必须都是块级元素
4.计算BFC的高度时，浮动元素也参与计算（如果父元素没有设置高度，子元素又浮动，就会造成高度坍塌，解决办法就是让父元素触发bfc，因为bfc计算高度，浮动元素也参与）
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
BFC的触发条件：
- 根元素(html)
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible（常用）
清除浮动的办法：
1.给父级加高度（ 扩展性不好）
2.开启BFC （ie 6 7底下不支持BFC）
3.br标签 （<br clear="all" /> ie6 不支持 并且违反了结构 行为 样式相分离的原则）
4.空标签 （<div style="clear: both;"></div> 违反了结构 行为 样式相分离的原则，ie6下元素的最小高度为19px
可以尝试给元素的fontsize设为0---> 2px）
5.伪元素 + 开启haslayout（因为ie6 7 下不支持伪元素 ，所以要额外的去开启haslayout）.clearfloat{ *zoom: 1; } /* 将缩放设为1开启haslayout *号是ie6 7 识别的css hack*/
.clearfloat::after{ content: "";display: block;clear: both;}/*ie6 7 不支持伪元素*/
haslayout：拥有布局（ie67 没有bfc概念 ie8及以上就不用了考虑这个问题了）
默认拥有布局的元素：html body table tr td img hr input select textarea button iframe embed object applet marquee
因此：div不拥有布局，特定情况下需要触发haslayout
触发haslayout的办法有：
- float:left 或者 right
- display: inline-block
- position:absolute
- width:除了auto外任何值
- height：除了auto外任何值
- zoom：除了normal外任何值（*zoom:1 使用较多）
- writing-model：tb-rl
验证2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> *{ padding: 0px; margin: 0px; } #left{ width:200px; height:100px; background: purple; float: left; } #right{ height: 100px; background: green; overflow: hidden;/* 这个属性就是开启bfc bfc区域不会与float box重叠 */ } </style> <body> <div id="left"> zuo </div> <div id="right"> you </div> </body> </html>
验证3：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #up{ width: 200px; height: 200px; background: purple; margin: 50px; /*display: inline-block;/* 解决方式1 让其中一个不是块级元素*/ } #down{ width: 200px; height: 200px; background: green; margin: 50px; } </style> <body> <div style="overflow: hidden;"><!-- 解决办法3 开启bfc 让其不在一个bfc下--> <div id="up"> </div> </div> <!-- <br> --> <!-- 解决办法2 不让其相邻 --> <div id="down"> </div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #up{ width: 400px; height: 400px; background: purple; margin: 50px; /* border: 1px solid black; *//* 方法1：不让其相邻*/ /* display: inline-block; */ /*方法2 不是块级元素*/ overflow: hidden; /* 方法3：开启bfc */ } #down{ width: 200px; height: 200px; background: green; margin: 50px; } </style> <body> <div id="up"> <div id="down"> </div> </div> </body> </html>
验证4：清除浮动的最常用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #boss{ border: 1px solid; } #in{ float: left; width: 200px; height: 200px; background: pink; } /*开启haslayout 支持ie6 7*/ .clearfloat{ *zoom: 1;/* *号是ie6 7 识别的css hack*/ } /*ie6 7 不支持伪元素*/ .clearfloat::after{ content: ""; display: block; clear: both; } </style> </head> <body> <div id="boss" class="clearfloat"> <div id="in"> </div> </div> </body> </html>
其他杂项：
font-size:最小为12 默认为16 可继承 单位有px em（自身大小：2em=自身大小两倍） %
font-weight：100-500（细） 600-900（粗）
font：bolder italic 20px "微软雅黑" 格式有特定要求 大小必须在字体前面 bolder和italic后面 bolder和italic位置可以互换
行高：有顶线 中线 基线 底线 两个基线之间的距离叫行高
一般行高初始化body{line-height:1} p,span{line-height:1.5}
color: 谷歌浏览器f12 按住shift点击颜色可以转换格式
text-indent：2em 首行缩进
letter-space：10px 字间距
word-space：10px 单词间距 一个空格算一个单词
white-space：nowrap 不换行
vertic-align：middle 只适用inline-block元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #b:after{ content: "1"; width: 2px; height: 100%; background: purple; vertical-align: middle; display: inline-block; } #a{ vertical-align: middle; } </style> <body> <div id="b" style="width:300px;height:400px;border:1px solid;text-align: center;"> <img id="a" src="http://img2.imgtn.bdimg.com/it/u=1651650751,3930891035&fm=26&gp=0.jpg" alt="" width="100px"> </div> </body> </html>