文章目录
1.三角形
方法一：
1.实现一个宽高为0 的盒子
div{
width: 0px;
height: 0px;
}
2.设置四边边框有粗度且透明色（transparent）
border:*px sold transparent
3.设置对应方向边框为对应颜色
border-方向:*px sold 颜色；
方法二：
伪元素实现
<style>
.wrap{
width: 200px;
height: 100px;
background: yellowgreen;
/* border: 1px solid #000; */
padding: 10px;
border-radius: 5px;
color: pink;
position: relative;
}
.wrap:after{
content:'';
display: block;
width: 0;
height: 0;
border: 10px solid transparent;
border-left: 10px solid yellowgreen;
position: absolute;
top: 98px;
left: 219px;
}
</style>
</head>
<body>
<div class="wrap">
憨批
</div>
</body>
2.粘性定位
语法：
position:stiicky;
left | right:*px;
top | bottom:*px;
3.标准模式与怪异模式
1.概念
都是盒子模型，只是是不一样的模式。
2.区别：
元素实际占据的宽高的计算规则不一样
标准模式：元素实际占据的宽度 = width + border + padding + margin
怪异模式：元素实际占据的宽度 = width + margin
语法：
box-sizing:border-box 怪异模式 | content-box标准模式
4.常见的兼容问题
1.图片3px问题
给图片设置vertical-align,属性值不为默认（baseline）
2.图片外面包裹P标签，在低版本浏览器会有边框。
方法一：
border:none;
方法二：
border:0 solid red;
3.表单元素垂直对齐和水平方向间的间隔
给元素加浮动
4.鼠标形状
cursor:hand低版本认识的手型 | pointer新版本的手型；
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
