学习资源http://www.imooc.com/learn/33
css3目录
边框
边框简写：border: 1px solid #000; /边框宽度、边框样式、边框颜色/
1 圆角效果 border-radius
border-radius: 5px 4px 3px 2px;
四个半径值分别是左上角、右上角、右下角和左下角
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div{
float:left;
margin:5px;
}
div.circle{
height:100px;
width:100px;
background:orange;
border-radius:50%;/*四个圆角值都设置为宽度或高度值的一半*/
}
div.semi1{
height:100px;
width:50px;
}
div.left-circle{
background:pink;
border-radius: 50px 0 0 50px;
}
div.right-circle{
background:orangered;
border-radius: 0 50px 50px 0 ;
}
div.semi2{
height:50px;
width:100px;
}
div.top-circle{
background:Orchid;
border-radius:50px 50px 0 0 ;
}
div.bottom-circle{
background:Purple;
border-radius: 0 0 50px 50px;
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="left-circle semi1"></div>
<div class="right-circle semi1"></div>
<div class="top-circle semi2"></div>
<div class="bottom-circle semi2"></div>
</body>
</html>
2 阴影 box-shadow
box-shadow:X轴偏移量 Y轴偏移量 [ 阴影模糊半径 ] [ 阴影扩展半径 ] [ 阴影颜色 ] [ 投影方式 ] ; []表示可选
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>boxshadow</title>
<style>
.boxshadow{
width:100px;
height:100px; /* 前者是外阴影，后面是内阴影 */
box-shadow:4px -4px 6px red,0px 0px 12px 5px orange inset;
}
</style>
</head>
<body>
<h2> 阴影 </h2>
<div class="boxshadow-outset"></div> <br/>
</body>
</html>
3 边框图片border-image
border-image:url(xx.png) 上 右 下 左 repeat;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边框图片</title>
<style>
#border_image {
height:100px;
width:300px;
line-height:100px;
text-align:center;
font-size:30px;
border:15px solid #ddd;
border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 20 10 10 20 repeat;
}
</style>
</head>
<body>
<div id="border_image">边框图片</div>
</body>
</html>
颜色
1 RGBA
color：rgba(R,G,B,A) A为透明度参数，取值在0~1之间，不可为负值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RGBA colors</title>
<style type="text/css">
p{
font-size:42px;
text-align:center;
color:rgb(128,0,128);
background: rgba(128,0,128,0.5);
}
</style>
</head>
<body>
<p>半透明的背景</p>
</body>
</html>
2 渐变色彩 Gradient
线性渐变(linear)
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">
p {
width: 250px;
height: 150px;
line-height: 150px;
text-align:center;
background-image:linear-gradient( to top left,red,pink,purple);
}
</style>
</head>
<body>
<p>右下角向左上角的线性渐变背景</p>
</body>
</html>
文字字体
1 省略号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{
text-overflow:ellipsis; /* 使用一个省略标记（...） */
overflow:hidden; /* 溢出内容为隐藏 */
white-space: nowrap; /* 强制文本在一行内显示 */
width:200px;
background:#ccc;
}
.title {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="test_demo"> crea una imágen la cual representa un degradado lineal de colores（我是省略号） </div>
<div class="title"> crea una imágen la cual representa un degradado lineal de colores（我是省略号） </div>
</body>
</html>
2 嵌入字体
浏览器端可以显示用户电脑里没有安装的字体
@font-face {
font-family : "My Font";
src : 字体文件路径;
}
p {
font-size :12px;
font-family : "My Font"; /*设置@font-face中font-family同样的名称*/
}
3 文本阴影text-shadow
text-shadow: x-shadow y-shadow [blur 模糊的距离] [color 阴影的颜色];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow</title>
<style type="text/css">
.demo {
width: 340px;
padding: 30px;
font: bold 55px/100% "微软雅黑";
border:1px solid #000;
text-shadow: 2px 2px 0 pink;
}
</style>
</head>
<body>
<div class="demo">nihaoa</div>
</body>
</html>
背景
1 背景图片的原始起始位置
background-origin： border-box | padding-box | content-box;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景原点</title>
<style type="text/css">
.wrap {
width:220px;
border:20px dashed #000;
padding:20px;
color:#000;
background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
background-origin: content-box;
position: relative;
}
.wrap span {
position: absolute;
left:0;
top:0;
}
.content {
height:80px;
border:1px solid #333;
}
</style>
</head>
<body>
<div class="wrap">
<span>padding</span>
<div class="content">content</div>
</div>
</body>
</html>
2 背景图片 裁剪
background-clip ： border-box | padding-box | content-box | no-clip; 默认值为border-box。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景裁切</title>
<style type="text/css">
.wrap {
width:220px;
border:20px dashed #000;
padding:20px;
font-weight:bold;
color:#000;
background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
background-origin: border-box;
background-clip: padding-box;
position: relative;
}
.wrap span {
position: absolute;
left:0;
top:0;
}
.content {
height:80px;
border:1px solid #333;
}
</style>
</head>
<body>
<div class="wrap"><span>paddingpaddingpadding</span>
<div class="content">contentcontent</div>
</div>
</body>
</html>
background-clip: border-box;
background-clip: border-box;
3 background-size
背景图片的大小
background-size: auto | <长度值> | <百分比> | cover | contain
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片大小</title>
<style type="text/css">
.demo {
background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
width: 300px;
height: 140px;
border: 1px solid #999;
background-size:cover;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
background-size:auto ; /*默认值*/
background-size:contain ;
4 多重背景 multiple backgrounds
background-image:url1,url2,…,urlN;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多重背景</title>
<style type="text/css">
.demo{
width: 300px;
height: 140px;
border: 1px solid #999;
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;
margin:0 0 20px 0;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
5 小结
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS制作立体导航</title>
<style>
body{
background: #ebebeb;
}
.nav{
width:560px;
height: 50px;
font:bold 0/50px Arial;
text-align:center;
margin:40px auto 0;
background: #f65f57;
/*制作圆*/
border-radius:10px;
/*制作导航立体风格*/
box-shadow:0px 6px 2px gray;
}
.nav li{
position:relative;
display:inline-block;
padding:0 16px;
font-size: 13px;
text-shadow:1px 2px 4px rgba(0,0,0,.5);
list-style: none outside none;
/*分隔线：背景渐变，不重复，位置，背景大小*/
background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;
}
/*删除最后一项导航分隔线*/
.nav li:last-child{background:none;}
.nav a,
.nav a:hover{
color:#fff;
text-decoration: none;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Contact Me</a></li>
</ul>
</body>
</html>
CSS3选择器
1 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
a[class^="column"]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"]{background:blue;color:#fff;}
</style>
</head>
<body>
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>
</body>
</html>
2 结构性伪类选择器
:root 等同于 < html > 元素
:root{background:orange} === html {background:orange;}
:not 选择除某个元素之外的所有元素
input:not([type="submit"]){ border:1px solid red; } /*给表单中除submit按钮之外的input元素添加红色边框*/
div:not([id="footer"]){background:orange} /*给除footer之外的div元素设置橘色背景*/
:empty 选择没有任何内容的元素
div:empty{border:1px solid green;} /*给空的div元素添加1px的绿色边框*/
:target 锚点：匹配文档(页面)的url的某个标志符的目标元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—target</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
#brand:target {
background: orange;
color: #fff;
}
</style>
</head>
<body>
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
</body>
</html>
点击之后
:first-child
选择元素中的第一个子元素
ul > li:first-child{
color: red; /*将列表的第一个项目设置为红色*/
}
:last-child
选择元素中的最后一个子元素
ul > li:last-child {
border-bottom: none;
}
:nth-child(n)
定位某个父元素的一个或多个特定的子元素。 n可以是整数值(1,2,3,4), 表达式(2n+1、-n+5)和关键词(odd、even);起始值始终是1 。
ol > li:nth-child(odd){
background: green;
}
/*等价于*/
ol > li:nth-child(2n+1){
background: green;
}
/*等价于*/
ol > li:nth-child(2n-1){
background: green;
}
:nth-last-child(n)
定位某个父元素的一个或多个特定的子元素，从父元素的最后一个子元素开始计算。
ol > li:nth-last-child(5){
background: orange;
}
:first-of-type
定位一个父元素下的某个类型的第一个子元素。
.wrapper > div:first-of-type {
background: orange; /*容器“div.wrapper”中的第一个div元素背景设置为橙色*/
}
:last-of-type
父元素下的某个类型的最后一个子元素
.wrapper > div:last-of-type{ /*容器“div.wrapper”中最后一个Div元素*/
background: orange;
}
:nth-of-type(n)
父元素中指定的某种类型的子元素
n: 可以是具体的整数，也可以是表达式，还可以是关键词。
.wrapper > div:nth-of-type(2n-1), /*奇数Div*/
.wrapper > p:nth-of-type(even){ /*偶数段落*/
background: orange;
}
:nth-last-of-type(n)
父元素中指定的某种类型的子元素,起始方向是从最后一个子元素开始
n: 可以是具体的整数，也可以是表达式，还可以是关键词。
.wrapper > p:nth-last-of-type(3){
background: orange;
}
:only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
.post p:only-child { /*所有post容器下只有一个元素设置*/
background: orange;
}
:only-of-type
选择一个元素是它的父元素的唯一一个相同类型的子元素。
.wrapper p:only-of-type{ /*仅有一个P元素*/
background: orange;
}
3 表单元素选择器
:disabled 处在不可用状态的表单元素设置样式。
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="可用输入框" />
</div>
input[type="text"] :enabled { /*可用输入框设置样式*/
border: 1px solid #f36;
box-shadow: 0 0 5px #f36;
}
:enabled 处在可用状态的表单元素设置样式。
input[type="text"] :disabled { /*可用输入框设置样式*/
border: 1px solid #f36;
box-shadow: 0 0 5px #f36;
}
:read-only
指定处于只读状态元素的样式。
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</div>
input[type="text"]:read-only{
border-color: #ccc;
}
:read-write
指定元素处于非只读状态时的样式。
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" />
</div>
input[type="text"]:read-write{
border:2px solid red;
}
4 ::selection
用鼠标选择文本时的文本
::selection{
background: orange;
color: white;
}
鼠标选中
5 ::before和::after
给元素的前面或后面插入内容,使用的场景最多的就是清除浮动。
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
曲线阴影
原理：多个阴影的重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>曲边阴影</title>
</head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
body,
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
width: 70%;
height: 200px;
margin: 50px auto;
background: #fff;
}
.wrap h1 {
text-align: center;
line-height: 200px;
}
.effect { // 直角阴影
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3),
0px 0px 40px rgba(0, 0, 0, 0.3) inset;
-webkie-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3),
0px 0px 40px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3),
0px 0px 40px rgba(0, 0, 0, 0.3) inset;
-o-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3),
0px 0px 40px rgba(0, 0, 0, 0.3) inset;
position: relative;
}
.effect::before, .effect::after { // 曲线阴影
content: "";
position: absolute;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
z-index: -1;
box-shadow: 0 0 20px rgba(204, 32, 32, 0.8);
-webkit-box-shadow: 0 0 20px rgba(204, 32, 32, 0.8);
-moz-box-shadow: 0 0 20px rgba(204, 32, 32, 0.8);
border-radius: 100px / 10px;
-moz-border-radius: 100px / 10px;
}
</style>
<body>
<div class="wrap effect">
<h1>曲边阴影</h1>
</div>
</body>
</html>
翘边阴影
原理：同上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>曲边阴影</title>
</head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
body,
ul {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 980px;
height: auto;
clear: both;
overflow: hidden;
margin: 20px auto;
}
.box li {
width: 300px;
height: 210px;
float: left;
margin: 20px 10px;
border: 2px solid #efefef;
background: #fff;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3),
0px 0px 60px rgba(0, 0, 0, 0.1) inset;
position: relative;
}
.box img {
display: block;
width: 290px;
height: 200px;
margin: 5px;
}
.box li:before {
content: "";
position: absolute;
width: 90%;
height: 80%;
left: 20px;
bottom: 8px;
z-index: -1;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
transform: skew(-12deg) rotate(-4deg);
}
.box li::after {
content: "";
position: absolute;
width: 90%;
height: 80%;
left: 20px;
bottom: 8px;
z-index: -1;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
transform: skew(12deg) rotate(4deg);
}
</style>
<body>
<ul class="box">
<li>hello world</li>
<li><img src="./images/pms_1476425102.6997704!220x220.jpg" alt="" /></li>
<li><img src="./images/pms_1476688190.21955893!220x220.jpg" alt="" /></li>
</ul>
</body>
</html>
变形与动画
1 transform 变形
rotate(xx deg) 旋转
<body>
<div class="wrapper">
<div><span>我不想旋转(^_^)</span></div>
</div>
</body>
<style>
.wrapper div{
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: green;
color: #fff;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform:rotate(-20deg);
}
.wrapper span {
display:block;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform:rotate(20deg);
}
</style>
skew(x deg ,y deg) 倾斜
<body>
<div class="wrapper">
<div><span>我不想被扭曲(^_^)</span></div>
</div>
</body>
<style>
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform:skew(45deg);
}
.wrapper span {
display:block;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
</style>
scale(X,Y) 缩放 x,y是倍数，1就是不变
<div class="wrapper">
<div>我将缩小0.8</div>
</div>
<style>
.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .5;
-webkit-transform:scale(0.8,0.8);
-moz-transform:scale(0.8,0.8);
transform:scale(0.8,0.8);
}
</style>
translate(x, y) 位移
<div class="wrapper">
我不知道我的宽度和高是多少，我要实现水平垂直居中
</div>
<style>
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
transform:translate(-50%,-50%);
}
</style>
<div class="wrapper">
<div>我向右向下移动</div>
</div>
<style>
.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}
</style>
matrix(a,b,c,d,e,f) 矩阵
模拟transform中translate()位移的效果 transform: matrix(1,0,0,1,50,50);
<div class="wrapper">
<div></div>
</div>
<style>
.wrapper {
width: 300px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,100,100);
transform: matrix(1,0,0,1,100,100);
}
</style>
transform-origin 原点
任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
<div class="wrapper">
<div>我修改原点之后在进行15度的扭曲</div>
</div>
<style>
.wrapper {
width: 400px;
height: 100px;
border: 2px dotted red;
margin: 20px auto;
text-align: center;
line-height: 100px;
}
.wrapper div {
background: orange;
color: #fff;
transform: skew(15deg);
transform-origin: top right;
}
</style>
2 动画 transition
第一，在默认样式中声明元素的初始状态样式width: 200px;；
第二，声明过渡元素最终状态样式，比如悬浮状态div:hover {width: 400px;}；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
transition-property:指定过渡或动态模拟的CSS属性
可以指定的css属性 transition-property: width;
transition-duration:指定完成过渡所需的时间
从旧属性过渡到新属性花费的时间长度 transition-duration:.5s;
transition-timing-function:指定过渡函数
指定浏览器的过渡速度，以及过渡期间的操作进展情况transition-timing-function:linear;。常见：
transition-delay:指定开始出现的延迟时间
当改变元素属性值后多长时间开始执行transition-delay:.18s;
<div class="wrapper">
<div>鼠标放到我的身上来</div>
</div>
<style>
.wrapper {
width: 400px;
height: 200px;
margin: 20px auto;
border: 2px dotted red;
position:relative;
}
.wrapper div {
padding: 15px 20px;
color: #fff;
background-color: orange;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
transition: all 0.5s ease-in 0.2;
}
.wrapper div:hover {
background-color: red;
border-radius: 10px;
}
</style>
鼠标移动上去
3 animation
Keyframes
与 animation 的 属性名称配合
使用%设置不同的样式
<div>鼠标放在我身上</div>
<style>
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
</style>
animation-name
调用 @keyframes 定义好的动画
animation-duration
设置动画播放时间
animation-timing-function
动画播放方式
animation-delay
动画开始播放的时间
animation-iteration-count
动画的播放次数
<div><span></span></div>
<style>
@keyframes move {
0%{
transform: translate(0);
}
15%{
transform: translate(100px,180px);
}
30%{
transform: translate(150px,0);
}
45%{
transform: translate(250px,180px);
}
60%{
transform:translate(300px,0);
}
75%{
transform: translate(450px,180px);
}
100%{
transfrom: translate(480px,0);
}
}
div {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
div span {
display: inline-block;
width: 20px;
height: 20px;
background: green;
border-radius: 100%;
animation-name:move;
animation-duration: 10s;
animation-timing-function:ease;
animation-delay:.1s;
animation-iteration-count:infinite;
}
</style>
animation-direction
动画播放方向 normal(默认值,向前播放)、alternate(在第偶数次向前播放，第奇数次向反方向播放)
animation-play-state
控制元素动画的播放状态 running(默认值,正常播放或是从暂停的那个位置开始播放)和paused(将正在播放的动画停下来，元素的样式将回到最原始设置状态)
div:hover span {animation-play-state:running;}
animation-fill-mode
设置动画时间外属性 none、forwards、backwords和both
让动画停在最一帧处 animation-fill-mode:forwards;
多列布局模块 CSS Multi Column Layout Module
主要应用在文本的多列布局方面,比如布局在报纸和杂志
columns：< column-width> || < column-count>
1 column-width
2 column-count
<div class="columns">
<h2>我要分列显示</h2>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
</div>
<style>
.columns {
width: 500px;
padding: 5px;
border: 1px solid green;
margin: 20px auto;
columns: 150px 3; /*等价于下面两行写法*/
// column-width:200px;
// column-count:3;
}
</style>
3 列间距column-gap
column-gap: normal ||
<style>
column-gap: 2em;
</style>
4 列表边框column-rule
定义列与列之间的边框宽度、边框样式和边框颜色。
column-rule:||
<style>
column-rule: 3px solid gray;
</style>
跨列设置column-span
column-span: none | all
需要基中一段内容或一个标题不进行分列，也就是横跨所有列
<style>
p:nth-child(2n){
column-span:all;
}
</style>
盒子模型
盒模型中主要包括width、height、border、background、padding和margin 属性
box-sizing 事先定义盒模型的尺寸解析方式
box-sizing: content-box | border-box | inherit
Flexbox布局 伸缩布局盒模型
Flexbox布局功能主要具有以下几点：
- 屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
- 可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
- 可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
- 可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
- 可以控制元素在页面上的布局方向；
- 可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
第一步是需要创建一个flex容器。display: flex;
flex-direction 改变主轴方向修改为column，其默认值是row。` flex-direction: column;`
justify-content 属性定义了项目在主轴上的对齐方式。align-items 属性定义项目在交叉轴上如何对齐。 `justify-content: flex-start; justify-content: flex-start;`
Media Queries
媒体类型 Media Type
其中Screen、All和Print为最常见的三种媒体类型。默认为all
媒体类型的引用方法:
1 link
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
2 @import方法
<style type="text/css">
@importurl(style.css) all;
</style>
3 @media方法
<style type="text/css">
@media screen{
选择器{/*你的样式代码写在这里…*/}
}
</style>
Media Queries的使用方法
@media 媒体类型 and （媒体特性）{你的样式}
有十种媒体类型和13种媒体特性
- 最大宽度max-width:媒体类型小于或等于指定的宽度时，样式生效。
@media screen and (max-width:480px){
.ads {
display:none;
}
} /*当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。*/
- 最小宽度min-width:媒体类型大于或等于指定宽度时，样式生效。
@media screen and (min-width:900px){
.wrapper{width: 980px;}
} /*当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。*/
- 多个媒体特性使用 and
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
} /*当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”*/
- 设备屏幕的输出宽度Device Width
对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
// “iphone.css”样式适用于最大设备宽度为480px
- not关键词
排除某种制定的媒体类型，也就是用来排除符合表达式的设备.
@media not print and (max-width: 1200px){样式代码}
// 样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
- only关键词
指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器. - 同一个样式应用于不同的媒体类型和媒体特性
<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
// style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
Responsive设计 响应式设计
维基百科是这样对响应式作的描述：“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。”
网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。
1.流体网格
网格系统，将每个网格格子使用百分比单位来控制网格大小。网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。
2.弹性图片
根据流体网格进行缩放，用于适应各种网格的尺寸。
img {max-width:100%;}
3.媒体查询
4.屏幕分辨率
屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率。
5.主要断点
设备宽度的临界点。媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。
6.meta标签
可视区域meta标签 <meta name=”viewport” content=”width=device-width,initial-scale=1.0”/>
7.布局技巧
第一， 尽量少用无关紧要的div；
第二，不要使用内联元素（inline）；
第三，尽量少用JS或flash；
第四，丢弃没用的绝对定位和浮动样式；
第五，摒弃任何冗余结构和不使用100%设置。
第一，使用HTML5 Doctype和相关指南；
第二，重置好你的样式（reset.css）；
第三，一个简单的有语义的核心布局；
第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。
8.不同设备的分辨率设置
@media screen and (max-width : 1024px) {
/* 1024px显屏样式 */
}
@media screen and (max-width : 800px) {
/* 800px显屏样式 */
}
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* iPad横板显屏样式 */
}
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* iPad竖板显屏样式 */
}
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* Smartphones样式 */
}
用户体验-新的属性
resize
用户通过拖动的方式来修改元素的尺寸来改变元素的大小。
resize: none | both | horizontal | vertical | inherit
外轮廓属性
outline: ［outline-color:默认值为黑色］ || [outline-style:默认值为none] || [outline-width:默认值为medium] || [outline-offset:轮廓边框的偏移位置的数值，此值可以取负数值] || inherit
div {
padding: 20px;
margin: 30px;
outline: red solid 2px;
border: 2px solid green;
}
生成内容
content配合CSS的伪类或者伪元素，一般可以做以下四件事情：
h1:before{ // 在元素文本内容之前插入文本
content:"我是被插进来的";
color: red;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
