12日知识点回顾

一：border-radius的用法

border-radius：12px 22px 2px 112px/23px 31px 21px 231px；

其中：border-top-left-radius：12px 23px;

border-top-right-radius:22px 31px;

border-bottom-left-radius:2px 21px;

border-bottom-right-radius: 112px 231px;

具体用法参考 w3cshool

下面这篇是关于css3圆角渲染详解的

css3 border-radius圆角边框详解

摘要如下：

1渲染时先将div盒模型渲染，

2渲染出四个看不见得圆角（如果div四个角为圆角），

3最终呈现的圆角div是div容器与圆角的交集；

4注意：div盒子模型任然起作用

二：float:left布局：

html：

(a>img)+(div>san+span)

css样式1：用float

a{
  float:left;
    width: 40px;
    height: 40px;
 }
div{margin-left:40px}
span{display:block;width: px;height:px}

对a设置float：left后，会压住后面的div，解决方法是给div设置margin-left：px。应该注意的是，若a标签后跟着的是行内元素span或者inlin-block属性的元素，将不会被a覆盖，原因是div等块状元素默认占据width为100%。不考虑IE6/7..

针对上面这点，若在移动端对上面的布局，只要设置a与div的width的%之和不大于100%，设置div{margin-left：a的宽度占比}；就可以自适应浏览器了

强烈推荐张鑫旭大神的关于position，float系列文章css相对定位系列一

夜深，睡觉。。欢迎给我小伙伴指教。

大半夜的，飘来肉香味，让肚子怎么办。。。

 

转载于:https://www.cnblogs.com/wbengineer/p/4639773.html