一、宽高限制属性min-/max- 系列1. 基础属性- width 设置元素固定宽度例 width:500px;​- height 设置元素固定高度​- min-width 元素最小宽度页面缩小后元素不会比该值更窄​- max-width 元素最大宽度页面放大后元素不会超过该宽度​- min-height 元素最小高度​- max-height 元素最大高度2. 百分比宽高使用规则百分比宽高参照父容器尺寸生效父容器必须提前定义宽/高3. 适配场景页面缩放时百分比尺寸会同步缩放搭配 min-width/max-width 可以限制元素尺寸上下限避免布局错乱。二、边框 border 系列属性1. 基础拆分属性1. border-style 边框线型必填否则边框不显示​- solid 实线、 dashed 虚线、 dotted 点线​- hidden 隐藏边框、 none 无边框、 double 双线​2. border-width 边框粗细​3. border-color 边框颜色2. 单边边框单独设置某一条边- border-top 上边框​- border-right 右边框​- border-bottom 下边框​- border-left 左边框3. 圆角 border-radius1. 简写 border-radius: 数值; 四个角统一圆角数值越大弧度越大​2. 单角细分属性​- border-top-left-radius 左上角​- border-top-right-radius 右上角​- border-bottom-left-radius 左下角​- border-bottom-right-radius 右下角三、内边距 padding / 外边距 margin通用赋值规则padding、margin 完全通用1. 4个值顺时针 上 右 下 左padding:10px 20px 30px 40px;​2. 2个值 上下 左右margin:10px 20px;​3. 单边细分 padding-top / padding-right / padding-bottom / padding-left​4. 特殊值 auto margin 左右设 auto 可实现盒子水平居中概念区分- padding 内边距盒子内容与边框之间的距离会撑大盒子尺寸​- margin 外边距盒子和其他盒子之间的间距不会撑大自身盒子细分单边属性四、溢出处理 overflow作用控制内容尺寸超出盒子宽高时的显示效果- overflow:hidden 直接隐藏超出的内容​- overflow:scroll 强制出现滚动条拖动查看全部内容五、辅助常用样式1. cursor:pointer; 鼠标移入盒子光标变成小手​2. opacity 透明度0~1区间​- opacity:0; 完全透明元素仍占页面空间​- opacity:0.5; 半透明​- opacity:1; 完全不透明