CSS样式 零基础学前端---总结大篇

前端大纲(二)纯干货！CSS样式总结大篇

肝了7天，码了万字长篇，手废党也能看懂！！
手废第二篇：第一章 前端大纲（二） CSS样式总结大篇

---

提示：你的三连是作者输出下去的动力哦！！真的真的！！！（小声哔哔：赶紧收藏！！内容持续更新中。。。）

---

前言

开头来个小惊喜，绿绿的是不是很好看。这篇为前端CSS样式总结大纲，就算你是学习后端开发的同学，但作为一个程序猿，只懂后端不懂前端怎么能行呢，为此特地呕心沥血的肝出此文！

• 哈哈哈哈废话不多说，以下是我学习前端的一些笔记，全是干货，感谢各位大佬，小伙伴的支持。希望对各位有所帮助，话不多说直接上干货！！

不懂的问题欢迎下方评论区留言哦，一定一定尽量回答

CSS层叠样式表

书写规范：1.布局定位属性->2.自身属性->3.文本属性->4.其他属性（CSS3）

一、选择器

1.基础选择器

1）标签选择器

不能设计差异化样式，只能选择全部的当前标签

• 标签名{属性}

2）类选择器

可差异化样式，选择一个或几个标签

• .类名{属性}
• 多类名使用

3）id选择器

id属性只能在每个HTML中出现一次

• #id名{属性}

4）通配符选择器

选取页面所有元素

• *{}

2.复合选择器

1）后代选择器

标签嵌套关系时，父元素写前面，子元素写后面，中间空格分隔

• 元素1 元素2{ 属性 }

2）子元素选择器

只能选择作为某元素的最近一级子元素器

• 元素1 > 元素2 { 属性 }

3）并集选择器

可以选择多组标签，可用于集体声明和初始化操作

• 元素1，

  元素2 { 属性 }

4）伪类选择器

用于向某些选择器添加特殊的效果，用冒号(:)表示

• a:hover{属性} 选择鼠标指针位于链接上
• input:focus{属性} 用于选取获得焦点的表单元素

二、字体属性

1）字体体系

• font-family：微软雅黑；

2）字体大小

• fond-size：20px；

3）字体粗细，实际开发更喜欢用数字

• font-weight：normol,bold（加粗）,100~900(不跟单位）;

4）字体样式

• font-style：normol，italic（斜体）；

三、文本属性

1）文本颜色

可用预定义，十六进制，RGB代码表示颜色

• color：red，##FF0000，rgb（0，0，0）；

2）对齐文本

元素内文本的对齐方式，本质是让盒子中的元素对齐

• text-align：center，left，right；

3）装饰文本

添加文本的装饰，可以给文本添加下划线、上划线、删除线等

• text-align：none(默认，无)，underline，overline，line-through

4）文本缩进、行间距

用来指定文本的第一行的缩进，通常是将段落的首行缩进，em是相对单位，就是当前文字一个的大小

• text-indent：2em；

设置行间的高度，由上间距+文本高度+下间距组成

• line-height：26；

四、CSS的引入方式

1）内部样式表

将CSS代码抽离出来，单独放到

• < style >
  div{
  属性
  }
  < /style >

2）行类样式表

元素标签内部的style属性中设定CSS样式

• < p style=“color: pink；font-size：12px;”>

3）外部样式表

新建后缀为.css的样式文件，把CSS代码都放入此文件中，使用link标签引入文件

< link rel=“stylesheet” href=“css文件路径”>

五、Emmet语法

1）生成多个标签：div*n

2）父子级标签：ul>li

3）兄弟级标签：div+p

4）带类名或id标签：后加.demo 或 #demo

5）类名有顺序：前加自增符号$

6）默认文字：div{文字}

六、元素的显示模式

1.块元素

独占一行，常见的有< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >

1）文字类（p、h1~6）元素不能使用块级元素

2）div典型

2.行内元素

一行可显示多个，常见的有、< strong>、< b >、< em >、< i >、< del >、< s >、< span >

1）高宽直接设置无效，默认宽度为内容宽度

2）span典型

3.行内块元素

一行可多个，但中间会有空白缝隙，可设置宽高，常见的有< img/ >、< input/ >、< td >

4.元素转换

可将元素模式进行转换，比如增加链接触发范围，display属性设置一个元素如何显示

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

元素的显示和隐藏

• display：none；隐藏元素，元素隐藏后不再占有原来的位置

• visibility：visible（元素可视），hidden（元素隐藏）；元素隐藏后继续占有原来的位置

• overflow（溢出）：visible（不剪切内容也不添加滚动条），hidden（溢出的部分隐藏），scroll（不管是否溢出，出现滚动条），auto（溢出显示滚动条）；

七、背景

简介写法 background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

1.背景颜色

一般情况下的默认值为transparent（透明）

• background-color:颜色值；
• background：rgba（0,0,0,0);

