CSS主要是对HTML标记的内容进行更加丰富的装饰，并将网页表现样式与网页结构分离的一种样式设计语言。可以使用CSS控制HTM页面中的文本内容、图片外形以及版面布局等外观的显示样式。本文记录了CSS学习过程中的一些常用的、重要的知识点。

样式引入

行内样式

<标签名 style = “属性1:属性值1;属性2:属性值2;属性3:属性值3;”>内容</标签名>

内部样式

外部样式

复合选择器

• div p {}    后代选择器
• div>p {}    子元素选择器
• ul,p {}    并集选择器
• a:hover {}    带有:的伪类选择器

 

伪类选择器

• a:link    选择未被点击过的链接
• a:visited    选择已被访问过的链接
• a:hover    选择鼠标指针位于其上的链接
• a:active    选择鼠标按下未弹起的链接

注意：以上需要按照lvha的顺序编写。

• input:focus    选择获得焦点的表单元素

字体属性

• font-famliy: 设置字体，可以多个字体，常用于body
• font-size: 设置字体大小
• font-weight: 设置字体粗细
• font-style: 设置字体样式

文本属性

• color: 设置文本颜色
• text-align: 设置水平对齐方式
• text-decoration: 添加文本修饰，常用none来取消a标签下划线
• text-indent: 常用于设置首行缩进2字符(2em)
• text-shadow: 设置文字阴影
• line-height: 设置行间距，块级元素下行间距设置为盒子高度可实现垂直居中
• verticl-align: middle    实现文字和图片中线对齐，也可以解决图片底部的空隙问题
• white-space: nowrap    强制文本一行显示

背景属性

• background-color: 设置背景颜色
• background-image: url(*.png) 设置背景图片
• background-repeat: 设置背景平铺方式
• background-position: x y 设置图片位置
• background-attachment: 背景图像固定
• background:rgba(0, 0, 0, 0.3) 背景颜色半透明

块级元素/行内元素/行内块元素

行内元素

特点：就可以和其他元素在一行显示，不能自动换行，不能设置宽高。

常见行内元素：a,span,i,u,em,sub,sup…

块级元素

特点：不可以和他的元素在一行，可以自动换行，可以设置宽高。

常见的块级元素：div,p,h,ul,li,dl,dt,dd…

行内块级元素

特点：可以和其他元素保持在一行，还能设置宽高。

常见元素：textarea,input,img,button…

转换

• display: block    行内元素转快元素
• display: inline    块元素转行内元素
• display: inline-block    转换为行内块元素

行内元素和行内块元素可以给其父级添加text-align: center来实现水平居中。

CSS权重

