常见的布局技巧(消除边框叠加+文字环绕图片+行内块元素应用+梯形制作+CSS样式初始化)
margin负值的巧妙应用
ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;/* 通过浮动让边框紧贴，在通过margin-left: -1px;让1+1-1=1，使得左右边框永远都为1px */
}
/* 下面是为了实现鼠标经过就显示当前的是个边框，不加定位的话除了最后一个其余只会显示三个边框，
这也说明了定位的优先级/Z轴大于浮动 */
/* ul li:hover {1. 如果盒子没有定位，则鼠标经过添加相对定位即可，绝对定位不行，会脱标position: relative;border: 1px solid blue;} */
ul li:hover {/* 2.如果li都有定位，则利用 z-index提高层级 */z-index: 1;border: 1px solid blue;
}
浮动本质 —— 文字环绕效果
大盒子里面文字标准流即可，只需要把图片浮动，文字会围绕图片自动铺开
行内块元素的巧妙应用
优点：
-
行内块默认有大小，行内块之间有距离；
-
可以指定text-align： center， 只要给父盒子添加这个属性，盒子里面的所有行内元素和行内块元素都会在浏览器页面水平居中
.box a {display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;
}
CSS三角强化
首先需要更加深刻的理解边框的定义，它并不是四个单个属性对应四个三角形
.box {margin: 100px auto;width: 0px;height: 0px;border-top: 300px solid transparent;/* 注意上面的颜色是透明而不是没有 */border-right: 100px solid red;border-bottom: 0px solid blue;border-left: 0px solid green;
}
/* 京东写法 */
.box {/* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2. 样式都是solid */border-style: solid;/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */border-width: 100px 50px 0 0 ;
}
.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color:red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;
}
.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;
}
CSS初始化
不同浏览器对某些标签的默认值不一样，为了保证兼容性，需要对CSS样式进行初始化
/* 把我们所有标签的内外边距清零 */
* {margin: 0;padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {font-style: normal
}
/* 去掉li 的小圆点 */
li {list-style: none
}
img {/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle
}
button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */cursor: pointer
}
a {color: #666;text-decoration: none
}
a:hover {color: #c81623
}
button,
input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}
.hide,
.none {display: none
}
/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}
.clearfix {*zoom: 1
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！