一、元素宽高限制属性1. 固定宽高- width 设置元素固定宽度示例 width: 500px;​- height 设置元素固定高度2. 极值限制- min-width 最小宽度页面缩小元素不会窄于该数值​- max-width 最大宽度页面放大元素不会宽于该数值​- min-height 最小高度​- max-height 最大高度3. 百分比宽高用法- 前提父容器必须提前定义高度- 特点页面缩放时元素尺寸同步变化搭配min/max宽高可限制缩放范围防止布局错乱二、边框 border 系列1. 边框基础三属性- border-style 边框线型必须设置才会显示边框solid 实线、dashed 虚线、dotted 点状线、hidden 隐藏、none 无边框、double 双线​- border-width 边框粗细​- 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外边距元素与其他元素之间距离统一赋值规则padding、margin通用1. 4个值顺时针 上、右、下、左​2. 2个值第一个代表上下第二个代表左右​3. 单方向细分 -top 上 / -right 右 / -bottom 下 / -left 左​4. 特殊值 auto 左右设置auto可实现盒子水平居中单边外边距属性margin-top 上外边距、margin-right 右外边距、margin-bottom 下外边距、margin-left 左外边距四、溢出处理 overflow作用控制内容超出盒子宽高时的展示效果- overflow: hidden; 直接隐藏超出部分​- overflow: scroll; 出现滚动条可滑动查看全部内容五、常用辅助样式1. cursor: pointer; 鼠标悬浮时指针变为小手​2. opacity 透明度取值范围0~1- opacity:0; 完全透明​- opacity:0.5; 半透明​- opacity:1; 完全不透明