css 的一些知识点的整理
css的一些标签整理
background-attachment: scroll;背景图可滚动
background-attachment: fixed; 固定背景的位置，不随着滚动条移动而移动
背景添加了 fixed 坐标计算就会根据整个可视区来计算
font（文本样式）
font (集合样式)
1. 固定顺寻 (font-weight font-style font-size/line-height font-family)
2. 必写项 (font-size font-family)
text-indent 首行缩进
正值 从左向右移动首行文字
负值 从右向左移动首行文字
单位 em 1em = 当前元素的1个文字大小
text-align 文本对齐方式(left/center/right)
text-decoration 文本修饰(none/underline下划线/overline上划线/line-through删除线)
word-spacing 单词间距
letter-spacing 字母间距
padding
padding 内填充(内边距)在元素的边框以里，
内容以外产生一个距离
1. padding区域可以显示元素背景
2. 元素背景位置的 0 0 点在元素padding区域的左上角
可视宽度(元素可以被看到的部分的宽度): ;
3可视宽度 = padding + width + border;
padding的多值写法:
两个值: (上下) (左右);
三个值: (上) (左右) (下);
四个值: (上) (右) (下) (左);
padding-top
padding-right
padding-bottom
padding-left
元素和内容之间的距离，用padding控制
margin
margin 外边距
多值写法:
两个值 (上下) (左右)
三个值 (上) (左右) (下)
四个值 (上) (右) (下) (左)
margin-top
margin-right
margin-bottom
margin-left
盒模型:内容(content)、填充(padding)、边框(border)、边界(margin)。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。;
margin和padding的区别 ：
1. margin在元素的边框以外，
padding在元素的边框以里
2.margin区域不显示元素的背景
padding显示元素的背景
3. margin通常用来给两个同级元素加距离
padding用来添加元素和它内容之间的距离
4.margin 叠加
两个相邻元素的上下margin是叠加在一起的，两个元素之间的距离，以大的为准
5.margin传递
元素的上下margin，会传递给父级
6.auto 自动
margin-left: auto; (元素在父级中居右显示)
margin-right: auto;(元素在父级中居左显示)
margin: 0 auto; (元素在父级中水平居中显示)
a标签
div 独占一行显示
a 标签可以和其他a标签在一行显示
a 标签默认会有下划线
a 标签不会继承父级的字体颜色,必须加载 他自己上
a 标签中换行会产生一个空格
空格大小会受到字体，字体大小的影响;
a 标签 (超链接)
(herf)作用：
1. 是页面地址的时候，点击之后跳转页面
2. 压缩文件的时候，点击之后下载文件
3. 是id名字，点击之后跳转至ID多在位置 -- 锚点
target="_blank" 空白窗口 打开链接
target="_self" 当前窗口打开 如 <a href="http://www.baidu.com" target="_self">百</a>
base 定义页面上所有的链接的默认打开方式 和 默认地址
在页面头部head标签中 写入：<base target="_blank" href="http://miaov.com/">
伪类选择器
:link 此链接未被访问
:visited 此链接已经被访问过
:hover 鼠标移入
:active 鼠标按下
选择器
css selector (选择器，选择符)
基础选择器
1. id 选择器 通过查找具有某个id属性的元素来添加样式
id = "idName"
#idName {
样式……
}
** 同一个页面中id不能重名
2. tag selector(类型选择器，标签选择器，元素选择器) 通过标签的名字找到某一类型标签添加样式
tagName {
样式……
}
3. class 选择器(类选择器) 通过查找具有某类class属性的元素来添加样式
class = "className"
.className {
}
** 1） class可以重复调用
2） 元素可以具有多个className,每个名字中间以空格隔开,每个名字添加的样式，元素都会识别
4. * 通配符 (通配选择器),代表所有的元素 (不推荐使用)
继承
nherit 继承
父级的这条样式是怎样的元素的这条样式就是怎样的
文本样式，自己没有设置这条样式，就会继承父级，如果子元素设置就显示子元素自 己的样式
*/
包含选择器
包含选择器 （后代选择器）
父级 子级 {
}
#box span {}找到box中包含的所有span标签
1. 层级数目不要过多 一般不超过三层
2. 子级是id话，一般不用包含选择器
包含选择器的优先级是其中用到的所有选择器的累加
id + class 比较 id
常用标签结构划分
列表
ul(unOrderList) 无序列表
ol(orderList) 有序列表
li ul或者ol的列表项
dl 定义列表
dt 定义列表的列表项
dd 对dt的展开说明，或描述扩展
<div>div</div> <!-- 块标签 -->
<span>span</span> <!-- 内嵌标签 -->
<a href="#">a链接</a> <!-- 内嵌标签 -->
<strong>strong</strong> <!-- 内嵌标签 -->
<em>em</em> <!-- 内嵌标签 -->
<h1>标题</h1><!-- 块标签 -->
<h2>标题</h2><!-- 块标签 -->
<h3>标题</h3><!-- 块标签 -->
<h4>标题</h4><!-- 块标签 -->
<h5>标题</h5><!-- 块标签 -->
<h6>标题</h6><!-- 块标签 -->
<p>段落</p> <!-- 块标签 -->
<ul> <!-- 块标签 -->
<li>无序列表</li> <!-- 块标签 -->
<li>无序列表</li>
</ul>
<ol> <!-- 块标签 -->
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl><!-- 块标签 -->
<dt>定义列表</dt> <!-- 块标签 -->
<dd>定义列表</dd> <!-- 块标签 -->
<dd>定义列表</dd>
</dl>
<section>板块</section> <!-- 块标签 -->
<header>头部</header> <!-- 块标签 -->
<footer>底部</footer> <!-- 块标签 -->
<article>文章 主体</article> <!-- 块标签 -->
<aside>附属信息</aside> <!-- 块标签 -->
<nav>导航</nav> <!-- 块标签 -->
<time>时间</time> <!-- 内嵌标签 -->
<mark>标记</mark> <!-- 内嵌标签 -->
<a href="#" title="我是一个连接呀">连接</a>
<img src="img/img.png" title="我是一张图片哟" alt="妙味课堂">
<!--
img 图片
src 图片地址
alt 替代文字 当图片加载不出来的时候的替代问题
img 只设置宽度或者只设置高度，img会等比缩放
title 提示
默认样式清除
body {
margin: 0;
font: 14px "宋体"; /* 初始整个页面的字体 和 字体大小，但是注意每个项目都不一致，要跟着设计走 */
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd {
margin: 0;
/* font-weight: normal; */
}
strong {
/* font-weight: normal; */
}
em {
/* font-style: normal; */
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
mark {
/* background: none; */
}
a {
text-decoration: none;
}
快和内嵌
块:(div)
1. 独占一行显示
2. 支持所有的样式
3. 不设置宽度，宽度撑满父级的空间
内嵌:(span)
1. 可以在一行显示
2. 不支持宽高，上下的margin，上下padding支持的也有问题
3. 代码换行会解析出一个空格(字体和字体大小，可以控制空格大小)
4. 宽度由内容撑开
内嵌块: (img)
1. 可以在一行显示
2. 支持宽高
3. 代码换行会解析出一个空格
4. 不设置宽度的时候，宽度由内容撑开
标签嵌套规则
1. a标签中 不能包含a标签
2. 内嵌标签中不能包含块标签
3. 部分块标签中 也不能再包含块标签: p, h1-h6, dt
4. 注意以下几种嵌套是固定的:
ul li
ul下只能包含li，li的父级也只能是ol或ul，当然li中可以随意放置
ol li
ol下只能包含li，li的父级也只能是ol或ul，当然li中可以随意放置
dl dt dd
dl下只能包含dt和dd，dt,dd的父级也只能是 dl，当然dd中可以随意放置
5. 一般建议，块和块并列，内嵌和内嵌并列
浮动和清浮动
float: 浮动
left
right
none
1. 在一行显示,父级的宽度放不下了，会自己折行
2. 支持宽高等样式
3. 不设置宽度的时候，宽度由内容撑开
4. 会按照我们指定的方向移动，碰到父级的边界或者前边的浮动元素停止
5. 元素浮动之后，上下margin不在叠加
6. 脱离文档流(标准流) -- 元素在页面不在占位置
文档流是文档中可显示对象在排列时所占用的位置。
清浮动方法
元素浮动之后，撑不开父级的高度，或者说父级包不住浮动了的子元素
清浮动：使浮动元素依然可以撑开父级的高度
1. 在浮动元素下边添加<div class="clearFix"></div>
.clearFix {
clear: both;
}
2. 在浮动元素下边添加 <br clear= "all"/>
clear: all / left / right;
3. 给浮动元素的父级加 class="clearFix"
.clearFix:after { content: ""; display: block;clear: both;}
元素浮动之后，如果父级的高度可以固定，就给父级设置高度，如果父级的高度需要内容撑开，就给父级清浮动
元素浮动之后，如果父级的高度可以固定，就给父级设置高度，如果父级的高度需要内容撑开，就给父级清浮动
元素浮动之后，如果父级的高度可以固定，就给父级设置高度，如果父级的高度需要内容撑开，就给父级清浮动
定位
position: relative;相对定位
1. 元素之间相对定位，不设置位置偏移，元素和之前不会有任何变化.
2. 元素移动之后，原始位置会被保留（不脱离文档流）
3. 根据元素原始的位置，来计算坐标
4. 提升层级
top/right/bottom/left 定位之后的 位置设置
不加定位的话，这些样式没有作用
position: absolute 绝对定位
1. 脱离文档流
2. 提升层级
3. 根据有定位的父级来计算自己的坐标，如果父级没有定位，就一级级向上找，如果所有的父级都没有定位，就根据document来计算自己的坐标.
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候，宽度由内容撑开
position: fixed;固定定位
1. 脱离文档流
2. 提升层级
3. 把元素固定在可视区的某个位置上
4. 触发BFC
5. 使内嵌元素支持宽高
6. 不设置宽度的时候，宽度由内容撑开
层级：后一个元素的层级高于前一个元素的层级
z-index 层级
1. 只能加给定位元素
2. 数值越大层级越高
3. 在同级元素之间比较层级
BFC作用
BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS
2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。
也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。
在 CSS3 中，BFC 叫做 Flow Root。
文档流(标准流):在文档中，元素默认从左上角开始，块元素一个一个向下排列，每个元素的左侧默认 都会和父级的左侧接触，顶部紧靠着父级的顶部或上一个元素的底部。每个元素都需要占有对应的区域大小。
脱离文档流：不在文档中占有位置。
BFC：(block formatting context 块级格式化上下文),它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用
BFC作用：
1. 包含浮动元素
2. 阻止margin向外传递
3. 不被浮动元素覆盖
BFC触发条件：
1) float的值不为none；
2) overflow的值不为visible；
3) display的值为 table-cell、table-caption和inline-block之一；
4) position的值不为 static或 relative中的任何一个；
