欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-21 12:16:52
...

常用的布局属性

盒模型

规定:网页中的每一个盒子都有四个组成部分
常用的布局属性和圆角属性
盒子的宽 = 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;
相关标签: css