Comments (3)
说到css盒子模型我们就会想到CSS的布局模式。
那就先来掰扯一下CSS 布局模式吧.....它是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法(嘿嘿嘿,这是从MDN文档里看到的官方说法)
我们常见的一些布局有:
- 流布局
流动是默认的网页布局模式,块级元素在所包含的元素内自上而下垂直分布,内联(行内)元素在所包含的元素内从左到右水平分布显示 - 浮动布局
使块元素实现浮动在一行,如:div{float: left;}所有div元素向左浮动 - 弹性盒子布局
Flexible Box 或 Flexbox - Grid布局
网格布局
from myblog.
定义一个弹性盒子(Flex container)
display: flex 使弹性容器成为块级元素
dispaly: inline-flex 使弹性容器成为单个不可分的行内级元素
常见的弹性盒子的属性
-
flex-direction: 决定项目的排列方式
row(默认):主轴水平方向,从左开始
row-reverse:主轴水平方向, 从右开始
column:主轴垂直方向,从上开始
column-reverse:主轴垂直方向,从下开始 -
justify-content: 定义项目在主轴上的对齐方式
center
flex-start
flex-end
space-between 两端对齐,项目间距相等
space-around 项目间距相等,两端距离容器的距离是项目间距的一半
space-evenly 项目间距相等,两端距离容器的距离和项目间距一样 -
align-item 定义项目在交叉轴的排列方式 下面假设交叉轴从上到下。
stretch(默认)
center
flex-start
flex-end
baseline:项目的第一行文字的基线对齐
结果示例可以参考 MDN官方文档或者阮一峰老师的博客,偷懒一下。我就不一一画图描述了
from myblog.
追加一个box-sizing的使用介绍
属性:
- border-box: 这个属性的总宽度是由内容宽度加内边距宽度再加上边框的宽度
width = content + padding + border - content-box: 它的宽度就是内容的实际宽度
我们可以在form表单上使用border-box属性,这样可以使表单和按钮的宽度保持一致(由于表单和按钮默认都有自己的边框和padding)
from myblog.
Related Issues (20)
- 开发自己的cli工具 HOT 1
- 常用的ES6、ES7、ES8特性 HOT 3
- 在浏览器中输入URL地址到页面显示出来中间发生什么了呢? HOT 3
- 他强由他强,清风拂山岗 HOT 6
- 排序算法
- JavaScript继承 HOT 7
- 工作遇到的配置问题 HOT 2
- js触发子元素事件,而不触发父元素事件(阻止事件冒泡) HOT 2
- HTML input中type='file' Accept的值
- 二叉树心法秘籍
- 初探二叉树
- HTTPS初探 HOT 1
- 基于node的文件上传和下载 HOT 1
- axios拦截器处理重定向
- two sum
- 千分位格式化
- React生命周期和hock 的一些使用心得 HOT 1
- RN的TouchableOpacity的使用笔记
- 微信授权登录解密手机号失败
- moment.js工作中常用的api
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from myblog.