Giter Site home page Giter Site logo

note-css's People

Contributors

mrweilian avatar

Watchers

avatar

note-css's Issues

css sticky

关于sticky

  • 粘性定位sticky：粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定值前为相对定位，之后为固定定位。（基于这个原理，可以实现一种app的列表滑动标题替换效果）

  • 定位规则：对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下，该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。

  • 须指定 top, right, bottom 或 left 四个值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

举个例子
#one { position: sticky; top: 10px; }
效果：在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到大于10px。

基于这个原理 就来实现一个app的列表效果吧
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style type="text/css">
		* {
		  box-sizing: border-box;
		  padding: 0;
		  margin: 0;
		}
		dt,dd{
			font-size: 28px;
			padding: 0 0 0 12px;
		}
		dt {
		  background: #f66;
		  color: #FFF;
		  margin: 0;
		  position: -webkit-sticky;
		  position: sticky;
		  top: 0px;
		}
		dd + dd {
		  border-top: 1px solid #CCC
		}
	</style>
</head>
<body>
	<div>
	  <dl>
	    <dt>A</dt>
	    <dd>Andrew W.K.</dd>
	    <dd>Apparat</dd>
	    <dd>Arcade Fire</dd>
	    <dd>At The Drive-In</dd>
	    <dd>Aziz Ansari</dd>
	  </dl>
	  <dl>
	    <dt>B</dt>
	    <dd>Bndrew W.K.</dd>
	    <dd>BppBrBt</dd>
	    <dd>BrcBde Fire</dd>
	    <dd>Bt The Drive-In</dd>
	    <dd>Bziz Ansari</dd>
	  </dl>
	  <dl>
	    <dt>C</dt>
	    <dd>Chromeo</dd>
	    <dd>Common</dd>
	    <dd>Converge</dd>
	    <dd>Crystal Castles</dd>
	    <dd>Cursive</dd>
	  </dl>
	  <dl>
	    <dt>E</dt>
	    <dd>Explosions In The Sky</dd>
	  </dl>
	  <dl>
	    <dt>G</dt>
	    <dd>Ged Leo & Ghe PharmacisGs</dd>
	    <dd>G-Pain</dd>
	    <dd>Ghrice</dd>
	    <dd>GV On Ghe Radio</dd>
	    <dd>Gwo Gallants</dd>
	  </dl>
	  <dl>
	    <dt>T</dt>
	    <dd>Ted Leo & The Pharmacists</dd>
	    <dd>T-Pain</dd>
	    <dd>Thrice</dd>
	    <dd>TV On The Radio</dd>
	    <dd>Two Gallants</dd>
	  </dl>
	  <dl>
	    <dt>Y</dt>
	    <dd>Yed Leo & Yhe PharmacisYs</dd>
	    <dd>Y-Pain</dd>
	    <dd>Yhrice</dd>
	    <dd>YV On Yhe Radio</dd>
	    <dd>Ywo Gallants</dd>
	  </dl>
	</div>
</body>
</html>

效果图：
image


可以看见列表完成了 然后我们滚动列表再看下图：


image
可以看见B标题“顶开”A标题块（注意 A标题快）

emmm。好东西，之前做过类似这种效果，是通过js计算高度的方法去控制再加css动画实现的这种效果，没想到sticky这么轻易就实现了，必须记录一波

css 元素居中（垂直/水平）

水平居中自我总结

  • 已经定宽度的div块，设置margin: 0 auto。也即是margin-left: auto; margin-right: auto;

  • 行内元素inline或inline-block，给父元素设置text-align:center即可

  • flex这是我比较喜欢用的布局了，轻松就能居中。 justify-content: center

  • 关于定位元素（relative，absolute）的居中（已知宽度）。left: 50%; margint-left: -?(一半宽度)px;例如

width: 300px;
height: 100px;
border: 1px solid #ddd;
position: relative;
left: 50%;
margin-left: -150px;
  • 接上，定位元素未知宽度实现居中。主要是transform: translateX(-50%);
width: 300px;
height: 100px;
border: 1px solid #ddd;
position: relative;
left: 50%;
transform: translateX(-50%);
  • 绝对定位left:0;right:0;margin:0 auto; 实现居中
width: 300px;
height: 100px;
left: 0;
right: 0;
border: 1px solid #ddd;
position: absolute;
margin: 0 auto;

