本文详细介绍了CSS的基础知识，包括快捷方式、样式引入、字体样式、外观属性、选择器、浮动、定位等。同时讲解了CSS布局、盒子模型、背景属性和浮动的影响，以及如何清除浮动。此外，还探讨了版心和布局流程，帮助读者快速掌握网页布局技巧。
目录
sublime快捷方式
1、生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
2、如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
3、如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4、如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5、如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
引入CSS样式表
内部样式表
用style标签将CSS代码写在HTML文档的head中👇
type=“text/CSS” 在html5中可以省略
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
行内式（内联样式）
通过标签的style属性来设置元素的样式，只对所在标签及其嵌套的子标签起作用👇
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
外部样式表（外链式）
所有的样式放在一个或多个外部样式表文件（.CSS）中,通过link标签将外部样式表文件链接到HTML文档中👇
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
link标签需要放在head标签中，且必须指定link标签的三个属性👇
href：定义所链接外部样式表文件的URL，URL为相对路径或绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，“stylesheet”表示被链接的文档是一个样式表文件。
CSS样式规则
CSS字体样式属性
font-size:字号大小
推荐用px，网页中普遍使用14px+。
font-family:字体
p{ font-family:"微软雅黑";}
中文字体需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
尽量使用偶数的数字字号，老式浏览器对奇数的会有bug。
CSS Unicode字体
在 CSS 直接使用 Unicode 编码来写字体名称可以避免文件编码（GB2312、UTF-8 等）不匹配时产生乱码的错误。
我们尽量只使用宋体和微软雅黑
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼圆 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
font-weight:字体粗细
其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）
400 等价于 normal，700 等价于 bold。
我们更喜欢用数字来表示
font-style:字体风格
其可用属性值：
normal 标准字体
italic：斜体
oblique：倾斜字体
平时很少给文字加斜体，反而习惯把斜体标签（em，i）改为普通模式
font:综合设置字体样式 (重点)
对字体样式进行综合设置👇
选择器{font: font-style font-weight font-size/line-height font-family;}
属性的顺序不能更换，不需要的样式可以省去，但是一定要保留font-size和font-family，否则font属性将不起作用
CSS外观属性
color 文本颜色
line-height 行间距
常用单位 px ，一般情况下，行距比字号大7、8像素左右就可以了
text-align 水平对齐方式
可用属性值：left：左对齐（默认值）
right：右对齐
center：居中对齐
是让盒子里面的内容水平对齐， 而不是让盒子水平对齐
text-indent:首行缩进
允许使用负值， 建议使用em作为设置单位，1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
text-decoration 文本的装饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本 |
| underline | 定义文本下的一条线下划线 也是我们链接自带的 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
选择器
CSS基础选择器
标签选择器（元素选择器）
为页面中同类型标签统一样式，同时这也是他的缺点，不能设计差异化样式。👇
标签名{属性1:属性值1; ...}
/*或者*/
元素名{属性1:属性值1; ... }
类选择器&多类名选择器
类选择器使用“.”标识，标签调用的时候用 class=“类名” 👇
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
可以给标签指定多个类名，从而实现更多类，类名用空格隔开👇
id选择器
用“#”进行标识， 用法和类选择器基本相同👇
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<div id="last">呃呃呃</div>
id选择器和类选择器区别
不同在于使用次数上：W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
通配符选择器
用 * 号表示， 统一页面中所有的元素👇
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
CSS复合选择器
由两个或多个基础选择器组合成，交集选择器是 且 的意思，用得少
交集选择器
比如：p.one 选择的是类名为 .one 的 段落标签
并集选择器
各个选择器通过逗号连接而成，并集选择器是 和 的意思，逗号隔开的所有选择器都会执行后面的样式
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
子元素选择器
只能定义class的子元素的样式，子元素的后代不会继承属性👇
后代选择器
class是父，其所有后代（即h3和其后代）都会继承其属性👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div p {
color: blue;
}
</style>
</head>
<body>
<div class="div">
<ul>
<li><p>后代</p></li>
<li><p>后代</p></li>
<li><p>后代</p></li>
</ul>
</div>
<p>不是后代</p>
</body>
</html>
运行结果👇
伪类选择器
用于向某些选择器添加特殊的效果，写的时候要按照 lvha 的顺序
:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */
例子👇
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {
color: #e1251b;
font-weight: 700;
text-decoration: none;
font-size: 50px;
}
a:visited {
color: gray;
}
a:hover {
color: deepskyblue;
text-decoration: overline;
}
a:active {
font-size: 100px;
color: pink;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.163.com">秒杀</a>
</body>
</html>
标签显示模式
块级元素
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>，<div>标签是最典型的块元素。
特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>，<span>是最典型的行内元素。
特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ）
行内块元素
<img >、<input >、<td> 可以对它们设置宽高和对齐属性
特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
标签显示模式转换
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
行高的测量
利用行高的目的： 让一行文本在盒子中垂直居中对齐 做法就是： 文字的行高等于盒子的高度
如果行高大于高度文字会偏下，如果行高小于高度文字会偏上
CSS三大特性
CSS层叠性
如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉，遵循的原则是就近原则。 哪个样式离结构近就执行哪个。
CSS继承性
子元素可以继承父元素的样式（text，font，line开头的元素都可以继承，以及color属性）
CSS优先级和 !important
1、不管父元素样式的权重多大（就算是加了!important），被子元素继承时，会被子元素定义的样式覆盖。
2、行内样式优先。应用style属性的元素，其行内样式的权重远大于选择器。
3、权重相同时，CSS遵循就近原则。
4、CSS定义了一个 !important 命令，该命令赋予最大优先级。写在定义的最后面，例如：box{color:red !important;}
CSS特殊性（Specificity）
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。所以不会存在10个div能赶上一个类选择器的情况。
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 重要的 | ∞ 无穷大 |
权重可以叠加👇
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
CSS 背景(background)
| background-color | 背景颜色 |
|---|---|
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性）→ | background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
| 样例→ | background: transparent url(image.jpg) repeat-y scroll 50% 0 ; |
背景图片及其大小
background-image : none 或 url() /*none 表示无背景图（默认）*/
/*url()括号内写绝对路径或相对路径*/
background-size: 200px 210px;
可以和 background-color 连用， 如果图片不重复的话，图片覆盖不到地地方都会被背景色填充
背景平铺（repeat）
background-repeat : repeat 或 no-repeat 或 repeat-x 或 repeat-y
1、repeat : 背景图像在纵向和横向上平铺（默认）
2、no-repeat : 背景图像不平铺
3、repeat-x : 背景图像在横向上平铺
4、repeat-y : 背景图像在纵向平铺
背景位置(position)
因为插入图片是很难移动位置的，将要插入的图片设置为背景图片就方便移动位置
background-position : length length /*x坐标和y坐标。可以使用方位名词或精确单位*/
background-position : position position
length : 百分数（浮点数%）
position : top ，center ， bottom ， left ， center ， right
length:x，y坐标
background-position:-70px -40px;图片以容器左上角为原点向左偏移70px，向上偏移 40px
background-position:70px 40px;图片以容器左上角为原点向右偏移70px，向下偏移 40px
length:x百分数,y百分数
等同于x：±{容器(container)宽度 - 背景图片宽度}*x百分比，超出的部分隐藏
等同于y：±{容器(container)高度 - 背景图片高度}*y百分比，超出的部分隐藏
background-position:50% 50%;图片水平垂直居中，与 background-position:center center;效果等同。
背景附着
background-attachment : scroll 或 fixed
scroll : 背景图像随对象内容滚动
fixed : 背景图像固定
背景透明(CSS3)
background: rgba(0,0,0,0.3);
参数列表中最后一个参数是alpha透明度 取值范围 0~1之间
盒子模型（CSS重点）
盒子边框（border）
border : border-width 或 border-style 或 border-color
边框属性：border-style
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
| 设置内容 | 样式属性 | 书写规则 | 常用属性值 |
|---|---|---|---|
| 上边框：border-top | ~-style:样式，~-width:宽度，~-color:颜色 | ~:宽度 样式 颜色; | |
| 下边框：border-bottom | 同上 | 同上 | |
| 左边框：border-left | 同上 | 同上 | |
| 右边框：border-right | 同上 | 同上 | |
| 样式综合设置 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 | |
| 宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 | |
| 颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) | |
| 边框综合设置 | border:四边宽度 四边样式 四边颜色; |
表格设置细线边框
html中表格边框宽度为1px，单元格边框宽度为1px时，单元格边框会紧靠表格边框，1+1=2px，所以显得粗一点。下面的方法可以对其进行合并。
table,td{ border-collapse:collapse;} /*collapse 单词是合并的意思*/
圆角边框(CSS3)
border-radius: 50%;/*让盒子变成圆形*/
border-radius: 10px 20px;/*设置两个相近的像素大小，可以变成圆角
内边距（padding）外边距（margin）
padding-top:上内边距，padding-right:右内边距
padding-bottom:下内边距，padding-left:左内边距
外边距同上
内外边距取值顺序
| 值的个数 | 表达含义 |
|---|---|
| 1个值 | padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
| 2个值 | padding: 上下边距 左右边距 |
| 3个值 | padding：上边距 左右边距 下边距 |
| 4个值 | padding:上内边距 右内边距 下内边距 左内边距（顺时针） |
边距的值可以是长度如：1cm
实际宽：width+左border+左padding+右border+右padding=实际width
实际高：height+上border+上padding+下border+下padding=实际height
清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
外边距实现盒子居中
需要满足以下两个条件：
1、必须是块级元素。
2、盒子必须指定了宽度（width）
3、左右的外边距都设置为auto👇
.header{ width:960px; margin:0 auto;}
外边距合并
相邻块元素垂直外边距的合并
上下相邻的两个块元素，上面的有下外边距，下面的有上外边距，则他们之间的垂直间距为两者中的较大者。
嵌套块元素垂直外边距的合并
两个嵌套块元素，如果父元素没有上内边距及边框，则父元素的上外边距（无论是否为0）会变为父子中较大的上外边距，子元素上外边距变为0。
解决方案：
可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。
content宽度和高度
width和height可以对盒子的大小进行控制，属性值：像素值，或相对父元素的百分比width和height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）
符合CSS规范的盒子模型的总宽度和总高度的计算原则👇
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素实际大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
计算盒子模型的总高度时，还应考虑垂直外边距合并的情况，如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。
盒子布局稳定性考虑
为尽量避免外边距合并和减少尺寸的计算，我们使用宽度剩余法和高度剩余法计算width并优先使用。即优先性： width > padding > margin
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影改为内部阴影（outset） |
前两个属性是必须写的。其余的可以省略
不写默认为外部阴影，写上inset则是内部阴影
transition: all 1s; /* 让阴影慢点出现*/
浮动(float)
选择器{float:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
浮动详细内幕特性
float 浮 漏 特
浮：浮动的元素盒子会漂浮在其他的标准流盒子上面。
漏： 加了浮动的盒子不会占位置，它浮起来后，原来的位置漏给了标准流的盒子。
特： 特别注意，首先浮动的盒子需要和标准流的父级搭配使用，浮动可以使元素显示模式体现为行内块特性。
浮动的元素总是找离它最近的父级元素对齐，且不会越出内边距。
浮动的元素排列位置，跟上一个元素（块级）有关系，如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示，总结： 浮动的目的就是为了让多个块级元素同一行上显示。
子级元素浮动引起父级元素内部高度为0的问题
清除浮动
闭合浮动
把浮动的盒子圈在一起👇，父盒子闭合出口和入口不让他们出来影响其他元素。
选择器{clear:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
额外标签法（W3C制定），不推荐
在最后一个浮动元素的下一行添加<div style=”clear:both”></div>，或则其他标签br等亦可。
父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果。
可以给父级添加： overflow:hidden或auto或scroll 都可以实现。
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
使用after伪元素清除浮动
.clearfix:after { /*正常浏览器清除浮动的常规写法,其中.clearfix这个是约定俗成的写法是自定义的，也就是说.clearfix可以用其它的替换.*/
content: "";/*content里尽量不带点;*/
display: block;
height: 0;
clear: both;
visibility: hidden;
}
然后将.clearfix加入到父盒子里去👇（多类名选择器）
<div class="father clearfix">
由于IE6-7不支持:after，使用 zoom:1触发 hasLayout👇
.clearfix {*zoom: 1;} /* IE6、7 专有 */
使用before和after双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以触发BFC BFC可以清除浮动 */
}
.clearfix:after {
clear:both;
}
然后将.clearfix加入到父盒子里去👇（多类名选择器）
<div class="father clearfix">
由于IE6-7不支持:after，使用 zoom:1触发 hasLayout👇
.clearfix {*zoom:1;}
版心和布局流程
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
布局流程
提高网页制作的效率
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
一列固定宽度且居中
两列左窄右宽型
通栏平均分布型
定位(position)
定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去
1、边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
2、定位模式
选择器{position:属性值;}
| 值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式） |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
静态定位(static)
静态定位和标准流一样元素无法移动，所以没啥好讲的
相对定位relative(自恋型)
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的原位置仍然保留（占着坑不拉**），它后面的盒子仍以标准流方式对待该元素最初的位置。
每次移动的位置，是以自己的左上角为基点移动（自恋型）
绝对定位absolute
和标准流一样滚动，可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
扫一扫
7903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
