【css】元素样式大全

不会就问就查询！科技利民，学海无涯²！

一、CSS元素类型

1、分类

• 按显示方式：块级元素、行内级元素

• 按内容方式：替换元素、非替换元素
  

2、display属性：分类的实现
用于元素的显示方式。

• display属性的常见4种取值：

display:block;//设置块级元素，类似的也有：
display:inline;//元素默认，用于设置行内级元素
display:inline-block;//设置为行内块级元素
display:none;//用于隐藏元素，并不占页面空间

• display的补充

浏览器默认给元素加的display样式
display:table;//table元素
display:table-row;//tr元素
display:table-cell;//td元素
display:list-item;//li元素

• inline-block特点

特点：
跟其他行内级元素在同一行显示；
可以随意设置宽高；
默认宽高由内容决定；
可以理解为：
对外是行内级元素；
对内是块级元素；
常见用途：
让行内级非替换元素（a、span等）可以设置宽高；
让块级元素（div、p等）能够跟其他元素在同一行显示。

3、visibility属性
用于元素的显示与隐藏。

与display：none；区别：
visibility设置隐藏时，元素看不见，但依旧占着原来的位置；
display设置隐藏时，元素看不见，不会占着任何位置，相当于删除。

visibility:hidden;//隐藏元素
visibility:visible;//显示元素，默认值

4、overflow属性
用于控制内容溢出时的行为。

overflow:visible;//默认值，超出div溢出的内容照样可见；
（会挡住div下面的块级元素的背景，文本还是可以看见；行内级元素在图片上方）
overflow:hidden;//超出部分直接裁剪
overflow:scroll;//超出部分不可见，但可以通过滚动条在区域内滚动查看,滚动条占宽高，内容会被覆盖一些
overflow:auto;//内容超出时出现滚动条，不超出正常显示。

还有overflow-x、overflow-y属性，用于设置水平、垂直方向的溢出后行为，一般用得少，因为有的浏览器还可能不支持。

5、元素之间的空格
行内级元素（包括inline-block元素）的代码之间如果有空格，会被解析显示为一个空格。

解决方案：

• 元素代码之间不要留空格；
• 注释掉空格；
• 设置父元素的font-size=0，然后在元素上重新设置所需font-size
• 给所需元素都加float属性，脱离标准流；（常用）

二、盒子模型

Html中每个元素都可以看做是一个盒子。

1、content内容，padding内边距，border边框，margin外边距

对于行内非替换元素：a、span、strong、label、

因为宽高不能用，
padding属性左右效果正常，但是上下显示也正常但是不占据空间只是表象；
margin只有左右效果，上下方向没有效果；
边框效果与padding类似；显示正常，但上下边框不占空间

对于行内替换元素：img、input、

• 因为宽高可以使用，所以padding、margin属性在上下左右效果正常，占空间，边框及以内背景色；
• 宽高为内容的；

对于块级元素：div、h1~h6、p、hr、form、ul、ol、li

• 块级元素效果正常，边框内为背景色，边框的颜色覆盖背景色；
• 垂直方向两个块级元素的外边距会重叠，以较大的外边距为实际间距；
• 宽高为内容的；

注：宽度等于边框的距离，需要设置： box-sizing: border-box;

2、盒子模型常见属性
：margin、padding的百分比参照父元素的宽度；
百分比参照自身的是：transform：translate（50%）；

width:20px;//宽度
min-width:20px;//最小宽度
max-width:20px;//最大宽度
height:20px;//高度
min-height:20px;//最小高度
max-height:20px;//最大高度
----
margin: 5px;//一般用于兄弟的间距
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px/50%;//百分比相对于父元素大小
----
padding: 5px;//一般用于父子间距
paddign-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px/50%;//百分比也是相对于父元素大小
----
border: 1px solid #000;//边框，不区分顺序

3、父子元素：上下margin-top/bottom传递

情况一：当两块级元素是父子关系时，子元素与父元素顶部线重叠时，子元素的margin-top会传递给父元素，自身没效果；
情况二：子元素的底部线与父元素底部线重叠，且父元素高度是auto，子元素的margin-bottom会传递给父元素，自身就没效果了；

解决：

• 给父元素设置padding-top、padding-bottom，形成间距；
• 给父元素设置边框border；
• 触发bfc（block format context 块级格式化上下文），给父元素加结界，让父元素不受子元素影响；
  • 父元素中设置浮动float属性、绝对定位(positon)、固定定位(position)、inline-block(display)、flex(display)都可（副作用：脱流、行内级效果等，父元素由内容撑起）；
  • 父元素设置overflow属性，值非默认值visible即可，一般为hidden，不会有副作用；

