CSS3

AXIN
244 阅读8分钟

教程内容

1 弹性盒子

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

  • dispaly: flex/inline-flex 定义为弹性容器
  • flex-direction: row/row-reverse/column/column-reverse
  • justify-content: flex-start/flex-end/center/space-between/space-around
  • align-items: flex-start/flex-end/center/baseline/stretch(item被拉长)
  • flex-wrap: nowrap/wrap/wrap-reverse
  • align-content: flex-start/flex-end/center/space-between/space-around/stretch(第一行从start开始，剩余行居中占用剩余空间) 设置各行的对齐方式

弹性盒子元素属性

  • order: 0/1/-1..; 排序，数值越小排在前边
  • margin: auto; 对齐，完美居中。自动获取弹性容器的剩余空间，元素设置为auto自动上下左右对齐
  • align-self: auto/flex-start/flex-end/center/baseline/stretch 对单个元素设置垂直分布
  • flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 指定元素如何分配空间

2 多媒体查询

  • @media not|only mediatype and (expresstion){css code..}
  • @media all and (expression){css}
  • all/print/screen/speech(屏幕阅读器) css3多媒体设备类型
  • expresstion min-width:600px/max-width:400px min表示比这个值大的时候为true，max表示比这个值小的时候为true

3 边框

  • border-shadow: <offset-x><offset-y><blur-radius><spread-radius> 可选inset 可选rgb(number,number,number,0.1)
  • border-radius: 5px 一个值四个角；两个值左上右下，右上左下；三个值左上，右上左下，右下
  • barder-image:url("/images/border.png") 30 30 repeat; /* border-image: image-source image-height image-width image-repeat */

4 背景

  • background-image: url("image.jpg"); 有多个时用逗号隔开，第一个在最上面
  • background-size: 30px 40px 宽高 / 100% 100% 取父元素宽高的百分比
  • background-origin: content-box/padding-box/border-box 放置背景图片的位置
  • background-clip:content-box/padding-box/border-box 背景图片裁剪的位置

5 渐变效果gradient

线性渐变

  • background-image:liner-gradient(red,green); 由上到下
  • background-image:liner-gradient(to right,red,green); 由左到右
  • background-image:liner-gradient(to bottom right,red,green); 到右下角
    预定义角度：to bottom/to top/to right/to left/to bottom right等

使用角度

  • background-image: linear-gradient(-90deg, red, yellow); 设置角度后如图根据箭头方向渐变

使用透明度

  • background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 0表示完全透明，1表示完全不透明

重复线性渐变

  • background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变

  • background-image: radial-gradient(red, yellow, green);
  • background-image: radial-gradient(red 5%, yellow 15%, green 60%);
  • background-image: radial-gradient(circle/ellipse, red, yellow, green); 默认时ellipse，椭圆形
  • background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); 尺寸值closest-side/farthest-side/closest-corner/farthest-corner
  • background-image: repeating-radial-gradient(red, yellow 10%, green 15%); 重复径向渐变

6 文本效果

  • 文字或图片卡片效果：
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;
}

设置两个box-shadow，第二个向下偏移更多，模糊半径更大，透明度更高

  • text-overflow:ellipsis/clip 超出框的文本 ellipsis显示为.. clip直接裁剪
  • word-wrap:break-wrap 强制直接换行，可能会截断一个单词
  • word-break:keep-all/break-all 保持单词或者截断换行

7 字体

可以把包含的字体文件以这种方式导入

@font-face{
  font-famliy:name;
  src:url("url");
  font-stretch:normal;
  font-weight:normal;
  font-style:normal;
  unicode-range:(可选)表示字符范围
}

8 2D/3D 转换

2D

  • transform:translate(50px,100px) 从左边元素移动50个像素，并从顶部移动100像素。
  • transform: rotate(30deg); 以元素中心为中心，顺时针转动的角度 transgorm-origin:20% 40%;旋转后元素的位置x,y
  • transform:scale(2,3); 元素的宽变为原来的2倍，高变为3倍
  • transform:skew(30deg,20deg);元素在x轴和y轴的倾斜角度
  • transform:matrix(); matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

3D

  • transform:rotateX(130deg) /rotateY(130deg)

9 过渡效果

div{
   transition:width 2s ease;
   width:100px;
}
div:hover{
   width:300px;
}

10 动画

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;
	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;}
}


<div></div>

11 多列

  • column-count:4; 指定元素应该被分割的列数。
  • column-fill:auto/balance; 指定如何填充列
  • column-gap:40px; 指定列与列之间的间隙
  • column-rule: 所有 column-rule-* 属性的简写
  • column-rule-color:red; 指定两列间边框的颜色
  • column-rule-style:solid; 指定两列间边框的样式
  • column-rule-width:20px; 指定两列间边框的厚度
  • column-span:all; 指定元素要跨越多少列
  • column-width:40px; 指定列的宽度
  • columns: column-width 和 column-count 的简写

