CSS中盒模型属性、常用单位以及媒体查询的使用方法

发布于：2022-03-26 10:34:27  栏目：技术文档

常用HTML盒模型属性

常用的盒模型常用属性有：内边距、外边距、边框；

内边距\外边距使用方法

padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding:10px 10px 10px 10px;    //内边距上下左右均为10像素；
可直接缩写为 padding:10px
//如果上下 或者左右像素大小相同可所以：
padding:10px 15px 14px;
padding:10px 5px;

边框：border

border-top:2px;
border-style:solid; //实线
border-color:red;
//表示上边框宽度2像素 实线 颜色为红色；
border:2px solid red; //简写
点状：dotted 实线：solid 双线：double 虚线：dashed；

box-sizing

//当使用padding设置内边距的时候，内边距会撑起盒子的宽度，从而使盒模型总宽度增加；
//使用box-sizing：border-box；
//作用是使内边距作用在盒模型的宽高之内；

常用单位

10px固定像素单位；" class="reference-link">px：像素 10px固定像素单位；

1em 默认是16像素为1em，如果父级元素重定义了字体大小，则集成父元素的大小。" class="reference-link">em:相对于父元素的计量单位 1em 默认是16像素为1em，如果父级元素重定义了字体大小，则集成父元素的大小。

1rem；默认是16像素为1人,在html标签中定义字体大小，则重新定义1rem大小。" class="reference-link">rem：相对于根元素html的计量单位1rem；默认是16像素为1人,在html标签中定义字体大小，则重新定义1rem大小。

vw\vh: 1vw 相当于当前可视窗口1%的宽度；

%：百分比 宽度100%则填充父级全部区域；如果父级元素没有定义高，那么height：100%则不生效；

媒体查询

media

<div>PHP中文网</div>定义宽度小于375像素时背景色为红色

@media (max-width:375px){
    div{
        background-color:red;
    }
}

定义宽度大于1000像素时的边框

@media (min-width:1000px){
    div{
        border:1px solid yellow;
    }
}

定义宽度大于375像素且小于1000像素的字体颜色：

@media (min-width:376px) and (max-width:999px){
    div{
        color:green;
    }
}

相关推荐