继承/*(0.0.0.0) < 元素选择器(0.0.0.1) < 类/伪类选择器(0.0.1.0) < id选择器(0.1.0.0) < 行内样式(1.0.0.0) < !important(无穷大)

复合选择器的权重叠加问题：

li权重为0.0.0.1

ul li 权重为0.0.0.1 + 0.0.0.1= 0.0.0.2

.nav ul li权重为 0.0.1.0 + 0.0.0.1 + 0.0.0.1 = 0.0.1.2

注意:权重不会产生进位，即11个li相加的权重(0.0.0.11)，依旧低于类/伪类的权重(0.0.1.0)。

盒子模型

网页布局本质：利用CSS摆放盒子模型。

属性

• border-width: 设置边框宽度
• border-style: 设置边框样式
• border-color: 设置边框颜色
• border-collapse： 表格合并边框
• border-radius 设置边框圆角
• padding: 设置内边距，调整内容与边框的距离
• margin: 设置外边距，调整盒子与盒子之间的距离
• box-shadow: 设置盒子阴影

相关问题

1.在指定了盒子宽/高的情况下，padding和border都会将盒子撑大，可以利用padding特性制作导航栏。

2.margin左右设置为auto可以实现水平居中(盒子必须指定了宽度)。

3.相邻块级元素垂直外边距合并问题：取外边距最大的一个，另一个无效。

4.嵌套块元素垂直外边距的塌陷问题:父元素设置有100px上边距，嵌套子元素也设置100px上边距，会导致父元素上边距变为200px。

解决方案:

①为父元素添加边框，边框可以设置为透明。

②可以为父元素定义内边距。

③为父级元素添加overflow: hidden。

5.脱标的元素不会触发3、4的问题。

6.很多元素自带默认内外边距，进行布局前需要进行清理：* {padding: 0px; margin: 0px;}。

7.行内元素为了照顾兼容性问题，尽量只设置左右内外边距，不要设置上下内外边距，可以转换为块级元素或者行内块元素再进行设置

CSS浮动

网页布局第一准则：多个块级元素纵向排列标准流，多个块级元素横向排列用浮动。

浮动元素经常搭配标准流的父级来使用：先采用标准流的父级排列上下位置，之后内部子元素采取浮动排列左右位置。请继续关注飞鱼ACG，后续我们将更新更多实用教程。

float: 设置浮动

浮动特性

1.浮动元素会脱离标准流（脱标）

浮动元素不再保留原先位置，原先位置被后面的标准流元素所占有。浮动盒子只影响后面的标准流，不会影响前面的标准流。

浮动元素只会压住它下面标准流的盒子，不会压住标准流盒子里的文字，因为浮动最初产生的目的就是为了做文字环绕效果的。

2.浮动元素会一行内显示，并且元素顶部对齐

浮动元素会紧贴在一起，不会有缝隙，如果父级元素装不下这些浮动的盒子，那么多出来的盒子会另起一行对其。

3.浮动元素会具有行内块元素的特点

行内元素添加浮动，可以直接设置宽高。

块级元素没有设置宽度，默认和父级一样宽，但是添加浮动之后，他的默认大小会根据内容来决定。

清除浮动

理想情况下，我们不指定父级元素高度，希望子级元素撑开父级元素，此时浮动会造成父级元素高度为0，对其他元素造成影响，所以我们需要清除浮动。清除浮动实际采取的策略是闭合浮动，常用代码clear：both。

1.额外标签法（W3C推荐做法，但是实际不常用）

这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）块级元素标签。

＜div style=”clear:both;”>＜/div>

或者使用

＜br style=”clear:both;” />

2.给父级添加overflow属性

将overflow的值设置为hidden或者auto，常用hidden。

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面

3.给父元素添加:after伪元素

.clearfix:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    }
.clearfix {
    *zoom: 1;
    /*兼容IE6、7*/
    }

4.双伪元素标签法（推荐）

.clearfix :before,
.clearfix:after {
    content: "";
    display: table;
}
    
.clearfix:after {
    clear: both;
}
    
.clearfix {
    zoom: 1;
    /*兼容IE6、7*/
}

CSS属性书写顺序

建议按以下顺序书写：

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

CSS定位

定位 = 定位模式 + 边偏移

子级使用绝对定位，则父级需要使用相对定位

边偏移: top/ bottom/ left/ right

定位模式

position: static(静态定位)

元素默认定位，也就是无定位的意思。静态定位按照标准流特性摆放位置，没有边偏移。使用较少

position: relative(相对定位)

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

1.原来的标准流位置继续占有，后面的盒子仍以标准流的方式对它。(不脱标)

2.典型应用是给absolute(绝对定位)当爹的。

position: absolute(绝对定位)

绝对定位是元素在移动位置的时候，是相对于他的祖先元素来说的。

1.如果没有祖先元素或祖先元素没有定位，则以浏览器为基准。

2.如果祖先元素有定位(相对，绝对，固定)，则以最近一级有定位的祖先元素为基准。

3.绝对定位不再占有原先的位置。(脱标)

position: fixed(固定定位)

以浏览器可视窗口来进行定位，跟父元素没有任何关系，不受滚动条影响，不占有原先位置(脱标)。

定位小技巧(固定在版心右侧):先left:50%到中间，再通过margin-left移动版心宽度的一般。

position: sticky(粘性定位)

以浏览器可视窗口来进行定位，粘性定位占有原先位置，必须添加top，left，right，bottom其中一个才有效。

定位叠放次序(控制z轴): z-index

