CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体

时间:2022-09-06 11:36:32

CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用。(兼容性不好)

必要元素:

指定一个盒子为伸缩盒子 display:flex;

  设置属性来调整此盒子的子元素的布局方式:如 flex-direction;

  明确主侧轴及方向

  可互换主侧轴,也可改变方向

各属性:

   

设置主轴方向

a)  flex-direction:row(默认属性)

  1. row:从左往右

b)  flex-direction:row-reverse

  1. row-reverse从右向左排列

c)  flex-direction:column

  1. 竖直反向,从上往下

d)  flex-direction:column-reverse

  1.  竖直方向,从下往上

主轴的对齐方式

a)  justify-content:flex-start;

  1. 从主轴开始的方向对齐

b)  justify-content:flex-end

  1. 从主轴结束的方向对齐

c)  justify-content:center

  1. 居中对齐(水平/竖直)

d)  justify-content:space-round

  1. 平分父盒子空间

e)  justify-content:space-between

  1.  两端对齐,中间平分

侧轴对齐方式

a)  align-items:flex-start

  1. 从侧轴开始的方向对齐

b)  align-items:flex-end

  1. 从侧轴结束的方向对齐

c)  align-items:center

  1. 在侧轴方向上居中

d)  align-items:baseline

  1. 基线对齐,与flex-start等效

e)  align-items:stretch

  1. 拉伸,和父盒子高度一样
  2. 有高度不会被拉伸

伸缩比例

a)  flex:number

b)  不设置就不参与平分

元素换行

a)      flex-wrap:wrap;  换行,控制伸缩盒子里面的元素

b)      flex-wrap:nowrap; 默认不换行 会自动缩减宽度

控制 换行 堆叠的元素

a)      align-content: flex-start

    起始点对齐 各行向弹性盒容器的起始位置堆叠

b)      align-content: flex-end;

    终止点对齐 将结尾铺满 开头空着

c)       align-content: center ;

     居中对齐,各个盒子向弹性盒容器的中间位置堆叠/y轴中间

d)      align-contnt: space-around;

四周环绕:各行在弹性盒容器中平均分布

e)      align-content: space-between;

顶端和底部对齐,中间部分为空

f)       align-content:  stretch ;

    拉伸   高度会自适应

align-self;   覆盖父元素设置的align-items

           align-self: stretch

flex-start      /    flex-end  / center     / stretch

侧轴起始点对齐/终止点对齐/居中对齐/拉伸

order:number ;   控制子元素的顺序

.order li:nth-child(2) {

order: 10;   // 让其位置在第十位

}

WEB字体

  1. 可以使用自己指定的特殊字体,无需考虑用户是否安装
  2. 支持程度较好
  3. .eot字体是IE专用字体

使用web字体

声明字体

  @font-face{
    font-family:"webfont";  /*定义的字体名字*/
    src:url ("       路径");
    src:url("字体路径") format();/*format()函数给浏览器提示是该字体文件是何种类型*/
    }
    .web-font{
           font-family:'webfont'; /*定义字体名字*/
     }

伪元素添加图标字体 (给那个标签添加icon类名那个标签就会有这个图标)

   .icon::before{
      content: '\e655';
      font-family: iconfont;
  }

b) 
  在伪元素添加的时候content=“\e67c”

鼠标滚轮事件

  window.onmousewheel=function(){}

CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体的更多相关文章

  1. WordPress 设置图片的默认显示方式(尺寸/对齐方式/链接到)

    在文章中插入图片时,我们几乎每次都要设置图片的尺寸.对齐方式和链接方式,是比较耗时费力的.其实我们可以给这几个选项设置默认参数,省去我们每次设置的麻烦. 可以将下面的代码添加到主题的 function ...

  2. 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

    position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...

  3. 设置RichTextBox控件的文本的对齐方式

    实现效果: 知识运用: RichTextBox控件的SelectionAlignment属性 //获取或设置在当前选择或插入点的对齐方式 public HorizontalAlignment Sele ...

  4. 如何在css中设置按钮button中包含图片文字对齐方式

    <el-button class="class-management style="line-heught">班级管理

  5. 从零开始学 Web 之 CSS3(七)多列布局,伸缩布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. CSS3之Flexbox布局

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,它具有很强大的功能,可以很轻松实现很多复杂布局,在它出现之前,我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局, ...

  7. flexbox 伸缩布局盒

    Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计. Flexbox 由 伸缩容器 和 伸缩项目 组成.通过设置元素的 display 属性为   ...

  8. CSS3弹性盒布局方式

    一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...

  9. 深入理解 CSS3 弹性盒布局模型

    Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...

随机推荐

  1. 说不尽的MVVM&lpar;4&rpar; – 发号施令的Command

    知识预备 阅读本文,我假定你具备以下知识: C# WPF基础知识 知道WPF的命令 WPF相对WinForm加了一种Command的机制,对用户的操作进行更加灵活的处理,相信很多朋友知道并用过Rout ...

  2. 转!!java反射机制

    Java 反射机制 基本概念 在Java运行时环境中,对于任意一个类,能否知道这个类有哪些属性和方法?对于任意一个对象,能否调用它的任意一个方法? 答案是肯定的. 这种动态获取类的信息以及动态调用对象 ...

  3. C&plus;&plus;数据结构之Queue(队列)

    Queue,队列,和我们日常生活中的队列是同样的规则,"先进先出",从尾入,从首出. Queue,主要有三种基本操作,append(添加元素至队尾):serve(队首元素出列):r ...

  4. schtasks确实可以绕过UAC,简直不可思议啊~~

    https://msdn.microsoft.com/en-us/library/windows/desktop/bb736357(v=vs.85).aspx

  5. linux常用命令及安装软件命令

    1.查看操作系统是33位还是64最简单的方法 getconf LONG_BIT 或者 uname -a 2.常用命令 2.1基本操作 clear 清屏 2.2安装命令 rpm(redhat packa ...

  6. (Problem 36)Double-base palindromes

    The decimal number, 585 = 10010010012(binary), is palindromic in both bases. Find the sum of all num ...

  7. 巧用weui&period;gallery&lpar;&rpar;,点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  8. iOS10 越狱, openSSH

    iOS 10 已经可以越狱, 不过比较蛋疼的是非完美越狱,每次重启都要从新越狱. 感兴趣的同学可以尝试一下,本人使用同步推上的教程,亲测可用. 越狱完后想安装OpenSSH, 在Cydia上搜索安装, ...

  9. MySQL - 常见的存储引擎

    数据库存储引擎是数据库底层软件组织,数据库管理系统(DBMS)使用数据引擎进行创建.查询.更新和删除数据,不同的存储引擎... 存储引擎 数据库存储引擎: 是数据库底层软件组织,数据库管理系统(DBM ...

  10. vertical-align&lowbar;CSS参考手册&lowbar;web前端开发参考手册系列

    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式. <!DOCTYP ...