标签：布局 ... bootstrap flex align 元素 width 页面

前提知识

特殊样式

/*Css3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/★点击高亮我们需要清除清除设置为transparent完成透明*/
-webkit-tap-highlight-color: transparent;
/★在移动端浏览器默认的外观在ios.上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none ;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

移动端技术解决方案

1.移动端浏览器
移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题。
我们可以放心使用H5标签和CSS3样式。
同时我们浏临器的私有前缀我们只需要考虑添加webkit即可
2.移动端css初始化
移动端CSS初始化推荐使用 normalize.css/
●Normalize.css :保护了有价值的默认值
●Normalize.css :修复了浏览器的bug
●Normalize.css :是模块化的
●Normalize.css :拥有详细的文档
官网地址: http://necolas.github.io/normalize.css/
3.CSS3盒子模型box-sizing
●传统模式宽度计算 :盒子的宽度= CSS中设置的width + border + padding
●CSS3盒子模型:盒子的宽度 = CSS中设置的宽度width里面包含了border和padding也就是说,我们的CSS3中的盒子模型， padding 和border不会撑大盒子了
移动端可以全部CSS3盒子模型
PC端如果完全需要兼容,我们就用传统模式,如果不考虑兼容性,我们就选择CSS3子模型

移动端开发选择

1.单独制作移动端页面(主流)
通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面
1.流式布局(百分比布局)
2.flex弹性布局(强烈推荐)
3.less+rem+媒体查询布局
4.混合布局
2.响应式页面兼容移动端(其次)
通过判断屏幕宽度来改变样式,缺点:制作麻烦,需要花很大的经历去调兼容性问题
1/媒体查询
2/bootstrap

meta视口标签

标准的viewport设置

属性 解释说明
width 宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale 初始缩放比,大于0的数字
maximum-scale 最大缩放比,大于0的数字
minimum-scale 最小缩放比,大于0的数字
user-scalable 用户是否可以缩放，yes或no ( 1或0 )

流式布局

流式布局,就是百分比布局,也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
防止无限伸缩,挤掉其他元素
max-width最大宽度( max-height最大高度)
min-width最小宽度 (min-height最小高度)一般320px

Flex

flex体验

1.flex弹性布局
操作方便,布局极为简单,移动端应用很广泛
PC端浏览器支持情况较差
IE 11或更低版本,不支持或仅部分支持
建议:
1.如果是PC端页面布局,我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的PC端页面布局, 我们还是使用flex弹性布局

flex原理

flex是flexible Box的缩写,意为"弹性布局" ,来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后,子元素的float、clear 和vertical-align(元素垂直对齐的方式)属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用Flex布局的元素,称为Flex容器( flex container) , 简称”容器"。它的所有子元素自动成为容器成员,称为Flex项目( flex item) ,简称"项目"。
总结flex布局原理:
就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

flex布局父项常见属性

常见父项属性
以下由6个属性是对元素设置的
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap∶设置子元素是否换行
align-content :设置侧轴上的子元素的排列方式(多行)
align-items :设置侧轴上的子元素排列方式(单行)
flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap

flex主轴的子元素排列justify-content

justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个
属性值 说明
flex-start 默认值从头部开始如果主轴是x轴，则从左到右
flex-end 从尾部开始排列顺序不变(了解)
center 在主轴居中对齐(如果主轴是x轴则水平居中)
space-around 平分剩余空间
space-between 先两边贴边再平分剩余空间(重要)

flex-wrap子元素是否换行

默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的。
nowarp 默认值,不换行

flex主轴flex-direction

1.主轴与侧轴
在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有∶行和列、x轴和y轴
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下
2.属性值
flex-direction属性决定主轴的方向(即项目的排列方向)
注意︰主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
row(x轴) 默认值从左到右
row-reverse 从右到左(了解)顺序翻转
column(y轴) 从上到下
column-reverse 从下到上(了解)

align-items侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴（默认是y轴)上的排列方式在子项为单项的时候使用
属性值 说明
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中)
stretch 拉伸（默认值)不给高度才有效果

