宽高可以设置长度单位(px)或者百分比（将图片放大或者缩小至原来的百分之多少）；提倡指定宽高其中一个值，防止失真
cover:等比例缩放，宽高都满足的缩放，溢出部分会被隐藏
contain:等比例缩放比例，宽高其中一个和盒子一样大就不再缩放了，保证图片完整显示在背景区域，但是背景会有部分裸露
多背景图片：一个元素是可以设置多背景图片的，属性间用逗号隔开，当存在重叠关系时，前面的图片会覆盖后面的图片，为避免背景色把图片盖上，背景色通常都定义在最后一组上。
一般来说，背景图片适合做一些小图标使用；产品展示之类的就用插入图片。

text-decoration

文本装饰，通常用于给链接修改装修效果 none | underline | overline | line-through

选择器

根据特定规则选择一部分标签的样式规则

标签选择器：标签名 {值对}

类选择器：.类名 {值对}

多类名选择器

ID选择器：#ID值 {值对}

通配符选择器：* {值对}

伪类选择器：：{值对}

链接伪类选择器

【lvha，顺序不可颠倒】

:link :未访问的链接
:visited ：已访问的链接，点击过一次
:hover ：鼠标移动到链接上
:active ：选定的链接，点击别松开

结构伪类选择器【存在兼容问题】

:first-child:第一个孩子
:last-child:最后一个孩子
:nth-child(n):从第一个孩子开始数，选择第n个孩子（even:偶数 odd:奇数 n从0开始 2n是偶数 2n+1奇数）
:nth-last-child(n):从最后一个孩子开始数

目标伪类选择器

:target:当前活动目标元素

样式表

内部样式表

一般放head中间

行内样式表

属性部分 style=“属性值对;”

外部样式表

外链式 <link rel="stylesheet" href="" />

标签的显示模式Display

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素；

块元素：h,div,p,ul,ol,li等;

默认通栏
p,h,dt都属于文字类块级元素，它里不能放块级元素

行内元素：a,strong,b,em,i,del,s,ins,u,span等；

宽高设置无效；
行内元素里面只能放文本和行内元素，不能放块级元素；（特殊a）
链接里面不能再次放a；

行内块元素：img,input,td

可以设置宽高
类型转换：
- 块标签模式转行内模式：display：inline；
- 行内模式转块标签模式：display：block；
- 块、行内模式转化为行内块模式：display:inline-block;

复合选择器

交集选择器

即..又..，语法：标签选择器类选择器 {值对}（紧跟）

并集选择器

如果选择器里面内容完全一样或者部分一样，语法：选择器，选择器，选择器{值对}（逗号隔开）

后代选择器

语法：父子孙{值对}（空格隔开）

子元素选择器

语法：父>子{值对}（>隔开）

属性选择器

选取某些带有特殊属性标签的选择器，语法：

[属性] {值对}	含某属性
[属性=值]{值对}	某属性值等于某值
[属性*=值]{值对}	某属性值含有某值
[属性^=值]{值对}	某属性值开头含有某值
[属性$=值]{值对}	某属性值结尾含有某值

伪元素选择器（CSS3）

::first-letter:文本的第一个单词或字
::first-line:文本的第一行
::selection:选中文字时候改变的样式
::before/::after:在盒子div的内部前面或者后面插入值，语法： ::brfore{content:"值";} 本质上是添加了一个元素（标签、盒子）只不过是行内元素

CSS书写规范

空格规范

选择器与{}之间必须包含空格
属性名与：之间不可有空格，：与属性值之间必须有一个空格

选择器规范

包含多个选择器时，每个选择器声明必须独占一行

选择器的嵌套层级应不大于3级，位置靠后的限定条件尽可能精确

属性规范

属性单独占一行
属性必须分号结尾

三大特性

层叠性

多种CSS样式叠加时候，相同权重选择器下一个新的属性会把上面写的属性给覆盖掉

继承性

子标签会继承父标签的某些样式【继承的样式：text-,font-,line-这些元素开头的都可以继承，以及color属性】

优先性

