柚子快报激活码有没关系的778899分享：前端 css再学习
id选择器的id仅能使用一次；
可去除也可添加加粗效果；
font
行高为数字n时（不添加单位）是浏览器默认font-size的n倍；
行高实现文字垂直居中（仅适应于单行文字）：将line-height设置与height相同；
font-family最后设置一个字体族名，网页开发建议无衬线字体（sans-serif）；
文本缩进text-indent：2em（em为当前标签字号大小）
text-align：center；居中的是内容（属性需要设置给父级），不是标签
text-decoration：下划线
选择器
复合选择器：选择器之间写空格（该选择器下的所有相同的选择器）
子集选择器：>（选择该选择器下的直接子选择器，对再下一层的选择器相同无效）
并集选择器：，（多种标签相同样式）
交集选择器：选择器之间直接连写（标签选择器放在最前面）（选中同时满足多个条件的元素）
伪类选择器：1.鼠标悬停:hover
css特性
继承性：子集默认继承父级的文字控制属性（如果子标签有自己的样式，不继承）
层叠性：相同的属性会覆盖，不同的属性会叠加（后面的覆盖前面的，不同的css都生效）
优先级（权重）：当一个标签使用多种选择器，基于不同的种类的选择器的匹配规则
优先级-叠加计算：如果是复合选择器需要权重叠加计算
!important提权功能，提高权重/优先级 到最高，慎用
背景
背景图默认是平铺（复制）的效果（background-repeat：repeat）
显示模型
block：独占一行，宽高属性生效，默认宽度是父级的100%（块级无法右对齐，因为元素独占一行）
inline-block：一行内有多个，宽高属性不生效，宽高由内容撑开
inline：一行共存多个，宽高属性生效，宽高默认由内容撑开
结构伪类选择器
根据元素结构关系查找元素
E:first-child：查找第一个E元素（last-child、nth-child(N)）
E:before（after）在E元素里面最前（后）面添加一个伪元素
必须设置content:''属性，用来设置伪元素的内容，如果没有内容，则引号留空即可（没有content则不生效）
伪元素默认是行内显示模式
权重和标签选择器相同
盒子模型
boder：solid（实线）、dashed（虚线）、dotted（点线）
尺寸计算：border和padding都会撑大盒子（盒子尺寸可通过内减模式box-size:boder-box来计算）
版心居中：margin：0 auto；（盒子必须要有宽度）
控制溢出元素（overflow）：hidden溢出隐藏，scroll溢出滚动（无论是否溢出都显示滚动条位置），auto溢出滚动（溢出才显示滚动条位置）
外边距问题：
合并现象：垂直排列的兄弟元素，上下margin会合并，导致取两个margin中的较大值生效
解决方法：上下都有margin时（两盒子之间的间距），直接设置一个盒子的margin时，只设置一个盒子的margin值
塌陷问题：父子级标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动
解决方法：1.取消子集margin，设置父级padding 2.父级设置overflow：hidden 3.父级设置boder-top（2，3找到父级的正确位置，只让子集增加外边距向下移动）
行内元素内外边距问题：
行内元素添加margin和padding无法改变元素垂直位置（只改变了水平位置），给行内元素添加line-height改变元素垂直位置
圆角：设置元素的外边距是圆角（boder-radius）10px/10%圆角半径；从左上角开始赋值，没有值的角和对角使用相同值（最大值是50%，超过50%没效果）
正圆形状：给正方形的盒子设置圆角属性值为宽高的一半/50%（圆形头像）
胶囊形状：给长方形的盒子设置圆角属性值为盒子高度的一半（按钮）
阴影：给元素设置阴影效果（boxshadow）属性值：x偏移量 y偏移量 模糊半径 扩散半径 颜色 内外阴影（x、y必须写，默认是外阴影，内阴影添加inset）
标准流（文档流）：标签在页面中默认的排布规则（块独占一行）
浮动
让块级元素水平排列（float） left左，right右 （顶对齐，具有行内块显示模式；浮动的盒子会脱离标准流）（如果父级的宽度不够，浮动的盒子会掉下来）
清除浮动：浮动元素会脱标，父级元素没有高度， 子级元素无法撑开父级高度（导致页面布局错乱）
解决方法：
1.额外标签法：在父元素内容的最后添加一个块级元素，设置css属性为clear：both（还有单left和right，可以不用区分直接写both）
2.单伪元素法：给父级增加clearfix样式
3.双伪元素：给父级增加clearfix样式（after清除浮动，before解决外边距塌陷）
4.overflow：父元素添加css属性：overflow：hidden
flex布局
flex布局是适合结构化布局，提供强大的空间分布和对齐能力；不会产生浮动布局的脱标。
给父元素添加display:flex；子元素可以自动挤压或拉伸；子元素沿着主轴排列，主轴默认是水平方向
justify-content：center为居中（主轴居中）
align-items：center居中（侧轴居中）
space-between：子元素之间的间距相等；around：间距出现在子元素两侧，视觉看着两元素之间的间距是两端间距的两倍；evenly：各个间距相等
弹性盒子在侧轴没有尺寸才能拉伸
修改主轴方向 垂直方向，侧轴自动变换到水平方向
flex：弹性伸缩比，控制弹性盒子的主轴方向的尺寸；整数数字，表示占用父级剩余尺寸的份数
默认情况下，主轴方向尺寸是靠内容撑开，侧轴默认拉伸
弹性盒子换行：弹性盒子可以自动压缩或拉伸，默认情况下，所有弹性盒子都在一行显示
flex-wrap：wrap；（换行）nowrap（不换行 默认）
行对齐方式对单行弹性盒子不生效
vertical-align：行内块和行内垂直方向对齐方式；middle：居中
定位
灵活改变盒子在网页的位置position
relative:(相对定位)1.改变位置的参照物，自己原来的位置；2.不脱标，占位；3.标签显示模式特点不变
absolute（绝对定位）:1.参照物：先找最近的已经定位的祖先元素；若所有祖先都未定位，参照浏览器可视区改位置；2.脱标，不占位；3.显示模式特点改变，宽高生效（具备行内块特点）
绝对定位的居中：top:50%；left:50%;（margin-left和margin-top分别为尺寸的一半；）后面也可（transform：translate(-50%,-50%)(推荐)）
fixed（固定定位）：1.参照物：浏览器窗口；2.脱标，不占位；3.显示模式特点：具备行内块特点
堆叠层级z-index：默认是按照标签书写顺序，后来者居上；作用：设置定位元素的层级顺序，改变定位元素的显示顺序（默认是0，取值越大显示顺序越靠上）
css精灵
网页图片应用处理方式，把网页中的一些背景图整合到一张图片文件中，再background-position精确定位出背景图片的位置；优点：减少服务器被请求的次数，减轻服务器压力，提高页面加载速度
如果要调整字体大小，注意 选择器的优先级 要高于iconfont类
垂直对齐方式：vertical-align：处理行内块、行内标签文字的对齐方式
浏览器把行内块、行内标签当做文字处理，默认按基线对齐，导致图片img下方留有空白，转块级后不按基线对齐，空白消失
过渡transition：可以为一个元素在不同状态之间切换的时候添加过渡效果
透明度opacity：设置整个元素的透明度（包含背景和内容）0为完全透明（元素不可见），1为不透明，0-1半透明
光标类型cursor：鼠标悬停在元素上时指针显示样式
渐变linear-gradient
平面转换transform
为元素添加动态效果， 一般与过渡配合使用；改变盒子在平面内的形态（位移、旋转、缩放、倾斜）；2D转换
平移实现定位居中
双开门代码案例：
当是一条线，比如时针的旋转中心设置为transform-origin：center bottom
平面转换-多重转换：（以第一种转换形态的坐标轴为准）先平移再旋转 transform：translate() rotate()；否则先旋转会改变坐标轴向
平面转换-缩放：
渐变
多个颜色逐渐变化的效果，一般用于设置盒子背景
透明是transparent
空间转换（3D转换）transform
是坐标轴角度定义的x、y、z三条坐标轴构成的立体空间，z轴位置与视线方向相同
视距perspective：指定了观察者与z=0平面的距离，为元素添加透视效果（近大远小、近实远虚）给父级添加，取值范围建议800-1200
空间转换-旋转：
z轴：rotateZ(值)；由于旋转中心点是盒子重叠，因此与平面旋转效果一样
立体呈现-transform-style
设置子元素是位于3D空间（preserve-3d）中还是平面（flat）中；
立方体每个面都有独立的坐标轴，互不影响
动画-animation
过渡：实现两个状态之间的变化过程
动画：实现多个状态之间的变化过程，动画过程可控（重复播放，最终画面、是否暂停）
实现步骤：
1.定义动画
百分比是动画时长的百分比
2.使用动画
animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
速度曲线：linear匀速 分步动画steps()(可配合精灵图实现精灵动画)
重复次数：infinite无限循环
动画方向：alternate反向
执行完毕时状态：forwards结束状态 backwards(默认)开始状态
无缝动画原理：复制开头图片到结尾位置（图片累加宽度=区域宽度）
逐帧动画：steps()逐帧动画；css精灵图
动画-多组动画：animation：动画1，动画2，动画N；
若动画开始状态样式和盒子默认样式相同，可省略动画开始状态的代码
移动端
分辨率
硬件分辨率-物理分辨率（出厂设置） 缩放调节分辨率-逻辑分辨率（软件/驱动设置）
视口：手机屏幕尺寸不同，网页宽度均为100%；网页的宽度和逻辑分辨率尺寸相同；
显示html网页的区域，用来约束html尺寸；
width=device-width：视口宽度=设备宽度
initial-scale=1.0：缩放1倍（不缩放）
二倍图
设计稿中每个元素的尺寸的倍数；作用：防止图片在高分辨屏幕下模糊失真
适配方案：
宽度适配：宽度自适应（百分比；flex布局）
等比适配：宽高等比缩放（rem，vw）
0
less
less除法：可使用小括号（）；也可使用./直接进行除法
如果表达式中有多个单位，最终css里面以第一个单位为准
&表示当前选择器，代码写到谁的大括号里面就表示谁->不生成后代选择器；配合hover伪类或nth-child()结构伪类使用
适配方案：相对单位；相对视口的尺寸计算结果；
vw：viewport width；vh：viewport height；两者都是相对视口宽高计算结果，可以直接实现移动端适配效果
vw布局：
1.确定设计稿对应的vw尺寸（1/100视口宽度）
查看设计稿宽度➡确定参考设备宽度（视口宽度）➡确定vw尺寸（1/100视口宽度）
2.vw单位的尺寸=px单位数值/（1/100视口宽度）
vh单位问题：
思考：开发中，vw和vh不能混用；vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
object-fit：cover；cover完全覆盖；缩放img，图片比例跟父级盒子比例不同，避免图片积压变形
响应式网页
1.媒体查询
max-width：最大宽度；（小于等于）min-width：最小宽度；（大于等于）
2.bootstrap
柚子快报激活码有没关系的778899分享：前端 css再学习
精彩链接
发表评论