① flex

② display

③ box

④ position

① flex

容器的属性

flex-direction	决定主轴的方向（即项目的排列方向）。
flex-wrap	默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow	是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content	定义了项目在主轴上的对齐方式
align-items	定义项目在交叉轴上如何对齐
align-content	定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-direction	值	图	说明
	row（默值）：		主轴为水平方向，起点在左端。
	row-reverse		主轴为水平方向，起点在右端
	column		主轴为垂直方向，起点在上沿
	column-reverse		主轴为垂直方向，起点在下沿

flex-wrap	值	图	说明
	nowrap（默认）		不换行
	wrap		换行，第一行在上方
	wrap-reverse		换行，第一行在下方

justify-content	值	图	说明
	flex-start（默认值）		左对齐
	flex-end		右对齐
	center		居中
	space-between		间距相等排列，两边不留白
	space-around		间距相等排列，两边留白等于间距的一半

align-items	值	图	说明
	stretch（默认值）		如果项目未设置高度或设为auto，将占满整个容器的高度
	flex-start		交叉轴的起点对齐
	flex-end		交叉轴的终点对齐
	center		交叉轴的中点对齐
	baseline		项目的第一行文字的基线对齐

align-content	值	图	说明
	stretch（默认值）		轴线占满整个交叉轴
	flex-start		与交叉轴的起点对齐
	flex-end		与交叉轴的终点对齐
	center		与交叉轴的中点对齐
	space-between		与交叉轴两端对齐，轴线之间的间隔平均分布
	space-around		每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

② display

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

display	类型	值	说明
	外部显示	none	CSS1规范，无兼容性问题，该属性值表示此元素不会被显示，依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间.
		block	`CSS1`规范，无兼容性问题，该属性值表示此元素将显示为块级元素，此元素前后会带有换行符，元素独占一行，封闭后自动换行，默认宽度为`100%`，可以指定宽度和高度，内外边距对于四个方向有效。
		inline	是CSS1规范，无兼容性问题，该属性值表示此元素会被显示为内联元素，元素会生成一个或多个内联元素框，这些框不会在自身之前或之后产生换行符，在正常流中，如果有空间，则下一个元素将在同一行上，元素排在一行，封闭后不会自动换行，不能指定高度与宽度，可以使用line-height来指定高度，外边距对于水平方向有效，垂直方向无效，内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。
		inline-block	是CSS2规范，无兼容性问题，该属性值表示此元素将显示为内联块元素，该元素生成一个块元素框，该框将随周围的内容一起流动，就好像它是单个内联框一样，与被替换的元素非常相似，它等效于内联流根inline flow-root，可以指定宽度和高度，内外边距对于四个方向有效元素排在一行，但是在回车后会有空白缝隙。
		run-in	是`CSS3`规范，兼容性一般，该属性值表示此元素会生成一个块元素盒子，该元素盒子可建立一个新的块格式化上下文`BFC`，定义格式化根所在的位置。
	内部显示	flow-root	是`CSS3`规范，兼容性一般，该属性值表示此元素会生成一个块元素盒子，该元素盒子可建立一个新的块格式化上下文`BFC`，定义格式化根所在的位置。
		table	是`CSS2`规范，兼容性良好，该属性值表示此元素会作为块级表格来显示，类似`<table>`，表格前后带有换行符。
		flex	是CSS3规范，目前主流浏览器都已支持，是布局的首选方案，该属性值表示此元素会作为弹性盒子显示，在外部表现为block，内部作为弹性盒子使用，弹性布局可以为盒状模型提供最大的灵活性。在兼容移动端浏览器的方案上，有可能需要使用display:-webkit-box;，也就是内核前缀-box，同样都是弹性盒子，由于各阶段草案命名的原因，其命名从box更改为flex，flex是新的规范属性，此外flex并不能完全替代box，使用这两种方式在实际布局中会存在差异。
		grid(网格)	是CSS3规范，目前主流浏览器都已支持，该属性值表示将元素分为一个个网格，然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个成员的位置。不同之处在于，Flex布局是轴线布局，只能指定成员针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成行和列，产生单元格，然后指定成员所在的单元格，可以看作是二维布局。
		inline-table	是`CSS2`规范，兼容性良好，该属性值与`display: table;`在元素内部表现相同，在元素外部显示表现为`inline`。
		inline-flex	是`CSS3`规范，目前主流浏览器都已支持，该属性值与`display: flex;`在元素内部表现相同，在元素外部显示表现为`inline`。
		inline-grid	是`CSS3`规范，目前主流浏览器都已支持，该属性值与`display: grid;`在元素内部表现相同，在元素外部显示表现为`inline`。
		list-item	是`CSS1`规范，无兼容性问题，该属性值表示将元素的外部显示类型变为`block`盒模型，并将内部显示类型变为多个`list-item inline`盒模型。

