CSS基础知识（2）

一、继承

文字相关的样式可以被继承

布局相关的样式默认是不能被继承的

属性值:inherit

二、CSS盒子模型

1.content:

内容区域,是放置内容的区域,大小由宽度和高度组成

2.padding

内边距:内容到边框之间的距离

• 一个值:代表上下左右都设置padding值
• 两个值:第一个值代表上下,第二个值代表左右
• 三个值:第一个值是上,第二个值是左右,第三个值是下
• 四个值:顺时针的顺序 上右下左 设置

2.1方位

padding-top

padding-bottom

padding-left

padding-right

3.border

边框(三合一)

border-left

border-right

border-top

border-bottom

4.margin

外边距:相当于元素外部有一层看不到的空间,一般用来调整元素之间的间距

• 一个值:代表上下左右都设置padding值
• 两个值:第一个值代表上下,第二个值代表左右
• 三个值:第一个值是上,第二个值是左右,第三个值是下
• 四个值:顺时针的顺序 上右下左 设置

4.1方位

margin-top

margin-bottom

margin-left

margin-right

补充：

1.背景颜色会填充到margin以内的区域

2.box-sizing

content-box:默认,宽度高度只控制content区域

border-box:宽度高度只控制整个盒子

3.margin:auto 居中效果

三、folat浮动

脱离文档流,不占位置,针对于块级元素

属性值：

• left
• right

四、position定位

1.relative

相对定位，相对于当前的正常位置

2.absolute

绝对定位

3.fiexd

窗口定位:浏览器的窗口

父子关系,子元素进行定位,相对于他的父级(设置了相对定位)的绝对定位,

父元素设置相对定位，子元素设置绝对定位

五、display

功能:转换元素特性

属性值	说明
block	元素以块级方式展示。
inline	元素以内联方式展示。
inline-block	元素以内联块的方式展示。
none	隐藏元素。

六、overflow溢出隐藏

overflow(overflow-x,overflow-y):

• hidden:溢出隐藏
• scroll:滚动条,不管有没有溢出,都有滚动条
• auto:自动识别需不需要滚动条

七、透明度

opacity:规定不透明度

0(完全透明)~1(完全不透明)

占空间,子元素也会透明

rgba(r,g,b,a)

rgb 0255 a: 01

对背景的透明颜色,不影响其他样式

八、手势cursor

九、最大最小宽高

一般在元素大小是百分比的时候,限制元素变化范围

min-width

max-width

min-height

max-height

十、transform属性

1.平移

• translate(x轴,y轴)
• translateX(x轴):是这x轴平移多少
• translateY(y轴):是这y轴平移多少

2.旋转

rotate(角度)

角度单位deg

3.缩放

scale(缩放比例)

scaleX()

scaleY()

例子：

transform:  translate(200px,200px)  rotate(180deg) scale(0.5);

十一、过渡

transition: 指定属性 持续时间 速度曲线 开始时间;

transition-property: 属性值; /*指定属性名*/

transition-duration: 属性值; /*完成过渡这一过程的时间*/

transition-timing-function: 属性值; /*速度曲线*/

transition-delay: 属性值; /*过渡的开始时间*/

十二、动画

@keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。

@keyframes 动画名
{
    0% {样式属性：属性值;}
    25% {样式属性：属性值;}
    50% {样式属性：属性值;}
    100% {样式属性：属性值;}
}

属性	描述
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。

十三、清除浮动

float不占空间,有时候影响后面的布局,这个时候可以清除浮动

clear: both;/清除浮动/

十四、calc函数

动态计算

  width: calc(100% - 300px);//注意有-前后有空格

十五、媒体查询

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

 mediatype ：

媒体设备类型

值	描述
all	适用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等
speech	用于屏幕阅读器等发声设备

media feature 

值	描述
max-width	定义输出设备中的页面最大可见区域宽度
max-height	定义输出设备中的页面最大可见区域高度
min-width	定义输出设备中的页面最小可见区域宽度
min-height	定义输出设备中的页面最小可见区域高度
orientation	视口（viewport）的旋转方向。portrait ：表示 viewport 处于纵向，即高度大于等于宽度 ； landscape ：表示 viewport 处于横向，即宽度大于高度