正式开始总结自己学习的一些东西, 那就先从最简单的 CSS html 开始吧.
我不是大神(并非原创), 我只是一名 年轻的樵夫哟! 呸呸呸, 我是一名搬运工. 笔记都是我从各大网站学习把一些重点记下来, 有本站的一些不错的笔记, 有张鑫旭的教程, 有需要的同学可以去慕课网学习.
css 盒子模型
1.W3C 盒子模型 content + padding + border + margin.
2.IE 盒子模型 content + margin (content 包含 padding border).
定位篇
1.relative 相对定位
限制作用
(1)限制 left/ top/ right/ bottom 定位
(2)限制 z-index 层级(在 fixed 这边只有这个层级起作用, 其他两个不限制)
(3)限制在 overflow 下的嚣张气焰(absolute 在没有 relative 的限制下 overflow 是无视的!)
定位
(1)相对自身(相对自身定位, 在原来的位置上偏移)
(2)无侵入(不像 margin 的位移, 位移前所占的位置还存在)
(3)设置四个方向的定位 只有 top/ left 起作用
z-index 层级
原始的层级是 dom 后面的元素覆盖前面渲染的元素.
(1)设置 relative === 设置了 z-index:auto
(2)新建层叠上下文与层级控制(如果 relative 设置 z-index:auto 就不会限制 absolute 的层级关系)
realtive 的最小化影响原则 --- 尽量降低 relative 属性对其他元素, 布局的潜在影响
(1)尽量避免使用 relative(因为设置 relative 会有层级的各种问题)
(2)relative 最小化(如果一定要使用, 用空 div 单独包裹定位元素, 空 div 不会占据尺寸影响 dom)
2.absolute 绝对定位
absolute == float 都有包裹性 破坏性(让父元素塌陷)
clear 解决 float 带来的影响, relative 解决 absolute 带来的影响
(1)独立 无依赖
使用 absolute 不一定需要使用 realtive, 不使用 top/ right/ bottom/ left 值.
(2)脱离文档流(去浮动, 位置跟随)
在 absolute 下 float 无效.
设置 absolute 直接脱离了文档流, 以前在什么位置现在还是在什么位置(以前是什么 display 定位后还是那个 display 属性), 但是发生了层叠.
配合 margin 来精确的定位(支持负值), 不使用 realtive 定位, 不与父元素耦合.
absolute 的一些技巧
常用的居中的几中方法 text-align: center; 元素块级化 margin:0 auto; 元素相对定 top / left 50%,margin-top/ margin-left - 元素宽高的一半.
设置一个空格, 让空格 text-align:center/ left /right, 再在后面添加图片, 让图片绝对定位, 再 margin 调整位置.
使用 absolute 的元素因为脱离了文档流能够超出父容器.
动画尽量作用在绝对定位元素上
(3)层级
垂直空间的层次, 同样设置了 absolute 的元素后面渲染的元素会覆盖前面渲染的元素.
1. 绝对定位不需要 z-index 就会覆盖普通的元素.
2. 两个绝对定位, 控制 dom 流的前后顺序达到覆盖效果.
3. 多个绝对定位交错, z-index: 控制
4. 非弹框的绝对定位元素 z-index 不要 > 2, 否则根据前面的几条优化代码.
(4)定位
如果在父元素谁知任何一个 position 定位属性就能限制 absolute 的定位.
1. 可以设置一个值, 两个值, 四个值来定位.
2. 设置相对的方向 不是位移, 而是元素拉伸(ie7+)
3. 容器无需固定 width/ height 值, 内部元素也可以拉伸.
4. 容器拉伸, 一般情况下百分比的 height 要起作用需要父容器有 height 值并且不是 auto, 在绝对定位的情况下, 只要父容器是绝对定位拉伸的就行.
5. 在绝对定位的情况下设置 width/ height, 会无视偏移值, 使用 width,height 设置的值, 只有在 margin:auto; 的情况下两者才能共存, 反而达到绝对居中的效果(IE8+)
6. 绝对定位布局
(1)body 降级, 子元素升级
升级子 div 满屏 position:absolute;left:0;top:0;right:0'bottom:0;
受限于父级, 需要给 html,body{height:100%}
各模块都在子元素里面新建, 利用 absolute 百分比定位布局.
-------------------------------------------- 格叽格叽格叽格叽 -------------------------------------------------------------------------
float 篇
1.float 的历史
float 最初的作用是为了实现文字环绕效果.
2. 包裹性与破坏性
(1)收缩 -- 会把里面的子元素包裹起来
其他一些具有包裹性的小伙伴
display:inline-block/ table-cell position: absolute /fixed /sticky overflow:hidden/ scroll
(2)坚挺 -- 会产生高度
(3)隔离 -- 产生了 bfc 块计格式化上下文
(4)破坏性 -- 会让父容器高度塌陷
其他一些具有破坏性的小伙伴
display: none; position: absolute /fixed /sticky
3. 清楚浮动带来的影响
(1)clear:both;
在 html 代码中 需要清楚的元素底部插入空 div(多余的 div 标签)
也可以使用 css after 伪元素底部生成(ie6/ie7 不兼容)
(2)父元素 BFC(IE8+ haslayout(ie6/ie7))
可以实现 bfc 的属性
float: lfet/ right; position: absolute/ fixed; overflow: hidden/ scroll (ie7+) display: inline-block/table-cell(ie8+); width/height/zoom:1(ie6/ie7)
(3)清楚浮动最好的方法(clearfix 应用在包含浮动子元素的父级元素上)
- .clearfix{ *zoom:1;}
- .clearfix:after{ content:''; display: table; clear: both;}
4.float 的滥用
(1)float 会把元素变成 block 块状元素(砖头化)
(2)破坏性(去空格化) 参考文字环绕效果
(3)浮动布局的缺点 1. 容错性差 2. 固定尺寸, 难重用 3. 低版本不兼容
5.float 的流体布局
1. 单侧固定 给需要固定的元素加 width + float 然后使用 padding margin 腾空固定元素的空间.
2. 两边自适应 一侧 float 另一侧设置 display:table-cell (IE8+) display:inline-block (IE7)
6.float 的兼容性
在 ie7 下有很多浮动的问题, 最好不要使用 float 来做布局, 就只使用流体布局.
z-index 篇
1.css z-index 基础
z-index 属性指定了元素及子元素的[z 顺序] , 哪个值大哪个就在最上面.
z-index 属性值支持 auto, 整数(负数), inherit 继承
1.z-index 与定位属性
(1)除了 static 默认值, 其他的定位都支持
(2)定位元素 z-index 没有发生嵌套的情况
1. 后来居上的准则, 根据 dom 的渲染后面覆盖签名的.
2. 哪个大, 哪个就在上面.
(3)定位元素 z-index 发送嵌套
会根据祖先元素的 z-index 来决定上下,* 如果 z-index 是 auto 不会创建安新的层叠上下文, 并且设置 auto 的那个元素居上.
2.z-index 层叠上下文, 层叠水平
层叠上下文就是 z 轴的层叠关系, body-- 根层叠上下文. z-index 数值定位元素也具有层叠上下文.
层叠上下文里面都有一个层叠水平, 追定 z 轴的显示顺序, 遵循 后来居上 谁大谁上的层叠准则.
层叠上下文 可以嵌套 不影响兄弟元素, 只影响后代元素 当元素内部层叠只限于父层的层叠顺序中
(4)层叠顺序 --- 规范元素重叠时候的呈现规则
block float background 一般都是修饰布局属性, inline inline-block 一般都是放内容, 所以会覆盖前面的.
3.z-index 与层叠上下文的表现
几个特点
在层叠水平上 定位元素 z-index:auto 可以看成是 z-index:0, 但是 auto 不会创建上下文, 0 可以, 这就是两者的差异.
谁知 position:relative 就等于 z-index:auto;
2.z-index 值除了 auto 的定位元素会创建层叠上下文.
3.z-index 层叠顺序止步于父级层叠上下文.
不管内部元素的 z-index 有多高, 都受限于父元素的层叠水平.
4. 其他 css 属性与层叠上下文
父元素 display:flex;
2. 元素的 opacity 值不是 1;
3. 元素的 transform 值不是 none;
4. 元素的 mix-blend-mode 值不是 normal;
5. 元素的 filter 值不是 none;
6. 元素的 isolation 值是 isolate;
7.position:fixed 声明;
8.will-change 指定的属性值为上面任意一个;
5.z-index 与其他 css 属性层叠上下文
1. 用 css 达到的层叠上下文的属性都 是 z-index:auto; 在这里情况下参考后来居上的准则.
2. 不管是在什么情况下, 一定要考虑父级有没有创建层叠上下文, 可能出现的 bug 是以根元素层叠上下文.
3. 在制作动画的时候 transform ,opacity 会改变层叠水平! 出现覆盖的 bug.
6.z-index 相关实践分享
1. 最小化影响原则 -- 避免 z-index 嵌套层叠关系混乱
做法: 避免使用定位属性 定位属性从大容器平级分离为私有小容器;
2. 不犯二准则
做法: 对于飞浮层元素, 避免设置 z-index 值, 使用也不超过 2;
3. 组件层级技术
4. 可访问性隐藏
做法: 使用一些 css 属性 margin 定位 剪裁 到屏幕之外, 肉眼不可见, 但是实际上渲染了. 也可以实习 z-index=-1;
padding 篇
1.css padding 与容器的尺寸
1. 对于 block 水平的元素
(1)默认情况下是会有影响容器的尺寸.
(2)width 非 auto 也会影响.
(3)width 为 auto; 或者 box-sizing 为 border-box, 同时 padding 不暴走, 不会影响.
2. 对于 inline 水平元素
(1)水平 padding 影响尺寸, 垂直 padding 不影响尺寸.
(2)会影响背景色(占据空间)
利用这一特效
2.css padding 负值跟百分比值
1.padding 不支持负值.
2.padding 百分比是相对于宽度计算的.
padding:50% 是一个正方形
3.inline 元素的 padding 会断行, 如果 padding 值大于容器了, 会出现断行.
4.inline 元素有 "幽灵空白节点", 规范中的 "strut". 只有设置 font-size:0; 才能解决.
3. 标签元素的内置 padding
1.ol/ul 列表(建议设置 22px~25px)
内置 padding-left; 但是单位是 px; 字号很小间隔很开, 字号很大, 需要爬到容器外面.
2. 所有浏览器 input/textarea 输入框内置 padding
3. 所有浏览器 button 按钮内置 padding
解决 firefox 浏览器 bug -moz-focus-inner{padding:0;}
解决 IE overflow:visible;
4. 部分浏览器 select 下拉内置 padding,firefox IE8 + 可以设置 padding
5. 所以浏览器 radio/ chexkbox 无内置 padding
6.button 按钮元素的 padding 最难控制
建议使用 label 标签来模拟按钮, 再把按钮移除屏幕外面.
4. 巧用 padding 绘制图形
两栏自适应布局, 给父元素设置 overflow 然后两边都设置相同的 margin-bottom 值, 用相应的值用 padding 填充.
border 篇
1.border 不支持百分比值
因为 border 不需要按照不同的设备放大缩小边框. 另为 outline box-shadow text-shadow 也不支持百分比数值.
border-width 支持关键字 thin(薄薄的 1px) medium(薄厚均匀 3px) thick (厚厚的 5px)
2. 了解 border-style 各种类型
solid 实线 dashed 虚线(在 IE 下变成了小圆点) double 双线
3.border-color 与 color
border-color 的默认颜色就是 color.box-shadow ,text-shadow 也是同样的.
4.border-background 定位
元素的 border 不计算在 background 的定位区域里面.
5.border 与三角形
border 可以画三角形, 也可以模拟圆角 (就是上下很细长的梯形) 具体代码不码了.
6.border 与透明边框
透明边框可以用来画三角形, 画简单的图形, 还可以用 border 的透明来增加空白区域, 然后用 box-shadow 来代替 border;
使用 filter 滤镜来重绘图标
.icon{ position: relative; left: -20px; border-right: 20px solid transparent; filter: drop-shadow(20px 0 颜色);}
7.border 的布局
等高布局 * 局限: 不支持百分比宽度.
line-heightr 篇
1.line-height 的定义
基线 -- 让字母排列整齐的一条线 不同的字体基线不同.
单纯的 line-height 并没有居中了.
2.line-height 与行内框盒子模型
<p > 这是一行普通的文字, 这里有个 < em>em</em > 标签.<p>
(1)内容区域 就是文字的区域, 看不见的盒子.
(2)内联盒子就是 inline 标签 就像 em. 如果光秃秃的只有文字 叫做 匿名内联盒子.
(3)行框盒子 在 p 标签里面的内容就是行框盒子, 是由一个一个的内联盒子组成.
(4)包含盒子 可以理解为整个 p 标签, 是由一行一行的行框盒子 组成.
3.line-height 的高度机智
内容区域 和 行间距 等于 元素的高度 等于行高.
元素的高度不是 元素内部高度最高的内联元素的高度.
多行文本的高度就是单行文本高度的累加.
4.line-height 的支持属性值
1. 如果是 number 数值, 行高值就等于 number font-size.
2.length 长度值 em,rem,px,pt, 直接等于设置的长度.
3.percent 百分比 , 行高值等于 百分比 font-size.
4. 继承.
5. 数值跟百分比 相对单位的区别.
数值: 所有可继承的元素根据 font-size 重经计算行高; 例如 line-height 值乘以不同的 font-size.
百分比: 当前元素根据 font-sie 计算行高, 再继承给下面的元素, 例如 line-height 乘以 font-size, 继承给子元素.
在媒体查询就是使用 body 全局数值行高 body{ font-size: 14px; line-height: 1.4286;}
5.line-height 与图片
1. 隐匿文本节点
空文本标签设置 text-align:center 能让内部图片居中(absolute).
消除隐匿文本节点, 也就是图片下面的空白 (1)图片块状化 img{display:block;} (2)图片底线对齐 vertical-align:bottom; (3)父容器基线上移让继行高足够小 line-height:0;
2. 小图片大文字
使用 vertical-align 微调.
4.line-height 的实际应用
1. 图片的水平垂直居中 ie8+
2. 多行文本水平垂直居中 ie8+
3. 标题单行文本居中直接写 line-height, 不需要写 height line-height 两个.
overflow 篇
1.overflow 基本属性值
- [ol]
- [li]visible(默认)[/li]
- [li]hidden(把超出部分隐藏)[/li]
如果 overflow-x /y 值相同 就等于 overflow:hidden; 不同, 一个值会赋予 visible(默认), 另一个值会赋予 hidden auto.
[li]scroll(增加滚动条, 滚动滚动条显示溢出部分)[/li]
在 IE7 下如果突然出现了水平滚动条, 可能是设置了 width:100%, 去掉即可解决.
有滚动条的两个前提:(1)非 display:inline (2)有尺寸限制.
- [li]auto(智能, width 还是 height 溢出只能添加滚动条)[/li]
- [li]inherit(继承)[/li]
- [li]visible[/li]
解决 IE7 浏览器下, 文字越多, 按钮两侧 padding 留白越大.
[/ol]
2. 滚动条出现的条件
1. 滚动条出现的条件
overflow:auto ,overflow:scroll(天生自带滚动条 html,textarea)
内容超过了容器的宽高.--- 草窝藏不住凤凰, 潜水困不住蛟龙.
默认滚动条是来自 html, 如果是 body 会有 8px 的 margin.
获得滚动高度的写法 document.documentElement.scrollTop || document.body.scrollTop;
overflow 的 padding-bottom 缺失现象, 会导致 scrollHeight(元素内容高度不一样).
滚动条的宽度均是 17 像素.
水平居中调动问题的修复
1.html{overflow-y: scroll;} IE7 8
2.padding-left:calc(100vw-100%;) 显示器 100vw - 浏览器宽度(可用内容 100%)== 滚动条宽度.
自定义滚动条
IE 跟其他浏览器都要单独分别设置, 建议用 jq 插件.
3.overflow 与 BFC
1.BFC 就是块级格式化上下文, 相当于产生一个结界, 里面外面互不影响.
以下都能产生 bfc
overflow:hidden; 自适应, 但 溢出不可见 限制应用场景
float + float 包裹性 + 破坏性, 无法自适应, 块状浮动布局
position:absolute 脱离文档流, 没毛用
display:inline-block 包裹性, 无法自适应 ie6 /7 block 水平不相识
display:table-cell 包裹性, 但天生无溢出特性, 绝对宽度也能自适应
(1)清除浮动影响(ie7+)
hidden auto scroll 都可以清楚, 但是会有 bug, 不建议使用清楚. float 有更好的写法.
(2)避免 margin 穿透问题
hidden auto scroll 都可以.
(3)两栏自适应布局
一栏左浮动, 第二栏 bfc 格式化
display:table-cell;width:2000px;IE8+ bfc 特性
display:inline-block;width:auto;IE7 伪 BFC 特性
3.overflow 与绝对定位
absolute 会让 hidden 失效, 会让滚动失效
失效原因: 绝对定位不总是被父级 overflow 属性剪裁, 尤其是当 overflow 在绝对定位元素及其包含块之间的时候.
解决方法: 1.overflow 元素自身为包含块 添加 relative.
2. 子元素为包含块 需要剪裁的元素再包裹一层 div 添加 relative.
*3.overflow 子元素 transform 也能解决 IE9
4.overflow 的样式表现
(1) resize 拉伸 --css3 属性, 可以拉伸元素尺寸.
resize:both 水平垂直两边拉;
resize:horizontal 只有水平方向拉;
resize:vertical 只有垂直方向拉;
要想起作用, 元素的 overflow 属性值不能是 visible.
文本域天生自带 overflow:auto 属性.
(2)ellipsis 文字溢出点点点省略
text-overflow:ellipsisi 文本溢出省略号表示
overflow:hidden;white-space:nowrap(在一行显示);
5.overflow 与锚点技术
1. 锚点 -- 改变容器的滚动高度
(1)容器可滚动
(2)锚点元素在容器内
直接用 css 就能实现跳转, 添加需要跳转的元素 id, 对应给 a 标签 href="id" 就能实现跳转.
margin 篇
1.margin 与容器
(1)固定宽高的 block 水平元素,(宽高设死了)不会影响可是尺寸.
(2)没有定宽高的默认 block 水平元素, margin 也只能改变可视尺寸的水平方向, 垂直方向不能改变.
(3)占据尺寸 block inline-block 适用, 与是否设定 width,height 值无关, 适用于水平方向和垂直方向.(上下留白 padding 浏览器会不兼容, 用 margin 代替)
2.margin 与百分比单位
(1)普通元素的百分比 margin 都是相对于容器的宽度计算的.
(2)绝对定位元素的百分比 margin 相对于第一个定位祖先元素的宽度计算.
利用这一特效 自适应矩形 宽高都是 2:1.
3.margin 与 margin 重叠
(1)margin 只出现在 block 水平元素, 且不考虑 writing-mode, 只发生在垂直方向 top bottom.
[ol]
[li]相邻的兄弟元素[/li]
[li]父级和第一个 / 最后一个子元素[/li]
父子 margin 重叠的几个条件
(1)父元素非块状格式化上下文元素
(2)父元素没有 border-top 设置
(3)父元素没有 padding-top 值
(4)父元素和第一个子元素之间没有 inline 元素分割
(5)这一调是针对 bottom 重叠 : 父元素没有 height, min-height,max-height 限制.
[li]空的 block 元素[/li]
(1)元素没有 border 设置
(2)元素没有 padding 值
(3)里面没有 inline 元素
(4)没有 height, 或者 min-height
[/ol]
(2)重叠的计算
[ol]
[li]正正取大值[/li]
[li]正负值相加[/li]
[li]负负最负值[/li]
[/ol]
重叠的意义: 1. 兄弟之间的重叠: 主要为了避免连续段落或列表的排版不自然.
2. 父与子的重叠: web 中任何地方嵌套或直接放入裸 div, 都不会影响原来的布局.
3. 空 block 元素: 遗落的空任意多个 p 元素, 不要影响原来的阅读排版.
4.margin 与 margin:auto
(1)auto-- 如果一侧定值, 一侧 auto,auto 为剩余空间大小, 如果两侧都是 auto, 则平分剩余空间.
auto 是水平的 auto, 并不能垂直 auto.
writing-mode:vertical-lr 改变成垂直流. 可以实现垂直 auto, 但是水平 auto 就失效了.
绝对定位能让 margin 水平垂直居中, 详情看 absolute 篇.(ie8+)
5.margin 与 margin 的负值定位
(1)margin 负值会改变两端对齐
(2)margin 负值实现两端对齐, 等高.
(3)margin 负值的两栏自适应布局 -- 感觉这种做法有点..(没必要)
6.margin 无效
(1)inline 水平元素的垂直 margin 无效
两个前提: 非替换元素, 正常书写模式.
(2)margin 重叠
参考签名的重叠.
(3)display:table-cell 与 margin
display:table-cell ,display:table-row 等声明的 margin 无效.
(4)绝对定位 与 margin
绝对定位的 margin 其实不管是不是有设置那个方向都是有效果的. 但是他没有跟其他元素混在一期看不到效果而已.
(5)置换元素跟 margin 的那些事 --- 这一块我感觉有点混淆, 而且有浏览器的兼容, 我跳过了.
7.margin-start margin-end(扩展, ie 不支持)
正常流向, margin-start 等同于 margin-left, 两者重叠不累加.
如果水平流是从右到左, margin-start 等同于 margin-right;
在垂直流下(writing-mode:vertical-*),margin-start 等同于 margin-top.
以下只有谷歌支持
margin-before -- 默认情况等同于 top
margin-after-- 默认情况等同于 bottom
margin-collapse : collapse (默认 - 重叠) discard(取消 margin) separate(分隔 都存在 margin)
vertical-align 篇
1.vertical-align 的值
(1)线类
baseline,top,middle,bottom
(2)文本类
text-top,text-bottom
(3)上标下标类
sub,super
(4)数值百分比类
xx px,xx em, xx %
共性: 1. 都带数字. 2. 都支持负值(margin,letter-spacing,word-spacing,vertical-align).3. 行为表现一致.
百分比值跟其他值的差异: 百分比值是相对 line-height 计算的.(IE6/ 7 百分比值不支持小数 line-height).
2.vertical-align 起作用的前提
默认状态下: 图片, 按钮, 文字, 单元格.
1.inline 水平
inline:img,span,strong,em, 匿名元素
inline-block:input(IE8+) buton(ie8+)
2.table-cell 元素
table-cell:td
3.display:block 会失效, float,absolute 间接的把元素改成了 block 元素, 所以也会失效.
4. 解决居中问题
(1)需要居中的元素添加 vertical-align:middle, 设置行高为容器高度值.
(2)display:table-cell, 只有在它自身设置 vertical-align:middle, 才能使它内部的元素 近似垂直居中.
利用 vertical-align:middle 垂直居中的一个栗子.
3.vertical-align 与 line-height
1. 默认的容器会有 "幽灵空白符" 使用 vertical-align: 会使得里面的元素跟空白符对齐.
解决方法: 1. 元素 block 化. 2. 改变 vertical-align 的属性. 3. 改变 line-height 值. 4.font-size:0 去掉空白符.
4.vertical-align 线类属性值深入理解
1.inline ,inline-block 元素 : 元素底部和整行的底部对齐.
2.table-cell 元素: 单元格底 padding 边缘和表格行的底部对齐.
3.font-size:0; 完美解决垂直居中.
5.vertical-align 文本类属性值
1.vertical-align:text-top.(与 font-size 有关)
盒子顶部和父级 content area 的顶部对齐.
2.vertical-align:text-bottom(与 font-size 有关)
盒子的底部和父级 content area 的底部对齐.
3.vertical-align:bottom middle top
不受任何东西的影响, 显示在父级盒子中.
6.vertical-align 上标下标
1. 上标下标
原声 html 中也有上标 (sup) 下标(sub)
vertical-align:super -- 提高盒子的基线到父级合适的上标基线位置.
vertical-align:sub -- 降低盒子的基线到父级合适的下标基线位置.
前端 css 规范篇
ps. 这是一篇不错的规范文章规范原文 图文排版比较详细.
极客的 css 规范文章 css 规范 http://wiki.jikexueyuan.com/project/web-development/css.html
bootstar 的一篇规范文章 HTML css 部分 http://codeguide.bootcss.com/
来源: http://www.qdfuns.com/article/25414/f9d7d2e2e25c2bef1eca4db2ed00bae0.html