标签：浮动 定位 盒子 元素 概览 笔记 border 选择器 CSS
css样式表
- 行内式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
- 内部样式表（内嵌式）
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
- 外部样式表（外链式）
是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中`
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
link是单标签
css选择器
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
复合选择器： - 后代选择器
.class h3{color:red;font-size:16px;}
- 子元素选择器
.class>h3{color:red;font-size:14px;}
- 交集选择器
h3.class {color: red；font-size: 25px;}
- 并集选择器 ，用逗号隔开。
- 链接伪类选择器
a:link 未访问链接
a:visited 已访问链接
a:hover鼠标移动到链接上
a:active选定的链接
写的时候要按顺序 。
css字体样式属性调试工具
一、font字体
- font-size:大小
p {
font-size:20px;
} - font-family:字体
p{ font-family:“微软雅黑”;}
Unicode字体
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
- font-weight:字体粗细
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 |
4.font-style - (正常或倾斜）
5. font:综合设置字体样式
选择器 { font: font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
二、css外观属性
6. color：文本颜色
通常用16进制
7. line-height 行高
控制行与行之间的距离
8. text-align水平对齐
设定水平的对齐方式
9. text-indent首行缩进
用于段落首行缩进2个字距离2em
10. text-decoration文本修饰
加下滑线underline取消none
复合选择器
- 后代选择器
写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔
.class h3{color:red;font-size:16px;}
- 子元素选择器
子元素只能选择作为某元素子元素（亲儿子）的元素
写法是父级标签写在前面，子级标签写在后面，中间用>链接
.class>h3{color:red;font-size:14px;}
- 交集选择器
是由两个选择器构成 既有标签一的特点，又有标签二的特点
h3.class {color: red；font-size: 25px;}
第一个为标签选择器，第二个为类选择器，两个选择器之间不能有空格
交集选择器 是 并且的意思。 即…又…的意思
比如： p.one 选择的是： 类名为 .one 的 段落标签。
用的相对来说比较少，不太建议使用。
4. 并集选择器
通常用于集体声明
任何形式的选择器都可以作为并集选择器的一部分
并集选择器用逗号隔开，可以理解为和的意思
比如 .one, p , #test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。
5. 链接伪类选择器
伪类用冒号
链接伪类：a:link 未访问链接
a:visited 已访问链接
a:hover鼠标移动到链接上
a:active选定的链接
写的时候要按顺序
伪类选择器和伪元素
- 伪类选择器
：：before在元素前面插入内容
：：after在元素内部后面插入内容 - 伪类选择器注意事项
（1）before 和 after 必须有 content 属性
（2）before 在内容前面，after 在内容后面
（3）before 和 after 创建的是一个元素，但是属于行内元素
（4）创建出来的元素在 Dom 中查找不到，所以称为伪元素
（5）伪元素和标签选择器一样，权重为 1
（6）用于添加添加字体图标
2. 在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。伪元素：：写法在一些浏览器中不兼容，既可以使用：又可以写：：。
3. CSS3中伪类和伪元素的语法不同，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。
4. 可以同时使用多个伪类，却只能同时使用一个伪元素。
5. 首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()
然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after
- 伪类元素： ”需要注意的是在CSS的定义中，同一个元素的:hover必须位于:link、:visited之后才能生效，:active必须位于:hover之后才能生效。
- 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于向某些选择器设置特殊效果。
####### 标签显示模式（display）
即标签以什么方式进行显示
html标签分为块标签和行内标签，也称为块元素和行内元素 - 块元素（block-level）
常见的有h,p,div,ul,ol,li,等，其中div是最典型的块元素
特点：（1）独占一行
（2）高度，宽度、外边距以及内边距都可以控制
（3）宽度默认是容器（父级宽度）的100%
4）是一个容器及盒子，里面可以放行内或者块级元素。- 只有 文字才 能组成段落 因此 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）**行内元素只能容纳文本或则其他行内元素
3. 行内块元素（line-block）
img,input,td可以设置宽高和对齐属性，称为行内块元素
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
转换：- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
行高（line-height）
- 行高测量（顶线中线基线底线）基线与基线的距离为行高
- 单行垂直居中
- 如果 行高 等 高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
css背景（background）
- 背景颜色（color）
background-color:颜色值; 默认的值是 transparent 透明的 - 背景图片（image）
. background-image : none | url (url) .
background-image : url(images/demo.png);
url不加引号 - 背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
4. 背景位置（position）
background-position : length || length
background-position : position || position
-
- 必须先指定background-image属性
- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
- 背景附着
背景附着就是解释背景是滚动的还是固定的
background-attachment : scroll | fixed - 背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; - 背景透明
background: rgba(0, 0, 0, 0.3);
css三大特性
- 层叠行
所谓层叠性是指多种CSS样式的叠加
- 样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
- 继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
子元素可以继承父元素的样式（**text-，font-，line-这些元素开头的可以继承，以及color属性 - 优先级
- 选择器相同，则执行层叠性
- 选择器不同，就会出现优先级的问题。
（1）权重计算公式
（2）权重叠加
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
（3）继承权重是0
） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.
css盒子模型（重点）
cs学习三大重点：css盒子模型、浮动、定位。
网页布局本质：利用css设置盒子大小，然后摆放盒子位置，最后把网页元素放入盒子里面
盒子模型（box Model）
- 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
- 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们成为 盒子的边框
- 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
- 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
一、盒子边框(border)
- 属性：border-width 边框粗细
,border-style边框样式,
-
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线
border-color边框颜色
2. 边框综合设置
border : border-width || border-style || border-color
没有顺序
3. 总结表
| 上边框 | 下边框 | 左边框 | 右边框 |
|---|---|---|---|
| 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:宽度 样式 颜色; |
- `` 表格的细线边框
table{ border-collapse:collapse; }
border-collapse:collapse; 表示相邻边框合并在一起
内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离
属性padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距
注意：. 内容和边框 有了距离，添加了内边距。
. 盒子会变大了。
3. 内盒尺寸计算
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
注意：如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
外边距（margin）
margin属性用于设置外边距。 margin就是控制**盒子和盒子之间的距离
- 属性:margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距
- 块级盒子水平居中
（1）盒子必须指定宽度
（2）给左右的外边距都设置为atuo
.header{ width:960px; margin:0 auto;}
- 文字居中和盒子居中区别
（1）. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
(2.) 块级盒子水平居中 左右margin 改为 auto - 插入图片和背景图片区别
（1. ）插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
(2. ）背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position - 清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
- 外边距合并
(1). 相邻块元素垂直外边距的合并
-
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
-
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
-
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
-
解决方案：尽量给只给一个盒子添加margin值。
-
(2). 嵌套块元素垂直外边距的合并（塌陷）
-
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
-
父元素的上外边距会与子元素的上外边距发生合并
-
合并后的外边距为两者中的较大者
-
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden。
还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。
盒子模型布局稳定性
我们根据稳定性来分，建议如下：
按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
width > padding > margin
- 原因：
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
- width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做
拓展：1. 圆角边框
语法:border-radius:length;
- 盒子阴影
语法：box-shadow:水平阴影h-shadow 垂直阴影v-shadow（必写） 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
书写规范
空格规范：【强制】 选择器 与 { 之间必须包含空格。
选择器规范
【强制】 并集选择器，每个选择器声明必须独占一行
属性规范
【强制】 属性定义必须另起一行。
【强制】 属性定义后必须以分号结尾。
浮动(float)
网页布局的核心——就是用css来摆盒子
css布局的3种机制：
（1）普通流（标准流）
- 块级元素会独占一行，从上向下顺序排列；
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
- 常用元素：span、a、i、em等
（2）浮动、
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示
（3）定位。
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效
一、浮动概念：
元素的浮动是指设置了浮动属性的元素会
- 常用元素：span、a、i、em等
- 脱离标准普通流的控制
- 移动到指定位置。
作用： - 让多个盒子(div)水平排列成一行**，使得浮动成为布局的重要手段。
- 可以实现盒子的左右对齐等等…
- 浮动最早是用来控制图片，实现文字环绕图片的效果
语法：
选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
小结：1.float` 属性会让盒子漂浮在标准流的上面
2. 浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。
3. 特性 float属性会改变元素display属性。
任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。
float —— 浮漏特
| 特点 | 说明 |
|---|---|
| 浮 | 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。 |
| 漏 | 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。 |
| 特 | 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 |
应用：浮动和标准流的父盒子搭配
我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。
**注意：实际重要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。
- li+a 语义更清晰，一看这就是有条理的列表型内容。
- 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
扩展：1. - 子盒子的浮动参照父盒子对齐
-
不会与父盒子的边框重叠，也不会超过父盒子的内边距
-
2.在一个父级盒子中，如果前一个兄弟盒子是：
-
浮动的，那么当前盒子会与前一个盒子的顶部对齐；
-
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
- 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
二、清除浮动
（1） 原因：因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
而是清除浮动后造成的影响 -
语法：
选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
但是我们实际工作中， 几乎只用 clear: both;
（2）方法
1）额外标签法（隔墙法）
在浮动元素末尾添加一个空的标签<div style=”clear:both”></div>
- 优点： 通俗易懂，书写方便
- 缺点： 添加许多无意义的标签，结构化较差
2）父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3）使用after伪元素清除浮动
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
- 优点： 符合闭合浮动思想 结构语义化正确
- 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
- 代表网站： 百度、淘宝网、网易等
4）使用双伪元素清除浮动
```css
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- 优点： 代码更简洁
- 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
- 代表网站： 小米、腾讯等
总结：1. 父级没高度
- 子盒子浮动了
- 影响下面布局了，我们就应该清除浮动了。
| 清除浮动的方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |
| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |
| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |
后面两种伪元素清除浮动，大家暂且会使用就好， 深入原理，我们后面学完伪元素再讲。
定位（position）
将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面
所以，我们脑海应该有三种布局机制的上下顺序
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
一. 边偏移
在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移
二、定位模式（position）
在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：
选择器 { position: 属性值; }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
| 值 | 语义 |
|---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定 |
- 静态定位
静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。 - 相对定位（relative）
相对定位是元素相对**于它 原来在标准流中的位置 来说的
相对定位的特点：（务必记住）
- 相对于 自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
- 绝对定位(absolute) - 重要
绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）
完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。
父元素要有定位**
-
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位
-
绝对定位的特点：（务必记住）
-
绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
-
不保留原来的位置，完全是脱标的
定位口诀 —— 子绝父相子绝父相** —— 子级是绝对定位，父级要用相对定位
- 固定定位(fixed) - 重要
定定位是绝对定位**的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形
完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
- 跟父元素没有任何关系；单独使用的
- 不随滚动条滚动。
- 绝对定位的盒子居中
注意**：绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中。
left: 50%;：让**盒子的左侧**移动到**父级元素的水平中心位置**； .margin-left: -100px;`：让盒子向左移动自身宽度的一半。 - 堆叠顺序（z-index）
在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序
z-index 的特性如下：
属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；. 如果属性值相同，则按照书写顺序，后来居上；
. 数字后面不能加单位。
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
7. 定位改变display属性
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：*
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
8. 圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度， 但是是有顺序的
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
-
如果4个角，数值相同
border-radius: 15px; -
里面数值不同，我们也可以按照简写的形式，具体格式如下:
border-radius: 左上角 右上角 右下角 左下角;
还是遵循的顺时针
定位小结
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 |
| 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
注意：
- 边偏移需要和定位模式联合使用，单独使用无效；
top和bottom不要同时使用；left和right不要同时使用
网页布局总结
一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
- 标准流,可以让盒子上下排列 或者 左右排列的
- 浮动,可以让多个块级元素一行显示 或者 左右对齐盒子,浮动的盒子就是按照顺序左右排列
- 定位,定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值
####### css高级技巧
- 元素的显示与隐藏
| 属性 | 区别 | 用途 |
|---|---|---|
| display | 隐藏对象，不保留位置 | 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 |
| visibility | 隐藏对象，保留位置 | 使用较少 |
| overflow | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
- CSS用户界面样式
2.1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
用户界面样式总结
| 属性 | 用途 | 用途 |
|---|---|---|
| 鼠标样式 | 更改鼠标样式cursor | 样式很多，重点记住 pointer |
| 轮廓线 | 表单默认outline | outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 |
| 防止拖拽 | 主要针对文本域resize | 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none |
- vertical-align 垂直对齐
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，
注意：
vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，
特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
3.1. 基线对齐vertical-alain:baseline;
垂直居中vertical-alian: middile;
顶部对齐vertical-alain: top;
3.2 去除图片底侧空白缝隙
原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
就是图片底侧会有一个空白缝隙。
解决的方法就是：
- 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐
给img 添加 display：block; 转换为块级元素就不会存在问题了
- 溢出的文字省略号
/1. 先强制一行内显示文本/
white-space: nowrap;
/2. 超出的部分隐藏/
overflow: hidden;
/3. 文字用省略号替代超出的部分/
text-overflow: ellipsis; - 精灵技术（sprite）
**为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。
首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。
精确测量，每个小背景图片的大小和 位置。
给盒子指定小背景图片时， 背景定位基本都是 负值。
6. 滑动门
核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏
拓展
margin负值之美
CSS三角形之美
我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0。
div {
width: 0;
height: 0;
border-color: green red blue purple;
border-width: 80px 40px 20px 20px;
border-style: solid;
}
盒子阴影
- 盒子阴影分为内阴影和外阴影（outset ， inset），默认为outset。
box-shadow:/*水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影*/;- 阴影扩展即阴影面积。
- 文字阴影：
text-shadow:/*水平偏移 垂直偏移 模糊度 阴影颜色*/;
标签：浮动,定位,盒子,元素,概览,笔记,border,选择器,CSS 来源： https://blog.csdn.net/h_el_lo/article/details/104232084
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。