本文共 5401 字,大约阅读时间需要 18 分钟。
目录
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同
从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。
简单来说,IE盒子模型就是把border的边框长度计算在宽和高中。
box-sizing: border-box;
,用六个字概括便是简单、方便、快速。
flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。
使用flex布局的容器(flex container),它内部的元素自动成为flex项目(flex item)。容器拥有两根隐形的轴,水平的主轴(main axis),和竖直的交叉轴。主轴开始的位置,即主轴与右边框的交点,称为main start;主轴结束的位置称为main end;交叉轴开始的位置称为cross start;交叉轴结束的位置称为cross end。item按主轴或交叉轴排列,item在主轴方向上占据的宽度称为main size,在交叉轴方向上占据的宽度称为cross size。
以下6个属性设置在容器上。
- flex-direction:主轴方向,row:从左到右,column:从上到下
- flex-wrap:换行,当前项目的总宽度超过了容器的宽度时,会换行。nowrap:不换行,wrap:换行
- flex-flow
- justify-content:主轴对齐 flex-start flex-end center space-around space-between
- align-items:交叉轴的单行(单根轴线对齐) flex-start flex-end center
- align-content:交叉轴的多行(多根轴线对齐)flex-start flex-end center space-around space-between
比如:
/* 控制主轴方向:默认row 从左到右 */ /* flex-direction:row; */ /* column 从上到下 */ flex-direction: column; /* 当子项目的宽度超出容器的宽度时,会压缩子项目的宽度,不换行。*/ /* flex-wrap: nowrap; */ /* 当子项目的宽度超出容器的宽度时会换行 */ flex-wrap: wrap; /* 消除换行的间距 */ align-content: flex-start; /* 控制主轴的对齐 */ /* justify-content: flex-start; 对齐左边 */ /* justify-content: center; */ /* justify-content: flex-end; 对齐右边 */ /* justify-content: space-between; 各个元素间左右产生间隔,最边上的元素仅靠边 */ /* justify-content: space-around; 各个元素间左右产生间隔*//* 交叉轴 */ align-items: center;
以下6个属性设置在项目上。
- order:给项目排序,order的值越大排在越后面,所有的默认为1
- flex-grow:平分剩余空间,前提是有剩余空间
- flex-shrink:flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。为0时不压缩
- flex-basis:如果写了这个值,宽度就没有效果,以flex-basis设置的宽度为准
- flex:flex是上面三个的简写,
- align-self:单个元素在交叉轴的位置
border-radius:圆角度
box-shadow:盒子阴影
层叠性:
样式一样的后面的会覆盖前面的,不一样的样式会保留下来(优先级相同)
类选择器的优先级比元素选择器高
优先级:
优先级可以相加
继承性:类似color,font,line等属性可以继承
块级元素:
独占一行,可以设置宽高
text元素:
不能独占一行,和其他行内元素显示在一行,内联元素可以设置水平方向内边距和垂直方向内边距padding-left\right\top\bottom
不可以设置其内外边距的垂直方向,可以设置水平方向
将内联元素转换为块元素:display:block;
将块元素转换为内联元素:display:inline;
将一个元素设置为行内块元素,既可以设置宽高,又不独占一行:display:inline-block
background-image:url(图片路径)
背景缩写属性可以在一个声明中设置所有的背景属性。
可以设置的属性分别是:background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.
如果上述值缺少一个,这不要紧,例如background:#FF0000 URL(smiley.gif);是允许的。
例子:将图片作为送恋人的背景
.a1 view:nth-child(1){ background-image: url(https://img02.hua.com/m/home/img/m_home_use_love.png); background-size: 100% 100%;}
rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。
无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度,拿iPhone6来讲,屏幕宽度为375px,把它分为750rpx后, 1rpx = 0.5px。
微信小程序同时也支持rem尺寸单位, rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx
定位偏移量:top/left/right/bottom
定位模式:绝对定位、相对定位、固定定位
相对定位:保留原来的位置,不脱离文档流,相对于自身来定位的
view:nth-child(2){ background-color: blue; /* 相对定位 */ position: relative; top: 10px; left: 20px; right: 0px;}
绝对定位:不保留原来的位置,脱离文档流,如果父元素或者祖先元素没有定位的话,根据最左上上角定位。此外要根据最近定位的祖先元素来定位。
view:nth-child(2){ background-color: blue; /* 相对定位 */ position: absolute; top: 10px; left: 20px; right: 0px;}
固定定位:不占据位置
position:fixed
定位元素比一般元素的层级高,后面的定位元素会覆盖前面的定位元素。
设置图像的 z-index:
img { position:absolute; left:0px; top:0px; z-index:-1; }
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
WXML代码:
WXSS代码:
.a{ display: flex; height:60px; justify-content: space-between;}.a>view{ margin-top: 5px; width: 15%; height:56px; background-color: #E7E7E7; border-radius: 7px; /* box-shadow写阴影的 第一个是水平方向的阴影 第二个是垂直方向的阴影 第三个值是模糊程度 在前面加上inset就会变成内阴影*/ box-shadow: 2px 0px 4px #D7D7D7,-2px 0px 4px #D7D7D7,0px 2px 4px #D7D7D7,0px -2px 4px #D7D7D7; padding: 2px;}.a1{ width: 15px; height: 15px; border-radius: 50%; background-color: black;}/* 第1个色子 */.a view:nth-child(1){ display: flex; justify-content: center; align-items: center;}/* 第2个色子 */.a view:nth-child(2){ display: flex; justify-content: space-between;}.a view:nth-child(2) view:nth-child(2){ align-self: flex-end;}/* 第3个色子 */.a view:nth-child(3){ display: flex; justify-content: space-between; align-items: center;}.a view:nth-child(3) view:nth-child(1){ align-self: flex-start;}.a view:nth-child(3) view:nth-child(3){ align-self: flex-end;}.b{ display: flex; justify-content: space-between;}/* 第4个色子,第5个色子,第6个色子 */.s4{ margin-top: 20px; width: 15%; height:56px; background-color: #E7E7E7; border-radius: 10px; box-shadow: 2px 0px 4px #D7D7D7,-2px 0px 4px #D7D7D7,0px 2px 4px #D7D7D7,0px -2px 4px #D7D7D7; padding: 2px; display: flex; justify-content: space-between;}.row{ display: flex; flex-direction: column; justify-content: space-between;}/* 第5个色子的中间点 */.s5 view:nth-child(2){ display: flex; justify-content: center; align-items: center;}
运行效果:
一起学习,一起进步 -.- ,如有错误,可以发评论
转载地址:http://bhdpf.baihongyu.com/