我们用一个四位数的字符串来表示，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越；

继承或者*	0,0,0,0
每个元素	0,0,0,1
每个类	0,0,1,0
每个ID	0,1,0,0
每个行内样式	1,0,0,0
每个!important	∞无穷大

权重叠加：权重相同时候，采取就近原则

ul li{ /*权重： ul 0,0,0,1 li 0,0,0,1 总权重：0,0,0,2*/

}

li{ /*权重：0,0,0,1*/

}

margin:0;

padding:0;

}

*行内元素只有左右外边距，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。以值大的为准

父子关系，父元素上外边距和子元素上外边距发生合并，即使父元素的上边距为0，也会发生合并，外边距合并解决的两个方法：1.给个border 或者padding;2.添加overflow：hidden；

CSS3定位机制

盒子模型（Box Model）

--普通流（标准流/文档流）

盒子边框(Border)

border:border-width|border-style|border-color
- (上：border-top-（width/color/style）下：border-bottom-（width/color/style）)
- 简写：border/border-top/border-bottom:1px solid red;
- 表格边框：border-collapse:collapse;
- 圆角边框（CSS3）：radius半径（距离）语法：border-redius：上下左右
  - *取宽度和高度的一半（写精确数或者50%），就会变成一个圆形；
  - border-radius:左上角右下角右上角左下角
  - border-radius:左上角右上角左下角右下角
  - border-radius:左上角右上角右下角左下角

内边距(padding)

上：padding-top 下：padding-bottom 左：padding-left 右：padding-right
简写：
- padding: 上下左右；
- padding:上下左右；
- padding:上左右下；
- padding:上右下左

外边距（margin）

简写：类似上面padding
实现盒子居中对齐*
1. 必须是块级元素
2. 盒子必须指定了宽度，左右设置为auto
清除内外边距
外边距合并
盒子的计算尺寸
空间尺寸：width+border+padding+margin;
内盒尺寸：width+border+padding;（元素实际大小）
*如果一个盒子没有给定高度/宽度或者继承父亲的宽度/高度，则padding不会影响盒子大小；
- 盒子模型布局稳定性：width>padding>margin
  - 宽度剩余法
- CSS3盒模型
  - box-sizing:content-box; 盒子大小为width+border+padding
  - box-sizing:border-box; padding和border都不会撑开盒子了，盒子大小为width
- 盒子阴影：语法：box-shadow：水平位置垂直位置模糊距离阴影尺寸阴影颜色内/外阴影（内阴影用inset，外阴影用默认，不可使用outset）前两个必须写，其他可省略

浮动(float)

left,right,none（none）浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动

浮动首先要创建包含块的概念，也就是说，浮动的元素总是找离他最近的父级元素对齐，但不会超过内边距的范围；
浮动元素的排列位置与其上一元素有关系，
- 如果上一元素浮动，此元素不浮动，则此元素与上一元素重叠；
- 如果上一元素不浮动，此元素浮动，则上一元素为标准流占一行，此元素的顶部与上一元素底部对齐；
- 如果两者都浮动，则其顶部与上一元素的顶部对齐；
浮动影响盒子的显示模式：元素加上浮动后，会具有行内块特性

定位

元素的定位属性
- 边偏移：top、bottom、left、right
- 定位模式(定位的分类)position:
  - static:静态定位，默认，对于边偏移无效；一般用来清除定位的，一个原来有定位的盒子，不想加定位了，用此；
  - relative：相对定位，可以通过偏移量来移动位置，但是原来所占的位置，继续保留；移动的位置，是以自己的左上角为基点移动
  - absolute：决对定位，是完全脱标的，不占有位置；
    - 父亲无定位，则以浏览器为基准
    - 父亲有定位，则以最近的父亲为基准（父亲为固定，相对，绝对）
    - 子绝父相
    - 加了绝对定位的盒子，margin左右auto进行居中失效
    - 绝对定位盒子水平/垂直居中
      1. 首先left设为50%，先走父盒子的一半
      2. 然后走自己外边距负的一半值就行了margin-left
  - fixed：固定定位，以浏览器窗口作为参照物来定义网页元素，完全脱标，不占有位置
