目录
1.样式初始化
2.取消ul ol自带的序号
3.text开头的属性
4.overflow属性
5.设置透明度：opacity & rgba
6.css隐藏占位
7.精灵图
8.标准文档流
9. 浮动
1.样式初始化
页面很多标签自带margin和padding，实际开发中默认取消自带效果
2.取消ul ol自带的序号
/* 行内块和文本之间无法对齐 使用以下属性 */
vertical-align: 3px;
margin-right: 5px;
/* 圆角边框 */
border-radius: 4px;
3.text开头的属性
首行缩进text-ident文本修饰text-decorationunderline下划线line-through删除线over-line上划线none取消文本修饰文本横向对齐方式text-alineleft（默认） | center | right 针对行内、行内块文本，在一个有宽度的元素里面，横向的对齐方式
4.overflow属性
当前元素内部的内容超出当前盒子时使用
参数效果visible溢出可见（默认值）hidden溢出隐藏scroll溢出时可以滚动auto只有溢出时才显示滚动效果
5.设置透明度：opacity & rgba
属性效果参数opacity 针对元素透明，当前元素及内部所有内容一起半透明或者透明了 0~1设置元素的透明度 0透明 1不透明rgba 只针对当前颜色透明 0~1设置元素的透明度 0透明 1不透明
6.css隐藏占位
不占位display:none实际开发中用的最多 width:0; height:0; overflow:hidden; 只能针对行内块和块级元素 占位opacity:0visibility:hiddenmargin-left:很大的数
7.精灵图
css Sprite(css精灵图)：又叫雪碧图，把多张小图片放到一张大图上面，减少向服务器发起请求的次数，提高代码运行速度。
通过 background-image 和 background-position 再加上元素的宽高来实现的
8.标准文档流
标准的情况下，文档的流向：
在不进行任何修改的前提下，块级元素默认的排列方向：从上到下，行内和行内块元素的排列方向：从左到右
9. 浮动
float:left right none(不浮动默认值)
元素设置浮动，能够让当前元素脱离标准文档流（脱标），如：块级元素设置浮动后，可以放在一行显示，设置浮动的元素相当于具有了行内块的效果
左浮动：元素往左排列 右浮动：元素往右排列
浮动元素的特点：
1 浮动影响后面的元素
浮动的元素脱标了，不再占有原来的位置，所以会对后面的元素造成影响
2 浮动找浮动 不浮动找不浮动
浮动元素脱标，在上面的“图层”，不浮动的元素不脱标，还在下面的“图层”
若两个元素都浮动了，还是遵循之前的规则
3 浮动以元素顶部为基准 无法超出父元素
让块级元素在一行显示，块级元素脱标
浮动可以实现模式转换
浮动带来的影响：
1 对后面的文字产生影响：
给图片添加浮动，出现文字绕图效果
2.对父元素带来的影响：
若父元素没有设置高度，由子元素撑开，子元素浮动，会导致父元素高度为0
要想清除浮动带来的影响，可以在父元素中添加 overflow: hidden;
相关链接
发表评论