1、主题思想: 元素可以改变大小,以适应可用空间,当可用空间变大,弹性盒将伸展大小以填充可用空间,当弹性盒子超出可用空间时将自动缩小。总之,弹性盒是可以让你的布局根据浏览器的大小变化进行自动伸缩; flexbox是一个可以让你告别浮动,完美实现垂直水平居中的新特性。 2、给父元素添加的属性: dis ...
分类:
其他好文 时间:
2018-10-20 16:22:38
阅读次数:
931
背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念。 逻辑像素(CSS pixels) 浏览器使用的抽象单位,主要用来在网页上绘制内容;通常在我们实际开发中涉及到的CSS单位px都是指逻辑像素。 设备像素或物 ...
分类:
移动开发 时间:
2018-10-13 14:37:31
阅读次数:
188
1.marquee 滚动标签 他身上所具有的功能有标签属性决定。 direction 决定滚动方向 scroll 连续滚 slide 滚动一次 alternate 来回滚动 loop 循环的次数 默认是无数次 scrollamout 运动速度 默认是6 scrollamount 运动速度 默认是6 ...
分类:
其他好文 时间:
2018-10-12 16:01:13
阅读次数:
120
一、单位 1、px是基本的单位,像素 2、em也是一个单位,使用方式,用元素父级的字体大小乘以em前的数字,父级没有就向上一个父级找, 直到body为止,如果body没有,就用默认的字体大小16px 3、rem是一个单位,只跟根节点<html>的字体大小有关,如果根节点没有字体大小,默认16px 4 ...
分类:
其他好文 时间:
2018-10-11 10:23:02
阅读次数:
160
CSS3伸缩布局盒模型早期的布局主要依赖于表格,从CSS2.1中有关于布局的机制有所改变,但还是并不多。开发者通常不愿意使用绝对定位,因为太不灵活;浮动定位常用于页面的布局,但对于全页多列布局来说,它总是存在一些小毛病,功能上也有很多限制。CSS3中引入了许多的布局机制,使构建一个多列布局变得更加轻松,同时,CSS2.1规则是比较难实现的一些复杂布局表现,如今也变得更加容易。弹性盒模型:Flexb
分类:
Web程序 时间:
2018-10-06 14:31:46
阅读次数:
215
HTML5 主要学会基本的HTML标签骨架,HTML书写规范,理解向内元素快以及语义化的正确使用。学习一些新的特性,如: 用于绘画的 canvas 元素 用于媒介播放的Video和Audio元素 改良后的input表单控件等 css3 选择器,掌握并学会适当运用 盒模型、理解弹性盒子模型&普通盒子模 ...
分类:
Web程序 时间:
2018-10-04 14:57:53
阅读次数:
175
注:一些理论知识来源于CSS3-菜鸟联盟 弹性盒布局(Flex Box) 一、概念 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的 ...
分类:
其他好文 时间:
2018-10-04 10:26:05
阅读次数:
158
弹性空间与元素具体位置设置是加在子元素身上的 <style> body{ margin: 0; } #box{ height: 300px; border: 1px solid #000; 新版弹性盒模型 /*display: flex;*/ 老版弹性盒模型 display: -webkit-box ...
分类:
其他好文 时间:
2018-10-02 22:21:15
阅读次数:
196
<style> body{ margin:0; } #box{ height:200px; border:1px solid #000; 新版弹性盒模型 /*display:flex;*/ /*flex-direction:row;*/ 设置主轴方向为水平方向 /*flex-direction:co ...
分类:
其他好文 时间:
2018-10-02 14:22:49
阅读次数:
157
flex弹性布局 / 2-1 flexbox介绍 flex弹性盒式模型。 它能够更加高效方便控制元素对齐,排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的。 css布局模型 flex弹性布局 / 3-1 display属性 display: flex; 布局方式变成 ...
分类:
其他好文 时间:
2018-09-10 11:11:57
阅读次数:
251