css初学者例题

1.做一个三角形

 div {
            width: 0px;
            height: 0px;
            border: 20px solid black;
            border-bottom-color: transparent;
            border-top-color:transparent;
            border-left-color:transparent;
        }

2.绝对定位的盒子居中算法

<style>
       .fa {
           position: relative;
           width: 400px;
           height: 400px;
           background-color: black;
       }
       .son {
           position: absolute;
           top: 50%;
           left: 50%;
           margin-left: -25px; /*再向左走自身长度的一半*/
           margin-top: -25px;
           width: 50px;
           height: 50px;
           background-color: white;
       }
    </style>

        用transform:translate使盒子居中

.son {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            background-color: black;
            transform: translate(-50%, -50%); /*自身距离的50%*/
        }

3，input框取消边框

input {
         border: 0;   /* border取消边框 */
         border-bottom: 1px solid black;  /*可以选择留底边框*/
         outline: none; /*outline去掉点击之后边框出现的问题*/
     }

4，textarea文本域放拖拽

textarea {
        resize: none; /*取消右下角可以拖拽的斜线*/
        border: 1px solid skyblue; /*改变边框颜色*/
        outline-color: skyblue; /*改变点击后的边框颜色*/
     }

5，表单或图片与文字的对齐方式

（vertical-align 也可以解决图片底部空白缝隙的问题）

 textarea {
        vertical-align: bottom; /*bottom设置底部对齐，top设置顶部对齐，center中部对齐*/
     }

img {
        vertical-align: bottom;
    }