2.背景图片

常用于logo、装饰小图片、超大背景图片，优点是便于控制位置

• background-image：none，url（url）；

3.背景平铺

• background-repeat：repeat（平铺，默认），no-repeat，repeat-x，repeat-y；

4.背景图片位置

1）position可用方位名词也可用数值

2）position：top,center,bottom,left,right;

• background-position：x y；

5.背景图像固定

背景图像是否固定或者随着页面的其余部分滚动

• background-attachment：scroll（随对象内容滚动），fixed（固定）

八、CSS三大特性

1.层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个样式，层叠性原则：样式冲突，遵守的原则是就近原则，哪个样式离结构近，就执行哪个样式

2.继承性

子标签会继承父标签的某些样式，如文本颜色和字号、行高

• font：12px/1.5；当前文字大小的1.5倍

3.优先级

1）当同一个元素指定多个选择器，就会有优先级的产生

2）通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10 ，id选择器为100，行类样式表为1000，！important无穷大

九、盒子模型

1.边框(border)

边框由三部分组成：边框粗细、边框样式、边框颜色，复合写法没有顺序限定

• border-width：0px； 定义边框粗细，单位是px
• border-style：solid（实线），dashed（虚线），dotted（点线）；
• border-color：颜色；

2.内边距(padding)

1）指边框和内容之间的距离，当盒子本身没有指定width、height属性，此时padding不会撑开盒子大小

2）当参数为一个值时，指上下左右；两个值时，左边上下，右边左右；三个值时，1上，2左右，3下；四个值时，按顺时针。

• padding-left,right,top,bottom：0px；
• padding:1-4个参数；

3.外边距(margin)

1）控制盒子和盒子之间的距离，简写和padding一致

2）可以让盒子实现水平居中，满足①指定宽度②盒子左右外边距为auto；行内（块）元素水平居中只需给父元素添加text-align：center即可

• margin-left,right,top,bottom：0px；

4.清除内外边距

1）网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此布局前需要清除内外边距

2）行内元素尽量只设置左右内外边距，上下无效（兼容性问题）

• *{

  ​ padding：0；

  ​ margin：0；

  }

5.指定盒子模型

如果指定盒子模型，padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

• box-sizing：border-box；

十、CSS3

1.圆角边框

1）原理：（椭）圆与边框的交集形成圆角效果

2）参数值可以为数值或百分比的形式

3）想要设计一个圆，将正方形设置为高度的一半；圆角矩形，将长方形设置为高度的一半

4）该属性是个简写属性，可以跟四个值，左上角开始的顺时针方向

• border-radius：length；

2.盒子阴影

1）h-shadow：必需，水平阴影的位置，允许负值

2）v-shadow：必需，垂直阴影的位置，允许负值

3）blur：可选，模糊距离

4）spread：可选，阴影的尺寸

5）color：可选，阴影的颜色

6）inset：可选，将外部阴影（outset）改为内部阴影

• box-shadow：h-shadow v-shadow blur spread color inset;

3.文字阴影

• text-shadow：h-shadow v-shadow blur color;

4.垂直居中（vertical-align）

用于设置图片或表单（行内块元素）和文字垂直居中对齐，可解决图片底端空白缝隙问题（图片与文字默认基线对齐）解决方法则给图片添加vertical-align属性就行（不是基线就行）或者转化为块级元素

• vertical-align：baseline（默认，基线对齐），top（顶端对齐），middle（中部对齐），bottom（底线对齐）；

5.溢出文字省略号显示

①单行文本溢出

1.先强制一行内显示文本 while-space：nowrap;(默认normol自动换行)

2.超出部分隐藏 overflow：hidden；