- 叠放次序：z-index；数字越大越居上，取值相同，后来居上，只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性；
- 元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，因此添加了绝对定位或者固定定位或者浮动后，可以不用转换模式，直接给高度和宽度就可以了。

元素的显示与隐藏

display:none;隐藏元素，不保留位置 display：block；显示元素
visibility：hidden;隐藏元素，保留位置 visibility:visible；显示元素
overflow：是否溢出
- visible：默认
- auto：自动，超出部分会显示滚动条，不超出不显示
- scroll：一直显示滚动条
- hidden：溢出隐藏

CSS高级技巧

CSS用户界面样式

鼠标样式cursor：default 小白 | pointer 小手 | move 移动 | text 文本
轮廓线outline：赋值类似border，一般都是去掉的，outline：0/none；
防止拖拽文本域resize：none；
vertical-align：不影响块级元素的内容对齐，只针对行内元素或者行内块元素的对齐，通常用来控制图片/表单与文字的对齐；图片和文字默认的是基线对齐

去除图片底侧空白缝隙：图片或者表单等行内块元素，底线会和父级盒子的基线对齐，解决方法：将行内块元素转化为块级元素；或者将 vertical-align改为top或者middle；
自动换行word-break：break-all（允许单词内换行）| keep-all（不允许拆开单词显示，半角空格和连字符特殊an-dy）【针对英文】
white-space：normal（正常）|nowrap（强制一行显示），直到文本结束或者br标签才会换行
文字溢出text-overflow:clip（不显示省略标记，简单的裁剪）|ellipsis（文本溢出时，显示省略标记）【一定要强制一行内显示，再和overflow属性搭配】
精灵技术sprite：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）；
- 本质：简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的零星背景图像都集中到一张大图上去，将大图应用于网页，当用户访问该页面时，只需向服务器发送一次请求，图像即可全部展示出来，下次取缓存即可。由多个很小的背景图像合成的大图被称为精灵图。
- 使用：通过设置CSS的background-image、background-repeat和background-position属性来进行背景定位，最关键的是通过background-position属性精确地定位；
字体图标iconfont：
- 优点：本质是文字，可以随意的改变颜色、产生阴影、透明效果等，也可以做跟图片一样的事情，改变透明度，旋转等；体积小，信息并没有削减；几乎所有浏览器都支持，移动端设备必备良药...
- 流程：
  1. UL设计字体图标效果图（svg）；
  2. 前端人员上传生成兼容性字体文件包；【推荐网址：(国外)http://icomoon.io,(国内)http://www.iconfont.cn】
  3. 前端人员下载兼容性字体文件包到本地；
  4. 把字体文件包引入到HTML页面中；
    1. 声明字体；
    2. 给盒子使用字体；
    3. 盒子里面添加结构；
- 替换新图标：导入selection.json,追加重新下载；
滑动门：使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门；
- 核心技术：精灵技术+padding撑开宽度
- a>span
过渡（CSS3）:使用transition来实现补间动画，实现平滑的过渡，一般搭配hover使用；
- 语法：transition：要过渡的属性花费时间运动曲线何时开始；(写到元素样式内，不要写到hover内)；谁做动画，谁加过渡
- transition-property：要过渡的属性（多属性用逗号隔开：例如：transition:width 0.6s ease 0s , height 1s ease-in 1s;）（所有属性都变化，使用all就可以了）
- transition-duration：花费时间，单位是s
- transition-timing-function：运动曲线，默认值是ease
- transition-delay：何时开始

版心和布局流程

版心是指网页中主题内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px，980px，1000px，1200px等。
布局流程
1. 确定版心；
2. 分析页面中的行模块，以及每个行模块中的列模块；
3. 制作HTML结构；
4. CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
一列固定宽度且居中
两列左窄右宽型
通栏平均分布型

清除浮动