4、兄弟元素：上下margin重叠（collapse）

垂直方向两个块级元素的下外边距与上外边距会重叠，以较大的外边距为实际间距；

解决：只设置其中某一个元素的外边距；

5、边框border属性
应用：
实现三角形、箭头：（前提块级元素宽高=0）

• 通过四条边框，设置三条透明；
• 通过两条边框，设置一条透明；

 .box{
    margin: 20px;
    border-top: 100px solid transparent;//其中一个设置透明
    border-left: 100px solid #900;
    width: 0;
    height: 0;
    transform: rotate(-45deg);
  }

6、边的圆角属性：border-radius：50%（参考显示宽度：width+padding+border）
左上：border-top-left-radius
右上：border-top-right-radius
左下：border-bottom-left-radius
右下：border-bottom-right-radius

border-radius: 20px;//四个角都是圆角
border-top-left-radius: 20px 30px;//左上：左20px上30px，椭圆角

7、outline属性
效果：不占标准流空间；默认显示在border外面。
用途：

• 去除a元素、input元素、textarea元素的focus效果；
  a,input,textarea{outline:none;}
• 页面调试时查看元素；
  div{outline:1px solid #000;}

三、盒子背景设置

1、阴影

box-shadow: 5px 5px;
box-shadow:inset 5px 5px 5px 5px #009;

2、文字阴影：text-shadow

text-shadow:5px 5px 5px #009;//没有延伸距离，没有inset

适用于::first-line、::first-letter；

3、盒子尺寸：box-sizing
box-sizing:content-box;//宽度不包括内边距及边框（W3C标准盒子模型）
box-sizing:border-box;//宽度包括内边距及边框（IE8以前的浏览器）

4、水平居中效果
普通文本：text-align:center;（父元素）
行内元素：text-align:center;（父元素）
行内替换元素：text-align:center;（父元素）
行内块级元素：display:inline-block;（自身）text-align:center;（父元素）
块级元素（不是内部文本）：margin:0 auto;（自身）

5、背景图片：background-image、background-repeat、background-size、background-position

background-image: url(""),url("");//类似进栈展示，第一张在最上面，不能显示，就会显示第二张；
background-repeat: no-repeat;//背景图片不平铺
background-repeat:repeat-x;//横轴平铺
background-repeat:repeat-y;//纵轴平铺
background-repeat:repeat;//默认值，平铺，不写这个属性就是平铺效果
background-size: cover;//图片等比拉伸填充背景
background-size: contain;//图片拉伸到一边到头即停止，正常全部展示，不一定覆盖背景空间
background-size: 30% 50%;//占背景的百分比，宽占总宽30，高占50，写一个就是宽，高自适应
background-size: 50px 60px;//宽 高
background-position: center/left/right center/top/bottom;//默认值居中,位置居中，宽 高
background-position: 10px 10px;//宽的开始点 高的始点

6、CSS Sprite精灵图、雪碧图（ps）
：是一种CSS图像合成技术，用于将小图片集中在一张图上，然后通过css背景定位（background-position）展示对应部分；

• 减少网页的http请求，加快网页访问速度，减轻服务器负担；
• 减少图片总大小
• 解决图片太多不好命名问题

7、背景依托：background-attachment

background-attachment:local;//背景图跟随元素内容滚动
background-attachment:scroll;//默认值，跟随元素移动
background-attachment:fixed;//相对于浏览器窗口固定在那

8、背景属性缩写

background: image position/size repeat attachment color;
//size要写必须写在position后面；都可以省略；

9、background-image与img
10、光标的样式：cursor

cursor:auto;//浏览器决定指针样式
cursor:default;//操作系统决定，一般是小箭头
cursor:pointer;//小手，也是移动到链接上的默认样式
cursor:text;//竖线，文本输入框的默认样式
cursor:none;//没有任何指针显示在元素上

四、标准流、定位

1、标准流Normal Flow（常规流、正常流、文档流【document flow】）

• 从左到右、从上到下按顺序摆放
• 默认情况下，互相之间不存在层叠现象（指兄弟元素之间）

2、利用margin、padding定位
在标准流中，可以使用内外边距定位；
缺点：

• 设置某元素边距，通常会影响到标准流其他元素的定位效果；
• 不便于实现兄弟元素层叠效果

3、利用position属性定位

• 静态定位、相对定位，无论设置属性还是值（left、right、top、bottom）都不影响标准流；
• 绝对定位、固定定位只要设置就会影响标准流；只是默认位置是标准流中原来的位置而已。

position:static;//默认值，静态定位，还在标准流（left、right、top、bottom没有效果）

position:relative;//相对定位，不脱离标准流，该占整行占整行，原有位置一直占着（子绝父相的由来），单纯设置这个属性，不影响其他标准流；
//left、right、top、bottom相对于自身位置，位移前自身位置依旧保存，
位移后的元素相当于悬浮移动，不影响其他元素，可以实现层叠；left/righr、top/bottom这种相对的属性只能同时使用一个；

position:absolute;//绝对定位，设置后脱离标准流，宽高由内容，不占原来位置，默认先在原有位置上方；
//left、right、top、bottom相对于参考的上级非static元素或浏览器视口；可以使用z-index属性；脱离标准流，但是不设置位置时，还在标准流所在位置，只是位置是虚的，会被其他元素占用，相当于悬浮在上面；

position:fixed;//固定定位,设置后脱离标准流，不占原有位置，默认在原有位置上方；
//left、right、top、bottom的设置相对于浏览器视口(viewport)；

4、脱离标准流元素特点（flex布局没有脱离标准流）

原本为inline、inline-block、block的元素脱标后为block块级元素；只不过没有参考的父元素，不再占据整行，宽度由内容决定。

• 可以随意设置宽高，一般变为块级元素
• 宽高默认由内容决定，不占据整行，所以不能直接用margin：0 auto；水平居中；
• 不再受标准流的约束
• 不再与父元素有关联

5、绝对定位公式

• left、right：auto；浏览器不会平分；
• margin：auto；浏览器会平分；
• margin默认为0；
  
  6、绝对定位元素的层叠顺序
  

五、浮动float属性

CSS中3种常用方法对元素进行定位与布局

• normal flow ：标准流、常规流、文档流（同类间不层叠）
• absolute positioning：绝对定位（absolute、fixed）
• float：浮动定位（同类间不层叠）

层叠高低：浮动定位>绝对定位>标准流

绝对定位、浮动定位让元素脱离标准流，宽高自身内容决定，不占据整行，实现更灵活的布局。

1、三个取值：

float:none;//默认，不浮动
float:left;//向左浮动
float:right;//向右浮动

2、六条规则：

• 脱离标准流，朝着向左/向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止；
• 浮动元素不能与行内级内容层叠，行内级内容会被浮动元素推出；（行内级元素、inline-block元素、块级元素的文字内容）–【图文环绕】
• 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐；
• 如果元素向左/右浮动，浮动后的元素边界不会超出包含块的边界；
• 浮动元素之间不能层叠；
• 浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端。

3、display:inline-block水平布局的缺陷

• 代码换行引发元素间空隙（与font-size有关）；
• 元素中有文本，对齐方式会沿基线对齐；（与vertical-align: baseline;有关）

4、浮动的应用

• 解决行内级元素、inline-block元素的水平间隙问题
• 布局

5、margin负值的应用

• 可用宽度：实际占据的宽度，没占据的可以被其他元素占据；影响布局；
• 展示宽度：通过margin负值，可以比可用宽度大，但是多出去的不占空间；影响展示；
• 父元素的展示宽度（width属性）为子元素的可用宽度。

问题描述一：
在进行布局时，同一行多个元素摆放后，设置margin-right让它们之间产生间距，那么最后一个元素设置的右边距总是多余的，怎么处理？

解决方案：

• 方案一：每一行最后的元素，单独再加一个类，去除这个margin-right；
• 方案二：通过伪类选择器；（兼容性问题：IE8以上才支持）
• （最优）方案三：利用margin负值；
  .container固定宽度>.wrap过渡层auto宽度+margin负值>很多的item占据的是.wrap的宽度
  • .container：外层div，设置固定宽度，用于居中显示；
  • .wrap：关键过渡div，不设置宽度，总宽度（可用宽度）继承，内容宽度（展示宽度）用于内部浮动元素做可用宽度（内部浮动元素在可用宽度基础上做展示）；

width of block（实际可用宽度/只能继承上一级展示宽度/浏览器视口） = content width(设置的展示宽度/auto/不能继承) + padding width（默认0） + border width（默认0） + margin width（默认0，用于补差）

问题描述二：
浮动元素设置边框时的中间边框重复问题？
解决方案：
给浮动元素设置margin-right：-1px；让边框重合；浮动元素的内容宽度是定值不变（可用宽度变小了），只是少占据了包含块1px的宽度，导致其他浮动元素左移覆盖；

6、清除浮动

浮动引发的不足：
浮动元素脱离标准流，不再向父元素汇报高度，父元素无法计算浮动子元素的高度，如果不设置高度没法被浮动子元素撑起来，导致高度坍塌问题；
清楚浮动目的：
让父元素计算总高度时，把浮动子元素的高度也计算进去，便于页面布局。
清楚浮动方案：

• 给父元素设置固定高度（不推荐）；
• 利用clear样式属性，给空div元素设置，来做浮动元素结尾分割（可以写在父元素内或外）（不推荐）；
• 利用br标签的clear属性，类似clear样式效果（可以写在父元素内或外）（不推荐）；
• 利用伪元素+clear属性，给某个类添加伪元素，后续谁需要谁添加这个类；（推荐）
  .clear-float::after{content:""; clear:both; display:block;}

.clear-float::after{
	content:""; 
	clear:both;
	display:block;
	height:0;//兼容旧浏览器
	visibility:hidden;//兼容旧浏览器
}
.clear-float{
	*zooom:1;//兼容IE6-7
}

• 给父元素设置 overflow：hidden（非默认值皆可）；（触发父元素BFC，会计算内部浮动元素高度）

clear:left;//要求该元素的顶部低于之前生成的所有左浮动元素的底部
clear:right;//要求该元素的顶部低于之前生成的所有右浮动元素的底部
clear:both;//要求该元素的顶部低于之前生成的所有浮动元素的底部

六、transform形变

1、transform形变属性

CSS transform属性允许通过函数传值，旋转、缩放、倾斜、平移给定元素，不占标准流，悬浮会挡住其他元素。

• 平移（函数）：translate（x，y）//数值、百分比（参照元素自身大小）
  transform: translate(5px);//x轴移动
  transform: translate(5px,5px);//x、y轴移动，不影响标准流，相当于悬浮，会挡住其他元素
• 缩放（函数）：scale（x，y）//数字、不支持百分比，函数必须加逗号
  transform: scaleX(2);
transform: scale(2); //x、y放大
• 旋转（函数）：rotate（40deg/-40deg）
• 倾斜（函数）：skew（deg，deg）
• 变形的原点(属性)：transform-origin：center top；//x、y一起设置

2、transition过渡属性

transition:all 300ms linear 2s;

七、vertical-align垂直对齐方式

1、定义
vertical-align 会影响行内级元素在一个行盒中的垂直方向的位置。

行盒（inline-box）：行内级元素（div文本）产生每一行的行高，一行的行高撑起一行的行盒，总的行盒撑起div高度；

• 包含了内部元素的可用空间：行内级元素、inline-block元素及边距

2、取值
默认值：baseline；
行内级盒子：行内替换元素、inline-block元素

vertical-align: baseline;//默认，基线对齐
vertical-align: top;//让行内级盒子顶部与行盒顶部对齐
vertical-align: bottom;//让行内级盒子底部与行盒底部对齐
vertical-align: middle;//让行内级盒子中心与行盒中X的中心对齐

3、vertical-align：middle；做行内级盒子垂直居中的不足

不足：
因为行内级盒子中心是与X的中心（比基线高比中线低）对齐的，而行盒通过line-height=height居中，是中线居中；所以导致行内级盒子会相对偏下一些。
弥补：
配合设置父元素的字体font-size：0；
x的中心就是中线就是基线了；字体不能显示。
真正居中方法：
利用定位：img{position:relative;top:50%;tranform:translate(0,-50%)}

八、html5、css3

html5：

1、html5新元素（语义化元素）
增加语义化的块级元素：header（头部元素）、nav（导航元素）、section（定义区域）、article（内容元素）、aside（侧边栏元素）、footer（尾部元素）

<nav></nav>
<div class="nav"></div>

2、html5新元素（媒体元素）

<video src="" controls autoplay loop muted>
	<source src="">
    <source src="">
</video>
//视频元素
<audio src=""></audio>//音频元素，类似视频元素

3、html5新元素（表单元素）

原有type：
text、password、checkbox、radio、button、submit、reset
html5 type新值：
date、time、number、tel、color、email等

css3：

一、flex布局（IE10及以上）

1、flex布局模型（弹性布局）

概念：
flex container：开启flex布局的包裹元素；
flex items：包裹元素中的子元素。
开启：
设置display属性

display:flex;//包裹父元素以块级元素存在
display:inline-flex;//包裹父元素以行内级元素存在

2、flex container元素的属性：控制子元素整体布局

• flex-direction：默认从左到右；
  flex-direction:row;/row-reverse/column/column-reverse
• flex-wrap：决定flex container是单行还是多行；
  flex-wrap:nowrap;/wrap/wrap-reverse
• flex-flow：是flex-direction、flex-wrap的简写，顺序任意、可省；
• justify-content：决定flex-items在main axis上的对齐方式；
  justify-content:flex-start;/flex-end/center/space-between/space-evenly/space-around
• align-items：决定flex-items(单行)在cross axis上的对齐方式；
  align-items:normal;/stretch/flex-start/flex-end/center/baseline
• align-content：决定flex-items间(多行时)在cross axis上的对齐方式；
  
  3、flex items元素的属性：控制子元素自身布局
• order：决定flex items的排布顺序，设置任意整数（正整数、负整数、0）；按数字从小到大；默认值为0
  order:100;
• align-self：设置自身在竖向对齐方式，覆盖flex-container设置的align-items；
  align-self:auto;/stretch/flex-start/flex-end/center/baseline
• flex-grow：决定自身如何扩展（针对父元素剩余部分）；
  
• flex-shrink：决定了flex-items如何缩放（针对超出父元素部分）；
  
• flex-basis：设置flex items在main axis方向上的base size；
  
• flex ：flex-grow、flex-shrink、flex-basis的简写

九、字体图标

1、网络字体
引入：@font-face{}；
字体种类：.ttf、.otf、.eot、.svg、.svgz、.woff

 /* 引入一种网络字体并使用 */
 @font-face {
   font-family: "test";
   src: url("（字体文件地址.ttf）"),
        url("（字体文件地址.otf）");
 }
 p{
   font-family: "test";
 }

2、字体图标

本质是字体，做成图片外形，使用方式是通过图标对应的字符码，引入方式与引入网络字体一样；

一般常在阿里icon网站中下载所需要的字体图标素材；
使用：

• 下载到本地并解压
• 直接拷贝字体图标的所有格式文件到项目中（直接拷贝整理好的.css文件更便捷）
• 在样式中引入字体文件（字体样式文件）
• 通过使用字体图标对应的类、伪元素类或者字体图标的码来使用；

十、动画与文字省略

1、动画

• 过渡动画：两个关键帧效果

.box{transition:transform 1s ease;}//给自身添加动画
.box:hover{transform:translate(250px) scale();}//伪类上添加动画,多个动画空格隔开

• 动画：多个关键帧效果

@keyframes 名称{0{} 50%{} 75%{} 100%{}}//定义动画，使用百分比定义不同阶段
.box:hover{animation:名称 执行时间 执行函数 延迟时间 执行次数,第二份;}//给元素伪类使用动画，多个动画animation属性逗号隔开

2、3d动画

css实现3D；
js实现3D的库：tree.js；

CSS实现：

• 开启3d动画功能

body{perspective:1000px;}//主页面开启3d，定义z轴视距
.box{transform-style:preserve-3d;}//动画自身开启3d效果

3、文字省略

• 单行文本省略

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

• 多行文本省略

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;//盒子方向：竖直
text-overflow:ellipsis;//省略号
overflow:hidden;

十一、移动端适配

1、视口viewport

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 浏览器默认：在手机上看时视口会自动为：980px；而屏幕实际大小可能为320px（ipone5），这样就是等比缩放，内容可能就看不清了；
• 所以加上width=device-width，这样手机多宽就按多宽；元素该多大像素还是多大像素；不管视口宽度；
• initial-scale=1.0初始化缩放元素大小，一般都不缩放；

2、rem适配

适配不同手机；如开发时按ipone6，需要元素大小按屏幕分配；例如将屏幕分为10rem（font-size=屏幕宽度/10），元素大小为1rem；这样在不同屏幕上都是占十分之一。

• 方式一：媒体查询，设置屏幕不同宽度区间的根元素字体font-size；
• 方式二（常用）：js动态获取屏幕宽度，从而设置根元素字体大小，让屏幕为等分【rem】份；

原理：通常是根据设计稿屏幕，先用px做元素大小，所以平分完屏幕后，还需要再将元素的px都改为rem单位；（一般都有工具统一改：常用postcss-pxtorem插件(webpack)、vs code插件、less/sass/stylus）

最终适配方案：js动态设置根目录字体大小（设置不同设备rem的大小）+postcss-pxtorem(将开发px转rem)

设计稿320px：
元素宽度：10px；
根元素字体大小：16px；
1rem=16px；
屏幕宽：20rem；
元素宽：10px/16px=0.625rem；
适配375px：
根元素字体大小：375px/20=18.75px；
1rem=18.75px；
元素宽度：0.625rem*18.75px= 11.719px；