前端CSS3学习

学习菜鸟教程

火狐-moz- 谷歌 Safari -webkit- 前面都加这个，可能才生效

边框

border: 1px solid #ddd 粗细 样式 样色 经常和border-radius 一块用
border-radius: 50px 20px 第一个左右 第二个右左 border-top-left-radius …
box-shadow: 10px 5px 10px 0 #888888 第一个右边 第二个下边 第三个模糊半径 第四个扩散半径 第五个颜色
border-image:url(./logo.png) 10 60 round 10-上下切片数量 60左右 round循环 stretch 单张拉伸

背景

背景图像边界框的相对位置 border-box
背景图像的相对位置的内容框 content-box

多个背景图片写法

 background-image: url(img_flwr.gif), url(paper.gif);background-position: right bottom, left top;background-repeat: no-repeat, repeat;

background-clip 限制背景从哪开始，content-box padding-box

渐变
必须至少定义两种颜色节点

background-image: linear-gradient(#e66465, #9198e5); 从上到下
background-image: linear-gradient(to right, red , yellow); 从左到右
background-image: linear-gradient(to bottom right, red, yellow); 左上角到右下角

如果使用多个颜色，就在后面加就行了
使用角度，就把里面的to xxx 换成，45deg 这样的，看下面的箭头，指向哪朝哪变

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 透明度，0透明，1不透明

文本属性

text-overflow:ellipsis 和 text-overflow:clip

字体

font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;

2D和3D转换

transform:translate(50px,100px);  

多列
column-count: 3 三列
column-gap: 40px 两列之间的间隙是40px
column-rule:1px solid lightblue 边框宽度 样式 和颜色
column-rule-style:solid 列与列之间的边框样式
column-rule-width:1px 边框宽度
column-rule-color: red 边框颜色
column-span: all; 在一个文本内容分多列显示的区域内，有一个标题元素你希望它完整地显示在所有列之上，不被拆分成多列显示，就可以给这个标题元素设置 column-span: all; 样式，使得标题更加醒目、整体性更强。
column-width:100px; 指定列的宽度

调整尺寸 Resize
resize:both; 自己拉动
overflow:auto; 是否能滚动

方框大小调整(Box Sizing)

box-sizing:border-box; 高度和宽度应用于元素的所有部分: 内容、内边距和边框
box-sizing:content-box; 高度和宽度只应用于元素的内容
也就是说，同等情况下，content-box 比 border-box 要宽

外形修饰（outline-offset ）

 border:2px solid black;outline:2px solid red;outline-offset:15px;     两个圈的间距                                 在border外面，在加一个外圈

图片
img src="paris.jpg" alt="Paris" width="400" height="300" alt是超链接

块级元素，容纳块级元素和行级元素
所有行级元素，只有变成块级元素，才能容纳行级元素哦
用到 display: block; 从左到右排列，不会独占一行，除非空间不够换行
还有dispaly: inline-block 这个好用：行级元素特性保留、块级元素特性增加
两个差别图

有的行级元素，没有固定的display的固定值，比如a标签，默认情况下其宽度是由内容撑开的。当不用inline-block的时候，就不能padding值了，像button和input都有display的默认值inline-block

所有行级元素
span：一个通用的内联容器
a：超链接
img：用于在网页中插入图像
b：使文本加粗
i：使文本倾斜
em：强调文本，通常也表现为斜体
strong：加强语气，通常表现为加粗
sub：定义下标文本 sup：定义上标文本
其他的还有 button、input、select

所有块级元素
div 太常见了
p：段落
h1-h6：标题
ul和ol：无需列表 有序列表 li元素表示
from：表单
table：表格
nav：专门用于定义导航链接的区域
section：用于对文档进行分区

两个span不会换行
两个div会换行

响应式图片

max-width: 100%;
height: auto;

下面这个图片会随着页面的大小响应式缩放 放大的哦

图片文本

.文本左上角 {position: absolute;top: 8px;left: 16px;font-size: 18px;
}
.img { width: 100%;height: auto;opacity: 0.3;
}

图片滤镜
filter: grayscale(100%); 其他效果百度下，还有黑白的 阴影的

font-size 还管按钮大小

鼠标悬停按钮

.button1:hover {transition-duration: 4s;                     颜色变化持续时间cursor: pointer;                                 鼠标悬停小手    background-color: #4CAF50;           鼠标放上去的颜色color: white;                                      完全显示后，里面字体的颜色
}

鼠标悬停出现阴影

.button2:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}.disabled {opacity: 0.6;            1最大，完全不透明cursor: not-allowed;     禁用
}

