前端学习之CSS
总结汇总一些CSS层叠样式表相关的知识点。
文章目录
1. CSS样式表的引入
- 行内式（内联样式）
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
- 内部样式表（内嵌样式表）
<head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
</head>
<style>
/*选择器{属性:值；}*/
p {
color:#06C;
font-size:14px;
} /*文字的颜色是 蓝色*/
h4 {
color:#900;
}
h1 {
color:#090;
font-size:16px;
}
body {
background:url(bg2.jpg);
}
</style>
- 外部样式表（外链式）
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
- 三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
2. 代码风格与规范
- 样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
h3 {
color: deeppink;
font-size: 20px;
}
- CSS注释
p {
/* 所有的字体是14像素大小*/
font-size: 14px;
}
- 选择器 与 { 之间必须包含空格。
- 属性名与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
font-size: 12px;
- 并集选择器，每个选择器声明必须独占一行。
.post,
.page,
.comment {
line-height: 1.5;
}
一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
#username input {}
.comment .avatar {}
- 属性定义必须另起一行。
.selector {
margin: 0;
padding: 0;
}
- 属性定义后必须以分号结尾。
/* good */
.selector {
margin: 0;
}
- CSS属性书写顺序
遵循以下顺序：
- 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
3. CSS基础选择器
3.1 标签选择器
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3.2 类选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
<p class='类名'></p>
<head>
<meta charset="utf-8">
<style>
.blue {
color: blue;
font-size: 100px;
}
.red {
color: red;
font-size: 100px;
}
.orange {
color: orange;
font-size: 100px;
}
.green {
color: green;
font-size: 100px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
- 特殊用法- 多类名
我们可以给标签指定多个类名，从而达到更多的选择目的。
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
3.3 id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p>
3.4 通配符选择器
通配符选择器用*号表示， *就是 选择所有的标签
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
3.5 总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
3.6 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的子孙后代
.class h3{color:red;font-size:16px;}
3.7 子元素选择器
子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。这里的子指的是亲儿子不包含孙子重孙子之类。
.class>h3{color:red;font-size:14px;}
3.8 交集选择器
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
p.one{color:red;font-size:16px;}
其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
3.9 并集选择器
并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。
.one, p , #test {color: #F00;}
3.10 链接伪类选择器
用于向某些选择器添加特殊的效果
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
3.11 复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
4. CSS文字基础样式
4.1 font字体
选择器 { font: font-style font-weight font-size/line-height font-family;}
- 注意：
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
- 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的单位是px 像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal |
| font | 字体连写 | 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
4.2 color:文本颜色
color属性用于定义文本的颜色，
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
- 注意
我们实际工作中， 用 16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色
4.3 text-align:文本水平对齐方式
用于设置文本内容的水平对齐，相当于html中的align对齐属性
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
-
注意：
是让盒子里面的内容水平居中， 而不是让盒子居中对齐
4.4 line-height:行间距
用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px，一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;
4.5 text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，
属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
建议使用em作为设置单位。1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
4.6 text-decoration 文本的装饰
通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
4.7 CSS外观属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |
| line-height | 行高 | 控制行与行之间的距离 |
| text-align | 水平对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
| text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |
5. 标签显示模式
- 块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点
1.独占一行
2.高度，宽度、外边距以及内边距都可以控制。
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块级元素。
5.只有 文字才 能组成段落 因此p里面不能放块级元素，特别是p不能放div,同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
- 行内元素(inline-level)
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中标签最典型的行内元素。有的地方也成内联元素
行内元素的特点：
1.相邻行内元素在一行上，一行可以显示多个。
2.高、宽直接设置是无效的。
3.默认宽度就是它本身内容的宽度。
4. 行内元素只能容纳文本或则其他行内元素。
5. 链接里面不能再放链接。
6. 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
- 行内块元素（inline-block）
在行内元素中有几个特殊的标签<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
1.和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
2.默认宽度就是它本身内容的宽度。
3.高度，行高、外边距以及内边距都可以控制。
- 三种模式总结区别
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
标签显示模式转换 display
- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
6. CSS背景
- 背景颜色
background-color:颜色值; 默认的值是 transparent 透明的
- 背景图片
background-image : none | url (url)
- 背景图片
background-color:颜色值; 默认的值是 transparent 透明的
background-image : url(images/demo.png);
| 参数 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
- 背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
- 背景位置(position)
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
-
注意：
1.必须先指定background-image属性
2.position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
3.如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
4.如果只指定了一个方位名词，另一个值默认居中对齐。
5.如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
6.如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
7.如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标 -
背景附着
背景附着就是解释背景是滚动的还是固定的
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
- 背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;
- 背景透明(CSS3)
background: rgba(0, 0, 0, 0.3);
1.最后一个参数是alpha 透明度取值范围 0~1之间
2.我们习惯把0.3 的0省略掉 这样写background: rgba(0, 0, 0, .3);
3.背景半透明是指盒子背景半透明，盒子里面的内容不受影响
4.低于 ie9 的版本是不支持的。
- 背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |
| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
7. CSS 三大特性
7.1 CSS层叠性
指多种CSS样式的叠加，是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则：
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
7.2 CSS继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
7.3 CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，选择器相同，则执行层叠性，选择器不同，就会出现优先级的问题。
- CSS权重
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
1.值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
2.关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
- 权重叠加
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。例如如下样式选择器
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
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
继承的权重是0，修改样式，一定要看该标签有没有被选中， 如果选中了，那么以上面的公式来计权重。谁大听谁的。 如果没有选中，那么权重是0，因为继承的权重为0
8. 盒子模型
把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
8.1 盒子边框（border）
border : border-width || border-style || border-color
border: 1px solid red; 没有顺序
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
- 边框的样式：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线
| 上边框 | 下边框 | 左边框 | 右边框 |
|---|---|---|---|
| border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
| border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
| border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
| border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
- 圆角边框(CSS3)
border-radius:length; /*其中每一个值可以为 数值或百分比的形式。*/
border-radius: 50%;
- 盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
8.2 表格的细线边框
通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0,但是两个单元格之间的边框会出现重叠，从而使边框变粗.
table{ border-collapse:collapse; }
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}
</style>
- collapse 单词是合并的意思
- border-collapse:collapse; 表示相邻边框合并在一起。
8.3 内边距（padding）
是指边框与内容之间的距离。会撑大原来的盒子，通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小，如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
| 值的个数 | 表达意思 |
|---|---|
| 1个值 | padding：上下左右内边距; |
| 2个值 | padding: 上下内边距 左右内边距 ； |
| 3个值 | padding：上内边距 左右内边距 下内边距； |
| 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |
8.4 外边距（margin）
盒子和盒子之间的距离
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
- 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。
2.嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
解决方案：
1.可以为父元素定义上边框。
2.可以为父元素定义上内边距
3.可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题
8.5 清除内外边距
为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
- 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。
8.6 居中问题
- 块级盒子水平居中
可以让一个块级盒子实现水平居中必须：盒子必须指定了宽度（width），然后就给左右的外边距都设置为auto，
.header{ width:960px; margin:0 auto;}
常见的写法，以下下三种都可以。
1.margin-left: auto; margin-right: auto;
2.margin: auto;
3.margin: 0 auto;
- 文字居中和盒子居中区别
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
1.盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
2.块级盒子水平居中 左右margin 改为 auto
8.7 插入图片和背景图片区别
1.插入图片，移动位置只能靠盒模型padding margin
2. 背景图片只能通过background-position
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}
8.8 内外边距使用
按照优先使用 宽度 （width） 其次使用内边距（padding） 再次外边距（margin）
- margin 会有外边距合并，还有 ie6下面margin 加倍的bug，所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
- width 没有问题，我们经常使用宽度剩余法，高度剩余法来做。
9. 浮动布局
9.1 CSS布局三机制
网页布局的核心——就是用 CSS 来摆放盒子。
CSS 提供了3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位
1.普通流
块级元素会独占一行，从上向下顺序排列；
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
常用元素：span、a、i、em等
2.浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
3.定位
将盒子定在浏览器的某一个位置——CSS 离不开定位。
9.2 浮动布局
float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了。浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。使用浮动的核心目的是让多个块级盒子在同一行显示。浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙。浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题
选择器 { float: 属性值; }
div {
width: 200px;
height: 200px;
background-color: pink;
/* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */
/* display: inline-block; */
/* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */
float: left;
}
.two {
background-color: hotpink;
}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
9.3 清除浮动
选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
但是我们实际工作中， 几乎只用 clear: both;W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
，或则其他标签br等亦可。还可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。.使用after伪元素清除浮动， :after 方式为空元素额外标签法的升级版，好处是不用单独加标签了， 具体如下， .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 清除浮动总结
需要清除浮动的场景
- 父级没高度
- 子盒子浮动了
- 影响下面布局了，我们就应该清除浮动了。
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
后面两种伪元素清除浮动，大家暂且会使用就好， 深入原理，我们后面学完伪元素再讲。
10. 定位布局
在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。
- 定位模式 (position)
在 CSS 中，通过 position 属性定义元素的定位模式
选择器 { position: 属性值; }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
| 值 | 语义 | 描述 |
|---|---|---|
static | 静态定位 | 元素的默认定位方式，无定位的意思。它相当于 border 里面的none |
relative | 相对定位 | 相对定位是元素相对于它 原来在标准流中的位置 来说的 |
absolute | 绝对定位 | 绝对定位是元素以带有定位的父级元素来移动位置 |
fixed | 固定定位 | 固定定位是绝对定位的一种特殊形式 |
- 绝对定位的盒子居中
left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；margin-left: -100px;：让盒子向左移动自身宽度的一半。
- 堆叠顺序（z-index）
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序
z-index 的特性如下：
- 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
- 如果属性值相同，则按照书写顺序，后来居上；
- 数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
- 定位改变display属性
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的），也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
display 是 显示模式， 可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
- 定位小结
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
注意：
- 边偏移需要和定位模式联合使用，单独使用无效；
top和bottom不要同时使用；left和right不要同时使用。
- 网页布局总结
一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
1.标准流 ，可以让盒子上下排列 或者 左右排列的
2.浮动，可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
3.定位，定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。
11. 元素的显示与隐藏
- display 显示
display 设置或检索对象是否及如何显示。 隐藏之后，不再保留位置。
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
- visibility 可见性
设置或检索是否显示对象。隐藏之后，继续保留原有位置。
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏
- overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。场景：清除浮动，隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
- 显示与隐藏总结
| 属性 | 区别 | 用途 |
|---|---|---|
| display | 隐藏对象，不保留位置 | 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 |
| visibility | 隐藏对象，保留位置 | 使用较少 |
| overflow | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
12. CSS用户界面样式
- 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">我是文本</li>
</ul>
- 轮廓线 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
最直接的写法是 ： outline: 0; 或者 outline: none;
<input type="text" style="outline: 0;"/>
- 防止拖拽文本域resize
实际开发中，我们文本域右下角是不可以拖拽：
<textarea style="resize: none;"></textarea>
- 用户界面样式总结
| 属性 | 用途 | 用途 |
|---|---|---|
| 鼠标样式 | 更改鼠标样式cursor | 样式很多，重点记住 pointer |
| 轮廓线 | 表单默认outline | outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 |
| 防止拖拽 | 主要针对文本域resize | 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none |
13. vertical-align 垂直对齐
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
-
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
-
图片、表单和文字对齐
可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
- 去除图片底侧空白缝隙
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。
解决的方法就是：给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。给img 添加 display：block; 转换为块级元素就不会存在问题了。
14. 溢出的文字省略号显示
- white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal;默认处理方式
white-space:nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
- text-overflow 文字溢出
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
text-overflow : clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
一定要首先强制一行内显示，再次和overflow属性搭配使用
- 总结
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
扫一扫
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
