CSS3
标准盒模型和IE盒模型
IE盒子模型的范围包括margin、border、padding、content,w3c盒子模型content部分只包含content，IE盒子模型的content部分包含了padding和border
解决盒子塌陷：
关于盒子塌陷的几种解决方法
最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。
给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。
给父盒子添加overflow属性。
overflow:auto; 有可能出现滚动条，影响美观。
overflow:hidden; 可能会带来内容不可见的问题。
父盒子里最下方引入清除浮动块。最简单的有：
<br style="clear:both;"/>
有很多人是这么解决的，但是我们并不推荐，因为其引入了不必要的冗余元素 。
after伪类清除浮动。
外部盒子的after伪元素设置clear属性。
#parent:after{
clear: both;
content: "";
width: 0;
height: 0;
display: block;
visibility: hidden;
}
box-shadow:语法
box-shadow: h-shadow v-shadow blur spread color inset;
**注意：**boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
文本类：
text-overflow:
text-overflow:ellipsis;(效果为...)
text-overflow:clip;(效果为后面文字不出现)
word-wrap
word-wrap:break-word;在长单词或 URL 地址内部进行换行。
word-break
word-break:keep-all;只能在半角空格或连字符处换行。
word-break:break-all;允许在单词内换行。
@font-face
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
CSS3 2D 转换transform
- translate(xpx,ypx)平移
- rotate(xdeg)旋转
- scale(w,h)缩放
- skew(xdeg,ydeg)倾斜
- matrix()以上功能集合
CSS3 transition 属性
语法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
\#div1 {transition-timing-function: linear;}匀速
\#div2 {transition-timing-function: ease;}慢速开始、然后快速、然后慢速
\#div3 {transition-timing-function: ease-in;}慢速开始
\#div4 {transition-timing-function: ease-out;}慢速结束
\#div5 {transition-timing-function: ease-in-out;}慢速开始和结束
CSS3 动画
@keyframes规则
animation:myfirst 5s;
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
animation
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。（n,infinite无限次) |
| animation-direction | 指定是否应该轮流反向播放动画。（normal reverse动画反向播放。 alternate动画在奇数次正向播放，在偶数次反向播放。 alternate-reverse与前一个相反。 ） |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
CSS3 多列
CSS3 多列属性
-
column-count要分割的列数 -
column-gap列之间的间隔 -
column-rule-style列之间的边框 -
column-rule-width列之间的边框宽度 -
column-rule-color列之间的边框颜色 column-rule-
column-span跨列（all） -
column-width列宽
图片
制作缩略图
<a target="_blank" href="paris.jpg">
<img src="paris.jpg" alt="Paris" width="400" height="300">
</a>
响应式图片
img {
max-width: 100%;
height: auto;
}
卡片式图片
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
图片滤镜filter
blur(px)高斯模糊
brightness(%)变亮
contrast(%)对比度
drop-shadow(px)阴影效果
grayscale(%)将图像转换为灰度图像
hue-rotate(deg)给图像应用色相旋转
invert(%)反转输入图像
opacity(%)转化图像的透明程度
saturate(%)转换图像饱和度
sepia(%)将图像转换为深褐色:
CSS3 弹性盒子(Flex Box)
flex-direction对齐
flex-direction 属性指定了弹性子元素在父容器中的位置。
语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
-
flex-start：
-
flex-end：
-
center：
-
space-between：
两边固定、然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
-
space-around：
-
彼此间隔相等，同时首尾两边和弹性容器之间留有一半的间隔
align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
- flex-start：元素的纵轴起始位置的边界紧靠住纵轴起始边界。
- flex-end：元素的纵轴起始位置的边界紧靠住纵轴结束边界
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
flex-wrap 是否换行
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:
- nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse -反转 wrap 排列。
align-content 类似于 align-items
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
-
stretch- 默认。各行将会伸展以占用剩余的空间。 -
flex-start- 各行向弹性盒容器的起始位置堆叠。 -
flex-end- 各行向弹性盒容器的结束位置堆叠。 -
center-各行向弹性盒容器的中间位置堆叠。 -
space-between-各行在弹性盒容器中平均分布。 -
space-around- 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
order: 弹性子元素属性
排序用整数值来定义排列顺序，数值小的排在前面。可以为负值
语法
order:
align-self弹性元素自身弹性元素自身
align-self 属性用于设置弹性元素自身在侧轴（弹性元素自身
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MALKcG5w-1610418147376)(C:\Users\luminla\AppData\Roaming\Typora\typora-user-images\image-20210107111410267.png)]
flex:子元素如何分配空间
CSS3 多媒体查询
@media mediatype and|not|only (media feature) {
CSS-Code;
}
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
18147376)]
flex:子元素如何分配空间
CSS3 多媒体查询
@media mediatype and|not|only (media feature) {
CSS-Code;
}
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}