动画
transition: 0.5s; 表示动画

定位
position: absolute; 绝对定位，不占空间，参考离他最近的上层定位如relative、absolute或fixed，没有就根据浏览器窗口定位

position: relative; 相对定位。 相对于自身来说，例如，设置position: relative; left: 10px; 该元素会在自身的基础上向左偏移 10 像素

实现上面gif的效果

*padding-right 和 right 的区别*

padding-right是会影响页面布局的。right一般和position: absolute;或position: relative;用，right属性是用来确定元素的右侧边缘与定位参考点

按钮动画 - 波纹效果

这个gif，真实的效果应该是，先收，在还原。收在0s内，所有没感觉

渲染的时候，先after，把阴影放的远远的，完全透明看不见。

点击的时候，收回来，padding和magin都是0，transition：0s 所有你没感觉 。 如果你把transition变成1就能看到一个浅到深的效果，因为，opacity是由0过渡到1
松开鼠标 还回去。 opacity是由1过渡到0 由深入浅的动画效果

.button:after是一个伪元素。当你没有显式地设置它的宽度和高度时，它的尺寸会由其内容和内边距padding、外边距margin等属性来决定

元素非激活的状态下，有默认值。 激活结束后会还原

.button:active {background-color: #3e8e41;box-shadow: 0 5px #666;               像下5个像素，元素向下移动4个  就有按压的效果了transform: translateY(4px);
}

:active:after可能不会产生任何效果，如果没有对应的伪元素来应用样式

块级元素，另起一行。 行级元素在一行

弹性盒子

display: flex; 把块级元素 变成行级元素 比如，两个div用flex 就不会换行了

其他的还有
display: inline; 把行级元素 变成块级。 span换行
display: block; 把块级元素变成行级。 div在一行
dispaly: inline-block 变成行-块级属性

direction: rtl;
direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变

flex-direction

row-默认的 左对齐 row-reverse 右对齐 和左对齐相反方向

column - 上下排列 column-reserve 下上排列

align-items 侧轴 管竖直方向

stretch 如果没有设置height值，会拉满所在行的尺寸，受到min/max-height限制

flex-start 默认的

flex-end

center

justify-content 内容对齐 主轴 管水平方向

行内轴，是文本书写方向的轴

flex-wrap 属性
用于指定弹性盒子的子元素换行方式

nowrap 只能在一行，会压缩，可能溢出

wrap 换行，超出的

wrap-reverse 反转

align-content
用于修改 flex-wrap 属性的行为

弹性子元素排序
order: -1 数值小的排在前面。可以为负值

align-self
元素自身在竖直方向上的对齐方式

flex 属性用于指定弹性子元素如何分配空间

多媒体查询

screen用于电脑屏幕，平板，智能手机等

@media screen and (max-width: 480px) {                  body {                       浏览器窗口宽度小于480，背景颜色变红色background-color: red;     }div.example {             浏览器窗口宽度小于480，隐藏某原色            display: none;   }
}

大于480右侧菜单浮动到右侧，小于在下面

动态添加文本或图片


网格布局
display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素

grid是块级元素，同级的grid不能再一行

inline-grid 是块级元素，能在一行

grid-template-columns: auto auto auto； 三列，几个auto就几个列 单位是fr
grid-template-columns: 2fr 1fr 1fr; 三列，一个占一半，剩下两个各个四分之一
grid-template-columns: 30px 200px auto 100px; 指定列的大小
上面都是列，行也是类似的网格间距
grid-gap: 30px 100px; 上下间距30px 左右100px 是grid-row-gap 和 grid-column-gap 属性的简写
grid-row-gap: 50px; 上下间距50px
grid-column-gap:45px; 左右45px

网格区域
grid-column-start：从哪一列网格线开始
grid-column-end：从哪一列网格线结束
grid-row-start：从哪一行网格线开始
grid-row-end：从哪一行网格线结束

3 * 3的grid布局，行和列都各有四条网格线

  .item1 {grid-column: 1 / span 2;           列           1代表起始线    2代表跨度，就是到第三条线结束，两个单元格grid-row: 1 / span 2;               行  同上}

.item8 {grid-area: 1 / 2 / 5 / 6;        第一行 第二列 开始     第五行 第六列结束 
}

.item8 {grid-area: 2 / 1 / span 2 / span 3;      第二行 第一列  跨 2 跨 3
}

grid-template-areas制作网页模板

可以配合 align-content和justify-content 一块使用

完