企业官网建设流程全解析

一、元素宽高限制属性

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-radius

1. 简写： 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; 完全不透明