盒子模型标准盒模型怪异盒模型（IE盒子模型）box-sizing属性 标准盒模型 width表示范围只有content 怪异盒模型（IE盒子模型） width表示content+padding+border这三个部分的宽度 box-sizing属性 在CSS3中引入了box-sizing属性，允许以特定的方式定义匹配某个区域的特定元素，即该属性可以指定盒子模型种类 共有三种值： content-box：表示标准的盒子模型 border-box：表示的是IE盒子模型 padding-box：让宽度

CSS清除浮动浮动问题解决方法方法1方法2方法3方法4 浮动问题 给一个盒子使用CSS的flloat浮动属性，导致其父元素盒子高度坍塌，不能被撑开 <div class="parent"> <div class="son"></div> <div class="son"></div> </div> <style type="text/css"> .parent{ border: red solid

CSS图片宽高比自适应 <div class="box"> <div class="img-wrapper"> <img src="bear.jpg" class="image"> </div> </div> <style type="text/css"> .box{ width: 330px; } .img-wrapper{ overflow: hidden; width: 100%;

CSS实现绘制三角形原理实心三角形等腰非直角等腰直角有边框的三角形空心三角形 原理 三角形可以通过调整盒子的边框border属性的四个方向的宽度、线条样式以及颜色来实现 将盒子的边框调到足够宽就会发现，盒模型的边框是4条像梯形一样的线 <div class="test"></div> <style type="text/css"> .test{ background-color: red; width: 100px; height: 100px; b

CSS flex弹性布局设置弹性布局基本概念容器属性项目的属性 设置弹性布局 弹性布局用来为盒状模型提供最大的灵活性 .box{ display: flex; } /*行内元素使用 Flex 布局*/ .box{ display: inline-flex; } /*Webkit 内核的浏览器必须加上-webkit前缀*/ .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意：设为 Flex 布局后，子元素的floa

CSS实现元素居中水平居中行内元素块级元素多块级元素垂直居中单行行内元素多行元素块级元素水平垂直居中固定宽高未知宽高flex布局 水平居中 行内元素 块级元素 多块级元素 垂直居中 单行行内元素 多行元素 块级元素 固定宽高 未知宽高 水平垂直居中 固定宽高 未知宽高 flex布局 参考：https://www.cnblogs.com/ghq120/p/10939835.html ...