3.文字用省略号代替超出的部分 text-overflow：ellipsis；

②多行文本溢出（推荐后端人员做，操作更简单没有兼容性问题）

overflow：hidden；

text-flowover：ellipsis；

display：-webkit-box；转化为弹性盒子

-webkit-line-clamp：2；显示文本的行数

-webkit-box-orient：vertical；子元素的排列方式

6.新增选择器

①属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不借用类和id选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	选择具有att属性且以val开头的E元素
E[att$=“val”]	选择具有att属性且以val结尾的E元素
E[att*=“val”]	匹配具有att属性中含有val的E属性

• text[color=“pink”] {属性}

②结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

选择符	简介
E:first-child	匹配父元素的第一个子元素E
E:last-child	匹配父元素中最后一个E元素
E:nth-child(n)	匹配父元素中第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:first-of-type(n)	指定类型E的第n个

• ul :first-child {属性}

③伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签

before和after必须有content属性

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

• element::before

7.滤镜filter

将模糊或颜色偏移等图形效果应用于元素

• filter：blur(5px); blur模糊处理，数值越大越模糊

8.calc函数

声明CSS属性值时执行一些计算

• width：calc(100%-80px);

9.过渡translation（动画）

使其在不使用Flash动画和JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

过渡动画：是从一个状态渐渐过渡到另一个状态

• translation：要过渡的属性 花费时间 运动曲线 何时开始；

1.属性：想要变化的css属性，宽度高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以

2.花费时间：单位是秒（必须写单位）如0.5s

3.运动曲线：默认是ease（可以省略）

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以省略）

10.转换transform

转换可以实现元素的位移、旋转、缩放等效果

• 移动：transform：translate（x，y) 不会影响元素的位置
• 旋转：transform：rotate（45deg）
• 缩放：transform：scale（宽度，高度) 里面写倍数，不跟单位

界面布局

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

1）先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置

PC端布局

一、普通流（标准流）

1）所谓标准流，就是标签按照规定好默认方式排列

2）块级元素独占一行，丛上向下顺序排列

3）行内（块）元素按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

二、浮动

1.浮动（float）

1）float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触包含块或另一个浮动框的边缘

2）属性值：none（元素不浮动，默认），left，right

• 选择器{ float：属性值；}

2.浮动特性

1）浮动元素会脱离标准流，浮动的盒子不再保留原先的位置（脱标）

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

3）任何元素都可以浮动，浮动元素会具有行类块元素的特性

4）浮动元素会压住下面标准流的盒子，但不会压住下面标准流盒子里面的文字（文字环绕效果）

3.清除浮动

由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子；如果父盒子本身有高度，则不需要清除浮动

1）清除浮动的本质是清除浮动元素造成的影响，策略为闭合浮动

2）清除浮动之后，父级就会根据浮动的子盒子自动监测高度，父级有了高度，就不会影响下面的标准流

3）属性值：left（清除左侧浮动的影响，right（清除右侧浮动的影响），both（同时清除两侧浮动的影响，实际开发几乎只用该属性）

• 选择器 {clear：属性值}

①清除浮动——额外标签法

也称为隔墙法，会在浮动元素的末尾添加一个空的标签。例如

优点：通俗易懂，书写方便

注意：新增的盒子必须是块级元素

②父级添加overflow（溢出）

父级添加overflow属性，将其属性值设置为hidden（溢出隐藏）、auto、scroll

优点：代码简洁

缺点：无法显示溢出部分

③ :after 伪元素法

.clearfix:after {

​	content: "";

​	display: block;

​	height: 0;

​	clear: both;

​	visibility: hidden;

}

.clearfix{ *zoom: 1;(兼容IE6、7）}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

④双伪元素清除浮动

.clearfix:before,
.clearfix:after {
    content:"";
    display:block;
}
.clearfix:after{
	clear: both;
}
.clearfix{ *zoom:1; }

优点：代码更简洁

缺点：照顾低版本浏览器

三、定位

即某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

1.定位模式

定位模式决定元素的定位方式，通过position属性设置

1）static，静态定位，默认的定位方式，无定位的意思（即标准流），无边偏移

2）relative,相对定位 ，相对与原来的位置来说，不脱标（继续保留原来位置）

3)absolute，绝对定位，以父级元素标准，若无父级元素，则以浏览器为标准移动位置，脱标（不占有位置）

