复习css.html

江枫思渺然 提交于 2019-11-27 07:46:51

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单位必须使用相对单位

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!