“妄”眼欲穿-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. 搭建Harbor

    搭建Harbor 一.安装准备 二.安装docker-ce 三.安装docker-compose 四.安装harbor 5.1下载安装程序 5.2配置harbor.yml 5.3运行install.s ...

  2. linux 源设置

    ubuntu 18.04.3 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak cat > /etc/apt/sources.lis ...

  3. 10 个提升效率的Linux小技巧

    您是否曾经惊讶于看到某人在 UNIX 中非常快速地工作,触发命令并快速地执行操作?是的,我碰到过几次,并且我一直都在向那些超级巨星开发者学习.在本文中,我想分享一些 UNIX 命令实践,这些实践是我在 ...

  4. LeetCode 第70题动态规划算法

    导言 看了 动态规划(https://www.cnblogs.com/fivestudy/p/11855853.html)的帖子,觉得写的很好,记录下来. 动态规划问题一直是算法面试当中的重点和难点, ...

  5. Microsemi Libero系列教程(一)——Libero开发环境介绍、下载、安装与注册

    前言 相比与Xilinx和Altera在国内的市场,Microsemi的FPGA在国内应用很少很少,网上几乎没有详细的教程,刚开始使用时,遇到了各种问题,自己也走了不少弯路.本系列教程以Libero ...

  6. ubuntu18.04 安装 flameshot截图工具

    安装flameshot:https://github.com/lupoDharkael/flameshot sudo apt-get install flameshot 然后设置一个快捷键,设置> ...

  7. (转)理解滑动平均(exponential moving average)

    转自:理解滑动平均(exponential moving average) 1. 用滑动平均估计局部均值 滑动平均(exponential moving average),或者叫做指数加权平均(exp ...

  8. PHP实现支付宝登录

    1.支付宝路由拼接 public function dev() { $http = 'https://openauth.alipaydev.com/oauth2/publicAppAuthorize. ...

  9. kmeans均值聚类算法实现

    这个算法中文名为k均值聚类算法,首先我们在二维的特殊条件下讨论其实现的过程,方便大家理解. 第一步.随机生成质心 由于这是一个无监督学习的算法,因此我们首先在一个二维的坐标轴下随机给定一堆点,并随即给 ...

  10. LeetCode刷题191117

    博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 算法: 题目: 给出一个 32 位的有符号整数,你需要将这个整数中每位上 ...