A. css代码风格
a. 建议使用展开格式,更直观
选择器 {
属性: 值 ;
}
b. 属性名,属性值全部使用小写字母
c. 属性值前,冒号后面,保留一个空格
B. 选择器
1. 基础选择器
标签选择器: 标签名
类选择器: .类名
id选择器: #id名
通配符选择器: * //会选中文档中所有的标签(作特殊使用)
-
复合选择器
后代选择器: 父辈 后代; //选中父元素中所有的后代
子元素选择器: 父亲>儿子; //仅仅选中儿子
交集选择器: 选择器1选择器2
并集选择器: 选择器1,选择器2;
伪元素:
E:before/after {
content: ""; //必写属性
}
::placeholder //更改input设置该元素的字体颜色
伪类选择器:
a. 链接伪类
a:visited; //链接被访问后的状态
a:hover; //鼠标悬停的状态
a:active; //点击但未放手的状态
b.
:focus //针对input获取光标焦点
c. 结构伪类
E:nth-child(n) //n为公式或者数字 even偶数或2n odd基数或2n+1 -n+5前五个 n+5从第五个开始到最后
(还有E:last-child() 以及 E:first-child() )
E:nth-of-type(n) //对指定的E进行排序,再看寻找第几个
C. Css三大特性
1. 层叠性
浏览器自上而下解析,后一个覆盖前一个(样式冲突,遵循就近原则 不冲突则不会层叠)
连写时,若不写则会有默认值
2. 继承性
恰当的使用继承性可以简化代码,降低样式复杂性
子父样式冲突,执行自身(若元素没有被选中,无论父亲多强,儿子的继承为0)
子元素(text- font- line- color 系列 可以继承父亲)
3. 优先级
a. 当选择器相同时,比较权重
(权重没有进位,在大也不会向前进)
b. 计算公式
(复合选择器会出现权重叠加,若同时选中一个元素,而又要实现样式,则可添加父元素)
继承 * //权重0.0.0.0
标签 //0.0.0.1
类 . //0.0.1.0
id //0.1.0.0
行内 //1.0.0.0
!important //无穷大
4. 元素显示模式
a. 块元素
(独占一行,无宽度时默认父元素宽度)
div
p h1-h6
ul ol dl dt dd
b. 行内元素
(设置宽高无用,内容撑开盒子,换行有缝隙)
a strong em i del span
c. 行内块
img input
D. Css常用属性
1. 字体样式
复合属性 font: font-style font-weight font-size/line-height font-family //必写字体大小和类别
font-style: italic倾斜/normal正常
font-weight: 700 bold/400 normal
font-size: --px //字体大小
font-family: 字体类别 //sans-serif无衬线字体
2. 文本样式
color: 文本样式
text-align: 文本水平对齐方式
line-height: 行间距
text-indent: 首行缩进 //text-indent: 2em;
text-decoration:
none //去线
underline //下划线
line-through //删除线
overline //上划线
3. 背景样式
background: 颜色 图片地址 平铺 滚动 位置
background-color:
transparent //透明(opacity:0-1;设置整体的透明度)
rgb
rgba
background-image: url(地址); //还可表示背景渐变色(background-image:linear-gradient())
background-repeat:
no-repaet; //不平铺
repeat //平铺
repeat-x //x轴方向
repeat-y
background-attachment:
scroll //背景滚动
fixed //背景固定
background-position: x y; //可用方位名词
background-size:
cover; //铺满盒子,但图片显示不完整
contain; //铺不满盒子,但图片显示完整
width height; //数字控制,(一个值时代表宽,宁一个默认auto)
百分比; //参考盒子的高度
4. 盒子模型
1. 外边距margin: top right bottom left;
(margin: 0 auto; //可让块元素水平居中,但必须有width)
2. 边框border: border-width border-style border-color;
border-style:
dotted; //点线
dashed; //虚线
soild; //实线
border-radius:
百分比/px;
top right bottom left;
3. 内边距padding //同外边距
(注意:
a. 边框和内边距会撑大盒子(有宽高情况下),
b. 上下的盒子和嵌套的盒子注意上外边距塌陷问题(若有浮动,定位,固定则不会出现塌陷)
c. 尽量只给盒子添加一个margin(若两个盒子同时设置边据,以较大的那个为准),行内元素尽量只给左右内外边距
b. 对于table中相邻边框会撑大边框使用border-collapse: collapse;合并相邻边框(或者margin-right: -1px;
margin-bottom: -1px;)
d. 不让边框,内外边距撑大盒子
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
)
5. 浮动float
(多块垂直排列找标准流,水平排列找浮动)
1. css布局机制
标准流(最稳定):
块级元素自上而下 行内元素自左向右
浮动:
a. 让多个块元素一行无缝显示,只有左右没有居中,且顶对齐(但添加padding会影响距离盒子边框的距离) ,
b. 父元素中只要有一个浮动其他全要添加浮动,但不能影响上方的标准流元素
c. 可改变元素的类型,行类元素便可设置宽高
d. 浮动元素一行显示,除非父盒子装不下,被挤下去
e. 浮动元素脱标,不占据原有位置,内容撑开盒子
定位: 特殊位置 压住
2. 清除浮动(给父元素添加清除)
a. 什么时候该清除浮动?
父元素不能设置高度,子元素浮动后不能撑开父元素则清除,影响下面布局
方法一:
在最后一个浮动元素后添加额外标签<div style="clear:both;"></div>
方法二:
overflow:hidden; //子元素超出父元素边界部分会被清除
方法三: (工作中常用)
.clearfix::after{
content: ''; //必写属性
display: block; //伪元素为行内元素
clear: both;
height: 0;
visibility: hidden; //最后两行隐藏content的内容,和伪元素的高度
}
方法四:
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
6. 定位
1. (定位 = 边偏移: + 定位模式 : )
top static //标准流
right relative //相对定位
bottom absolue //绝对定位
left fixed //固定
(解决特殊位置,压住的问题)
a. relative相对定位
不脱标,占据原有位置,且位置偏移参考元素自身
b. absolue绝对定位
脱标,父元素:
没有定位,位移参考浏览器
有定位,位移参考离他最近的有定位的元素
c. fixed
针对浏览器可视化区域,不随滚动条滚动
2. 层叠次序Z-index
选择器{
z-index: 1; //调整元素显示层级关系,值越大层级越高
}
(有定位才可使用,值可正可负)
7. 定位 与 浮动脱标的异同
相同点: a. 块元素脱标后,不在继承父元素宽高,由内容撑开盒子 b. 行内元素脱标可设置宽高 c. 脱标后 块元素使用margin: 0 auto;无效 行类元素给其父亲使用text-align:center;无效 不同点: a. 浮动脱标压不住文字,行内元素,他们会围绕着浮动的元素 //主要用于多个块元素一行显示 b. 定位脱标后可压住任意元素
8. 元素的显示与隐藏
display:
none; //隐藏,不占有原来位置
block; //显示
visibility:
hidden; //占有原来位置
visible;
overflow:
hidden; //超出盒子被隐藏
scroll; //溢出显示滚动条,不溢出也显示
auto; //在需要时添加滚动条
visible; //默认
溢出的文字显示省略号
单行:
white-space: nowrap; // 强制文字一行显示
overflow: hidden; //超出的部分隐藏
text-overflow: ellipsis; //用省略号代替超出的部分
多行:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //弹性盒子模型显示
-webkit-line-clap: 2; //限制显示文字的行数
-webkit-box-orient: vertical;
9. 用户界面样式
1. 鼠标样式cursor:
pointer; //小手
move; //十字架
text; //文本I
not-allowed; //禁止
default; //默认样式
2. 清除input默认轮廓线
outline: none;
3. 防止textarea文本域拖拽
resize: none;
10. vertical-align基线问题
1. 针对行内元素,可用基线控制图片/表单与文字对齐
vertical-align:
top; //顶对齐
middle;
baseline; //基线对齐,会产生缝隙
bottom;
2. 可用与除去图片底部空白缝隙
a. 给图片img添加vertical-ailgn: middle | top | bottom;
b. 给img添加display: block; //转为块元素
11. 精灵图
(为了有效减少服务器接收和发送请求次数,提高网页加载的速度)
a. 先将整个图插入
background: url(地址) no-repeat -__px -__px;
b. 测量所需图标的宽高,并将其设置为盒子宽高;
c. 测出所需图片左上角所在坐标,并让整个图片往相反方向移动所测量的坐标位置
12. 布局技巧
1. 商品列中无缝隙但鼠标悬停有盒子边框
a. 利用li两个相邻都有相同像素的左右边框,但重叠颜色加深,使用margin-left: -__px;边框的粗细,使得左边边框向左走边框的像素刚好压住前一边框
b. 若为标准流则添加相对定位,虽然浮动但保留原位置
c. 若无定位则提高它的Z-index(添加到悬停时)
2. 元素围绕元素 (新闻左图右文字案例)
给父盒子宽高,左侧插图片添加浮动,右侧文字添加标准流围绕图片显示,在添加图片的外边距
13. CSS三角形
1. 等腰三角形
<style>
.box {
width: 0;
bottom: 0;
border: 50px solid transparent;
border-left-color: pink; //更改left改变三角形方向
}
</style>
<div class="box"></div>
2. 直角三角形
<style>
.box {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0; //
}
</style>
</head>
<body>
<div class="box"></div>
</body>
14. 阴影
1. 盒子阴影(不占空间,不影响其他盒子)
box-shadow:
水平 //x轴偏移
垂直 //y轴偏移
模糊距离 //阴影模糊范围
大小 //阴影大小
颜色
内外阴影 //inset内阴影
2. 文字阴影
text-shadow: 水平 垂直 模糊距离 颜色;
3. filter: 模糊距离; //给图片添加模糊效果
15. 字体图标
网页下载Http://www.iconfont.cn/
将下载的文件放在需使用的目录下.链入iconfont.css的样式文件
a. 复制粘贴图标对应的编码
设置文字字体font-family: iconfont;
b. 调用对应的类iconfont,在调图标对应的样式icon-
E. 过渡
transition:
(谁过渡加给谁)
过渡属性 //一般用all
花费时间 //
运动曲线
ease渐渐慢下来
linear匀速
ease-in加速
ease-out减速
ease-in-out先加后减
何时开始
案例: (双开门效果)
利用背景图片左上角对齐,添加right使图片只要右边
F. 2D转换
(行内元素转块元素才有效果)
transfrom: translate() rotate() scale(); //同时存在位移在前,顺序不同影响不同的效果
1. 移动
transform: translate(x,y);
a. 若只写一个值则为x轴
b. 若写100%则按参考自身宽高
c. 不脱标,与相对定位类似
d. 不会影响其他元素的位置
e. 实现绝对定位后的元素居中
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
2. 旋转
transform: rotate(45deg); //默认旋转中心点为元素的中心点
切换旋转中心点:
transform-origin: x y; //默认 50%,可添加方位名词
3. 缩放
(针对有阴影的不建议使用,而是直接改变宽高)
transform: scale(x,y);
a. 只写一个值宽高等比缩放
b. 值大于1放大,小于1缩小
4. 渐变
background-image: linear-gradient(方位 , 颜色,颜色) //颜色可多个
to right top
to bottom
G. 动画
(使元素从一种样式变化为另外一种样式的效果)
定义动画
@keyframes ___ {
from{ }
to{ }
}
或
@keyframes 名称 {
0% { }
50%{ }
100% { }
}
调用动画
animation:
名称 zhu
播放时长 2s
播放次数 5/infinite
保持状态 forwards/backwards
是否逆向 alternate
延迟 2s
速度曲线 linear
运动暂停 pause
animation-timing-function: steps(N)； //逐帧动画
H. 3D转换
位移
translate3d (x ,y ,z);
因为电脑是二维画面,需要添加perspective透视产生近大远小的效果 //给父元素添加
perspective: 800-1000px; //值越小,则距离越近则成像越大
旋转
transform:
rotateX();
rotateY();
rotateZ(); //建议单写
(所谓3D必须给父元素添加transform-style: preserve-3d;开启三维空间)
3549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
