前端练习生之CSS学习-笔记（1）

1.CSS 复合样式：

复合的写法：是通过空格的样式实现的。复合的写法有的不需要关心顺序，比如background，border，有的需要关心顺序，
比如font

1.background：red URL（） repeat 0 0；
2.border：1px red solid;
3.font:
注意：最少要有2个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √

 

2.文本类属性：
font-family:字体类型
语法：font-family： 字体1 字体2 字体3;
font-size: 字体大小；
px，或者em为单位
color:颜色
#fffffff，或者rgb（255,255,255），或者英文单词
font-weight:字体加粗
语法{font-weight：bolder（更粗）/bold（加粗）/normal（正常）/100-900}

font-style：字体倾斜
语法{font-style：italic/oblique/normal}

text-align:水平对齐
语法{text-align：left/right/center/justify}
其中justify对内容两端边界线对齐显示
line-height：行间距{normal/数值}

text-decoration:文本修饰
语法{text-decoration：none/underline/overline/line-through}
none:没有修饰
underline：添加下划线
overline：添加上划线
line-through：添加删除线
text-indent：首行缩进
{text-indent：数值}

3.列表属性：
ul，ol，dl，
1.定义列表符号样式
语法{list-style-type：disc（实心圆）/circle(空心圆)/square（实心方块）/none（去除列表符号）}
2.定义列表符号的位置：
语法{
list-style-position：outside(外边)/inside（里边）
}
3.去除列表样式；
语法{list-style：none}

4.背景属性:
background：red URL（） repeat 0 0；

5.浮动属性：
float：left/right
子元素浮动时，需要给父元素设置高度，否则会出现高度塌陷

6.CSS3选择符：
1.伪类选择器：
(1).结构性伪类选择器
语法：:first-child与:last-child与
说明：单独指定第一个子元素和最后一个子元素

语法：nth-child与nth-last-child与
说明：对指定序号的子元素使用样式
2.对所有第奇数个或第偶数个子元素使用样式
:nth-child(odd){}//所有正数下第奇数个子元素
:nth-child(even){}//所有正数下第偶数个子元素
:nth-last-child(odd){}//所有倒数上去第奇数个子元素
:nth-last-child(even){}//所有倒数上去第偶数个子元素

7.CSS3新增属性:
1.背景属性：
background-clip:
语法：{background-clip：border-box/padding-box/content-box}
说明：border-box：背景被裁减到边框盒
padding-box：背景被裁减到内边距框
content-box：背景被裁减到内容框
background-origin:设置起始位置

background-size：指定背景图像的大小
语法{background-size:length/percentage/cover/contain}
说明：length:设置背景的高度和宽度
percentage：一父元素的百分比设置背景图像的宽度和高度
cover：把背景图像扩展至足够大，全部覆盖北京区
contain：把图像扩展至最大尺寸，使其宽度和高度完全适应内容区域
box-shadow：盒子阴影
语法{box-shadow：h-shadow v-shadow blur spread color inset}
h-shadow:水平阴影的位置
v-shadwo:垂直阴影的位置
blur：可选，模糊距离
spread：阴影的尺寸
color阴影的颜色
inset：将外部阴影改为内部阴影

2.2d效果
transition： 过度属性， transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property：要作用的css属性；
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
linear：相同速率
ease：先慢速，然后变快，然后慢速结束
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay： 定义过渡效果何时开始。
transform：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法{transform: none|transform-functions;}
1.旋转：rotate(angle)
定义2d旋转，在参数中规定角度
2.移动：translate
定义 2D 转换。
3.缩放：scale（x,y）

4.skew：扭曲,
skew(angle);定义沿着 X 和 Y 轴的 2D 倾斜转换。
3.3D效果：
3DTransform转换属性
1.transform：将元素应用2d或3d转换
2.transform-origin;改变转换元素的位置
3.transform-style：规定被嵌套元素如何在3d空间中展示
flat:子元素将不保留其3D位置
preserve-3d：子元素将保留其3d位置
4.perspective：规定3d元素的透视效果
5.perspective-origin：规定3d元素的底部位置
6.backface-visibility：定义元素在不面对屏幕时是否可见
4.动画效果
@keyframes： 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function： 规定动画的速度曲线。
animation-delay： 规定动画何时开始。
animation-iteration-count： 规定动画被播放的次数。
animation-direction： 规定动画是否在下一周期逆向地播放。
animation-play-state： 规定动画是否正在运行或暂停。
animation-fill-mode：规定对象动画时间之外的状态。

8.弹性盒子
1.语法{display:flex|inline-flex}
容器通过设置display属性值为flex或者inline-flex将其定义为弹性容器
flex：将对象作为弹性伸缩盒显示
inline-flex:将对象作为内联级块弹性伸缩盒显示
2.flex-direction：row(横向排列)|row-reserve（逆方向横向排）|column

3.flex-wrap:检索伸缩盒子对象的子元素超出父容器时是否换行。
nowrap：不换行
wrap：自动换行
wrap-reverse：方向wrap排列
4.justify-content：检索弹性盒子元素在株洲方向上的对齐方式
1.flex-start：向行起始位置对齐
2.flex-end：结束位置对齐
3.center：向行中间位置对齐
4.space-between：平均分布在行里
5.space-around：平均分布在行里，两端保留子元素玉子元素之间的间距大小的一半