杂七杂八

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/glt__18/article/details/51560130

杂七杂八

px | em | rem

px：像素，绝对长度单位；相对于显示屏幕分辨率而言

em：相对长度单位；相对于父级元素文本的字体尺寸

rem：相对长度单位；相对于HTML根元素

为了简化换算，可用的办法举例：

html { font-size:62.5%; /*10÷16=62.5%*/}
body { font-size:12px; font-size:1.2rem; /*12÷10=1.2*/ }
p { font-size:14px; font-size:1.4rem; /*14÷10=1.4*/ }

父级对象高度

当一个div有三个子元素且左右两个都浮动时，怎样让其高度取决于三个子元素中最高的高度？

1. 设置父对象中 min-height: 值px;
2. 设置overflow:auto;(个人觉得不太好)

border-radius属性

border-radius: 1-4 length|% / 1-4 length|%; （缩写格式）

如果”/”前后值都设置，那么”/”前面的值设置其水平半径，”/”后面的值设置其垂直半径；
若没有”/”，则水平半径值等于垂直半径值。其值按照top-left、top-right、bottom-right、bottom-left的顺序。

border-radius : 25px;/*四个值相等均为25px*/
border-radius : 25px 30px;/*top-left=bottom-right=25px;top-right=bottom-left=30px*/
border-radius : 25px 30px 35px;/*top-left=25px;top-right=bottom-left=30px;bottom-right=35px;*/
border-radius : 25px 30px 35px 40px;/*top-left=25px;top-right=30px;bottom-left=35px;bottom-right=40px;*/

border-top-left-radius:          //左上角
border-top-right-radius:         //右上角
border-bottom-right-radius:      //右下角
border-bottom-left-radius:       //左下角
/*拆分式中第一个值是圆角水平半径，第二个值是圆角垂直半径，若第二个值省略，这时角就是一个四分之一的圆角*/

css画三角形

一般在布局的时候会有小三角形引的二级导航框会用到

html代码

<div id="re"></div>

样式

#re {
width: 0;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid yellow;
}

导航菜单旋转效果

就是熟悉了一下transform属性吧可以说，效果好像也不是很好看：p

html代码

<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>

样式

ul {
display: block;
background-color: red;
}
ul li {
display: inline-block;
list-style-type: none;
transform-style: preserve-3d;
perspective: 800px;
}
ul li a {
color: #fff;
display: block;
text-decoration: none;
font-family: "\5FAE\8F6F\96C5\9ED1";
font-size: 24px;
line-height: 20px;
padding: 15px 10px;
}
ul li a:hover{
-ms-transform:rotateX(360deg);     /* IE 9 */
-moz-transform:rotateX(360deg);    /* Firefox */
-webkit-transform:rotateX(360deg); /* Safari 和 Chrome */
-o-transform:rotateX(360deg);  /* Opera */
transition: 5s;
background-color: yellow;
}

and and and 我真的不知道写博客到底要写啥（……….略略略）