css 修改三角形大小_css盒模型

• W3c标准的盒子模型(标准盒模型)

标准盒模型中width指的是内容content的宽度，height指的是内容区域content的高度标准盒模型下盒子的大小  = content + border + padding + margin

• IE标准的盒子模型(怪异盒模型)

怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding)；height指的是内容、边框、内边距总的高度怪异盒模型下盒子的大小=width(content + border + padding) + margin

如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，

如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下(IE6.IE7.IE8)的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。

除此之外，我们还可以通过属性box-sizing来设置盒子模型的解析模式

1.box-sizing:content-box  

默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)

2.box-sizing:border-box  

border和padding划归到width范围内，可以理解为是IE的怪异盒模型

3..box-sizing:padding-box

将padding算入width范围

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

margin越界问题：

当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法父元素加前置内容生成。(推荐).parent : before {     content : " ";     display : table;}

css画三角形,梯形

<div class="tans">    div><div class="swe">    div>

<style type="text/css">     /*     width =0 时为三角形，width！=0时是梯形      */    .tans{        width: 100px;        height: 0px;        border-bottom: 100px solid #00c1ff;        border-left:50px solid #fff;        border-right: 50px solid #fff;    }    .swe{        width: 0;        border-top:100px solid #00c1ff;        border-left: 100px solid #fff;        border-right: 100px solid #fff    }style>

.triangle {    width: 57px;    height: 57px;    border: 100px solid cadetblue;    border-top: 100px solid #00B2BF;    border-bottom: 100px solid blue;}