③ box

box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度

box-sizing	值	说明
	content-box	默认值内容真正宽度 = 设置的宽度
	border-box	内容真正宽度width= 设置的width- 左右padding - 左右border
	inherit	规定从父元素继承此值

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

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

词解释：blur:模糊 spread:伸展 inset:内凹

box-shadow	参数	图	参数说明
	offset-x(必需)		取值正负都可。offset-x水平阴影的位置
	offset-y(必需)		取值正负都可。offset-y垂直阴影的位置
	blur(可选)		只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
	spread(可选)		取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。
	color(可选)		阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。可以是rgb(250,0,0)，也可以是有透明值的rgba(250,0,0,0.5)。
	inset(可选)		关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

④ position

position	值	说明	图	实例代码
	static(默认值)	positon定位的默认值，没有定位		position: static;
	relative(相对定位)	生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative。元素的位置通过top、right、bottom、left 控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)		position: relative; top: 40px; left: 40px;
	absoute(绝对定位)	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过top、right、bottom、left 控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角		position: absolute; top: 40px; left: 40px;
	fixed(固定定位)	生成绝对定位的元素，相对于浏览器窗口进行定位，和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)。元素的位置通过top、right、bottom、left 控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角		position: fixed; top: 80px; left: 10px;

微信小程序中css常用属性相关推荐

小程序中的css样式有哪些,微信小程序中css样式media标签
前沿:微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式, ...
微信小程序css内边距能么调,微信小程序中CSS的内边距和圆框
问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高.光有浮动是远远不够的,如果一个板块内的组件过多就会变得混乱.所以就需要用设置内边框来调整位置.微信小程序中会 ...
《十四》微信小程序中的常用 API之登录、获取用户信息、支付、提现、跳转小程序、网络请求、弹框、导航、数据缓存、图片、查看文档、音频、拨打电话、剪贴板、滚动、WXML
微信小程序提供了 wx 这个全局变量,通过这个全局变量可以调用微信小程序的 API. 登录: wx.login():获取登录凭证 code.通过登录凭证 code 进而换取用户登录态信息,包括用户在当 ...
微信小程序中尺寸单位rpx及样式的用法
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375p ...
微信小程序- css相比,wxss区别？小程序关联微信公众号如何确定用户的唯一性？微信小程序中的用户ID(openid和unionid)
1 与css相比, wxss区别? 1) 响应式长度 rpx 2) 样式导入 3) 小程序不支持通配符* *{ width:100rpx; height:100rpx; } 2 小程序关联微信公众号如 ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
微信小程序中的页面文件和组件
页面文件页面构造器 JS文件页面的JS文件,用于书写当前页面所需要的脚本代码以及生命周期函数. Page() : 注册了一个页面接收一个对象,该对象用于配置当前页面所需内容. 该对象拥有的属性: ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
如何在微信小程序中使用ECharts图表
在微信小程序中使用ECharts 1. 下载插件首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目. 下载链接:ecomfe/echarts-for-weixi ...

微信小程序中css常用属性

① flex

② display

③ box

④ position

微信小程序中css常用属性相关推荐

最新文章

热门文章