CSS3-多列-视口-媒体查询-弹性盒/弹性布局-Node介绍

最新推荐文章于 2022-04-13 21:22:24 发布

青珣墨笠

最新推荐文章于 2022-04-13 21:22:24 发布

阅读量507

点赞数

分类专栏： web前端html css 文章标签： css3 多列媒体查询布局

本文链接：https://blog.csdn.net/zhangli2513/article/details/77227744

版权

web前端html css 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

css3多列：

column-count: 设置列的个数，可以把一行文字分割成设置的列的个数，如果设置了列的宽度，当列的最小宽度和不够总宽度的时候，列的数量就会缩小。
column-width:可以设置列的最小宽度
column-span:设置列的横跨数量，常用于设置标题
column-rule:设置分割线设置方式与border一样是一个复合属性
column-gap:设置列的间距
column-fill: 设置列的填充方式 balance auto(有兼容性,只支持火狐)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h3{
                column-span: all;
            }
            div{
                column-count: 5;
                column-width: 200px;
                column-rule: 3px dashed green;
                column-gap: 30px;
                column-fill: auto;
            }
        </style>
    </head>
    <body>
        <button class="itemMenu">item</button>
        <ul>
            <li><a href="#">ISO</a></li>
            <li><a href="#">Android</a></li>
            <li><a href="#">Node</a></li>
            <li><a href="#">HTML</a></li>
        </ul>
        <div class="container"></div>
        <div>
            <h3>《三国演义》第一回 宴桃园豪杰三结义　斩黄巾英雄首立功</h3>
            <p>滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。——调寄《临江仙》</p>
        </div>
    </body>
</html>

效果
这里写图片描述

这里写图片描述

单位：rem px em 百分比 pt
em:也是一个类似的百分比的单位，相对于父元素的比例
rem:相对于根元素字号的比例根18号字=2rem
->1.可以让比较小的屏幕展示更多的内容并且可以按照屏幕的宽度来设置字号（小屏幕设置小字号大屏幕设置大字号）
->2.如果所有的宽高字号都用rem表示所有的内容展示的宽高字号都是响应式的

html{
    font-size: 20px;
}
p{
    /*根元素字号是16px,1rem就表示16个像素点*/
    font-size: 1rem;
}

媒体查询：
@media(mix-width:600px)and or 其他条件{满足这个条件下的样式}

/*手机*/
@media (max-width: 768px){
    html{background-color: #799AFF;font-size: 10px;}
    ul{display: none;}
    .itemMenu{display: block;}
}
/*平板768-992*/
@media (min-width: 768px) and (max-width:992px){
    html{background-color: gold;font-size: 12px;}
    ul{display: none;}
    .itemMenu{display: block;}
}
/*笔记本992-1200*/
@media (min-width: 992px) and (max-width:1200px){
    html{background-color:red;font-size: 16px;}
    ul{display: block;}
    .itemMenu{display: none;}
}
/*台式机显示器*/
@media (min-width: 1200px){
    html{background-color:#9A7A34;font-size: 20px;}
    ul{display: block;}
    .itemMenu{display: none;}
}

效果：
这里写图片描述

这里写图片描述
视口：用于设置移动端显示内容窗口的配置

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

兼容性：
1、加载处理不兼容的脚本文件

<!--[if lt IE 9]>  
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>  
<![endif]-->

2、更改IE浏览器渲染内容时使用的内核

<meta http-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

弹性盒/弹性布局（微信小程序）
新的布局方式以前浮动、定位布局

display：flex设置为弹性盒
flex-direction:设置弹性盒内子元素的排列方向

属性值：
row
row-reverse
column
column-reverse

justify-content:设置水平方向的排布方式

属性值：
flex-start默认
flex-end 设置结束点对齐
center 设置以中心点对齐
space-between设置水平方向的间距平均分配
space-around：设置水平方向平均分配，并且起始点和结束点都占间距的一半；

align-items:设置垂直方向的排列方式

属性值：
flex-start baseline stretch以起始点的位置排列
flex-end：以结束点对齐
center：垂直方向居中

align-content：

属性值
flex-start：默认设置起始点位置对齐
flex-end：设置以结束点对齐
center：以中心点对齐
space-between：设置垂直方向的间距平均分配
space-around：设置垂直方向平均分配，并且起始点和结束点都占间距的一半；

order:给元素重新排序数值越小的越在前边
fiex:可设置元素在父元素中所占的比例

node:
使用node使用两部分
1.npm：是node的包管理工具，可以下载基于node的插件
更改为国内镜像 http://npm.taobao.org/ –> cnpm
npm install -g cnpm –registry=https://registry.npm.taobao.org
2.使用API的部分，可以用于写服务端

npm常用操作指令：
install：安装 i
-g：安装到全局（global）目录下（在任何工程中，都可以使用这个插件）
uninstall：卸载

青珣墨笠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3-多列-视口-媒体查询-弹性盒/弹性布局-Node介绍

css3多列： column-count: 设置列的个数，可以把一行文字分割成设置的列的个数，如果设置了列的宽度，当列的最小宽度和不够总宽度的时候，列的数量就会缩小。 column-width:可以设置列的最小宽度 column-span:设置列的横跨数量，常用于设置标题 column-rule:设置分割线设置方式与border一样是一个复合属性 column-gap
复制链接

扫一扫