如果想使用百分比想生效 1、先给它<span style="color:blue;">父</span>容器的width:100%; 2、然后在设置<span style="color:blue;">子</span>元素的width:50%才会生效 >[info] http://www.w3school.com.cn/cssref/index.asp //参考文档，注释括号里的是，官方文档复制的 > ``` css <!--尺寸相关 宽高间距等--> width:33.3%; <!--宽--> height: 250px; <!--高--> top:50%; <!--上边和其他元素的距离（定位元素的上外边距边界与其包含块上边界之间的偏移）--> left: 50%; <!----> <!--内外边距规律都是：上右下左--> margin：2cm 4cm 3cm 4cm <!--外边距--> Padding：10px 5px 15px 20px; <!--内边距--> <!--元素相关 隐藏、浮动、定位等--> overflow: hidden; <!--当内容溢出元素框：隐藏--> float: left; <!--浮动：左--> clear:both; <!--清除浮动（元素的哪一侧不允许其他浮动元素）--> background: #0E774A;<!--背景颜色--> border-radius: 2px; <!--圆角边框--> border: 1px solid #d6d6d6; <!--边框--> display:block; <!--显示/隐藏（应该生成的框的类型）可选值：none --> position: relative; <!--相对定位--> transform: translateX(-50%)translateY(-50%); <!--图片同等比例缩放（2D 或 3D 转换）--> <!--文字相关 颜色、位置等--> line-height: 38px; <!--行高--> text-align: center; <!--元素中的文本：居中--> font-size：100%； <!--字体大小--> font-weight：bold； <!--字体加粗--> color <!--文本颜色--> text-overflow <!--文本溢出包含元素时发生的事情--> <!--特殊的--> box-sizing: border-box; <!--并排放置多个框（以特定的方式定义 匹配 某个区域的特定元素）。要配合width才能出效果。--> ```