css经典注意事项

css书写顺序对加载速度的影响

书写顺序（浏览器加载速度更快）

浮动 / display
盒子模型 ：margin border padding 宽度高度背景色
文字样式

选择器的优先级问题

在这里插入代码片

行内元素无法设置高度属性

display:inline-block //建议转成行内块元素
display:block //转块级元素

外边距合并问题

margin-top : 50px;
margin-bottom : 10px;
选取一个最大的px

内边距导致盒子的扩大问题

/* 内减模式 */
box-sizing: border-box;

通过margin和padding调整**行内元素的垂直位置无法生效

line-height: 50px;

元素互相嵌套导致塌陷问题(调整子元素会把父级元素也拉动)

• 同时也可以解决浮动带来的影响的
• 隐藏盒子溢出的部分

/* 第一种为父级加外边框  不推荐*/
/* 给父级设置overflow : hidden */
/* 给子元素转换为行内块元素 */
overflow: hidden;

精灵图(网页中的小图标汇总成一张图)作用：将很多小图转换成一张大图减少服务器的负担

bg-image 选择背景图
bg-position 调整背景图的位置

导航栏的文尽量不要设定宽度用padding 和 margin去调整

设定定位后margin失效如何将盒子居中

/* 固定定位 margin失效 使用算法居中 */
left: 50%;
transform: translate(-50%);
/* 兼容老版的浏览器 */
-webkit-transform: translate(-50%);

精灵图案例

.user::before {
	/*必须的content*/
    content: "";
    /*转换为块级元素*/
    display: block;
    /*调整精灵图盒子的大小*/
    width: 23px;
    height: 23px;
    /*调整精灵图的位置*/
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 二倍图缩放 */
    background-size: 104px auto;
    margin: 5px auto 0;
}

如何利用相同开头的类来简写所有子项共同的属性

.local-nav li [class^="local-nav-icon"]{
    width: 32px;
    height: 32px;
    background-color: green;
    margin: 4px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}
.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}
.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}
.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}

背景的线性渐变

//必须添加浏览器的私有前缀
background: -webkit-linear-gradient(left,red,blue);
//从上往下
background: -webkit-linear-gradient(red,blue);
//左上到右下
background: -webkit-linear-gradient(top left,red,blue);