CSS3 属性样式总结记录
1 、边框-背景
border-image 设置所有边框图像的速记属性。 3 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3 box-shadow 附加一个或多个下拉框的阴影
代码1-1 边框
div
{
border:2px solid #11a1a1a1;
padding:10px 40px;
background:#fff;
width:300px;
border-radius:25px;
color:#999999
}
图片1-1
代码1-2 阴影
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #e1e1e1;
}
图片1-2
代码1-3 使用图片作为边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
#round
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
<p>这是我们使用的图片素材：</p>
<img src="/images/border.png" />
</body>
</html>
图片1-3
代码1-4 背景
#rcorners3 {
border-radius: 25px;
background: url(/images/paper.gif);
background-position: left top;
background-repeat: no-repeat; repeat（铺满）
padding: 20px;
width: 200px;
height: 150px;
}
图片1-4
代码 1-5 椭圆边框
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
图片1-5
代码1-6 组合图片背景
会按照顺序，找到自己的属性
给背景设置尺寸：background-size:80px 60px;
拉伸填满为：background-size:100% 100%;
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
图片1-6
代码1-7 背景范围
content-box, padding-box,和 border-box区域内可以放置背景图像
div
{
border:20px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
background-size:100% 100%
}
#div2
{
background-origin:padding-box;
background-size:100% 100%
}
#div3
{
background-origin:content-box;
background-size:100% 100%
}
图片1-7
代码 1-8 背景裁切
#example1 {
border: 10px dotted black;
padding:35px;
background: url("https://dss0.baidu.com/73F1bjeh1BF3odCf/it/u=2565139395,3055187965&fm=85&s=F30BB044E6136FDC9D32599B0300C09C");
background-origin: border-box;
background-clip: content-box;
background-repeat:no-repeat;
}
#example2 {
border: 10px dashed black;
padding:35px;
background: url("https://dss0.baidu.com/73F1bjeh1BF3odCf/it/u=2565139395,3055187965&fm=85&s=F30BB044E6136FDC9D32599B0300C09C");
background-clip: content-box;
background-repeat:no-repeat;
}
图片1-8
代码1-9 渐变
从左上角 - 右下角
#grad1 {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to bottom right, red , yellow);
}
图片1-9
角度渐变：
即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
- background-image: linear-gradient(-90deg, red, yellow);
多个颜色节点，非均匀分布
- background-image: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
}
重复线性渐变
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
透明渐变：
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
代码 1-10 径向渐变 + 设置形状
background-image: radial-gradient(ellipse, rgba(255,0,0,0) , yellow 20% , green 30% ); /* 标准的语法（必须放在最后） */
2、文本相关
2.1 文字效果
-
text-shadow
-
text-shadow: 5px 5px 5px #FF000330;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WHS47IUt-1590213508334)(C:\Users\00\AppData\Roaming\Typora\typora-user-images\1589768820129.png)]
-
-
box-shadow
-
div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; //5px 是模糊的范围 #888888 阴影的颜色 }
-
-
div.card { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; }
-
text-overflow
-
div.ex1 { white-space:nowrap; //文字只显示在一行 background-color: lightblue; width: 110px; height: 110px; overflow: scroll; //hidden auto visible(默认) }
-
-
word-wrap
-
word-wrap:break-word; //超出部分强制换行
-
-
word-break
-
word-break:break-all; //允许单词拆分 -
word-break:keep-all;
-
附加记录
通过调整单词之间的 距离，保证每一行，对齐。
text-align:justify;
text-justify:inter-word;
2.2 2D转换
-
ratate 旋转
-
{ width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ }
-
-
translate 平移
-
div#div2 { transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */ }
-
-
scale 缩放
-
//缩小0.5倍 div { margin: 150px; width: 200px; height: 100px; background-color: yellow; border: 1px solid black; border: 1px solid black; -ms-transform: scale(0.5,0.5); /* IE 9 */ -webkit-transform: scale(0.5,0.5); /* Safari */ transform: scale(0.5,0.5); /* 标准语法 */ }
-
-
matrix 处理 旋转、缩放、平移 和 倾斜功能
-
参数一：x 缩放 ； 参数 二：沿 x 轴倾斜 ；参数 三：沿y 轴倾斜； 参数四：y 缩放 参数五：x 位移；参数六：y 位移；（） div#div2 { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(1,0,-0.5,0.8,0,0); /* Safari and Chrome */ }matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 scaleY(n) 定义 2D 缩放转换，改变元素的高度。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。 skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
-
2.3 3D转换
-
rotateX() 沿X轴旋转
-
div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */ }
-
-
rotateY() 沿Y轴旋转
-
div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */ }
-
2.4 过渡
多种属性，同时过渡 （宽、高、旋转）
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
2.4.1 与上图 效果相同 （只是将属性单独拿出来设置了）
div
{
width:100px;
height:100px;
background:red;
transition-property:width,height,transform;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width,height,-webkit-transform;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
div:hover
{
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
2.4.2 先竖向延长，然后等2秒 ，横向延长
div
{
width:100px;
height:100px;
background:red;
transition:height 1s, width 1s linear 2s;
/* Safari */
-webkit-transition:height 1s , width 1s linear 2s;
}
div:hover
{
width:200px;
height:200px;
}
3、动画相关
3.1 颜色变化（简单例子）
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
3.2 关键帧控制
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
3.3 动画 单个属性
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite; //动画播放次数 (无限次)
animation-direction:alternate; // 动画播放方向 (1/3/5正向，2/4/6逆向)
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite; //动画播放次数 (无限次)
-webkit-animation-direction:alternate; // 动画播放方向 (1/3/5正向，2/4/6逆向)
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
4、新用户界面
4.1 多列
.newspaper
{
-moz-column-count 2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:3; //列数
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:100px; //列之间的间隔
}
4.2 列分割线
column-rule-style:solid;
4.3 可由 ‘用户调整大小’
resize:horizontal; //不能调整 ，横向 ，纵向 ，横向加纵向
overflow:auto;
5、图片
5.1 图片圆角
<img src="paris.jpg" alt="Paris" width="400" height="300">
//相框效果
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
5.2 调整图片中的文本位置
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
margin-top:-9px; // (调整 文字自身高度的 一半)
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
5.3 卡片效果（用 阴影效果 实现）
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>响应式卡片</h2>
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
5.4 图片滤镜
img {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
5.5 图片点击方大 （图片模态框）
图片模态框
本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>图片模态框</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>
<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
<img id="myImg" src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853" alt="Northern Lights, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// 获取模态窗口
var modal = document.getElementById('myModal');
// 获取图片模态框，alt 属性作为图片弹出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// 获取 <span> 元素，设置关闭模态框按钮
var span = document.getElementsByClassName("close")[0];
// 点击 <span> 元素上的 (x), 关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
6、按钮
6.1鼠标悬停 按钮效果
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
6.2 按钮阴影+ 按钮悬停阴影
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
6.3 正常按钮+禁用按钮(透明度)
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer; //悬浮手指
}
.disabled {
opacity: 0.6; //透明度
cursor: not-allowed; //禁用标志
}
6.4 清除浮动
.button {
float: left;
}
p{
clear:both
}
6.5 悬浮时 添加动画 + 添加文字
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 1.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
6.6 按钮点击 波纹效果
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
6.7 按压效果
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
7、分页
7.1 鼠标悬停分页样式
hover 悬停时 ， 不执行 a.active 属性 执行 {background-color: #4CAF50;}
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
ul.pagination li a.active {
background-color: #ddd;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #4CAF50;}
8 框大小
8.1 box-sizing: border-box; （border和 padding 都计算在 width height 内)
属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。
如果在元素上设置了
box-sizing: border-box;则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:
9 多媒体查询器
9.1 根据屏幕 width ，控制 样式
屏幕width 在 699px – 520px 之间 显示邮件图标
屏幕width 在 700px – 1001px 之间 显示 “ Email:”
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
</style>
</head>
<body>
<ul>
<li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
<li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
<li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>
弹性盒子(Flex Box)
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
默认 一行 显示。
- direction 属性为
rtl(right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变: - flex-direction`的值有:
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content 对齐属性 （内容按主线对齐）
justify-content: flex-start | flex-end | center | space-between | space-around
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
align-content 属性
align-content
属性用于修改flex-wrap属性的行为。类似于align-items`, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
order 作为排序值 越大排在越后面
代码
.first1 {
-webkit-order: 3;
}
.first2 {
-webkit-order: 2;
}
.first3 {
-webkit-order: -1;
}
flex item 1
flex item 2
flex item 3
示例图
margin: auto;
可以做一些，居中控制。
也可以在指定 方向上做 均匀调整。 margin-right: auto;
align-self
align-self` 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
flex-grow 分剩余空间占空间 比例
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
flex-basis 代替 width/height
比 width/height 优先级高
flex-shrink 压缩率
当子元素超过父元素超过 宽度/高度，又不能超出父元素是时 ，采用的压缩比。
弹性盒子 小结：
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子类型。 |
| flex-direction | 指定了弹性容器中子元素的排列方式 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
| 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
疑难样式 记录
（1） 文本单行显示 限制
letter-spacing: 2px; /*字间距*/
display:block;/*内联对象需加*/
width:5em;/*指定宽度*/
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* IE 专有属性,当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
(2) 多行文本显示 限制
text-overflow: ellipsis;
white-space: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
(3) 相对 父布局垂直居中
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
扫一扫
2551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
