1:盒子模型
2:盒子模型每个属性作用和特点
3:盒子内部流
4:如何破坏盒子内部流?来实现布局
- 相对定位
- 绝对定位
- 固定定位
- 浮动
- 弹性布局
###弹性布局
弹性布局的规律是什么配有哪些特点?
1:从父元素角度看:首先自身内部 流 发生了改变,从流式布局变为弹性布局
(文档流变为弹性流)
- 本身依然处于流式布局中,没有发生改变 (在他的父容器中布局)
2:从子元素角度分析: 以什么为主进行布局?进行怎样的排序?
- 三子元素在父容器中沿着主轴进行布局,主轴上对齐方式:从起始位置;结束;
结束位置;两端对齐等… - 交叉轴与主轴垂直,默认起点与主轴一致;
一子元素在交叉轴对齐方式,不是一个一个的子元素排列,而是已经在主轴上排
列好的子元素,部分整伴在交叉轴上进行排列
display:flex
flex-fow 确定主轴方向 以及 是否换行
justify content:确定族元素在 主轴对齐方式
allign-iten决定子元素在交义轴对齐方式,
注意:及时实在弹性流中的元素,也可以破坏弹性流, 用positionl。
align-content属性
flex-start:与较叉轴的起点对齐。
flex- end:与交叉轴的线点对开。
center:
与较叉轴的中点对开。
space between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,
轴线之间的间隔比轴线与边框 的间隔大一倍。
###字体图标引入方式
1:找到图标网站
2:搜索对应图片并下载以下为使用字体图标
3:下载字体图标库文件
4:解压缩安装包
5:引入对应文件 css文件
6:使用
https://fontawesome.com/ 外国的
http://www.fontawesome.com.cn/ 中国的
6.1进入网站搜索图标;点击复制图标类名
例如:
6.2复制贴贴类名。
##显示隐藏
显示 display:block
隐藏 display: none ;
visibility: hidden;
两个隐藏有什么区别?
display::none 元素隐藏;不在文档流中;但是元素节点依然纯在
visibility: hidden;y隐藏的是样式。元素依然在文档流中元素节点也存在
###图片精灵
多个小图片合成的一个大图片;使用功能背景属性;获取大图片中的一个小图片
优点:提高网站性能,减少资源加载,减少网络请求次数
使用方式
1 background-size 100%*横向图片个数, 100%*纵向
2 background-position
3 background-repeat:no-repeat
##移动端页面开发
1:有限选择弹性布局
2.954单位必须使用相对单位
来源:https://blog.csdn.net/cannonwyk/article/details/99198394