css3

一、弹性盒子

<head lang="en"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no" ><meta charset="UTF-8"><title></title><!-- 自动分配--><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.box{height: 100%;display: flex;flex-direction: column;}.box_1 {flex: 1;border: 1px solid #000;box-sizing: border-box;}.box1 {flex: 1;display: flex;/*justify-content: center;  /!*水平居中*!/*//*align-items: center;      /!*垂直居中*!/*/}.box1 > span {align-self: center;   /*自身垂直居中*/}.box2 {flex: 10;}.box3 {flex: 1.5;display: flex;flex-direction: row;/*justify-content: space-around;*//*justify-content: flex-start;*/}.box3>div {width: 30%;box-sizing: border-box;border: 1px solid #000;}</style>
</head>
<body>
<div class="box"><div class="box_1 box1"><span>标题</span></div><div class="box_1 box2">2</div><div class="box_1 box3"><div>首页</div><div>订单</div><div>我的</div></div>
</div>
</body>

二、css3媒体查询

1.媒体查询：屏幕适配，pc，移动端

2. 媒体类型：

all ：所有多媒体类型设备
print：打印机
not print 不包含打印设备
screen：电脑屏幕，平板，智能手机等
speech：屏幕阅读器

3.媒体查询语法

<!DOCTYPE html>
<html>
<head lang="en"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no"/><meta charset="UTF-8"><title></title>
</head>
<body>
</body>
</html>

content属性	作用
width	可视区域的宽度，值可为数字或关键词device-width
initial-scale	可视区域的初始缩放值，为一个数字，可以带小数
maximum-scale	可视区域的最大缩放值，为一个数字，可以带小数
minimum-scale	可视区域的最小缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放, no 不允许，yes 允许

不加限制条件所有的屏幕共有的样式：

写min-width 注意：从小到大写

<head lang="en"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no"/><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.box {margin: 0 auto;width: 100%;height: 300px;border: 1px solid #000;box-sizing: border-box;}@media screen and (min-width: 320px) {.box {width: 310px;}}@media screen and (min-width: 768px) {.box{width: 758px;}}@media screen and (min-width: 1024px){.box {width: 1014px;}}@media screen and (min-width: 1380px){.box {width: 1180px;}}</style>
</head>
<body>
<div class="box"></div>
</body>

写max-width 注意：从大到小写

<head lang="en"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no"/><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.box {margin: 0 auto;width: 100%;height: 300px;border: 1px solid #000;box-sizing: border-box;}@media screen and (max-width: 1680px){.box {width: 1380px;}}@media screen and (max-width: 1380px){.box {width: 1024px;}}@media screen and (max-width: 1024px){.box {width: 768px;}}@media screen and (max-width: 768px) {.box{width: 100%;}}</style>
</head>
<body>
<div class="box"></div>
</body>

写min-width and max-width

<head lang="en"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no"/><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.box {margin: 0 auto;width: 100%;height: 300px;border: 1px solid #000;box-sizing: border-box;}@media screen and (min-width:320px) and (max-width: 1024px) {.box {width: 100%;}}@media screen and (min-width:1024px) and (max-width: 1380px) {.box {width: 1024px;}}@media screen and (min-width:1024px) and (max-width: 1680px) {.box {width: 1180px;}}</style>
</head>
<body>
<div class="box"></div>
</body>

引用

<head lang="en"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no"/><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.box {margin: 0 auto;width: 100%;height: 300px;border: 1px solid #000;box-sizing: border-box;}</style><link rel="stylesheet" href="./css/style.css"/><link rel="stylesheet" href="./css/sc1.css" media="screen and (min-width:320px)"/><link rel="stylesheet" href="./css/sc2.css" media="screen and (min-width:768px)"/><link rel="stylesheet" href="./css/sc3.css" media="screen and (min-width:1024px)"/><link rel="stylesheet" href="./css/sc4.css" media="screen and (min-width:1380px)"/>
</head>
<body>
<div class="box">
</div>
</body>

三、多列布局

添加meta 响应移动端
1.viewport 视口
2.width=device-width 宽度等于屏幕的宽
3.initial-scale=1.0 伸缩比例1.0
4.minimum-scale=1.0 最小比例1.0
5.maximum-scale=3.0 最大比例3.0
6.user-scalable=no 禁止用户缩放

<head lang="en"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no" ><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}html,body{font-size: 14px;}.box{column-count: 3;-webkit-column-count:3;-moz-column-count:3;column-gap: 1rem;-webkit-column-gap: 1rem;-moz-column-gap: 1rem;column-rule: 1px solid red;-webkit-column-rule: 1px solid red;-moz-column-rule: 1px solid red;}.box_1{height: 2rem;border: 1px solid #000;box-sizing: border-box;}.box4 {column-span: all;/*指的是元素里面列的宽度*/}</style>
</head>
<body>
<div class="box"><div class="box_1">1</div><div class="box_1">2</div><div class="box_1">3</div><div class="box4">sssss</div>
</div>
</body>

css3弹性盒子、媒体查询、多列布局相关推荐

html弹性盒子垂直排列,css3弹性盒子布局
css3弹性盒子布局 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒布局模型的目的是 ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
CSS3 弹性盒子和常用标签
CSS3弹性盒子学习目标掌握CSS3弹性盒子的使用方法掌握CSS3弹性盒子的水平分布方法重点掌握CSS3弹性盒子的垂直分布的方法重点掌握CSS3弹性盒子排序的用法 CSS3 弹性盒子属性 ...
CSS3弹性盒子Flex
CSS3弹性盒子Flex 基础知识和术语原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 父级(flex容器)的属性 #显示 ...
媒体查询-响应式布局-BFC
媒体查询-响应式布局-BFC 1 回顾 1.1 多列布局设置给包裹元素的属性:column-countcolumn-widthcolumnscolumn-gapcolumn-rule-widthco ...
css3弹性盒子模型之box-flex
css3弹性盒子模型之box-flex 浏览器支持目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...
css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
CSS3弹性盒子之内容对齐justify-conten
弹性盒子(box-flex)是CSS3新增的一种布局模式,相比传统的布局模式来说,它更简单好用,而不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题.但是该属性目前只有部分浏览器支持,因此在 ...
CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...

css3弹性盒子、媒体查询、多列布局

css3

一、弹性盒子

二、css3媒体查询

1.媒体查询：屏幕适配，pc，移动端

2. 媒体类型：

3.媒体查询语法

三、多列布局

css3弹性盒子、媒体查询、多列布局相关推荐

最新文章

热门文章