css知识 ｜ 青训营

1.显示样式
块元素:独占一行,可以设置宽高

有h1-h6;div;p;

行内元素:共占一行,不能设置宽高

   有span;b;i;s;

行内块元素:共占一行,可以设置宽高

    有input;img;button;

用display来修改显示样式
block:块   inline:行内     inline-block:行内块 2.边框 d1{

            width: 200px;

            height: 200px;

            边框样式

            border-style: solid;

            边框宽度

            border-width: 20px;

            边框颜色

            border-color: pink;

            简单写法

            border: 1px solid green;

            单独设置某一边

            border-top/left/bottom/right: 1px solid green;

            设置边框圆角 最大为边框的半径长度 只有一个值时作用于四角，两个值时

            代表左上右下 右上左下

            border-radius: 3px 6px;

             border-radius: 3px 6px 9px；三个值时为左上 右上左下 右下

            border-radius: 3px 6px 9px 12px；从左上开始顺时针

        }

        输入框取消边框

        input{             border: none;         }

3.外边距 当两个元素同时具有外边距时,如果是左右则距离相加,如果是上下则取大的

div{

        width: 200px;

        height: 200px;

        border: 1px solid;

       }

       .d1{

        设置单独某一边的外边距

        margin-left: 100px;

        一个值,四边都有外边距

        margin: 20px;

        两个值为上下 左右

        margin: 20px 10px;

         三个值代表 上 左右 下

        margin: 10px 20px 30px;

        四个值则是 上 右 下 左

        margin: 0px 20px 50px 100px;

       }

.d2{

        让块级元素自身居中

        margin: 0 auto;

       } 4.内边距

内边距使用几乎和外边距相同,但会改变原本元素的大小

用下面代码来取消元素中默认内外边距

• {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}