css3基础总结

最新推荐文章于 2024-10-18 11:33:00 发布

oh97

最新推荐文章于 2024-10-18 11:33:00 发布

阅读量123

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_59727332/article/details/120247262

版权

css3基础总结
CSS ( cascading style sheets ) 层叠样式表

1：选择器

标签选择器：标签名{css样式}
    类选择器：.类名{css样式}
    id选择器：#id{css样式}
    通配选择器：*{css样式}
    后代选择器：选择器空格选择器 {css样式}
    子代选择器：选择器 > 选择器{css样式}
    并集选择器：选择器 , 选择器{css样式}
    交集选择器：选择器直接紧挨着{css样式}
    hover伪类选择器：：hover{css样式}

焦点选择器 ：focus{css样式} 属性选择器 E[type=‘’text‘’]{css样式} 选择带有 type=‘’text‘’ 的E元素

优先级：继承< 通配 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < ！important
复合选择器权重叠加计算：第一级第二级第三集第四级
行内样式 id class 标签的个数
结构伪类选择器：

    ：first—child{css样式}父元素的第一个子元素
    ：last—child{css样式}父元素的最后一个子元素
    ：nth—child (n) {css样式} 从第n个子元素开始找
    ：nth—last—child (n) {css样式} 倒数第n个开始查询
     :nth—of—type（n）先通过该元素找到符合的一推子元素，然后在这推元素找到第n个

注意：n的取值
n为任意整数
偶数 2n 或 even
奇数 2n+1 2n-1 odd
-n+5找到前5个
n+5 找到从第5个往后

2：字体（文本）

font-wight:normal 正常
                    bold 加粗
                    100-900 取值范围
font-style: normal 正常
                   italic 倾斜
font-family: 字体1，  字体2  ，字体3，字体4 ......
如果用户没有安装该字体则默认用下一个替补
常见字体有：
无衬线字体例黑体..
衬线字体  例宋体...
等宽字体例 consolas

text-shadow:h-shadow v-shadow blur color 水平偏移垂直偏移模糊度颜色

vertical-align：baseline 默认基线对齐
   top    顶部对齐
    middle 垂直居中对齐
   bottom  底部对齐

text-indent:2em 首行缩进         1em =当前标签的font-size字体大小
text-:left 左居中
    center 居中
    right右居中
text-decoration:underline 下划线
text-overflow：ellipsis 超出文字，以省略号显示
none无装饰线
overline上划线
line-through删除线
line-height：数字px  行高
white-space:nowrap 不换行;

字体省略写法；font ：style weight size/line-height family 注意；style weight可以不写

3：背景（颜色）

opacity：取值0-1； 元素整体透明度

background-image;linear-gradient(direction，color1，color2，color3...) 颜色渐变写法1 direction 用角度值指定渐变的方向（或角度）。
background-image;linear-gradient （ direction，transparent，rgba（0,0,0,0.6）） 写法2

    background-color: 颜色;
    background-image: url(图片路径);
    background-repeat: no-repeat(不平铺);
                       repeat 平铺
                       repeat-x；沿x轴平铺
                       repeat-y；沿y轴平铺
background-size:宽高 / % / 数字px / 方向名词 / cover/contain   图片大小

background-position: 0 0;  修改图片位置
                                x轴 y轴可以和方位名词混合使用方位名词例如 right  left   centenr

background-attachment: fixed;背景固定
                                    scroll;背景跟随滚动

background简写：color   image  repeat position/size

颜色表示；1关键词例如 red green blue black yellow
2 rgb 例如rgb（255,255,255）
3rgba 例如rgba（255,255,255,0）a代表是透明度
4十六进制写法 #ffffff #redred greengreen blueblue

4：行内块级元素

display：block 块级元素
inline 行内元素（无法设置宽高）
inline-block 行内块级元素

5：盒子模型

margin 外边距上右下左 0 0 0 0
padding内边距上右下左 0 0 0 0
border边框 solid 实线 dashed 虚线

box-sizing：box-border；自动去除边距冗余尺寸，内减

box-shadow:h-shadow v-shadow blur color 水平偏移垂直偏移模糊度颜色

border-radius： 0px 0 px 0px 0px 圆角按照左上右下的顺序书写

border-collapse：collapse ；边框合并

border: 1px solid rgb(87, 206, 36)边框
border: 1px solid rgb(87, 206, 36) ;transparent；边框透明

6：光标类型

cursor：default 默认值箭头
pointer 小手
text 工字型

move 十字光标

7：伪元素

::before 在父元素前面添加一个伪元素
::after 在父级后面添加一个伪元素
注意1必须设置 content：‘’‘’，属性才能生效

2伪元素默认是行内元素

8：浮动

float ：left 左浮动
right右浮动

