weixin_40563746的博客

而使用绝对定位时，子集元素的宽高是根据父级元素的padding盒子计算的，也就是说子集的宽度 = 父级左padding + content + 父级右padding，子集的高度 = 父级上padding + content + 父级下padding。当元素没有进行定位时，子集元素设置的宽度和高度的百分比，是根据content区计算的，也就是说，没有把padding、border计算进去。最近写样式遇到了如下现象：子集设置宽高为100%，但是溢出了父级，如下图所示。通过查阅资料，获知了原因。

用到的知识点：border-radius知识点说明：border-radius有四个方向（左上、右上、右下、左下）、两个半径（水平半径、垂直半径）。写birder-radius属性的时候，先写水平半径，再写垂直半径，中间用/隔开。例如：border-radius: 10px 10px 20px 20px / 10px 10px 20px 20px分别表示：左上水平半径 右上水平半径 右下水平半径 左下水平半径 / 左上垂直半径 右上垂直半径 右下垂直半径 左下垂直半径省略的写法和padding、m

给div设置border时，border属性中有border-width属性可以控制border的宽度，但是没有控制border长度的属性。如果边框的长度和div的高度一致时，直接设置border:1rpx solod #ccc类似样式即可。但想实现如下图所示，border的长度和div的高度不一致，可以使用伪类实现。代码如下：html<div class="action"> <div class="action-item"> <div class=

若容器有固定的宽高：overflow: hidden;white-space: nowrap;text-overflow: ellipsis;若容器没有固定的宽高：display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 1;//此处为行数，可以改为任意数字...