浮动: float
是我们网页布局的一种
浮动 可以有 left 左浮动 right 右浮动 两种
浮动的特点:
脱离正常的文档流, 原本的空间不占据, 浮动的标签都具有块级标签的一些特点, 可以手动设置宽高
如果有相邻的多个浮动的元素, 那么后面浮动的元素会停靠在前面浮动元素的后面, 如果剩余空间不够, 则会另起一行显示
如果一个元素中所有的内容都浮动了, 那么这个元素本身高度则没有了, 如果想要让这个元素高度还在, 需要自己手动设置高度
清除浮动: 不是说把浮动的元素清理掉, 而是清除浮动元素对其他元素的影响
1 给父元素直接设置一个高度
设置 clear:both;
设置背景的渐变色:
线性渐变:
background-image: linear-gradient(to bottom,#DA4601,#FEEEB6,#E46410);
径向渐变:
background-image: radial-gradient(red,blue,green 80%);
定位: position
相对定位 relative
参照物是自己原来的位置, 不会脱离正常文档流, 也就是说原本的位置依旧存在
所有的定位都可以给两个值
水平偏移位置: left 或 right
垂直偏移位置: top 或 bottom
绝对定位 absolute 子绝父相
参照物是有定位的距离元素最近的祖级元素, 如果所有的祖级元素都没有定位, 参照物是初始包含块
会脱离正常文档流, 原本空间不存在
什么是初始包含块: 就是浏览器一打开, 用户能看到的窗口页面
固定定位 fixed
参照物是视口 (视口就是眼睛所看到的的这个窗口)
会脱离正常文档流, 也就是说原本的位置不存在了
粘性定位 (了解内容)sticky
设置定位元素的层叠顺序:
z-index:number; number 越大表示越优先显示 只有定位的元素才可以设置该样式
年初整理了一批 web 前端教程, 帮助想要成为 Web 前端程序员的人. 从零基础到各种框架的教程都有. 只需要加入到 Web 前端学习 qun:296,212,562. 即可免费领取, 学习过程中有任何问题可以在里面问. 种一颗树最好的时间是十年前, 其次是现在. 只要想学习, 不存在早晚.
来源: http://www.jianshu.com/p/40c48ad0dca0