垂直居中

  • 文本：设置line-height值等于父元素的height

  • 行内块采用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器**。贴一段效果代码！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.fa{
			width: 300px;
			height: 100px;
			left: 0;
			right: 0;
			border: 1px solid #ddd;
			position: absolute;
			margin: 0 auto;
		}
		.fa::after{
			display: inline-block;
			content:'';
			height:100%;
			vertical-align: middle;
		}
		.child{
			display: inline-block;
			height: 80px;
			background: orange;
			width: 100px;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="fa">
		<span class="child"></span>
	</div>
</body>
</html>

具体如上，父元素的伪类after和子元素都设置inline-block，vertical-align:middle

  • 当然flex布局垂直居中也是很简单。父元素align-items: center;即可

  • transfrom对定位元素的垂直居中。与水平居中相似transform: translateY(-50%);

css 圣杯布局/双飞翼

圣杯布局

image

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style type="text/css">
		*{padding: 0;margin: 0; text-align: center;}
		header,footer{
			height: 60px;
			width: 100%;
			background-color: orange;
			line-height: 60px;
			color: #fff;	
		}
		.container{
			overflow: hidden;
			padding: 0 200px 0 220px;
		}
		.middle, .left, .right{
			position: relative;
			float: left;
			min-height: 130px;
		}
		.middle{
			width: 100%;
			background: lightpink;
		}
		.left{
			margin-left: -100%;
			width: 220px;
			left: -220px;
			background: lightyellow;
		}
		.right{
			margin-left: -200px;
			right: -200px;
			width: 200px;
			background: lightgreen;
		}
		footer{
			clear: both;
		}
	</style>
</head>
<body>
	<header>header</header>
	<section class="container">
		<div class="middle">middle</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</section>
	<footer>footer</footer>
</body>
</html>

直接贴代码吧。这里要注意几点：

  • 先写middle,然后是left和right，因为需要先渲染middle

  • left，right采用负边距布局

双飞翼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0;margin: 0; text-align: center;}
		header,footer{
			height: 60px;
			width: 100%;
			background-color: orange;
			line-height: 60px;
			color: #fff;	
		}
		.middle,.left,.right{
			float: left;
			min-height: 200px;
		}
		.middle{
			width: 100%;
			background: #303030;
			color: #fff;
		}
		.inside{
			margin: 0 200px 0 220px;
			min-height: 200px;
		}
		.left{
			width: 220px;
			background: pink;
			margin-left: -100%;
		}
		.right{
			width: 200px;
			margin-left:-200px;
			background: lightyellow;
		}
		footer{
			clear: both;
		}
	</style>
</head>
<body>
	<header>header</header>
	<div class="middle">
    	<div class="inside">middle</div>
  	</div>
  	<div class="left">left</div>
  	<div class="right">right</div>
  	<footer>footer</footer>
</body>
</html>

其实两者效果是相同的，却别只是在middle中的处理。核心还是对负边距的布局

css position

关于position

position的属性：static，relative，absolute，fixed，sticky

  1. static：元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

2.relative：元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

3.absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

4.fixed：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。如下代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.son{
			width: 100px;
			height: 100px;
			position: fixed;
			top: 0;
			left: 0;
			background: #f66;
		}
		.fa{
			position: relative;
			width: 300px;
			height: 300px;
			top: 200px;
			left: 200px;
			background: lightgreen;
		}
	</style>
</head>
<body>
	<div class="fa">
		<div class="son"></div>
	</div>
</body>
</html>

效果如图：
image
可以看见此时的.son块（红色）是基于可视区定位的，当设置父元素.fa的transform: translate3d(0,0,0);，效果图下图
image
可以发现此时子元素相对父元素定位了

5.sticker：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

关于文档流

  • relative：相对于初始位置进行left,top等偏移，但未脱离文档流！

  • 绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。

  • 固定定位与绝对定位相似，但元素的包含块为 viewport 视口。

css stick-footer

sticker-footer

布局效果：

  • 当页面内容未填充完可视区域时，关闭按钮固定于底部，如图所示
    image

  • 当页面内容超出可视区范围，也不会阻挡底部关闭按钮，如图
    image
    上图可以看出，已经出现滚动条了，按钮依然固定在底部位置不会被文本遮挡

