CSS层叠样式表Cascading Style Sheets(2021.10.05)
一、CSS简介
1.优缺点
优点：丰富的样式描述；
样式和结构的分离，便于维护和管理；
减少代码量，加快页面加载；
样式代码复用性强；
多个页面可以使用同一个CSS代码；
缺点：浏览器对CSS支持程度不同。
2.CSS特性
(1)继承性
1）后代元素继承祖先元素的样式(嵌套关系)；
2）只能继承文字、文本样式(如，color、text-开头、font-开头、line-开头)，其他样式不能继承。
(2)叠加性
当多个选择器选中的是同一个元素(类)时，加的是不一样的样式，所有选择器都生效。
(3)层叠性
当多个选择器选中的是同一个元素(类)时，加的是一样的样式，只有一个选择器会生效。
3.语法规范
两个主要构成部分：选择器及一条或多条声明。
注：HTML和CSS的属性名和属性值不同
4.代码风格
换行书写，小写明了，选择器和大括号间有空格。
5.Emmet CSS代码简写及快速格式化(shift+alt+f或右击)
6.CSS引入方式
（1）行内样式
将CSS代码写在元素开始标签的style属性中，只对当前标签起作用。
（2）内部(内嵌)样式
写在html文件的head中，只对当前页面有效，适用于页面很少的网站。
<head><style type="text/css">div {color: red;}</style>
</head>（3）外部(链接)样式
在html文件头部中引用(link)创建编写的CSS文件
<link rel="stylesheet" type="text/css" href="要引用的CSS文件路径"/>
//rel="stylesheet" 表示被链接的文档是一个样式表文件；rel定义当前文档与被链接文档之间的关系（4）CSS导入CSS中
把一个CSS文件通过@import url("要导入的CSS文件路径")；导入到另一个CSS文件中。
三个css样式表：
css_red.css ，css_blue.css ，css_green.css
一个主样式 style.css 把三个样式表都装进去：
@import "css_red.css"; //写在style.css中
@import "css_blue.css";
@import "css_green.css";
调用的时候只调用 style.css 就行了。弊端：先加载HTML的结构，再加载CSS样式，会导致页面的延迟。
（5）引入CSS的优先级
1）多重样式可以层叠，可以覆盖；
2）样式的优先级按照“就近原则”；
3）行内样式>内嵌样式>链接样式>浏览器默认样式
7.网页布局的3种方式
8.CSS参考手册
https://www.xp.cn/css3/
CSS3参考手册-CSS3中文手册-CSS3学习手册-CSS手册
9.服务器
| 阿里云服务器 |
| 免费空间free.3v.do 提供100M永久免费ASP空间申请 |
10.开发小工具
| 工具名称 | 作用 |
|---|---|
| snipaste | 截图、图片置顶、取色 |
| FSCapture | 测量距离 |
| Mark Man |
1 测量 Tab 自动测量 3 吸色 C 复制 |
| PxCook | 切图软件 |
| Cutterman |
二、基础选择器
1.标签选择器
p {属性名：属性值;}过标签选择元素；
(2)标签嵌套在另一个标签中，标签选择器也可以将其选中；
目标标签内的标签中的内容也会被标签选择器选中；
(3)标签选择器选择的是所有而不是一个元素，能快速为页面中类型的标签统一设置样式。
2.类选择器 .
样式点定义，结构类(class)调用，一个或多个，开发最常用
.类名 {属性名1：属性值1；}//CSS
.an {color: gray;}
//HTML
<p class="an">123</p>(1) id属性是任何元素都可以由的标准属性；
(2) 使用class选择器时，要在class值前加"."；
(3) class不具有唯一性，不同元素可以有相同的class值；
(4) 类名是长名称或词组时可以使用中横线来给选择器命名。如，star-sing
(5) 同一元素的class属性可以有多个类名，多个类名中间必须用空格分开。例：
<p class="an star-sing">123</p>注：两层标签嵌套时，
(1)当内层标签无class属性时，外层标签class属性会作用于内层标签；
(2)当内层标签有class属性时，外层标签class属性无法作用于内层标签。
3.id选择器 #
#id名 {属性名1：属性值1；}(1)id属性是任何元素都可以由的标准属性；
(2)id选择器只能选中一个元素(id属性只有一个id值，且在同一页面是唯一的)；
(3)使用id选择器时，要在id名前加"#"；
(4)定义id名时，必须要以字母或汉字开头，可以包含数字、下划线，但不能和元素名称相同。
4.属性选择器 [ ]
选中有该属性的所有元素
[class]{ } /*作用于所有有class属性的元素*/
[class=H]{ } /*作用于所有有class属性，并且class属性值为H的元素*/
举例：
input[type="text"]
input[type="password"]5.通配符选择器 *
通配符选择器会选取页面中所有元素。常用来初始化。
* {属性名1：属性值1；}
* { margin: 0; padding: 0; }6.选择器的优先级
(1) !important > 行内样式 > #ID选择器 > .类/属性选择器 > 标签 > *通用 > 浏览器默认样式 > 继承
(2) 选择越精准，优先级越高；
(3) 当优先级相同时，后写的样式会覆盖先写的样式。
(4) CSS权重:（256进制）
！important infinity
行间样式 1000
id 0100
class|属性选择器|伪类 0010
标签选择器 0001
通配符 0000
例： #idDiv p{ } 权重=100+1=101 （权重相同时，后面的会覆盖前面的）
a:hover { } 权重=1+10=11
也可以数数，无进位 12个div=0,0,0,12 < 1个类=0,0,1,0 a:hover=0,0,1,1 (伪类也算类)
注：1.权重是由4组数字组成，但是不会有进位；
2.继承的权重是0，如果该元素没有被精确选中，不管父元素权重有多高，子元素得到的权重都是0
三、复合选择器
1.后代选择器(空格)
选择器1 选择器2 {样式声明}
#rnj ul .ww { }ID 标签 类（嵌套） 从后向前写更快(1) 描述的是一种祖先结构关系，并不一定是父子关系；
(2) 祖先和后代之间要有一个空格隔开；
(3) 祖先和后代的属性名不一定相同。
2.直接子元素选择器(>)
只选择作为某元素的最近一级子元素
选择器1>选择器2 {样式声明}
选择器1和选择器2中间要用>隔开//HTML<div><p><a href="">456</a></p><a href="">123</a></div>
//CSSdiv>a { color: green; } 选择的是1233.并集(结组)选择器(,)
并集选择器是通过多个选择器选中多个元素，并由英文逗号(,)连接而成
选择器1,选择器2 {样式声明}
例：div,#ad,.pg a { }4.交集(并列)选择器(无空格)
<head><style>div.para1 { color: red;}</style>
</head>
<body>
<div>我是段落</div>
<div class="para1">我是段落</div>
<p class="para1">我是段落</p>
</body>(1) 选择的元素要同时满足多个条件；
(2) 选择器之间没有空格。
5.伪类选择器(:)
(1)链接伪类选择器
注意事项：
(1)为了确保生效，要按照LVHA(love hate)的顺序声明：link，visite，hover，activ
(2)链接的一般写法：
a {color: #333;text-decoration: underline;
}
a:hover {color: cornflowerblue;text-decoration: underline;
}(2) :focus 伪类选择器(用于选取获得焦点的表单元素input)
input:focus { /*表单元素获得焦点时，字体颜色为红，背景颜色为黄绿*/color: red;background-color: greenyellow;
} (3) 序列伪类选择器
1）第一和最后子元素选择器(多用于列表中)
元素标签名:first-child 或 :last-child { }
<head><style type="text/css">h3:first-child {} /*选择的是h3父元素(即上一级元素)中，是h3的第一个子元素*/h3:last-child {} /*选择的是h3父元素(即上一级元素)中，是h3的最后一个子元素*/</style>
</head>
<body><h3>1</h3><h3>2</h3>
</body>注： 在h3父元素中，h3元素得是第一个才能选中，如果别的元素(如，p、div)是父元素中的第一 个，则不能选中。
拓展：
| 书写格式 | 含义 | 使用场景 | 举例 |
|---|---|---|---|
| li:first-of-type { } | li的父元素里的第一个或最后一个类型是li的元素 | 适用于第一个或最后一个不是要找的元素 |
<ul> <p>p1</p> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <p>p2</p> </ul> 结果：选中1或5 |
|
li:last-of-type { } |
2）nth-child 选择器
li:nth-child(参数) { } //nth-child和(参数)间无空格9 //选择的是li的父元素中的 第9个子元素（ul中不是li的元素也会算上）n // 全部元素（n从0开始自增）5n // 5的倍数2n+1 或 odd // 奇数2n 或 even // 偶数'-n+''n+' -n+3 // 前3个子元素
相当于自增符 n+3 // 从第3个元素往后的所有元素3n+1 // 第1，4，7，10，..个元素li:nth-last-child(参数) {} //选择倒数第几个元素
li:nth-last-child(-n+3) {} //选择的是后3个元素li:nth-child(n+3):nth-child(-n+10) { }
选择的是li的父元素中的 第3个子元素至第10个子元素ul:nth-child(2) li:nth-child(3) { }
两个ul无序列表同级，选择的是 第2个ul列表的第3个子元素.nav li:first-child a:first-child {}
结构：类名为nav的div包含ul,ul包含多个li,li包含多个a
选择的是 ul里的第一个li里的第一个a6.伪元素选择器(::)
伪元素：文档结构中没有出现的元素，假标签，可以当作成假的行内元素。
选择器::伪元素 { }
div::first-letter { } 选择的是元素中的第一个文字first-line 选择的是元素中的第一行文字，会根据浏览器的缩放自动调整div::before或after {content:"要添加的内容"; color:设置其他相关属性;}
在元素之前或之后(在div里的最前边/最后边)添加新内容，必须配合content使用，并且添加的内容无法使用鼠标选中注：content中不一定有内容，例：
ul li::after {content:""; display: block; //换行border-bottom: 1px solid red; //在每列无序列表下加条横线}7.伪类和伪元素的区别
四、文字属性
1.font-family 字体
(1)font-family:" "; 最外层有双引号；如果有空格隔开的多个单词组成的字体，要加单引号
(2)可以赋给多个字体，但多个字体之间必须用英文逗号隔开
(3)赋给多个字体时，从前往后查找字体，若第一个字体不存在时，则查找第二个字体，若都不存在，则采用浏览器的默认字体
(4)当全网页或大篇幅的文字某种样式一样的话，可对<body>进行设置，但<body>中的 font-style:normal和font-weight:normal 对<body>标签下的<em>和<strong>不起作用。
一般把整个网页的字体、字号赋给body
body { font-family: "'microsoft yahei',arial,tahoma"; } （5）
| 字体系列 | 常使用场景 | 例如 |
|---|---|---|
| 无衬线字体（sans-serif） | 网页中大多采用无衬线字体 | 黑体、Arial |
| 衬线字体（serif） | 报刊书籍中应用广泛 | 宋体、Times New Roman |
| 等宽字（monospace） | 一般用于程序代码编写，有利于代码的阅读和编写 | Consolas、fira code |
2.font-size 字号
浏览器默认字号一般为16px
字号单位(px/%/em/rem)
(1) px
(2) % 以父元素为参考，是父元素的百分比；当父元素改变时，(%)子元素也会随之改变。
(3) em 是以自身字体大小作为参考，是自身字体大小的倍数；当自身字体大小改变时，em也会随之改变。如，width=16px(字号)*10em=160px
(4) rem 以根元素<html>字号大小作为参考，是根元素字体大小的倍数；当根元素字体大小改变时，rem也会随之改变。
3.font-weight 粗细
用数字表示时，数字(100-900)后面不要加单位。如，font-weight: 500;
400=normal；700=bold
4.font-style 样式
italic 斜体；oblique 偏斜体(处于中间状态)；normal 正常；
常用于将倾斜字体变为不倾斜
<i></i>装小图标时，用font-style：normal 变为不倾斜
5.font 字体复合属性
作用：节约代码
p { font: font-style font-weight font-size/line-height font-family;}
p {font: italic bold 20px/1.5 "微软雅黑";}
注：line-height=1.5 表示行高是当前元素文字大小的1.5倍 即，line-height=20*1.5=30px注意事项：
(1)使用font属性时，不能更换顺序，并且各个属性间以空格隔开；
(2)不需要设置的属性(取默认值)，但必须保留 font-size和font-family 属性，否则font属性将不起作用。
五、文本属性
1.letter-spacing 字间距
字间距值可正可负可normal
2.color 颜色
（1）颜色名
共147种颜色，可能不被一些浏览器接受，所以常使用16进制颜色值或RGB颜色值。
（2）16进制颜色值
#rrggbb (所有的值都介于"00—>ff"之间；每两位一样可省略)
#00F 蓝色(#0000FF) #F40 淘宝红(#FF4400) #000000 黑色 #FFFFFF 白色
（3）RGB颜色值
rgb(r值,g值,b值) 或 rgb(100%,0%,0%)（所有的值都介于"0—>255"之间） 如，rgb(122,89,233)
（4）RGBA颜色值
rgba(r值,g值,b值,a值) （a透明值介于"0透明—>1不透明"之间） 如，rgb(122,89,233,0.8)
注：可以用picpick取色器
3.text-align 文本水平对齐
让盒子内的文本水平对齐
4.text-decoration 文本装饰(下划线、删除线)
如何添加和删除下划线？
5.text-indent 首行缩进
text-indent: 尺寸单位;32px 当字号为16px时，16*2=32px,缩进2个字2em 相对单位，无论字号是多少，永表示缩进两个字符(如果没设置字体大小，则会按照父元素的大小进行)；可以是负值，但会缩到左边边框外 （1em=1font-size）50% 缩进了父元素宽度的50%。%表示基于父元素宽度的百分比进行缩进6.line-height 行高（!= 行间距）
使行高等于包含文本的盒子的高度（即 line-height=height ）可实现文本垂直居中的效果
line-height: 值;normal 默认行高40px 尺寸单位2 数字，表示行高是当前文字尺寸的2倍200% 百分比，表示行高是当前文字尺寸的200%(即2倍)7.text-shadow 文本阴影
text-shadow: 值1 值2 值3 值4 ; 注：每个值之间要有空格
text-shadow: 3px 4px 2px red ;| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值 （正右 负左） |
| v-shadow | 必需。垂直阴影的位置。允许负值 （正下 负上） |
| blur | 可选。模糊的距离 |
| color | 可选。阴影的颜色（默认和文字颜色相同） |
综合案例—新闻页面
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">body {font: 16px/28px "微软雅黑";}#content {text-align: center;}h1 {font-weight: normal;}#day {font-size: 13px;color: gray;}a {color: #00F;text-decoration: none;font-size: 13px;}#search {color: gray;width: 170px;font-size: 14px;}#anniu {font-weight: bold; font-size: 14px;}p {text-indent: 2em;}.yejiao {text-indent: 0em; font-size: 12px;color: gray;}#tupian {text-align: center;}</style>
</head>
<body><div id="content"><h1>海南发布地质灾害气象风险三级预警</h1><span id="day">2021年10月09日 19:20 来源:</span><a href="http://www.chinanews.com/">中国新闻网</a><input type="text" name="search" id="search" value="请输入查询条件" /><input type="submit" value="搜索" id="anniu"/></div><hr /><p>中新网海口10月9日电 (符晓虹)今年第17号台风“狮子山”(热带风暴级)携风雨袭击海南。海南省自然资源和规划厅、海南省气象局9日17时联合发布地质灾害气象风险三级预警。</p><h4>完成热力站的设备维护工作，确保设备运行正常</h4><p>海南省气象部门预计，受台风“狮子山”影响，9日夜间到10日白天，海南省大部地区仍将有强风雨天气。海南省气象局9日17时将暴雨三级预警降为暴雨四级预警：预计未来24小时内，海南省东方、昌江、白沙3个市县的大部分乡镇仍将出现50毫米以上降水。</p><div id="tupian"><img src="http://i2.chinanews.com.cn/simg/ypt/2021/211009/406abddb-cbb5-44ba-b776-5b103387e124_zsite.jpg"/></div><p>预计未来24小时，琼中县、白沙县全境、万宁市西南部(长丰镇、三更罗镇、兴隆华侨农场、南桥镇)、琼海市中西部(会山镇、石壁镇、万泉镇、龙江镇、阳江镇)、陵水县东北部(光坡镇)、五指山市北部(水满乡、毛阳镇、番阳镇)、昌江县中南部(叉河镇、七叉镇、石碌镇、王下乡)、东方市东部(江边乡)、儋州市南部、西北部(兰洋镇、雅星镇、峨蔓镇)降雨诱发地质灾害可能性较大(黄色预警)。</p><h4>调度中心24小时值班并统计每日补水量</h4><p>请注意防范强降雨引发的地质灾害，尤其防范地质灾害多发区域、农村房前屋后削坡建房点、沟谷河道、建设工地、山区公路两侧。有关单位应当根据雨情组织对地质灾害隐患点和易发区域的监测、巡查和防范，根据险情转移受威胁群众，重点做好景区、道路交通等安全防范。</p><p>海南省气象局9日17时10分继续发布台风三级预警：今年第17号台风“狮子山”(热带风暴级)，9日16时其中心位于北纬20.1度，东经110.2度，也就是在海南岛北部近海，中心附近最大风力8级(20米/秒)，中心最低气压为990百帕。</p><p class="yejiao">本文来源：中国天气网 编辑：王诗尧</p>
</body>六、背景属性
1.背景颜色 background-color
背景颜色的默认值是 transparent (透明)。
2.背景图片 background-image
background-image:url(图片存放的路径);
background-image:url(images/1.png);常用于logo或一些装饰性的小图片或超大的背景图片，优点是便于控制位置。(精灵图也是一种运用场景)
页面元素既可以添加背景元素也可以添加背景图片，只不过背景图片会压住背景颜色。
3.背景图片平铺 background-repeat
| background-repeat: 参数值 ; | 作用 |
|---|---|
| repeat | 背景图像平铺(默认) |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
4.背景图片位置 background-position
background-position: x y ;
参数代表的意思是：x坐标和y坐标。| x y(参数值)表示方式 | 说明 | 注意 |
|---|---|---|
| 方位名词 | top / bottom / left / right / center |
1.如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一样(左上角)； 2.如果只指定了一个方位名词(只确定一个方向)，另一个值省略，则第二个值默认居中对齐。如，background-position: top;(靠上边框，左右居中对齐) |
| 精确单位 | 百分数 / 由浮点数字和单位标识符组成的长度值 |
1.如果参数值是精确坐标，第一个肯定是x坐标，第二个一定是y坐标； 2.如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。如，background-position: 20px;(距离左边框20px，上下居中) |
| 混合单位 | 方位名词和精确单位混合使用 |
第一个值是x坐标，第二个值是y坐标。不能调换位置。 如，background-position: center 40px;(左右居中，距离上边框40px) |
5.背景图像固定(背景附着) background-attachment
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
可以做视差滚动的效果
background-attachment: scroll ; 默认效果，背景图像是随着对象内容滚动fixed 背景图像固定，不随对象内容而滚动(如QQ官网页面)6.背景尺寸
| 属性名 | 属性值 | 描述 |
|---|---|---|
|
background-size (控制背景图片大小) |
auto |
默认值，使用背景图片保持原样 |
|
% |
当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的 |
|
|
cover |
整个背景图片放大直至填充了整个盒子，图片可能会有部分因溢出而显示不出来 |
|
|
contain |
让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域,可能会有空白部分 |
|
| 80px 60px | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设为auto(自动) |
7.背景复合写法
没有特定的书写顺序，一般习惯约定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置/背景图片的大小 ;
background: transparent url(1.jpg) repeat-y fixed top/cover ;
注：无背景图片位置时，背景图片的大小不可连写。 /背景图片的大小 此写法错误.div {background-color: red;background: url(1.jpg) no-repeat;}
结果：不会显示背景颜色
原因：background复合属性内默认颜色为transparent(透明的)，由于CSS的层叠性，先设置的背景颜色就不会显示（font复合属性也是如此）
解决方法一：更换代码顺序.div {background-color: red;background: url(1.jpg) no-repeat;}
解决方法二：把颜色添在一行代码中.div {background: red url(1.jpg) no-repeat;}8.背景色半透明
background: rgba(0,0,0,0.6);
最后一个参数是透明度，取值范围在0~1之间注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。(可用于导航栏的下拉列表)
七、元素显示模式
1.块级元素
div，dl，dt，h1-h6，hr，ol，ul，p，pre，tr，table
（1）每个块级元素都独占一行；
（2）可以设置元素的宽度(width)、高度(height)、行高、边距。
当没有设置宽高时，宽度和父级元素一样，高度由元素内容的高度决定；
当设置宽高时，元素的宽高就是设置的值，即使溢出，宽高也不会改变。
注：文字类元素不能使用块级元素(<p>、<h1-h6>内不能放<div>)。
2.行级元素
a，br，em，img，input，span，strong，sub，sup，textarea
（1）可以和别的行级元素共享一行；
（2）不可以设置宽高，宽高由元素内容决定，设置的宽高无效。
（3）行内元素内不能放块级元素，只能容纳文本或其它行内元素。特殊情况：<a>里面可以放块级元素（实现商品类的范围点击，如下代码），但给<a>转换一下块级模式最安全。
a链接的范围点击
<a href=""><div>商品信息</div>
</a>3.行内块级元素
img，input，td，button，textarea
问题：一行放多个图片时，图片之间会有空白缝隙？
解决：html中img标签不要换行，即带有inline都有文字特性(文字分割符)。
（1）可以在一行中放置多个行内块级元素，但是一行多个图片之间会有空白缝隙；
（2）可以设置宽高。
当没有设置宽高时，宽高由元素内容的宽高决定；
当设置宽高时，元素的宽高就会变成设置的宽高大小（如，更改图片的大小）。
4.元素类型的转换 (display)
问题：增加链接<a>的触发范围？ 解决：将<a>转为块级元素，再设置宽、高度。
display: block ; 转换为 块级元素inline 转换为 行级元素inline-block 转换为 块内行级元素5.元素显隐
display: none ;隐(代码依然存在，但元素在页面所占空间会被隐藏)
display: block / inline / inline-block ;显(分别是块级/行级/行内块级元素显示，但是用类型与元素类型不符时，元素类型将会被转换)案例—简洁版小米侧边栏
<head><style type="text/css">a {display: block;width: 200px; height: 50px;font-size: 14px;color: white;padding-left: 30px; //为保持盒子的width还为230px，将width=230-30=200pxline-height: 50px;background-color: grey;text-decoration: none;}a:hover {background-color: orange;color: white;text-decoration: none;}</style>
</head>
<body><div class="nav"><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a></div>
</body>八、盒子模型
盒子模型的组成：实际内容(content)、内边距(padding)、边框(border)、外边距(margin)
盒子尺寸计算
盒子尺寸= content + padding + border (CSS的盒子)
padding 和 border 会影响盒子的大小 ，若要保持盒子大小不变
方法一：让width/heigth减去多出来的大小即可；
方法二：自动内减—给盒子加上 box-sizing: border-box; (CSS3的盒子尺寸=内容) 例：
div {width: 200px;height: 200px;background-color: coral;box-sizing: border-box;}
div:hover { border: 5px solid seagreen; }
结果：div始终都是200px1.实际内容(content)
2.内边距(padding)
padding控制边框与内容的距离，会影响盒子的大小 (若要保持盒子大小不变，则让width/heigth减去多出来的大小即可)。
若盒子本身没有指定width/height属性(继承父级的宽高)，则padding不会撑开盒子的大小。
| 值的个数 | 表达含义 |
|---|---|
| padding: 5px; | 1个值，上下左右都为5 |
| padding: 5px 10px; | 2个值，上下5；左右10 |
| padding: 5px 10px 20px; | 3个值，上5；左右10；下20 |
| padding: 5px 10px 20px 30px; | 4个值，上右下左（顺时针） |
案例-新浪导航栏
重点：当导航栏中的字数不一样时，用padding控制左右距离
<head><style type="text/css">.nav ul li {display: inline-block;list-style-type: none;}.nav a {display: inline-block;text-decoration: none;color: #4c4c4c;font-size: 14px;height: 41px;line-height: 41px;background-color: #fcfcfc;padding: 0 10px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}.nav a:hover {background-color: #eee; color: #ff8500;}</style>
</head>
<body><div class="nav"><ul><li><a href="#">设为主页</a></li><li><a href="#">手机新浪网</a></li><li><a href="#">移动客户端</a></li><li><a href="#">博客</a></li><li><a href="#">微博</a></li><li><a href="#">关注我</a></li></ul></div>
</body>3.边框(border)
border：border-width border-style border-color;
border：1px solid(实线)/dashed(虚线)/dotted(点线)/double(双线) red;
border是复合属性，也可将边框宽度、类型、颜色分开独立写
可以给每条边设置不同的宽度、类型、颜色(如，border-top-color).注意 层叠性圆角边框(border-radius)
原理：有一定半径的(椭)圆与边框相切形成的圆角效果。
| 形状 | 实现思路 |
代码实现 (单位可以是 em % px ) |
|---|---|---|
| 圆 | 半径=正方形宽高的一半 |
width: 200px; height: 200px; border-radius: 50%或100px; |
| 圆角矩形 | 半径=高的一半 |
width: 200px; height: 100px; border-radius: 50px; |
| 设置不同的圆角 |
每个角也都可单独设置； 4个值表示左上(border-top-left-radius)，右上(border-top-right-radius)， 右下(border-bottom-right-radius)， 左下(border-bottom-left-radius)（顺时针）； 2个值表示对角线上的角（左上右下和右上左下） 3个值表示左上，右上和左下，右下 |
width: 200px; height: 200px; border-radius: 10px 20px 30px 40px; |
合并边框(border-collapse: collapse;)
表格细线边框
border-collapse: collapse;合并相邻的边框(使2条边框合二为一)
如，表格整体为红色，表头为绿色，边框为1px
table,td{border: 1px solid red; border-collapse: collapse;}
table th {border: 1px solid green;}注：边框会影响盒子的大小 width/heigth=width(content)+2*border-width
4.外边距(margin)
（1）margin控制盒子与盒子之间的距离，不会撑大盒子；
（2）margin不同的值个数的代表意义与padding完全一致；
（3）margin让块级盒子水平居中
| 操作步骤 | 代码表示 | ||
|---|---|---|---|
| 块级盒子水平居中 |
1.盒子必须指定了宽度； 2.盒子左右的外边距都设置为auto |
div {width: 200px; margin: 0 auto;} | |
| 行内元素或行内块元素水平居中 |
给其父元素(块元素)添加 text-align：center; 让子元素(行内元素、行内块元素)居中 原因：行内元素、行内块元只站自身部分的区域 |
让<div>里的<img>居中 div { text-align：center;} |
|
| 导航条居中 |
方法一： 将 li、a 变为 行内块元素 给父元素div 添加 text-align: center; div { text-align: center; } ul li { display: inline-block; } a { display: inline-block; } 方法二： 将 li 向左浮动并将文字居中，a 转变成行内块元素，将 ul 使用 margin 左右居中 ul { width: 320px; margin: 0 auto; } ul li { float: left; text-align: center; } a { display: inline-block; } |
<div> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> </ul> </div> |
|
（4）margin垂直合并问题
场景：垂直布局 的 块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：只给其中一个盒子设置margin即可
（5）嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距的值。（即，互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上，导致父元素一起往下移动）
| 塌陷时的代码 | 3种解决方案 | 代码表示 |
|---|---|---|
|
son的上边框不会与father的上边框分开 <style type="text/css"> |
为父元素定义上边框（会改变盒子的大小） | .father { border: 1px solid transparent;} |
| 为父元素定义上内边距（会改变盒子的大小） | .father { padding: 1px;} | |
| 将父元素、子元素其中一个转换成行内块元素或设置浮动 | ||
| 为父元素添加 overflow: hidden；（隐藏溢出，原理：触发BFC） | .father { overflow: hidden;} |
（6）清除内外边距(初始化)
* {padding: 0; margin: 0;}注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(行内元素无高)。
（7）margin负值的巧妙运用
边框的重叠[ margin= -边框的宽度px ]，若要hover时因被别的盒子压住而显示不出边框时，使用 z-index 解决。
5.盒子阴影(box-shadow)
box-shadow: 6px 8px 12px 4px rgba(0,0,0,0.3);
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 （正右负左） |
| v-shadow | 必需的。垂直阴影的位置。允许负值 （正下负上） |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色 |
| inset |
可选。将外阴影（开始时）改成内阴影 |
注：1.默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效。即，box-shadow: outset 会使整个阴影不起作用，box-shadow: inset；阴影是内阴影。
2. 盒子阴影不占用空间，不会影响其他盒子排列。
3.鼠标浮动盒子之上，阴影出现。div:hover {box-shadow: 6px 8px 12px 4px rgba(0,0,0,0.3);}
九、浮动布局(float)
浮动：一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。（即，left浮动—贴着父级左边框显示；right浮动—贴着父级右侧边框显示）
浮动的作用：让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
1.浮动(float)的属性值
| float: 属性值； | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 元素不浮动（默认值） |
2.浮动的排列特性
（1）浮动元素会脱离标准流(脱标)
浮动的盒子不再保留原先的位置
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
（2）浮动的元素会一行内显示并且元素顶部对齐排列
浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
（3）任何元素都可以添加浮动，浮动的元素会具有行内块元素的特性，所以浮动的元素可以直接设置宽高(没添加浮动、没设置宽度时，默认宽度和父级一样宽；添加浮动后、没设置宽度时，它的大小由内容的多少决定)
（4）浮动的元素在父元素内进行浮动，不会超出父元素。
（5）浮动的元素只会影响下面的盒子，但压不住盒子里的内容(文字、图片)
浮动一开始用于做“文字环绕图片”的效果
3、文字围绕元素巧妙运用
利用的是：浮动元素不会压住文字
4.右浮—盒子的顺序不变
操作方法：让多个小盒子左浮，外边再加个右浮的大盒子
让3个小盒子按照红、绿、蓝顺序靠右排列
<head><style>.nav li:first-child a:first-child {} */.F {float: right;}.red,.green,.blue {width: 200px;height: 200px;}.red {float: left;background-color: red;}.green {float: left;background-color: green;}.blue {float: left;background-color: blue;}</style>
</head>
<body><div class="box"><div class="F"><div class="red"></div><div class="green"></div><div class="blue"></div></div></div>
</body>5.常见的网页布局
注： (1) top和footer 为通栏盒子(和浏览器一样宽)，不需要指定宽度;
(2) box盒子内的子盒子数量确定，需要指定box盒子的高度（不清除浮动的情况下）。
<head><meta charset="UTF-8" /><title>网页布局</title><style type="text/css">* {padding: 0; margin: 0;}/*top*/ /*top和footer 为通栏盒子(和浏览器一样宽)，不需要指定宽度*/ .top {height: 50px; background-color: gray;}/*banner*/.banner {width: 1200px; height: 200px; background-color: gray; margin: 20px auto;}/*box1*/.box1 {list-style-type: none;width: 1172px; height: 180px;background-color: gray;margin: 0 auto 20px;padding: 14px;}.box1 li {float: left;width: 282.5px; height: 180px;list-style-type: none;background-color: #ffc773;margin-right: 14px;}.box1 li:last-child {margin: 0;}/*box2*/.box2 {width: 1200px; height: 300px; background-color: gray;margin: 0 auto 20px;}.box2 div {float: left;width: 289.5px; height: 300px; background-color: #ffc773;margin-right: 14px;}.box2 div:last-child {margin: 0;}/*box3*/.box3 {width: 1200px; height: 600px; background-color: gray;margin: 0 auto 20px;}.box3 .left {float: left;width: 300px; height: 600px; background-color: #ffc773;}.box3 .right {float: left;width: 900px; height: 600px; background-color: skyblue;}.box3 .right div {float: left;width: 211px; height: 293px; background-color: #ffa400;margin-left: 14px;margin-bottom: 14px;}/*footer*/.footer {height: 200px; background-color: gray;}</style>
</head>
<body><div class="top"></div><div class="banner"></div><div class="box1"><ul><li></li><li></li><li></li><li></li></ul></div><div class="box2"><div></div><div></div><div></div><div></div></div><div class="box3"><div class="left"></div><div class="right"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div><div class="footer"></div>
</body>6.清除浮动(clear)
（1）为什么需要清除浮动？
父级盒子不确定子级盒子有多少个，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。(情况如下图)
问题引起的原因：由于浮动元素不在占用原文档的位置，所以它会对后面的元素排版产生影响。
需要清除浮动的情况：子盒子浮动(浮动不保留原来的位置)，而没给父盒子高度，下边的标准流盒子就会跑到浮动盒子的下边
（2）清除浮动的本质
清除浮动的本质是清除浮动元素对其它元素造成的的影响。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
（3）清除浮动的属性值
| clear：属性值； | 描述 |
|---|---|
| left | 在左侧不允许浮动元素（清除左侧浮动的影响） |
| right | 在右侧不允许浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响（多数使用） |
（4）清除浮动的3种方法
清除浮动的策略：闭合浮动
| 清除浮动的方法 |
额外标签法 （隔墙法） |
父级添加overflow属性 | 父级添加after伪元素 | 父级添加双伪元素 |
|---|---|---|---|---|
| 操作方法 |
在浮动元素末尾添加一个空标签，使之作为闭合浮动的墙 例：<div class="wall"></div> 或者其他标签(如<br>) 注：添加的空标签必须是块级元素 |
给父级添加overflow属性，属性值设置为hidden，auto 或 scroll |
是额外标签法的升级版。 在父级盒子后面加一个 :after盒子(父级盒子前面堵上) 添加一个假标签来清除浮动 |
在父级盒子前面加一个 :before盒子,后面加一个 :after盒子(父级盒子前后堵上) |
|
代码实现 (基本代码：father盒子里有3个son盒子) <div class="father" style="width: 1200px; background-color: burlywood; margin: auto;"> |
HTML： <div class="wall"></div> 加在son3盒子后面 |
HTML： 无 |
HTML： <div class="father clearfix"></div> 给父级father添加一个类名，可以是别的，但大多数是clearfix |
|
|
CSS： .son1,.son2,.son3 {float: left;} .wall {clear: both;} |
CSS： .son1,.son2,.son3 {float: left;} (溢出隐藏) |
CSS： .son1,.son2,.son3 {float: left;} height: 0; |
CSS： .son1,.son2,.son3 {float: left;} |
|
| 优缺点 |
优点：通俗易懂，书写方便； 缺点：添加许多无意义的标签，结构化较差 |
优点：代码简洁； 缺点：无法显示溢出的部分 |
优点：没有添加标签，结构更简单； 缺点：照顾低版本的浏览器 |
优点：代码更简洁； 缺点：照顾低版本的浏览器 |
十、定位
作用：定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位的组成：定位=定位模式(用于指定一个元素在文档中的定位方式)+边偏移(决定元素的最终位置)
1.定位模式 position
| 属性名 | 属性值 | 语义 | 移动位置的参考点 | 是否保留原来的位置 |
|---|---|---|---|---|
|
position |
static |
静态定位 | 无定位 | 是 |
|
relative |
相对定位 | 自己原来的位置 | 是 | |
|
absolute |
绝对定位 | 最近一级有定位(非静态)的祖先元素 | 否 | |
|
fixed |
固定定位 | 浏览器的可视窗口 | 否 | |
| sticky | 粘性定位 | 浏览器的可视窗口 | 是 |
【1】静态定位 static
静态定位是元素的默认定位方式，无定位的意思。
静态定位按照标准流特性摆放位置，它没有边偏移。
【2】相对定位 relative
（1）相对定位：元素在移动位置的时候，是相对于它原来的位置来说的。
（2）特点：1）元素是相对于它原来的位置来移动的（移动位置的参考点是自己原来的位置）；
2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置，因此作为绝对定位的父元素）
【3】绝对定位 absolute
（1）绝对定位：元素在移动位置的时候，是相对于它祖先元素来说的。
（2）特点：1）如果没有祖先元素或者祖先元素没有定位时，则以浏览器为准定位(Document文档)；
2）如果祖先元素有定位(相对、绝对、固定定位)时，则以最近一级有定位的祖先元素为参考点移动位置（即，只在父元素中自由移动）；
3）绝对定位不再占有原先的位置(脱标)；
子绝父相
含义：子级是绝对定位的话，父级大概率要用相对定位；
原因：父级需要占有位置(不然后面的盒子会顶上来)，因此用相对定位；子盒子不需要占有位置，因此用绝对定位。（当父元素不需要占有位置时，子绝父绝也会遇到）
绝对定位的盒子居中
前情提要：margin: auto; 对绝对定位的盒子不起作用（对相对定位起作用）。
1. 水平居中的步骤：
1）让绝对定位的盒子 left: 50%; ，盒子的左边框就移到父元素的水平中心位置；
2）让绝对定位的盒子向左移动自身宽度的一半 margin-left: -绝对定位的盒子的宽度/2;
2. 垂直居中的步骤：
1）让绝对定位的盒子 top: 50%; ，盒子的上边框就移到父元素的垂直中心位置；
2）让绝对定位的盒子向上移动自身宽度的一半 margin-top: -绝对定位的盒子的宽度/2;
注：在父盒子居中时，给父盒子加上 position: relative;（相对定位）
让宽200、高100的 绝对定位的 橘色盒子在父盒子居中显示
<head><style>.f {position: relative;width: 800px;height: 600px;border: 5px solid #000;}.son {width: 200px;height: 100px;background-color: coral;/* 方法一 position: absolute;left: 50%;margin-left: -100px;top: 50%;margin-top: -50px; *//* 方法二 position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); *//* 方法三 position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto; */ //当top/bottom/left/right 的值一样时，margin: auto; 又会起作用}</style>
</head>
<body><div class="f"><div class="son"></div></div>
</body>【4】固定定位 fixed
（1）固定定位可将元素固定于浏览器可视区的位置（页面滚动时元素的位置不会改变）
（2）特点：1）以浏览器的可视窗口为参照点移动元素；
2）跟父元素没有关系，只给元素本身设置定位就可以；元素不随滚动条滚动；
3）固定定位不占有原来的位置(脱标)。
固定在版心右侧的位置
步骤：1）让固定定位的盒子 left: 50%; ，盒子的左边框就走到浏览器可视区(即版心)的一半的位置；
2）让固定定位的盒子 margin-left: 版心的宽度/2; 盒子的左边框就到了版心的右侧。
<head><style>.fixed { //固定定位position: fixed;top: 200px;left: 50%;margin-left: 460px;width: 30px;height: 50px;background-color: cornflowerblue;}.w { //版心width: 920px;margin: 0 auto;background-color: darksalmon;}</style>
</head>
<body><div class="fixed">固定定位</div><div class="w">版心</div>
</body>【5】粘性定位 sticky
（1）粘性定位可以被认为是相对定位和固定定位的混合。
（2）作用：盒子先随滚动条滚动，到一定位置时固定在可视区中（实际中不用粘性定位做，用JS做此效果）
（3）特点：1）以浏览器的可视窗口为参照点移动元素(固定定位特点)；
2）粘性定位占有原先的位置(相对定位特点)；
3）必须添加 top/left/tight/bottom 其中一个才有效；
4）跟页面滚动搭配使用。兼容性较差，IE不支持。
2.边偏移
| 边偏移属性 |
写法 (单位：px / %) |
描述 | |
|---|---|---|---|
| top | top：80px; | 顶端偏移量，定义元素相对于其父元素上边线的距离 | |
| bottom | bottom：80px; | 底部偏移量，定义元素相对于其父元素下边线的距离 | |
| left | left：80px; | 左侧偏移量，定义元素相对于其父元素左边线的距离 | |
| right | right：80px; | 右侧偏移量，定义元素相对于其父元素右边线的距离 | |
|
top: 0; left: 0; 左上角 |
top: 0; right: 0; 右上角 |
bottom: 0; left: 0; 左下角 |
bottom: 0; right: 0; 右下角 |
3.定位的特殊特性
（1）行内元素添加绝对或固定定位，可以直接设置高度和宽度；
块级元素添加绝对或固定定位，如果不给宽高，默认的是内容的宽高（和浮动类似）；
（2）浮动的元素不会压住下面标准流盒子里的内容(文字、图片)；
绝对/固定定位的元素会压住下面标准流盒子里的所有内容；
（3）脱标的盒子不会触发外边距塌陷：浮动元素、绝对/固定定位元素都不会触发外边距合并问题
4.定位的叠放顺序 z-index
选择器 { z-index: 1; }
（1）出现盒子重叠的情况时，可以使用 z-index 来控制盒子的前后顺序；
（2）只有定位的盒子才有 z-index 属性
（3）属性值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上；
（4）数字不能加单位；
（5）如果属性值相同，则按照书写顺序，后来居上；
十一、元素的显示与隐藏
1.元素的显示与隐藏
| 属性名 | 隐藏元素 | 区别 | 显示元素 |
|---|---|---|---|
| display | none | 隐藏后，不占有原来的位置 | block |
| visibility | hidden | 隐藏后还保留原来的位置 | visible |
display: none/block; 可用于导航栏、二维码的显示/隐藏
2.溢出隐藏 overflow: hidden;
| 属性名 | 属性值 | 描述 |
|---|---|---|
| overflow | visible | 默认值 |
| hidden | 溢出的部分隐藏 | |
| scroll | 显示滚动条 | |
| auto | 无溢出，不显示滚动条；有溢出，显示滚动条 | |
| inherit | 继承父元素的overflow属性值 |
注：如果有定位盒子，要慎用overflow: hidden; 因为它会隐藏盒子外的部分。
十二、CSS高级技巧
1.精灵图
（1）CSS精灵技术(也称CSS Sprites、CSS雪碧)目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
（2）原理：把多个小背景图片整合到一张大图中
（3）使用方法：使用 background-position (或连写) 找到想要的图片即可。一般精灵图都是负值(x轴往右为正，往左为负；y轴往下为正，往上为负)。如下，
给盒子宽高，加背景图片，移动位置
div {width: 25px;height: 25px;background: url(./images/index.png) -252PX -88px;/* background: url(./images/index.png); *//* background-position: -252PX -88px; */}2.字体图标
【1】字体图标展示的是图标，本质属于字体。
主要用于网页中通用、常用的小图标（如，小三角、放大镜、地址标志）
【2】优点
总结：结构样式简单的用字体图标；结构样式复杂的用精灵图。
【3】使用方法
（1）字体图标的下载
| 下载网站 |
icomoon字库 http:/icomoon.io |
|---|---|
|
阿里iconfont字库 http:/www.iconfont.cn/ |
（2）字体图标的引入(引入到html中)
引入方法一：
1）把下载包里的 fonts 文件夹放入页面根目录下(即跟html文件同级)
2）把下载包里的 style.css 文件中的一部分代码复制到html文件的 <style></style> 中或者复制到html链接的CSS文件中，如图
3）打开下载包里的 demo.html 文件(可查看下载的图标)，复制想要的图标后的小方框，粘贴到html中的标签中
4）给添加字体图标的标签确定字体(font-family)属性值，font-family: 'style.css文件中声明的字体'; 并且可以自己添加属性
CSS：/* 字体声明 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?1r2nbf');src: url('fonts/icomoon.eot?1r2nbf#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?1r2nbf') format('truetype'),url('fonts/icomoon.woff?1r2nbf') format('woff'),url('fonts/icomoon.svg?1r2nbf#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon'; //必须和字体声明中一样color: orange; //可以添加一些属性，对字体图标进行修改font-size: 100px;}
HTML：
<body><span></span>
</body>引入方法二：（css文件放在CSS文件夹中）
1）把下载包里的 fonts 文件夹放入页面根目录下(即跟html文件同级)；
2）把下载包里的 style.css 放入CSS文件夹中；
3）在html文件中链接 style.css 和 本网页.css ；
4）将 style.css 中的路径改为
5）打开 demo.html ，复制图标的类名，粘贴到html文件的标签中；
6）在 本网页.css 中更改字体图标的属性（加不加 ::before 都可）
【3】字体图标的添加（怎么向原来的字体文件中添加新的字体图标）
把压缩包里的 selection.json 文件导入到网址中，就会显示已经下载了哪些图标，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件(fonts文件夹、复制到CSS的部分)即可。
【4】svg上传：当图标库无法满足需求。
3.CSS三角
作用：可结合定位(position)给对话框加小三角
步骤：
（1）一个盒子宽高为0；
（2）给盒子一个有一定宽度的透明的边；
（3）给需要显示的边一个颜色即可；
HTML：<body><div></div></body>CSS：div {width: 0;height: 0;line-height: 0; //照顾兼容性，可写可不写font-size: 0; //照顾兼容性，可写可不写border: 50px solid transparent;border-top-color: red; //上边的盒子border-right-color: green; //右边的盒子border-bottom-color: blue; //下边的盒子border-left-color: yellow; //左边的盒子}效果如图，
直角三角形
思路：想让哪条边变成直角，就让挨着这条边的三角形等于0；另一个挨着这条边的三角形控制直角三角形的高度。
div {width: 0;height: 0;border: 100px solid transparent;border-top: 150px solid transparent; //控制直角三角形直角三角形的高度border-right: 0;border-bottom: 0; //让左右边框的三角形变为直角三角形border-left-color: skyblue;}
4.CSS用户界面样式
（1）更改用户的鼠标样式 cursor
| 属性名 | 属性值 | 效果 |
|---|---|---|
| cursor | default | 默认值，箭头 |
| pointer | 小手效果，提示用户可以点击 | |
| text | 工字型，提示用户可以选择文字 | |
| move | 十字光标，提示用户可以移动 | |
|
not-allowed |
红色圆圈，禁止 |
（2）取消表单轮廓线 outline
轮廓线就是点击input输入框后，出现的蓝色边框。
给表单添加 input { outline: 0; 或 outline: none; }
（3）防止文本域拖拽 resize
textarea { resize: none; }
注意：html中 textarea 标签要写到一行中，否则点击时光标前面会有空白。
5.基线对齐 vertical-align
作用：常用于设置图片或表单(行内块元素)与文字垂直对齐；
注意：vertical-align 只针对行内元素、行内块元素有效。
| 属性名 | 属性值 | 效果 |
|---|---|---|
|
vertical-align |
baseline |
默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 | |
| middle | 把此元素放置在父元素的中部 | |
| bottom | 把元素的低端与行中最低元素的低端对齐 |
6.解决图片底部默认空白缝隙问题
问题原因：图片默认的是跟文字的基线对齐的。
| 方法 | 操作 |
|---|---|
| 一 | 给图片添加 vertical-align: middle/top/bottom; |
| 二 | 把图片转换成块级元素 display: block; |
7.溢出的文字省略号显示
（1）单行文本溢出显示省略号
1.先强制文本显示在一行white-space: nowrap; （默认 normal 自动换行）
2.超出的部分隐藏overflow: hidden;
3.用省略号替代超出的部分text-overflow: ellipsis;（2）多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webKit内核)
overflow: hidden;text-overflow: ellipsis;
将盒子转换成弹性伸缩模型display: -webkit-box;
显示2行文字，在第二行末尾显示省略号（要注意盒子的高度）-webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式-webkit-box-orient: vertical;8.元素整体透明 opacity
作用：让某元素整体(包括内容/文字/子元素)一起变透明，常与JS配合使用。
属性值：0(完全透明)~1(完全不透明)
9.过渡 transition
（1）transition: 过渡属性 过渡时间 运动曲线 延迟开始 ;
（2）谁要过渡给谁加transition属性，一般属性值时数值才可以过渡
（3）display:none ~block 不能过渡
（4）逐渐消失——使用opacity颜色渐渐变透明，但是还是保留位置的
| 属性名 | 属性值 | 说明 | 注意点 | |
|---|---|---|---|---|
| transition | ||||
| transition-property | 过渡属性 |
需要过渡的标签名 默认值 all |
||
| transition-duration | 过渡时间 | 默认值 0 | ||
| transition-timing-function |
运动曲线 cubic-bezier.com |
ease | 默认值，慢快慢过渡 | |
| linear | 匀速过渡 | |||
| transition-delay | 延迟开始 | 默认值 0 | ||
| 连写 |
transition: 过渡属性 过渡时间 运动曲线 延迟开始 ; transition: width 2s ease 0s; |
|||
箭头移入box区域，就可以变化
CSS：
.box {width: 100px;height: 100px;}
.s {position: absolute;top: 0;left: 0;width: 100px;height: 80px;background: url(./images/abcd.jpg) -256px -419px;box-shadow: 0 15px 15px rgba(0, 92, 221, 0.5);transition: width 2s ease 0,height 5s ease 2s; //宽过渡完，高再过渡transition: all 2s; //所有的属性都过渡transition: 2s; //all为默认值，可省略}
.box:hover .s { //鼠标放在box上，s就可以变化top: 200px;left: 300px; //位置移动width: 200px; //宽高改变height: 300px;background: url(./images/child.png); //背景图片更换box-shadow: 0 15px 15px rgba(184, 3, 18, 0.5); //盒子阴影变化}HTML：
<div class="box"><span class="s"></span>
</div>10、表格边框合并 border-collapse
border-collapse: collapse; 加给table才有效
十三、CSS3
1、属性选择器
2、结构伪类选择器
3、伪元素选择器
4、2D转换(transform)
转换可实现元素的位移(translate)、旋转(rotate)、缩放(scale) 。
（1）位移(translate)
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
transform: translate(100px); //只有一个值时，代表X轴移动100px优点：不会影响其他元素的位置；
单位：px 或 % ，数值可正可负；
translate中的百分比单位是相对于自身元素的，translate(50%,50%)；
对行内元素没有效果；
（2）旋转(rotate)
transform: rotate(度数);
transform: rotate(45deg); //顺时针旋转45度度数可正可负，单位是deg
度数为正，顺时针；度数为负，逆时针；
默认旋转的中心点是元素的中心点；
（3）缩放(scale)
transform: scale(缩放倍数);
transform: scale(x轴缩放倍数,y轴缩放倍数);
一般只写一个值，等比例缩放不用加单位
>1 放大；
0~1 缩小；
<0 图片颠倒缩放；
（4）transform复合写法
transform: translate rotate scale;先位移后旋转，旋转和缩放的位置可互换；
先写旋转会影响转换结果，因为旋转会改变网页元素的坐标轴向（一边旋转，轴向也旋转）；
转换原点(transform-origin)
transform-origin: right bottom; //以右下角为中心| 单位 | 方位名词 | top / bottom / center / left / right | 一个值是以这条边的中心点旋转 |
|---|---|---|---|
| top left / bottom left / .... | 两个值是以角旋转 | ||
| px | |||
| % | 按照自身尺寸计算的 |
- 属性值之间用空格隔开 ；
- 谁变给谁加，跟过渡一样 ；
5、渐变背景
线性渐变
background-image: linear-gradient(orange, red, purple);
background-image: linear-gradient(transparent, rgba(0, 0, .5));用逗号隔开，可以写多种颜色；
默认是从上到下的渐变（线性渐变）；
修改渐变方向
在属性值前加 to+方向/角度
background-image: linear-gradient(to right,orange, red);| 方位名次 | to bottom（向下，默认方向），to top（向上），to right，to left |
| to top left（向左上角），to top right（向右上角），to bottom left（向左下角），to bottom right（向右下角） | |
| 角度 | 如：to 90deg 正逆负顺 |
6、动画(animation)
作用：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
步骤：
（1）用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{ //关键帧0%{width: 100px;} //开始状态/* from {width: 100px;} */100%{width: 200px;} //结束状态/* to {width: 200px;} */
}0%和100%称为动画序列，可以添加任意多的次数，如，25%，75%；
关键词“from”、“to”等同于0%和100%；
（2）调用动画
div{
animation：动画名称(必) 动画时长(必)//复合连写属性,取值不分先后
animation：change 2s steps(5) 1s ;/* animation-name: 动画名称; */ //调用动画/* animation-duration: 持续时间; */ //持续时间，单位为s或ms
}- 多组动画用逗号隔开 。
animation复合属性
div {
animation：动画名称(必) 单位：s或ms(毫秒)动画时长(必)速度曲线(linear/steps(4))延迟时间重复次数(infinite 无数次)动画方向(alternate 回去时原路返回 回去也算一次)执行完毕时状态(forwards 停止在最后结束时的状态上 / backwards); }- 动画名称、动画时长必须赋值；
- 取值不分先后顺序；
- 有2个时间值时，第一个表示动画时长，第二个表示延迟时间；
- 要想执行完毕后的状态生效，需取消 动画次数和方向运动属性；
动画属性
- steps(数字) 可用来做逐帧动画
7、3D(空间)转换(transform)
实现元素在空间内的位移、旋转、缩放效果
（1）空间位移(translate3d)
transform: translate3d(x, y, z);
transform: translateX(n);
transform: translateY(n);
transform: translateZ(n);- 单位：px 或 % ，数值可正可负；
透视(perspective)
作用：空间转换时，为元素添加近大远小（rotate）、近实远虚（translate）的视觉效果；
perspective为视距，即眼睛到物体的距离。
perspective: 值;注意点：
1.取值：数值一般在800px– 1200px
2.添加给变化元素的父级（2）空间旋转
物体旋转会带动坐标轴旋转
transform: rotateX(n);
transform: rotateY(n);
transform: rotateZ(n);判断旋转方向: 左手法则（左手握住旋转轴, 拇指指向坐标轴的正方向, 手指弯曲方向为旋转正值方向）
rotate3d(x, y, z, 角度度数) ；- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度;
- x，y，z 取值为0-1之间的数字;
（3）空间缩放
transform: scaleX(n倍);
transform: scaleY(n倍);
transform: scaleZ(n倍);
transform: scale3d(X, Y, Z);- 取值与2D转换的scale相同。
3D立体空间呈现
transform-style: preserve-3d;- 给父元素添加，使子元素处于真正的3d空间；
- 默认值为flat，表示子元素处于2D平面内呈现；
十一、CSS属性书写顺序
书写顺序有问题，会回流重绘、消耗性能。
| 1 | 布局定位属性 | display(第一个写) \ position \ float \ clear \ visibility \ overflow |
|---|---|---|
| 2 | 盒子自身属性 | width \ height \ margin \ padding \ border \ background |
| 3 | 文本属性 | color \ font- \ text- \ vertical-align \ white-space \ break-word |
| 4 |
其他属性(CSS3) |
content \ cursor \ border-radius \ box-shadow \ text-shadow \ background：linear-gradient |
十二、页面布局整体思路
| 步骤 | 总结 | |
|---|---|---|
| 1 | 确定页面的版心(可视区的宽度) | 先理布局结构，再写代码 |
| 2 | 分析页面中的行模块以及每个行模块中的列模块 | |
| 3 | 一行中的列模块经常浮动布局，先确定每个列的大小，在确定列的位置 | |
| 4 | 制作HTML结构(遵循先有结构、后有样式的原则) | |
通栏and版心
1.通栏：从左贯穿到右的盒子。只设高，不设宽。
2.版心：有宽度且居中的盒子。
注意：通栏条中一般套一个版心，保持缩放时居中（如，网页的顶部导航条）
<div class="nav"> //通栏<div class="w"> //版心内容</div>
</div>十三、PS切图
| 切图方法 | 操作方法 |
|---|---|
| 图层切图 | 右击图层(多图层则合并图层) —> 快速导出为PNG |
| 切片切图 | 使用切片工具框选要导出的部分 —> 文件 —> 导出 —> 存储为Web所用格式 —> 存储 —> 切片：选中切片 |
| PS插件切图(Cutterman) |
官网：Cutterman - 最好用的切图工具 安装要求：PS必须是完整版，不是绿色版 安装后的位置：窗口 —>扩展功能 —> Cutterman-切图神器 |
| 选择“Web”和图片格式及保存路径 —> 选区框选或选中图层 —> 点击“导出选中图层”（多图层时，勾选上“合并导出选中的图层”） |
十四、综合案例
1.快报模块
<head><meta charset="UTF-8" /><title>快报</title><style type="text/css">* {padding: 0; margin: 0;}.frame {width: 350px; border: 1px solid #ddd; margin: 50px 50px;}.heading {border-bottom: 1px dotted #ddd; height: 40px; padding-left: 20px;}.heading h3 {font-weight: normal; line-height: 40px;}.tabulate ul {list-style-type: none; line-height: 26px; padding: 5px 5px 5px 15px;}.tabulate a {text-decoration: none; color: #444; font-size: 15px;}.tabulate ul li:hover {text-decoration: underline; color: #000;}</style>
</head>
<body><div class="frame"><div class="heading"><h3>品优购快报</h3></div><div class="tabulate"><ul><li><a href="#">【特惠】IP68级防水，防泼溅</a></li><li><a href="#">【特惠】K40电竞级游戏体验</a></li><li><a href="#">【特惠】真无线蓝牙耳机轻巧半入耳</a></li><li><a href="#">【特惠】运动手表超长续航，支持血氧功能</a></li><li><a href="#">【特惠】大师77超大屏高端画质</a></li></ul></div></div>
</body>CSS层叠样式表Cascading Style Sheets(2021.10.05)相关推荐
- CSS 指层叠样式表 (Cascading Style Sheets) 和选择器
CSS 指层叠样式表 (Cascading Style Sheets) 内联样式(行内样式) 在开始标记中通过style属性(attribute)来设置元素的样式.注意,这里的 property 指的 ...
- 样式表（CSS：Cascading Style Sheets）简要教程[上]
首先提供两个手册的下载 CSS2&JavaScript.rar 一．样式表基础 1． 样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类( ...
- CSS ： Cascading Style Sheets
作者:知乎用户 链接:https://www.zhihu.com/question/20077745/answer/137434995 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业 ...
- CSS(层叠样式表cascading style sheet)——CSS样式、基础选择器
一.CSS作用 对页面的外观进行美化 统一网站页面的风格 实现内容和样式的分离,适合团队开发 二.CSS语法规范 三.CSS引入方式 CSS的3种样式表 书写位置的不同分为:行内样式表(行内式) ...
- CSS（Cascading Style Sheets）层叠样式表
为网页添加样式 术语解释 '''css h1{ color:red; background-color:lightblue; text-align: center; } ''' CSS规则 = 选择器 ...
- CSS (Cascading Style Sheets)
CSS 是什么 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制 , 实现美化页面的效果 . 能够做到页面的样式和结构分离. 基本语 ...
- CSS层叠样式表（Cascading Style Sheets）
CSS简介 CSS全称为:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等. 使用CSS样式通过定义某个样式,可以 ...
- CSS（Cascading Style Sheet）
文章目录 CSS(Cascading Style Sheet) 使用方式 基本语法 颜色写法 选择器*** 标签选择器 id选择器 类选择器 选择器分组 层次选择器 伪类 pseudo-classes ...
- CSS(Cascading Style Sheets) 层叠样式表
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTM ...
最新文章
- ValueError: The data property of a figure may only be assigned a list or tuple that contains a .....
- python自动化测试xpath_Selenium自动化测试实例基于python
- LeetCode Summary Ranges(简单的数组处理)
- JDK和JRE的区别-zz
- 怎样自动提取邮件的内容_流程自动化和人工智能如何创建智慧物流？
- FPGA学习之路—接口（3）—SPI详解及Verilog源码分析
- C#InI文件读写剖析
- 分布式事物框架Easy-Transaction--使用入门介绍
- java 视频压缩_Java视频压缩有人会吗？
- 软件测试周刊（第21期）：不要告诉我你想干什么
- overflow解决float浮动后高度自适应问题
- python3文本文件读取方法_[Python3] 读取文本文件[TZZ]
- linux设置默认mbr,将默认 EC2 CentOS MBR 转换为 GPT 以绕过 2TiB 限制
- cad相对坐标快捷键_cad角度快捷键(cad角度命令怎么输入)
- php 字符串转换为函数是,php把字符串转换成html实体的函数htmlentities()
- 横河变送器EJA110E-JMS4J-919EA
- 在Java中将二进制数转化成十进制数
- 区块与共识（一）：解决竞选记账权的问题
- Vue 2项目如何升级到Vue 3？
- 小船过河问题解析（过度解析）