“妄”眼欲穿-CSS之flex布局和边框阴影

妄:狂妄;

不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧。

flex布局

main axis:主轴;cross axis:交叉轴

容器的子元素自动成为容器成员,成为flex 项目(item)


flex容器属性

flex-direction

​ 该属性决定主轴的方向,即各flex item 的排列方向。

  • row(默认值):水平方向,起点在左端;

  • row-reverse:水平方向,起点在右端;

  • column:垂直方向,起点在上沿;

  • column-reverse:垂直方向,起点在下沿。

flex-wrap

​ 该属性决定在轴线方向排不下所有的item时的换行规则。

  • nowrap(默认值):不换行;
  • wrap:换行,第一行在上方;
  • wrap-reverse:换行,第一行在下方。

flex-flow

​ 该属性是flex-direction属性和flex-wrap属性的简写形式。

  • 默认值:row nowrap
  • 属性格式:.box { flex-flow:<flex-direction>||<flex-wrap>;}

justify-content

​ 该属性定义了item在主轴上的对齐方式。

  • flex-start(默认值):左对齐;
  • flex-end:右对齐;
  • center:居中;
  • space-between:两端对齐,item之间的间隔都相等;
  • space-around:item两侧的间隔都相等,所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items

​ 该属性定义项目在交叉轴(cross axis)方向上如何对齐。

  • flex-start:item的上边框与交叉轴的起点对齐;
  • flex-end:item的下边框与交叉轴的终点对齐;
  • center:item的中线与交叉轴的中点对齐;
  • baseline:item的第一行文字的基线对齐(文字的底线);
  • stretch(默认值):如果item未设置高度或设为auto,将占满整个容器的高度。

align-content

​ 该属性定义了多条轴线的对齐方式。如果item中只有一条轴线,该属性不起作用。

  • flex-start:与交叉轴的起点对齐;
  • flex-end:与交叉轴的终点对齐
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

item项目属性

order

​ 该属性决定item的排列顺序,数值越小,排列越靠前,默认为0

flex-grow

​ 该属性决定item的放大比例,默认为0,即如果存在剩余空间,也不放大。类似Android权重(weight)

flex-shrink

​ 该属性决定了item的缩小比例,默认为1,即如果空间不足,item将缩小。负值对该属性无效

flex-basis

​ 该属性决定了在分配多余空间之前,item占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。默认值auto,即item的原本大小。

​ 该属性可以设为widthheight属性一样的值(如:35px),则item将占据固定空间。

flex

​ 该属性是flex-growflex-shrinkflex-basis的简写。默认值为0 1 auto。后两个属性可选。

​ 该属性有两个快捷值:auto:1 1 auto;none:0 0 auto;建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

align-self

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

​ 该属性可能取6个值,除了auto,其他都和align-items属性完全一致。

边框阴影

box-shadow

box-shadow: <length> <length> <length>?<length>?||<color>

也就是

box-shadow:inset x-offset y-offset blur-radius spread-radius color

换句说:box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

  • 投影方式:该参数为可选值,不设值时表示默认的投影方式为外阴影,如果取其唯一值insert,则表示投影方式为内阴影。
  • x-offset(x轴偏移量):指阴影水平偏移量,可以取正值或负值,若值为正,则阴影在对象的右边,反之在对象的左边。
  • y-offset(y轴偏移量):指阴影的垂直偏移量,可取正值或负值,若为正值,则阴影在对象的底部,反之在对象的顶部。
  • blur-radius(阴影模糊半径):可选,但取值只能为正值,值取0时,表示阴影不具有模糊效果。值越大,阴影的边缘就越模糊。
  • spread-radius(阴影拓展半径):可选,取值可以为正值或负值。若为正值,则整个阴影都延展扩大,反之缩小。
  • color(阴影颜色):可选,当不设定颜色时,浏览器会取默认色,但各浏览器的默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。

圆角边框

border-radius(css3)

​ border是一个简写属性,用于设置四个border-*-radius属性。

​ 语法:border-radius: 1-4 length|% / 1-4 length|%;

​ 按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

flex布局和边框阴影的更多相关文章

  1. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  2. CSS之flex布局和边框阴影

    flex布局 main axis:主轴:cross axis:交叉轴 容器的子元素自动成为容器成员,成为flex 项目(item) flex容器属性 flex-direction ​ 该属性决定主轴的 ...

  3. 携程移动端案列(flex布局、背景图缩放,文字阴影)

    效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...

  4. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  5. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  6. flex布局

    一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...

  7. Flex 布局

    Flex 布局     网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非 ...

  8. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  9. flex 布局 初次接触这个好使又不是特别好用的布局方法

    刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而, ...

随机推荐

  1. ELK收集windows服务器日志笔记

    一.软件版本 1.jdk-8u211-linux-x64.rpm 2.elasticsearch-6.8.1.rpm 3.logstash-6.8.1.rpm 4.kibana-6.8.1-x86_6 ...

  2. 如何给女朋友讲明白:Java 中 Stack(栈) 与 Heap(堆)

    背景 Java 中 Stack(栈) 与 Heap(堆) 是面试中被经常问到的一个话题. 有没有对 Java 中 Stack(栈) 与 Heap(堆) 烂熟于心的童鞋,请举手!!!(怎么没人举手-) ...

  3. Java描述设计模式(06):建造者模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 基于建造者模式,描述软件开发的流程. 1.代码实现 /** * 基于建造者模式描述软件开发 */ public class C0 ...

  4. Docker 系列之 常用镜像

    Ubuntu 实战 操作 # 拉取 18.04 版本的 Ubuntu 镜像 docker pull ubuntu:latest # 以交互方式运行并进入 ubuntu 容器环境 docker run ...

  5. MySql入门知识(一)

    概述 MySQL是一个真正多用户,多线程结构化查询语言数据库服务器.MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司.MySQL的SQL语言是用于访问数据 ...

  6. (转)阿里 RocketMQ 安装与简介

    原文:阿里 RocketMQ 安装与简介 一.简介 官方简介: l  RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: l  能够保证严格的消息顺序 l  提供丰富的消息拉取模式 l ...

  7. MacOS~jenkins里解决docker执行权限问题

    一 全局配置项设置 需要添加全局变量项,例如名称docker,路径/usr/local 添加一个jenkinsfile文件,用于运行docker命令 pipeline { agent any tool ...

  8. PostgreSQL 常用函数

    类似Oracle ,PostgreSQL也有强大的类型转换函数, 下面仅举两个类型转换例子. --1 例子 postgres; ?column? ---------- ( row) 在PG里如果想做除 ...

  9. JavaScript 赋值

    JavaScript 赋值运算符 赋值运算符向 JavaScript 变量赋值. 运算符 例子 等同于 = x = y x = y += x += y x = x + y -= x -= y x = ...

  10. Android8.1 开关VOLTE流程分析

    前言 最近有需求需要实现插卡默认打开Volte功能,顺带研究了下Volte的流程,在此做个记录 开始 从Settings设置界面入手,网络和互联网-->移动网络-->VoLTE高清通话(电 ...