12 用户界面

  • resize:none/both/vertical/horizontal(水平方向)
  • box-sizing:border-box/content-box border-box边框和外边距包含在width中，不包含margin，content-box表示width只表示内容区
  • outline-offset:15px表示border外的距离 outline:2px solid red; 有一个边框

13 图片

结合JS实现图片模态
<!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="//www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" 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>

14 按钮

实现一个带箭头的按钮动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.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: 0.5s;
	border:1px solid black;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
	border:1px solid black;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>
</head>
<body>

<h2>按钮动画</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>
</html>

15 em rem vw vh vmax vmin 不带单位

  • em表示相对大小

    当根元素的font-size = 1em时，表示页面的字体大小为默认字体大小16px；根元素字体大小的定义是全局性质的；

    当普通元素的font-size = 1.2em时，表示继承父类元素的字体大小，是父类元素字体大小的1.2倍；

    当普通元素的其他属性使用em作为单位时，表示继承自身元素的字体大小；

    注意：当元素嵌套时，用em作为font-size的单位，不是1em，就可能会发生逐级字体减小或者变大。

  • rem也表示相对大小

当普通元素的font-size = 1.2rem 时，表示永远继承根元素的字体大小，并是根元素字体大小的1.2倍，和父元素无关了。

例如这样：root{font-size=1.2em} p{font-size=1.1rem}

注意：一般建议font-size用rem, border用px padding,margin,border-radius用em

  • vw:视口宽度的的百分比 vh:视口高度的百分比 vmin:视口高度或者宽度最小值的百分比 vmax:视口高度或者宽度最大值的百分比

    如果把元素的font-size设置为以vm为单位的化，字体大小会跟随页面大小改变，但是有些时候改变的百分比并不是想要的效果

  • calc()函数

    如：root{font-size = calc(0.5em + 1vm)} 这个时候字体大小就会在iphon6的11.75px之间到宽度1200px的浏览器字体20px进行变化，随着视口的变化，字体变化很平滑，可以代替媒体查询的方式。

  • 如果inline-height不带行高，则子元素会继承这个值并重新计算

如body{inline-height = 1.2} div{font-size = 2em}，此时div中字体大小是32px,行高就是32*1.2px

如果在父元素中行高带单位了，如1.2em，那么就会直接继承结果值，不再重新计算，如果子元素的字体比行高大就会字体重叠。

16 获取元素位置 页面大小 视口大小

  • 通过函数this.getBoundingClientRect()获取元素的位置，是在页面上的相对视口的位置，会返回一个对象，包括
 { x:  表示从元素border的左外侧开始到页面最左侧的距离
   y:  表示从元素border的上外侧开始到页面最上侧的距离
   width:  表示元素的宽度 所有可视部分 border+padding+content
   height: 表示元素的高度 所有可视部分 border+padding+content
   top: 同y
   right:  表示元素border右外侧到页面最左侧的距离
   bottom:  表示元素border下外侧到页面最上侧的距离
   left: 同x
 }

  • window.innerWidth 和 window.innerHeight是视口的大小，包含滚动条在内，整个的大小

  • DOM对象

(1)只读属性

  • clientWidth clientHeight

元素直接调用，表示可视部分宽高，包括的是border和padding,如果滚动条遮挡了一部分，则去掉滚动条的宽度。

  • offsetWidth offsetHeight

包括border,padding,content，获取到元素本来设定的宽高，和内容是否超出元素大小无关。

  • clientTop clientLeft

读取borderd的宽高

  • offsetLeft offsetTop

这个距离是元素距离最近的具有定位（position:absolute或者relative）的父元素的border的距离（子元素的外border,父元素的内border）,找不到就是body元素。

  • scrollHeight scrollWidth

发生滚动时的实际内容的大小，不包含滚动条。未发生滚动时取不到

(2)可读可写的属性

  • scrollTop scrollLeft

表示当元素内容超出宽高之后被卷起的宽高。会随滚动条滚动增大或减小。

  • obj.style.*属性获取行内样式，但不是计算好的属性值

  • Event对象

    • clientX clientY

    表示鼠标点击事件发生时，点击的位置相对于浏览器（可视区）左上角的位置。

    • screenX screenY

    表示点击事件相对于屏幕左上角的位置

    • offsetX offsetY

    表示点击事件相对于事件源左上角的位置，fireFox不支持，使用event.layerX和event.layerY代替。

    • pageX pageY

    点击位置相对于网页左上角的位置，在没滚动的时候，和clientX Y 一样，发生了滚动后会更大。

avatar
文章
阅读
粉丝