清除浮动的影响
（1）给父级添加宽高属性
（2）给父元素最后添加一个空标签并且设置 clear：both
（3）伪元素清除选择器::after { content:'''',
display:block,
clear:both;}
(4)双伪元素清除 选择器::before,选择器::after{content:'''', display:block} 选择器::after{clear:both;}
(5) overflow:hidden;

层级关系：标准流 < 浮动 < 定位
定位不同的层级默认一样高
浏览器以写在最后的定位先展示如果需要修改层级关系 z-index：数字；

8-1：overflow visibility display 隐藏

overflow：visible 默认值溢出可见
hidden 溢出隐藏
scroll 无论是否溢出显示滚动条
auto 根据是否溢出，显示滚动条

visibility ：hidden 隐藏占页面位置
display ：none；隐藏不占位置
display：block；显示隐藏元素

8-2：BFC

Block Formatting Context 块级格式上下文
1，创建BFC的方法：
（1）html就是bfc盒子
（2）行内块元素是bfc盒子
（3）浮动元素是bfc盒子
（4）overflow属性取值不为 visible

2，bfc特点
（1）解决mardin的塌陷（2）默认包裹住内部元素（清除浮动） position

9：定位

position：relative；相对定位（占页面位置）
position：absolute；绝对定位（祖先没定位相对浏览器/祖先元素有定位，相对祖先元素移动，不占位置）
子绝父相

position：fixed；固定定位
（1）不占位置（脱离标准文档流）
（2）相对浏览器可视区域移动
（3）需要配合方位名词实现移动

position:static ,静态定位，默认值，就是标准文档流

水平居中

{
left：50%，//占父盒子一半
transform：translateX（-50%），//让盒子往自身水平方向的一半的距离移动
}

垂直居中

top:50%,
transform：translateY（-50%），//让盒子往自身的垂直方向一半的距离移动

top:50%,
left：50%，
transform：translate（-50% -50%) //水平垂直都居中

11：3D动画

11-1
transition：过渡属性时长（数字+s）

transition：all 2s ；所有属性都过渡

11-2
transform:scale(缩放倍数) 1< 放大 <1 缩小

transform:scale(2) ;放大

11-3
transform:translate(0 0) 移动

transform:translateX/Y（0） x或者y 移动

11-4
transform：rotate（旋转角度/deg）旋转
transform：rotate（360deg）；

transform-orgin：x y ; / 方向名词 （指定旋转角度位置）

11-5 空间移动
transform：translate3d（x ，y ，z）； x,y,z轴的移动位置
transform：translate3dX()
transform：translate3dY()
transform：translate3dZ()

z轴移动需要配合父级添加透视属性 perspextive：一般取值800-1200px

空间轴旋转：
rotate：rotateZ(值deg)
rotate：rotateX(值deg)
rotate：rotateY(值deg)

11-6 3D呈现

transform-style：preserve-3d；
给父级元素添加；

空间缩放
transform：scale3d（）；

11-7
动画的实现步骤：animation
1定义动画
（1）@keyframes 动画名称 {
from{},
to{}

}

（2）@keyframes 动画名称 {
0%{}，
50%{},
100%{}
}

2使用动画

animation：动画名称，动画时长；

3动画属性

animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕状态；

速度曲线： linear 匀速动画 steps（）分部动画；
infinite 一直重复数字+s 动画延迟时间数字重复次数

alternate 反向动画
执行完毕状态： backwards 默认值动画悬停在最初状态 forwards 停留在结束的状态

12：移动端

分辨率分类：

1物理分辨率：是生产屏幕时就固定的，它是不可被更改的。
2逻辑分辨率；由软件驱动决定

二倍图
高分辨率下图片不会模糊，失真

百分比布局/流式布局
能让宽度自适应，高度固定

12-1 flex布局
是一种浏览器提倡的布局模型，布局更简单，灵活
避免浮动脱标的问题

设置放置：给父元素添加 display：flex ，
组成部分：弹性容器，弹性盒子，主轴（main axis），侧轴/交叉轴（cross axis）

主轴

justify-content：center；在主轴方向居中
justify-content：space-between; 间距在盒子之间
justify-content:space-evenly; 所有子级盒子间距相等
justify-content：space-around；间距在子级盒子两侧

侧轴
align-items：center; 居中
align-items:stretch; 默认值，拉伸，子级没有高度默认继承父级高度
align-items：space-between；间距在盒子之间
align-items：space-around; 间距在盒子两侧
align-self:center;单独设置居中效果，在子级添加

伸缩比
属性flex：值数组（几份） 只占用父级盒子剩余的尺寸

例如 flex：1；占用父级剩余尺寸1份

flex-direction：column；列，垂直布局修改主轴的方向，
注意（主轴修改后，侧轴也会随之变化，垂直变水平，所对应的属性也会改变）

flex-wrap：wrap ；多行排列
nowrap 默认值，不换行

13：移动适配

rem：目前多数企业再用
vh/vw；未来趋势解决方案

13-1 rem
1rem = 1html根字号大小

rem适配----媒体查询
写法：@media（媒体特性）{
选择器{css}
}
例如 @media(width:375px){
html{font-size：37.5px；
}}

13-2 vh/vw
vh = 1/100视口高度
vw= 1/100视口宽度