css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线

broder:0 用于移除边框

font-size:0 用于设置字体不显示

list-style: none 消除<li> 标签默认样式

margin: xx auto 版心居中

width:100% 通栏

vertical-align 作用于行内元素 / 表格单元格,调整其垂直位置

text-align 作用于块级元素 调整其水平位置

line-height 设置与height相等 实现文字垂直居中

属性 布局模型 类型 作用轴 控制对象 生效条件
align-items Flex/Grid 容器 交叉轴 所有子元素 容器高度 > 子元素总高度
align-content Flex/Grid 容器 交叉轴 多行元素整体 多行且容器高度 > 子元素总高度
justify-content Flex/Grid 容器 主轴 所有子元素 容器宽度 > 子元素总宽度
align-self Flex/Grid 项目 交叉轴 单个元素 需父容器设置 align-items
justify-self Grid 项目 主轴 单个元素 单元格宽度 > 元素宽度

border-radius 设置圆角

标准盒子模型的padding和边框会撑大盒子

box-sizing: border-box 设置怪异盒子模型 padding和边框不撑大盒子 而是挤占内容区域

列表类型 标签 结构特点 典型场景
无序列表 <ul>, <li> 项目之间无顺序关系 菜单、待办事项
有序列表 <ol>, <li> 项目按数字或字母排序 步骤指南、排行榜
定义列表 <dl>, <dt>, <dd> 术语 - 定义的关联结构 词典、FAQ、元数据展示

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3) 设置边框阴影

边和内容一样高,找行内标签(例如a),高靠内容撑开

flex布局中想让元素一个在最左一个在最右: justify-conetnt: space-between

flex-wrap:wrap 弹性盒子换行

font-weight: normal 或 font-weight: 400 让h标签不加粗

font-style: normal 让i标签不倾斜

相关推荐
wmm_会飞的@鱼几秒前
FlexSim-汽车零部件仓库布局优化与仿真
服务器·前端·网络·数据库·数学建模·汽车
yvvvy3 分钟前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn3 分钟前
Cropper.js:JS图像裁剪库
前端·javascript
Serendipity2615 分钟前
微服务架构
前端·微服务
Hilaku20 分钟前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明23 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
两颗泡腾片27 分钟前
黑马程序员C++核心编程笔记--类和对象--运算符重载
c++·笔记
睡不着先生29 分钟前
CSS `@scope` 实战指南:开启局部样式隔离新时代
css
Danny_FD36 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip41 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript