CSS#Flex-box, border-size, onresize() event, Media Queries
2024-09-25 15:33:26
Flexbox
Pseudo-classes
box-sizing: border-box
HTML DOM event resize()
- @media Queries: 根据一些css条件,触发一些css的变化。(无需javascript)
- Responsive CSS : 网格Gird就是模拟了Bootstrap,配合@media,可以激发不同的类。
Knowledge: Flexbox Layout Module
个人感觉可以替代Bootstrap4的布局了。当然还是Bootstrap4用起来更方便一些。
传统的布局:
- Block
- Inline
- Table
- Positioned, 用于指定元素位置。
新的Flexbox. 用于响应式布局,无需使用float 或 positioning.
父元素设置:
display: flex | inline-flex 子元素布局:
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
方法:
先定义根元素特性
- 定义一个根元素,作为容器<div class='flex-container'>
- 根元素: display: flex; 让这个元素使用a block-level flex的模式
- 如果一个元素成为flex container, 它可以使用相关的6个特性(点击):
- flex-direction: row | row-reverse | column | column-reverse | initial |inherit
- flex-wrap: nowrap | wrap | wrap-reverse
- flex-flow 就是
最新文章
- mysql 用户权限设置【转】
- Fuzzy test
- MVC常用 ActionResult
- SQLite入门与分析(四)---Page Cache之事务处理(2)
- 解决websphere在aix linux下日志乱码
- 修改TOMCAT服务器图标为应用LOGO
- 阿里云Ubuntu部署java web(2) - 配置tomcat
- 励研(LY) CRC16算法
- 华为6.0系统设备最完美激活Xposed框架的经验
- mysql7.5.x删除重新安装
- Dos环境变量修改
- 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图
- Session会话保持机制的原理与Tomcat Session共享的几种实现方式(Session Cluster、memcached+MSM)
- (转)漫谈MySql中的事务
- Python-Select/Poll/Epoll使用
- bash高级
- 【我的Android进阶之旅】Android 混淆文件资源分类整理
- Elasticsearch之停用词
- MATLAB中mat2gray的用法【转】
- SpringMVC工作原理图解
热门文章