align-content侧轴上的子元素排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现 换行 的情况(多行），在单行下是没有效果的。
属性值 说明
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度

align-content和align-items区别

align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适应于换行(多行)的情况下（单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找align-items 多行找align-content

flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性

div{
    display: flex;
    width: 600px;
    height: 300px;
    background-color: pink;
    /* flex-direction: column;
    flex-wrap: wrap; */
    flex-flow: column wrap;
}

flex子项flex份数

p span{
    /* 平均分配宽高 */
    flex: 1;
    background-color: yellow;
}
p span:nth-child(2){
    /* 占两份 */
    flex: 2;
    background-color: green;
}

flex布局子项常见属性

flex子项目占的份数:
flex属性定义子项目分配剩余空间，用flex来表示占多少份数。
align-self控制子项自己在侧轴的排列方式:
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性,如果没有父元素，则等同于stretch,。
order属性定义子项的排列顺序(前后顺序):
数值越小,排列越靠前,默认为0

align-self和order

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch,。

div span:nth-child(2){
    /* 数值越小,排列越靠前,默认为0 */
    order: -1;
}
div span:nth-child(3){
    align-self: flex-end;
}

线性渐变背景颜色

background: linear-gradient(起始方向，颜色1，颜色2,...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient (left top,red,blue);
背景渐变必须添加浏览器私有前缀
起始方向可以是︰方位名词或者度数，如果省略默认就是top

Rem

技术方案

技术方案1 技术方案2(推荐)

less flexible.js

媒体查询 rem

rem

根据页面宽度改变颜色

/*  min-width >=   max-width  <= */
/* 注意:为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到
/* 1.小于540px页面  说明最大时539px */
@media screen and (max-width: 539px) {
    body {
        background-color: blue;
    }
}
/* 2.540px~970px  的页面 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
    body {
        background-color: pink;
    }
} */
@media screen and (min-width: 540px){
    body {
        background-color: pink;
    }
}
/* 大于970 */
@media screen and (min-width: 970px) {
    body {
        background-color: red;
    }
}

// <539px 蓝色  >540px 粉色  >970px红色

媒体查询

媒体查询( Media Query )是CSS3新语法。

使用@media查询，可以针对不同的媒体类型定义不同的样式

@media可以针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

@media mediatype and|not|only (media feature){

}

用@media开头注意@符号

mediatype媒体类型:

all(用于所有设备),print(用于打印机和打印预览),screen(用于电脑屏幕,平板电脑,智能手机等)

关键字and not only

and :可以将多个媒体特性连接到一起,相当于“且”的意思。

not :排除某个媒体类型,相当于”非” 的意思,可以省略。

only :指定某个特定的媒体类型,可以省略。

media feature媒体特性必须有小括号包含

width 定义输出设备中页面可见区域的宽度

min-width 定义输出设备中页面最小可见区域宽度

max-width 定义输出设备中页面最大可见区域宽度

rem单位

p{
    /* 1.em 相对于父元素 的字体大小来说的 */
    /* width: 10em;
    height: 10em; */
    /* 2.rem 相对于html元素字体大小来说的 */
    width: 10rem;
    height: 10rem;
    background-color: pink;
    /* 3.rem就是可以通过修改html里面文字大小来改变页面元素的大小可以整体控制 */
}

媒体查询+rem

/* 从小到大顺序 */
@media screen and (min-width:320px) {
    html {
        font-size: 50px;
    }
}
/* 1rem = 50px */
@media screen and (min-width:640px) {
    html {
        font-size: 100px;
    }
    /* 1rem = 100px */
}

引入资源

<!-- 引入资源就是针对不同的屏幕尺寸 调用不同的css文件 -->
    <link rel="stylesheet" href="./style320.css" media="screen and (min-width:320px)">
    <link rel="stylesheet" href="./style640.css" media="screen and (max-width:640px)">
        
 <!-- 
        当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets (样式表)。
        原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。
     -->

flexible

手机淘宝团队出的简洁高效移动端适配库

我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理

它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。

我们要做的,就是确定好我们当前设备的html文字大就可以了

比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/ 10)就可以

里面页面元素rem值:页面元素的px值/ 75

剩余的,让flexible.js来去算

less

less变量

​ @变量名:值;
​ 1.变量命名规范
​ 必须有@为前缀
​ 不能包含特殊字符
​ 不能以数字开头
​ 大小写敏感

//定义一个粉色的变量
@color:pink;
//错误变量命名 不能包含特殊字符 不能以数字开头  大小写敏感
//定义了一个字体为14px的变量
@font14:14px;
body{
    background-color: @color;
}
div{
    color: @color;
    font-size: @font14;
}
a{
    font-size: @font14;
}

less编译

本质上, Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,
这些规则最终会通过解析器,编译生成对应的CSS文件。
所以,我们需要把我们的less文件,编译生成为css文件,这样我们的html页面才能使用。

less嵌套

子元素的样式直接写到父元素里面
如果遇见(交集|伪类|伪元素选择器)
●内层选择器的前面没有&符号,则它被解析为父选择器的后代;
●如果有&符号,它就被解析为元素自身或父元素的伪类。

.header{
    width: 200px;
    height: 200px;
    background-color: pink;
    //1.less嵌套 子元素的样式直接写到父元素里面
    a{
        color: red;
        //如果有伪类、交集、伪元素选择器, 我们内层选择器的前面需要加&
        &:hover{
            color: blue;
        }
    }
}
.nav{
    width: 200px;
    height: 200px;
    background-color: blue;
    .logo{
        color:green;
    }
    &::before{
        content: 'hahahahaha';
    }
}

less运算

乘号(*)和除号(/ )的写法
运算符中间左右有个空格隔开1px + 5
对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位,则运算结果就取该单位

@border:5px + 5;
@basefont:50px;
div{
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @basefont;
    height: 82rem / @basefont;
}
// 乘号(*)和除号(/ )的写法
// 运算符中间左右有个空格隔开1px + 5
// 如果两个数都有单位,运算结果的值取第一个值的单位
// 如果两个值之间只有一个值有单位,则运算结果就取该单位

rem适配方案

1.设计稿常见的尺寸宽度

iphone 4.5      640px
iphone 6/7/8    750px
Android         常见320px、360px、 375px、 384px、 400px、 414px、 500px、 720px大部分4.7~5寸的安卓设备为720px
基本以750px为准

2.动态设置html标签font-size大小
假设设计稿是750px
假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
每份作为html字体大小,这里就是50px
那么在320px设备的时候,字体大小为320/15就是21 .33px
用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
比如我们以750为标准设计稿
一个100*100像素的页面元素在750屏幕下，就是100/ 50转换为rem是2rem * 2 rem比例是1比1
320屏幕下，html 字体大小为21.33则2rem = 42.66px 此时宽和高都是42.66但是宽和高的比例还是1比1
但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

3.元素大小取值方法
最后的公式:页面元素的rem值=页面元素值(px) / ( 屏幕宽度/划分的份数)
屏幕宽度/划分的份数就是html font-size的大小
或者:页面元素的rem值=页面元素值( px) / html font-size字体大小

屏幕划分

小于768px 超小屏幕

大于768px 小屏幕

大于992px 中等屏幕

大于1200px 大屏幕

Bootstrap

引入

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" 
crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
  integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" 
crossorigin="anonymous">

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0
+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
  crossorigin="anonymous">
</script>

响应式布局原理

<!-- 响应式开发里面 , 首先需要一个布局容器 -->
// Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstarp预先定义好了这个类，叫.container它提供了两个作此用处的类。   
<div class="container"></div>

/* 从小写到大 */
/* 1.超小屏幕下 小于768px 布局容器的宽度为100% */
@media screen and (max-width: 767px) {
    .container{
        /* 跟手机一样大 */
        width: 100%;
    }
}
/* 2.小屏幕下  大于768px 布局容器的宽度为750px */
@media screen and (min-width: 768px) {
    .container{
        width: 750px;
    }
}
/* 3.中等屏幕下  大于992px 布局容器的宽度为970px */
@media screen and (min-width: 992px) {
    .container{
        width: 970px;
    }
}
/* 4. 大等屏幕下  大于1200px 布局容器的宽度为1170px */
@media screen and (min-width: 1200px) {
    .container{
        width: 1170px;
    }
}

栅格系统使用

<div class="container">
    <div class="row">
        <!-- 每个占3份 -->
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    </div>
    <!-- 如果孩子的分数相加等于12 则孩子能占满整个的container宽度 -->
    <!-- <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
    </div> -->
    <!-- 小于12 则占不满,有空白-->
    <!-- <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>
    </div> -->
    <!-- 大于12  多余的会另起一行 -->
    <!-- <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
    </div> -->
        <!-- .row 必须放到 .container布局容器里面 -->
        <!-- 我们实现列的平均划分 需要给列添加类前缀,  .col-lg-3 -->
        <!-- 
        最大宽度    超小屏幕    小屏幕设备     中等屏幕       宽屏设备
        类前缀    .col-xs-    .col-sm-       .col-md-      .col-lg-
        列数                     12
        每一列默认有左右15像素的padding
        可以写多个  <div class="col-lg-3 col-md-4">

		更改原bootstrap样式,要注意权重问题
         --> 
</div>

栅格系统列嵌套

<!-- 
    栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列(12)。
    我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
 -->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- 我们列嵌套做好加一个行 row 这样可以取消父元素的padding值  而且高度自动和父级一样高 -->
            <div class="row">
                <div class="col-md-4">a</div>
                <div class="col-md-8">b</div>
            </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

栅格系统列偏移

使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距( margin )
<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <!-- 偏移的分数就是 12 - 两个盒子的分数 -->
        <div class="col-md-4 col-md-offset-4">2</div>
    </div>
    <div class="row">
        <!-- 把盒子往右移两份 -->
        <div class="col-md-8 col-md-offset-2">居中盒子</div>
    </div>
</div>

栅格系统列排序

<!-- 通过使用.col-md-push-*  (推)和.col-md-pull-*  (拉)类就可以很容易的改变列( column )的顺序。 -->
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">left</div>
        <div class="col-md-8 col-md-pull-4">right</div>
    </div>
</div>

响应式工具

.hidden-xs 在超小屏下隐藏  <768px
.hidden-sm 在小屏下隐藏    >768px
.hidden-md 在中屏下隐藏    >992px
.hidden-lg 在大屏下隐藏    >1200px

visible-xs 在超小屏下显示
visible-sm 在小屏下显示
visible-md 在中屏下显示
visible-lg 在大屏下显示

vue中使用

直接在public的index.html中引入即可

标签：布局,...,bootstrap,flex,align,元素,width,页面
来源： https://www.cnblogs.com/m83feng/p/15967122.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。