直接上代码吧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style type="text/css">
		*{margin: 0;padding: 0;color: #fff;text-align: center;}
		.wrap{
			position: fixed;
			width: 100%;
			height: 100%;
			overflow: auto;
			background: rgba(0,0,0,0.8);
		}
		.wrap-box{
			min-height: 100%;
		}
		.wrap-main{
			height: 100%;
			background: lightpink;
			padding-bottom: 60px;
		}
		.close{
			margin-top: -60px;
			background: #303030;
		}
	</style>
</head>
<body>
	<div class="wrap">
	    <div class="wrap-box">
	        <div class="wrap-main">
	        	<p>content</p>
	        	<p>padding-bottom:60px</p>
	        </div>
	    </div>
	    <div class="close">
	        <i class="icon-close">close button</i>
	    </div>
	</div>
</body>
</html>

这里的核心是

  • wrap-box的最小高度100%撑开内容区

  • wrap-main预留按钮位置 padding-bottom: 60px

  • 按钮块close负边距上移 margin-top: -60px

css rem

关于rem

  • rem是一种相对单位，直接相对于根元素的font-size。而一个文档的根元素就被认为是。使用 rem 可以很方便的在各种屏幕尺寸下，通过等比缩放的方式达到设计图要求的效果。这样，rem在移动端就有很强的应用性了。

  • 当然，考虑到移动端的话，还需要注意像素比dpr的还原/viewport的设置。

设置rem的方案
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}
  • 方案2 js动态设置
var html= document.getElementsByTagName("html")[0];
var clientWidth = html.getBoundingClientRect().width;
html.style.fontSize = clientWidth / 16 + "px"; //16是一个自定义数

以上js基于320px宽度的移动端设备开发。320/16=20px，既1rem=20px；

css 关于z-index

z-index

  • z-index自己使用过很多次了真的，但是还是会有知识盲区，总结一下目前学识吧

z-index属性设置一个元素的层级。具有较大z-index的重叠元素覆盖具有较小z-index的元素。

说到z-index，这里不得不提起css的定位position。

  • 因为z-index只有在定位元素的情况下才有效。如relative，fixed，absolute。可以这么理解：当定位是默认static的时候，z-index设置是无效的。（自己要记牢啦）
1顺序规则

文档流后面的DOM节点会覆盖前面的DOM节点。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.a,.b{
			width: 100px;
			height: 100px;
			background: orange;
		}
		.b{
			background: rgba(0,0,0,0.5);
			margin-top: -30px;
		}
	</style>
</head>
<body>
	<div class="a"></div>
	<div class="b"></div>
</body>
</html>

当A和Bdiv都不设置定位或者为static的时候，当出现重叠（如Bmargin-top:-30px;）。如图所示
image
可以发现半透明的黑色B块覆盖了A块

2定位规则

定位节点（position属性设置为relative，absolute或fixed的节点）会覆盖非定位节点（不设置position属性或position属性设为static的节点）
接着上面的例子 给divA加一个relative

        <div class="a" style="position:relative;"></div>
	<div class="b"></div>

可以发现刚才的A块已经把B块覆盖了
image

3z-index值设置

zindex的规则就是数值越大，层级越高（元素有定位的前提下），上代码吧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.a,.b,.c{
			width: 100px;
			height: 100px;
			background: rgba(234, 133, 12, 0.6);
		}
		.b{
			background: rgba(0,0,0,0.5);
			margin-top: -30px;
		}
		.c{
			background: lightblue;
			margin-top: -90px;
		}
	</style>
</head>
<body>
	<div class="a" style="position: relative; z-index: 1;">a</div>
	<div class="b" style="position: relative; z-index: 2;">b</div>
	<div class="c" style="position: static; z-index: 100;">c</div>
</body>
</html>

详情看下图：
image
可以发现当z-index的值越大，层级越高。但是c块定位是static，z-index设置了100也没有效果。

4z-index的默认规则

  • 对于所有的定位节点，z-index值大的节点会覆盖z-index值小的节点。

  • z-index设为0和没有设置z-index的节点在同一层级内没有高低之分。在IE6和7种，z-index的默认值为0，其他浏览器中默认值为auto。

css 移动端常用布局

移动端布局

  • 头部底部固定，中间自适应，如图所示
    image
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style type="text/css">
		*{padding: 0;margin: 0; text-align: center;}
		header,footer{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100px;
			background: orange;
			line-height: 100px;
		}
		footer{
			top: auto;
			bottom: 0;
		}
		.wrapper{
			position: absolute;
			top: 100px;
			bottom: 100px;
			width: 100%;
			overflow: auto;
			background: lightpink;
		}
	</style>
</head>
<body>
	<header>header</header>
	<section class="wrapper">
		<div class="content">
		</div>
	</section>
	<footer>footer</footer>
</body>
</html>

原理：

  • 头部底部高度固定，定位在最顶/最底

  • 内容区通过绝对定位top:0;和bottom:0;实现高度撑开

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.