Web学习路线笔记（九）css3：弹性盒子+响应式布局

最新推荐文章于 2024-06-14 09:42:20 发布

godlike-icy

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量2k

点赞数

分类专栏： web前端文章标签： css3

本文链接：https://blog.csdn.net/qq_43682422/article/details/117378120

版权

web前端专栏收录该内容

73 篇文章 3 订阅

订阅专栏

第九天

1.多列（分栏）

1）column-count 规定元素应该被分隔得列数
语法：column-count:number|auto;
p{column-count:3} 效果如下图

在这里插入图片描述

2）column-gap 规定列之间的间隔
column-gap:length|normal;

3）column-rule 设置所有column-rule-*的简写属性
a.column-rule-style :设置线形
none:定义没有线
hidden:隐藏线
dotted: 点线
solid : 实线
double : 双线
注意：3d线型在分栏中没有效果
groove 定义3d groove 线，3d沟槽效果
ridge : 3d 脊状效果
inset : 3d左上角阴影效果
outset : 3d右下角阴影效果
b.column-rule-color:设置分隔线的颜色
c.column-rule-width:设置分隔线的宽度

复合写法：
coulumn-rule: width style color;

4）column-width 规定列的宽度（内容的宽度）

5）columns 复合写法，规定设置 column-width 和 column-count
columns: width count;

2.弹性布局（flex布局）

弹性盒子是css3的一种新的布局模式
css3弹性盒（Flexible Box或 flexbox）,是一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的布局方式。
引入弹性布局模型的目的是提供一种更加有效的方式对一个容器中的子元素进行排列、对齐和分配空白空间。

2.1 弹性盒子的定义方式
弹性容器通过设置 display:flex 或者 display:inline-flex将其定义为弹性容器。
弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

2.2常用的属性
1）flex-direction、justify-content、align-item、flex-grow和flex.

1.flex-direction
参数: row 横向从左到右排列（左对齐），默认的排序方式
row-reverse:反向横向排列（右对齐），从后往前排，最后一项排在最前面
column:纵向排列
column-reverse:反转纵向排列，从后往前排，最后一项排在最上面。

