怪异盒模型和盒模型_七种基本的css选择器[通俗易懂]

1.怪异盒模型

 (1)在了解怪异盒模型之前我们先来了解一下标准盒模型的特点

  标准盒模型:

        width,height设置旳是内容区域的大小

        整个盒子的大小 = width + 左右的padding + 左右的border

        在width给定的情况下，标准盒模型增加paddding、border都会扩大盒子的尺寸

 (2)然后再看怪异盒模型的特点

 怪异盒模型：

         width，height设置的是整个盒子的大小

        内容区域的大小 =  width – 左右的padding – 左右的border

        在width给定的情况下，怪异盒模型增加padding，border时盒子尺寸不变，会向内挤压内容            区域。

 (3)使用方式：

 通过 * 号选择器（通配符设置所有盒子为怪异盒模型）

如：

*{

        box – sizing: border – box;

}

(4)怪异盒模型优缺点

优点：由于设计图上读取大部分都是总尺寸，使用怪异盒模型免去了内容区计算问题，可以做到看到多少尺寸就写多少尺寸。

缺点：兼容性问题。IE9以下浏览器 box – sizing:border-box 无效

2.弹性盒子

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。本文将解释所有的基本原理。

方法：

 （1）display: flex;        

        1.控制子级的排列方式

        2.控制子级在水平方向的位置

        3.控制子级在垂直方向的对齐位置

 （2）flex – direction: row;

        1.控制自己的排列方式：row（水平排列） column（垂直排列）

 （3）justify-content: space – between;

        1.控制子级的水平位置

        2.flex-start:位置居左（默认值）

           center：位置居中

           flex-end：位置居右

           space-between:水平方向子级位置平均分配（最常使用）

           space-around:水平方向子级带两侧间隙位置平均分配

 （4）align-items:center;

        1.控制子级在垂直方向上的对齐方式

        2.strech（默认）：拉伸对齐，所有的盒子高度都被拉伸到一致，与该行最大高度保持一致

          flex-start：所有盒子高度不再被拉伸，顶对齐

          center：所有盒子高度不再被拉伸，居中对齐

          flex-end:所有盒子高度不再被拉伸，底对齐

 （5）flex-wrap:wrap;

        1.控制同行子级排列顺序，是否可以换行

        2.nowrap：默认值强制不换行，如果空间不够，压缩盒子宽度

           wrap：保持盒子宽度设置，空间不够，就换行

3.常见的CSS样式（自身样式）

背景样式

 1.设置盒子的背景颜色：

        颜色的描述方式：红    绿    蓝

        rgba(0-255 , 0-255, 0-255)    //二进制

        #FF0000                              //十进制

        73344                                  //二进制

那么设置背景颜色：

backgroud-color:rgba(255,0,0);  // 后面也可以用后两种设置颜色的方法

2.设置背景图

background-image:url(图片的位置)；

3.设置背景图平铺风格

background-repeat:no-repeat;

4.设置背景图大小

background-size:100px auto;

 可以直接设置具体的宽高，也可以用cover或者contain

background-size:cover; //背景占满框，等比例缩放（有可能显示不全）

background-size:contain;  //等比例缩放，完全显示（有可能占不满）

5.背景图位置设置

background-postion:100px 100px;  // 位置坐标/原点坐标在盒子的左上角

字体样式

1.字体颜色

color:prink

2.字型

font-family:monospace;

3.字体粗细

 lighter 细体  normal 正常  bold 粗体 bolder 更粗

font-weight:bold;

4.字体行高

 给一个不带单位的数字，表示是当前盒子字体大小的倍数

line-height: 1.5;

5.字体下划线

 text-decoration: underline;

文字位置特性

1.文字居中

text-align：center

2.文字缩进

1em 等于 1倍当前盒子的font-size大小

text-indent: 2em;

3.文字强制不执行

white-space: nowrap;

4.超出盒子可视区，隐藏

overflow: hidden;

5.文字溢出样式设置

 clip：切割掉     elipsis：省略号

text-overflow:elipsis;

今天的文章怪异盒模型和盒模型_七种基本的css选择器[通俗易懂]分享到此就结束了，感谢您的阅读。