常用的布局属性和圆角属性

常用的布局属性

盒模型

规定：网页中的每一个盒子都有四个组成部分

盒子的宽 = width +盒子外侧的距离 （margin）+盒子内部内容和边界的距离（padding） + 边框的距离（border）

margin属性

margin属性赋四个值时分别控制 上右下左（顺时针）
eg: margin:10px 20px 30px 40px

margin三个值时 上 （左右） 下

margin 两个值左值控制上下，右值控制左右
margin：0 auto；这里识别为水平居中，只能水平居中
第一个值代表上下外边距，第二个值代表左右外边距。不是每一个父盒子的高度都是确定的

margin：10px； 四个方向都是10px

padding属性

padding属性赋多值控制内间距的方式与margin类似

内边距(padding)：是添加在盒子内部的距离，会撑大盒模型
解决： 1、所以需要增多少减多少有效width和height
2、设置新盒模型 box-sizing：border-box；（不用再减内边距）

提前设置

    *{
        /* 有些html标签生来带有边距，或者每个浏览器呈现出的状态不一样，为了统一浏览器的一致性，所以清除默认样式 */
        /* 外边距 */
        margin: 0;
        /* 内边距 */
        padding: 0;

 /* 新盒模型   增加padding也不需要减少height*/
 /* 提前设置每个盒子是不用内减的 */
		box-sizing: border-box;
    }

边框属性

border：边框的宽度 边框的线型 边框的颜色
border：2px solid red；

行高属性：

line-height：px/1.5
行高= 盒子的高度可以使单行 文字垂直居中

文本居中属性

text-align：centre居中/left左对齐/right右对齐

溢出隐藏属性

overflow：hidden

圆角属性

写法
border-radius: 10px 四个角弧度相同
border-radius:10px 20px ;10px 左上和右下 20px右上和左下
border-radius:10px 20px 30px; 10px 左上 20px 右上和左下 30px 右下
border-radius:10px 20px 40px 50px 顺时针
border-radius: 50% （要使正方形变圆赋值为50%或为正方形边长一半的像素）

weight：200px；
height：200px；
border-radius：100px；结果为绿线与红色边框交点以弧线连接起来（圆）

        /* border-radius: 10px; */
        /* border-radius: 20px/40px; */
        /*   还可以这样表示   水平/垂直     左上右下(20px,30px)    右上左下(10px 50px) */
        border-radius: 20px 10px/30px 50px;