它规定谁上谁下，数值可以是正数、负数、0，数值越大越靠上，如果数值相同，则按照顺序后来居上，只有定位的盒子才能使用。

定位的特殊特性

1.行内元素添加绝对或固定定位，可以直接设置宽度和高度。

2.块级元素添加绝对或固定定位，如果不设置宽度和高度，默认大小会根据内容来决定。

3.脱标的元素都不会触发外边距合并问题。

4.绝对定位和固定定位会完全压住下面的标准流。

元素的显示与隐藏

• display: none    隐藏元素，并且不占有原来的位置
• display: block    除了转换为块级元素之外，还有显示元素的意思
• visinility: hidden    元素隐藏，继续占有原来的位置
• visibility: visible    元素可见
• overflow: hidden    隐藏溢出部分
• overflow: visible    元素可见
• overflow: scroll    显示滚动条（总是）
• overflow: auto      显示滚动条（有溢出才显示）
• text-overflow: ellipsis    溢出文字省略号显示

多行文本溢出显示

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

精灵图

原理：将多个小图片整合到一张大图里，打开网页的时候只需要向服务器请求一次。

目的：减少服务器接收和发送的请求次数，提高页面加载速度。

通过background-position来确定图片显示位置，使用精灵图需要精确测量小图片大小和所在位置。

字体图标

字体图标：一种高效的图标使用方式，展示的是图标，本质属于字体。

使用步骤：

1.图标下载：https://icomoon.io/      https://www.iconfont.cn/

2.下载完成之后，复制字体文件夹到工作目录

3.复制下载文件里的CSS样式引入

4.打开下载文件的html，选择图标后面的□，复制粘贴进自己的html

CSS三角

创建一个盒子，宽高为0，设置四个边框为10px透明色，然后把其中一个改成其他颜色，就会形成三角形。

三角形的大小取决于边框的大小。

.triangle {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: black;
    /*照顾兼容性*/
    line-height: 0px;
    font-size: 0px;
}

过渡与动画(animation)

过渡的使用

可以时间过渡动画，谁做过渡给谁加，经常搭配: hover使用

transition: 过渡属性 话费时间 运动曲线 何时开始

动画的使用

@keyframes 动画名称 {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

animation-name: 动画名称

animation-duration: 时间

animation-timing-function:    速度曲线

animation-fill-mode: 结束状态

2D转换与3D转换

2D转换

transform: translate(x,y)    移动位置

特点:移动位置不影响其他元素，位置百分比相当于自身宽高的百分比，对行内标签没有效果

transform: rotate(*deg)    旋转

transform-origin: x y    设置旋转中心点

单位deg，角度为正，顺时针，角度为负，逆时针，默认旋转中心点为元素中心点。

transform: scale(x,y)    设置缩放，不会影响其他盒子

3D转换

transform: translate3d(x,y,z)  3D移动

transform: rotate3d(x,y,z,deg)

perspective:    3D透视，透视写在被观察物体父盒子上

transform-style: preserve-3d    子元素开启3d，默认为flat不开启，代码写在父盒子

移动端布局

CSS3盒子模型：
box-sizing: border-box;
-webkit-box-sizing: border-box;

点击高亮我们需要清除 设置为transparent 完成透明
-webkit-tap-highlight-color: transparent;

在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance: none;

禁用长按页面时的弹出菜单
img,a { -webkit-touch-callout: none; }

流式布局(百分比布局)

max-width: 最大宽度
min-width: 最小宽度

flex布局

常见父项属性

flex-direction: 设置主轴方向

默认x轴为主轴，元素跟着主轴方向来进行排列

justify-conten: 设置主轴上的子元素排列方式

flex-wrap: 设置子元素是否换行

align-items: 设置侧轴上的子元素排列方式（单行）

align-content: 设置侧轴上的子元素的排列方式（多行）

flex-flow: 是flex-direction和flex-wrap的复合属性

常见子项属性

flex: 子项目占的份数
align-self: 控制子项自己在侧轴的排列方式
order：定义子项的排列顺序(前后顺序)

响应式布局

媒体查询

未完待续……