清除浮动的本质：清除浮动造成的影响；为了解决子级浮动造成的父级元素内部高度为0的问题；
很多情况下父级盒子不方便给高度，考虑孩子高度会变
语法：选择器{clear:属性;} 属性：left/right/both
1. 额外标签法：在浮动盒子后面添加一个空盒子：<div style="clear:both"></div>（不推荐）
2. 父级添加overflow属性，通过触发BFC的方式清除浮动效果，属性值：hidden|auto|scroll
3. after伪元素清除浮动：
  1. .clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}(兼容性)
  2. ie6.7需要另外添加.clearfix{ *zoom:1; /* *代表ie6.7能识别的特殊符号，zoom是ie6.7清除浮动的方法 */}
4. 使用before和after双伪元素清除浮动
  1. .clearfix:before,.clearfix:after{content:"";display:table;/*触发bfc 防止外边距合并*/}
  2. .clearfix:after{clear:both;}
  3. .clearfix{*zoom:1;}

2D变形（CSS3）transform

transform可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
功能：
- 移动translate(x,y)：xy取值是以px为单位
  - transform：translate(x,y); //xy同时移动
  - transform：translate(x); //x移动
  - transform：translate(0，y); //y移动
  - transform：translateX(x); //x移动
  - transform：translateY(y); //y移动
  - transform：translate(50%); //走盒子自身宽度的50% %不以父级宽度为准，以自身宽度为准
  - 升级版定位的盒子居中对齐
    - position：absolute；
    - left:50%
    - transform:translate(-50%);
- 缩放scale(x,y)： xy取值为倍数之意
  - scale(x,y); //x，y默认取值为1，取值在0.01-0.99之间是缩小的倍数，在大于等于1.01是放大的倍数
  - scale(x); //宽高等比例缩放
  - scaleX(x);
  - scaleY(y);
- 旋转rotate(deg):正值是顺时针，负值是逆时针；
  - rotateX(deg); //绕着X轴旋转
  - rotateY(deg); //绕着Y轴旋转
  - rotateZ(deg); //绕着Z轴旋转
  - transform-origin：可以调整元素转换变形的原点；
- 倾斜skew(deg,deg)

3D变形(CSS3) transform

透视perspective：视距表示视点距离屏幕的长短，透视使得图像更具有立体感；透视原理是近大远小；写到父级里面；视距越大效果越不明显，视距越小，效果越明显
透视是眼镜到屏幕的距离，translateZ是物体到屏幕的距离；Z轴是来控制物体近大远小的具体情况；translateZ越大，我们看到的物体越近，物体越大；
transform:translate3d(x,y,z); //x和y可以是px，也可以是%；z只能是px；
backface-visibility：定义当元素不面向屏幕时是否可见；
如果有多组变形，都属于transform，那用空格隔开就好了；

动画 animation

引用动画语法：animation：动画名称动画时间运动曲线何时开始播放次数是否反方向；
定义动画语法：
- @keyframes 动画名称 {from {} to {}}
- @keyframes 动画名称 {0%{} 50% {} 100%{}} //百分比
- infinite:无限循环

伸缩布局（CSS3）

伸缩布局模式：display:fix; 在盒子里按照给予的fix:1；按照份数比例分配
min-width：最小宽度值
max-width：最大宽度值
flex-direction：row/column;调整主轴方向。加在父级盒子里
justify-content：调整主轴对齐；
align-items:调整侧轴对齐（垂直对齐）；（单行）
flex-wrap：控制是否换行；
align-content；（多行）（必须对父级使用display:flex;和flex-flow:row wrap;不用不起效果）
flex-flow：是flex-direction、flex-wrap的简写形式；
order：用css来控制盒子的前后顺序；数值小的排在前面，可以为负值，默认值为0；

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/295734

CSS基础知识点大全_display fix在最下

基本概念

样式属性

字体样式属性font

font-size

font-family

font-weight

font-style

外观属性

color

line-height

text-aligh

text-indent

letter-spacing

word-spacing

颜色半透明(CSS3)

文字阴影(CSS3)

CSS背景background

background-color

background-image

background-repeat

background-position

background-attachment

背景透明 (CSS3)

背景缩放 (CSS3)