flex布局和边框阴影
“妄”眼欲穿-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的原本大小。
该属性可以设为width
或height
属性一样的值(如:35px),则item将占据固定空间。
flex
该属性是flex-grow
,flex-shrink
,flex-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布局和边框阴影的更多相关文章
- “妄”眼欲穿-CSS之flex布局和边框阴影
妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...
- CSS之flex布局和边框阴影
flex布局 main axis:主轴:cross axis:交叉轴 容器的子元素自动成为容器成员,成为flex 项目(item) flex容器属性 flex-direction 该属性决定主轴的 ...
- 携程移动端案列(flex布局、背景图缩放,文字阴影)
效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- flex布局
一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...
- Flex 布局
Flex 布局 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- flex 布局 初次接触这个好使又不是特别好用的布局方法
刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而, ...
随机推荐
- 搭建Harbor
搭建Harbor 一.安装准备 二.安装docker-ce 三.安装docker-compose 四.安装harbor 5.1下载安装程序 5.2配置harbor.yml 5.3运行install.s ...
- linux 源设置
ubuntu 18.04.3 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak cat > /etc/apt/sources.lis ...
- 10 个提升效率的Linux小技巧
您是否曾经惊讶于看到某人在 UNIX 中非常快速地工作,触发命令并快速地执行操作?是的,我碰到过几次,并且我一直都在向那些超级巨星开发者学习.在本文中,我想分享一些 UNIX 命令实践,这些实践是我在 ...
- LeetCode 第70题动态规划算法
导言 看了 动态规划(https://www.cnblogs.com/fivestudy/p/11855853.html)的帖子,觉得写的很好,记录下来. 动态规划问题一直是算法面试当中的重点和难点, ...
- Microsemi Libero系列教程(一)——Libero开发环境介绍、下载、安装与注册
前言 相比与Xilinx和Altera在国内的市场,Microsemi的FPGA在国内应用很少很少,网上几乎没有详细的教程,刚开始使用时,遇到了各种问题,自己也走了不少弯路.本系列教程以Libero ...
- ubuntu18.04 安装 flameshot截图工具
安装flameshot:https://github.com/lupoDharkael/flameshot sudo apt-get install flameshot 然后设置一个快捷键,设置> ...
- (转)理解滑动平均(exponential moving average)
转自:理解滑动平均(exponential moving average) 1. 用滑动平均估计局部均值 滑动平均(exponential moving average),或者叫做指数加权平均(exp ...
- PHP实现支付宝登录
1.支付宝路由拼接 public function dev() { $http = 'https://openauth.alipaydev.com/oauth2/publicAppAuthorize. ...
- kmeans均值聚类算法实现
这个算法中文名为k均值聚类算法,首先我们在二维的特殊条件下讨论其实现的过程,方便大家理解. 第一步.随机生成质心 由于这是一个无监督学习的算法,因此我们首先在一个二维的坐标轴下随机给定一堆点,并随即给 ...
- LeetCode刷题191117
博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 算法: 题目: 给出一个 32 位的有符号整数,你需要将这个整数中每位上 ...