在这里插入图片描述
实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .container {
            width: 100%;
        }
        
        .nav {
            width: 100%;
            display: flex;
            /* -webkit-flex-direction: row;
            flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            list-style-type: none;
            background-color: #0ff;
            position: fixed;
            bottom: 0;
            margin-left: 5px;
        }
        
        .nav li {
            width: 20%;
            line-height: 20px;
            font-size: 13px;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="nav">
            <li>菜单项1</li>
            <li>菜单项2</li>
            <li>菜单项3</li>
            <li>菜单项4</li>
            <li>菜单项5</li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述

2.justify-content
把弹性项沿着弹性容器的主轴线对齐，即x轴水平方向
语法：
justiffy-content : flex-start | flex-end |center
space-between space-around
参数：
flex-start: 紧凑方式左对齐
flex-end: 紧凑方式右对齐
center:紧凑方式居中对齐
（重要）space-between: 除第一个元素和最后一个元素，其他子元素等分空白区域
（重要）space-around：所有子元素等分空白区域

3.align-items
子元素在侧轴（纵轴）方向上的对齐方式。此属性作用于父容器。
语法：
align-items:flex-start | flex-end |center |baseline |stretch
参数：
flex-start : 沿着纵轴顶端对齐
flex-end: 沿着纵轴底端对齐
center:沿着纵轴居中对齐
baseline: 沿着纵轴的基线对齐（文字的基线）
stretch:沿着纵轴拉伸对齐（注意高度别给固定）

在这里插入图片描述

4.flex-grow
规定弹性布局里项目的放大比例，默认为0（即如果存在剩余空间，也不放大）。此属性作用于子元素。
语法：flex-grow : number;

代码实例：

	<style>
		.container {
		display:flex;
		width:100%;
		height:800px;
		}
		.div1{
		flex-grow:1;
		background:red;
		}
		.div1{
		flex-grow:3;
		background:rgreen;
		}
		.div1{
		flex-grow:2;
		background:purple;
		}
	</style>
	<div class="container">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>

效果：
在这里插入图片描述

5.flex （应用于子元素）
用于指定弹性子元素的空间分配。
语法：
flex:auto | initial |none | inherit | [flex-grow] | [flex-shrink]
|[flex-basis]
参数：
auto: 相当于 1 1 auto
initial : 相当于 0 1 auto
none :相当于 0 0 auto
inherit : 从父元素继承
Tips：
flex可以带1-3个参数
1)带1个参数，
a.无单位，这个数值会被当做flex-grow 的值，即放大比例
b.带单位（px），这个数值会被当做flex-basis（基本宽度）的值
c.auto|initial|none
2）带2个参数
a.第一个参数必须没有单位，表示flex-grow （放大比例）
b.第二个参数分两种情况
i）不带单位，即表示flex-shrink,缩放比例
ii）带单位，表示flex-basis基本宽度
3）带3个参数
a.第一个参数和第二个参数必须不带单位，分别表示flex-grow,flex-shrink
放大比例和缩放比例
b.第三个参数必须带单位（一个有效的宽度指）被当作flex-basis，基本宽度

在这里插入图片描述

3.响应式布局

1）响应式布局的概念
Responsive Design ,在实现不同屏幕分辨率的终端上浏览网页的不同方式。通过响应式布局设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

2）响应式布局和自适应布局的区别
a.响应式布局只开发一套代码，通过检测视口的分辨率，针对不同客户端在客户端做代码处理，来体现不同的布局和内容。
自适应开发需要开发多套界面，通过检测视口的分辨率，来判断当前访问的设备是pc端、平板、电脑、手机，从而请求服务层，返回不同布局方式。
b.响应式布局等同于流动网格布局，而自适应等同于用固定分割点来进行布局。
c.自适应布局给出了更多的设计空间，只用考虑几种不同的状态就可以了
而响应式布局要考虑上百种不同的状态，虽然有些状态差异较小，但也要考虑。

3）响应式布局开发实现方法
a）媒体查询
b）百分比布局
c）rem布局
d）视口单位布局(vw/vh)

4)响应式设计步骤
a)设置meta标签
b)通过媒体查询来设置样式
c）设置多种视图的宽度
i）宽度需要使用百分比/rem/vw&vh等
ii）处理图片缩放
iii）其他属性处理
如 pre /iframe/ video 等,都要缩放其大小，table，建议不要增加padding属性，低分辨率下要使用内容居中操作。

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-UA-compatible" content="IE=edge,chrome=1">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->


    <!-- <meta http-equiv="x-ua-compatible" content="IE=edg,chrome=1" /> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-saclable=no">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            overflow: hidden;
            min-width: 600px;
        }
        
        .container div {
            height: 200px;
            float: left;
        }
        
        .div1 {
            background-color: red;
            width: 30%;
        }
        
        .div2 {
            background-color: yellow;
            width: 40%;
        }
        
        .div3 {
            background-color: blue;
            width: 30%;
        }
    </style>
</head>

<body>
    <div class=" container ">
        <div class="div1 "></div>
        <div class="div2 "></div>
        <div class="div3 "></div>
    </div>
</body>

</html>

4.媒体查询

步骤：
1.设置meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

说明：
以上标签内容只能被移动端识别。
viewport : 视口（移动端）
width=device-width 宽度等于当前设备宽度
initial-scale=1.0 初始缩放比例为1.0，默认为1.0
minimum-scale :允许用户缩放的最小比例
maximum-scale:允许用户缩放的最大比例

2.设置IE的渲染方式默认为最高版本

<meta http-equiv="x-ua-compatible" content="IE=edg,chrome=1" />

说明：

以上代码表示如果浏览器有chrome插件，将以chrome提供的v8引擎渲染该页面，如果没有将以IE的最高版本渲染页面。

3.引入兼容的JS文件

说明：因为IE8及IE8以下版本既不支持hml5，也不支持css3 Media，所以我们需要加载JS文件来处理这个兼容。上面的代码是一个注释语句，也就是说，IE9及以上的版本不会编译这几行代码。

在这里插入图片描述

第一种方法

根据媒体查询引入不同的css文件

用法：
屏宽 480以下

<link rel="stylesheet" href="css/screen480.css" media="screen and (max-width:480px)"

屏宽 480-800

<link rel="stylesheet" href="css/screen800.css" media="screen and (min-width:480px) and (max-width:800px)"

屏宽 800以上

<link rel="stylesheet" href="css/screentmore800.css" media="screen and (min-width:800px)"/>

设备：
all:所有设备
screen: pc端显示器
print:打印机或打印预览图
handheld:便携设备
tv:电视
speech:音频合成器
braille:盲人点触设备
embossed:盲人打印机
projection:投影设备
tty:固定密度字母栅格设备

Only:用来排除不支持媒体查询的浏览器

第二种方法

在style标签里写

@media screen and (max-width:480px) {
.menu {
	display: none;
}
}

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-UA-compatible" content="IE=edge,chrome=1">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->


    <!-- <meta http-equiv="x-ua-compatible" content="IE=edg,chrome=1" /> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-saclable=no">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            overflow: hidden;
            min-width: 600px;
        }
        
        .container div {
            height: 200px;
            float: left;
        }
        
        .div1 {
            background-color: red;
            width: 30%;
        }
        
        .div2 {
            background-color: yellow;
            width: 40%;
        }
        
        .div3 {
            background-color: blue;
            width: 30%;
        }
    </style>
</head>

<body>
    <div class=" container ">
        <div class="div1 "></div>
        <div class="div2 "></div>
        <div class="div3 "></div>
    </div>
</body>

</html>

效果：
在这里插入图片描述

5.web字体

在这里插入图片描述

@font-face
实例：

<style>
	@font-face
	{
		font-family: Myfont(自己定义的名字);
		src:url(下载的字体的路径)
	}
</style>

例如：
在这里插入图片描述

说明：
可以同时引入多个字体文件，字体一样，文件的扩展名不一样，目的是为了处理浏览器兼容。
src: url (“字体文件”) format(字体格式) , url (“字体文件”) format(字体格式);

6.iconfont 图标字体

由阿里巴巴提供的一种图标字体。
步骤：
1.进入官网http://iconfont.cn
2.创建一个项目
3.添加图标到购物车
4.将购物车中的图标添加到项目中
5.下载iconfont文件，解压后，将部分文件复制到我的网页项目中
6.使用字体图标前，先引入iconfont.css文件
7.使用图标方法：

    	a.使用类名

<div class="iconfont icongerenzhongxin"></div>

    	b.使用unicode值

<div class="icofont">&#xe62f;</div>

godlike-icy

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web学习路线笔记（九）css3：弹性盒子+响应式布局

第九天1.多列（分栏）1）column-count 规定元素应该被分隔得列数语法：column-count:number|auto;p{column-count:3} 效果如下图2）column-gap 规定列之间的间隔column-gap:length|normal;3）column-rule 设置所有column-rule-*的简写属性a.column-rule-style :设置线形none:定义没有线hidden:隐藏线dotted: 点线solid : 实线
复制链接

扫一扫