4)fixed，固定定位，以浏览器可视窗口为参照点移动元素

5)sticky，粘性定位，可视窗口为参照点，不脱标 选择器{position：sticky；top：10px；}必须添加top，buttom，right，bottom其中一个才有效

2.边偏移

边偏移就是定位的（浮动和标准流不能使用）盒子移动到最终的位置，有top，bottom，left，right4个属性

• top：80px；

3.定位叠放顺序z-index

1）使用定位布局时，可能会出现盒子重叠的情况，可以使用z-index来控制盒子的前后顺序（z轴），只有定位的盒子才有z-index属性

2）如果属性相同，则按照书写顺序，后来居上

3）数值（不能加单位）可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上

• 选择器{z-index：1；}

移动端布局

1.单独制作移动端页面（主流）

一、流式布局（百分比布局）

1）流式布局，就是百分比布局，也称非固定像素布局

2）通过盒子的宽度设置成百分比来根据屏幕来进行伸缩，不受固定像素限制，内容两侧填充

3）流式布局是移动web开发使用的比较常用的布局样式

二、flex弹性布局

flex是felxible box的缩写，用来为盒状模型提供最大的灵活性，任何元素都可以指定为flex布局。flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

1）当父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效

1.flex布局父项常见属性

• flex-direction:设置主轴的方向

主轴属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

• justify-content:设置主轴上子元素排列方式

属性值	说明
flex-start	默认值从头部开始 如果主轴是x轴，则从左到右
flex-end	从主轴尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间（important）

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

属性值	说明
nowrap	默认值，不换行
wrap	换行

• align-items：设置侧轴子元素排列方式（单行）

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值）

• align-content:设置侧轴子元素排列方式（多行，能平分空间）

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，在平分剩余空间
stretch	设置子项元素高度平分父元素高度

• flex-flow:row wrap；复合属性，相当于同时设置了flex-direction和flex-wrap

2.flex布局子项常见属性

• flex：1；分配剩余空间

align-self属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-item属性。默认为auto，表示继承父元素的属性，如果没有父元素，则等同于stretch

• align-self：flex-end；控制子项在侧轴的排列方式
• order：-1；数值越小，排列越靠前，默认是0.与z-index不一样

三、rem+媒体查询+less布局

1.rem单位

rem（root em）是一个相对单位，类似于em，em是父元素字体大小，不同的是rem的基准是相对于html元素的字体大小，例如根元素（html）设置font-size：12px；非根元素设置width：2rem；则表示24px；

2.媒体查询

@media可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小时，页面会根据浏览器重新渲染

1）mediatype类型

属性值	说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

2）关键字

属性值	说明
and	可以将多个媒体特性连接到一起，相当于"且"的意思
not	排除某个媒体类型，相当于"非"的意思，可以省略
only	指定某个特定类型，可以省略

3）媒体特性

属性值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	最小可见区域的宽度
max-width	最大可见区域的宽度

@media mediatype 关键字（media feature）{
	属性值;
}

3.less语法

less是一门CSS预处理语言，它扩展了CSS的动态特性

①less变量

• @变量名：值；

②less编译

• Easy Less插件自动将less文件编译成css文件

③less嵌套

即子元素的样式直接写到父元素里

如果遇见（交集，伪类，伪元素选择器）

1）内层选择器的前面没有&符号，则它被解析为父选择器的后代

2）如果有&符号，则被解析为父元素自身或父元素伪类

a:hover{
    color:red;
}

a {
	&:hover{
		color:red;
	}
}

④less运算

div {
	width: 200px - 50;
    height: 200px * 2;
    border: 82px / 50rem;
}

• 运算符左右两侧必须有个空格隔开；
• 如果运算单位不一致，则最后的结果以第一个单位为准

四、响应式页面兼容移动端

就是使用媒体查询(各个媒体的适用分辨率情况)针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

响应式布局容器原理：

在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下，看到不同页面布局和样式变化

终！！

终于码完了！！！【哭!】

• 都康到这里了，感谢各位三连！！！【康康我，康康我】

大佬：就这啊？
我：就这了【哭!】

后面还会持续更新，欢迎下方评论区留言，下期见！！！
下期内容：
微信小程序开发总结大篇

作者：琉璃Diaspora