《css世界》读书笔记3
1、盒子内三个box，一行排列，间距20px
ul {
margin-right: -20px;
}
ul > li {
float: left;
width: 100px;
margin-right: 20px;
}
2、管道符
a + a:before {
content: "";
font-size: 0;
padding: 10px 3px 1px;
margin-left: 6px;
border-left: 1px solid gray;
}
a- href=""
3、box-sizing
/* * box-sizing含义指盒尺寸，更准确叫法应该为“盒尺寸的作用细节”或者叫“width作用的细节”* box-sizing属性的作用是改变width的作用细节。*/
.box {width: 100px;box-sizing: border-box;border: 1px solid}/*解决替换元素宽度自适应问题*/
input, textarea, img, video, object {box-sizing: border-box;}4、height: 100%
/*要满屏显示背景图*/html, body {height: 100%;
}div {width: 100%;height: 100%;background: url(bg.jpg);
}5、展开收起动画
/** 只需要设定为保证比展开内容高度大的值即可,因为max-height值比height计算值大的时候* 元素的高度就是height属性的计算高度，在本交互中，也就是height:auto时候的高度值。*/.element {max-height: 0;overflow: hidden;transition: max-height .25s;
}.element:active {max-height: 666px;
}6、透明图片占位
/* * 图片img必须直接没有src属性，当图片src属性缺省的时候，图片不会有任何请求，是最高效的实现方式。* 但是在Firefox浏览器下会无效，需要设置display: inline-block*/img {visibility: hidden;
}img[src] {visibility: visible;
}7、图片替换
/*如果图片原来有src地址，可以使用content属性把内容替换，就能轻松实现hover图片变成另一张图片的效果。*/8、正在加载中...动画
/* * 正在加载中...* IE6-IE9下为静态点点点，其余为loading动画效果*/dot {display: inline-block;height: 1em;line-height: 1;text-align: left;vertical-align: -.25em;overflow: hidden;
}dot::before {display: block;content: '...\A..\A.';white-space: pre-wrap;animation: dot 3s infinite step-start both;
}@keyframes dot {33% { transform: translateY(-2em); }66% { transform: translateY(-1em); }
}9、padding百分比值无论是水平方向还是垂直方向均是相对于宽度计算的
10、元素尺寸
元素尺寸：对应jq中的$().outerWidth()和$().outerHeight()方法，包括padding和border，也就是元素的border box的尺寸。在原生API中写作offsetWidth和offsetHeight，也称为“元素偏移尺寸”。
元素内部尺寸：对应jq中的$().innerWidth()和$().innerHeight()方法，包括padding但不包括border，也就是元素的padding box的尺寸。在原生API中写作clientWidth和clientHeight，也称为“元素可视尺寸”。
元素外部尺寸：对应jq中的$().outerWidth(true)和$().outerHeight(true)方法，不仅包括padding和border，还包括margin，也就是元素的margin box的尺寸。没有对应的原生DOM API。
11、margin：auto
margin合并的计算规则
两个正的margin值取最大的
两个负的margin值取最小的
正的和负的则直接相加
margin:auto的填充规则如下。（
如果一侧定值，一侧auto，则auto为剩余空间大小（margin-right: 80px;margin-left: auto，则表示margin-right为80px，剩下的为margin-left。如果不设置margin-left则margin-left为0，所有空间都是margin-right，所以会实现靠一侧例如居右这种）。
如果两侧均是auto，则平分剩余空间。
margin的’auto’是具有强烈的计算意味的关键字
12、border应用
/*上传图片＋号背景图样式*/.add {color: #ccc;border: 2px dashed;
}.add:before {border-top: 10px splid;
}.add:after {border-left:10px solid;
}.add:hover {color: #06c;
}/*三角图标(朝下三角)*/
div {width: 0;border: 10px splid;border-color: #f30 transparent transparent;
}13、基线
line-height行高定义就是两基线的间距，vertical-align默认值就是基线
x-height指的就是小写字母x的高度，术语描述就是基线和等分线之间的距离
14、ex
/** ex是CSS中的一个相对单位，指的小写字母x的高度* 不受字体和字号影响的内联元素的垂直居中的对齐效果。* 每页显示15▼* 借助ex单位，直接利用默认的baseline基线对齐就可以实现该效果。*/.icon-arrow {display: inline-block;width: 20px;height: 1ex;background: url(arrow.png) no-repeat center;
}15、line-height
line-height: 1.5 ,数值型，最终的值为乘以font-size的大小
line-height: 150% ,百分比型，最终的值为乘以font-size的大小
line-height: 24px ,长度值，一般为px或者em,其中em也是乘以font-size的大小
区别在于，数值型在子级继承line-height属性的时候，继承的为1.5，到了子级会重新按照子级的font-size重新计算，而百分比和长度值则是直接继承了父级的最终计算过的数值大小，所以一般使用数值型最好。
line-height值可以设置在1.6～1.8，如果使用的是长度值，我建议直接line-height:20px
无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的，我称之为“内联元素line-height的大值特性”。
16、float
浮动的本质就是为了实现文字环绕效果。
特性：
包裹性；
块状化并格式化上下文；
破坏文档流；
没有任何margin合并；
17、BFC
含义：块级格式化上下文
原则：如果一个元素具有BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠是会影响外面的元素的。
触发：
根元素；
float的值不为none；
overflow的值为auto、scroll或hidden;
display的值为table-cell、table-caption和inline-block中的任何一个。
position的值不为relative和static。
自适应布局：
overflow: auto/hidden，适用于IE7及以上版本浏览器；
display: inline-block，适用于IE6和IE7；
display: table-cell， 适用于IE8及以上浏览器。
18、display:table-cell元素内连续英文字符无法换行问题，解决方案
.work-break {dispaly: table;width: 100%;table-layout: fixed;work-break: break-all;
}本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！