css笔记
html基础和head标签
html基础
注释：便于开发人员对开发项目解释和说明性的文字
快捷键是 ctr+/
注释不会被应用程序解析
html是超文本标记语言，严格意义上来说，不是一个开发语言
html5是html的第五个版本，添加了一些新标签和api，使用h5必须在页面的开头添加以下代码
他的含义是 声明当前文档类型是html5标准的文档，这样浏览器在解析渲染的时候会按照h5的标准解析
hyml文档是由标签组成的
标签分为单标签和双标签，他们的闭合方式不同：
单标签：![]()
双标签：内容
head标签
head标签中的内容不会渲染在页面中
主要是源信息标签
作用是设置网站的源信息
charset属性：用来定义文本的编码格式
UTF-8:万国码，目前开发中最常用
gb2312:中文码
通常都把charset的值设置成UTF-8,如果不设置charset属性，可能会导致页面乱码，解决方案是设置成UTF-8即可
author属性：用来定义网站的作者，一般是公司的名字
keywords属性：用来定义网站的关键字，如果有多个关键字，用英文逗号隔开，关键字最好不要超过10个。精准的keywords 值，更加有利于seo（搜索引擎优化）
description属性：用来简单的描述网站的内容，不要超过100字，有利于seo（搜索引擎优化）
meta的另一种写法
title 标签，他是一个双标签，他的seo权重很大，因此需要谨慎书写里面的内容
body 标签里面的内容，会渲染在页面的可视区域
基础标签
标签分为块属性标签和行属性标签
块标签
1.div标签
没有任何意义的标签，通常用来进行页面布局
2.h系列标签h1-h6 标题标签
在一个页面当中，h1最多只能出现一次，h2最多出现20次，h3-h6次数不限
h1的用法：
1.logo处
2.资讯详情页的大标题
由于h1的权限较大，只能出现在以上两个地方
3.p标签，段落标签，它里面一般包含一段文字
4.无序列表
ul>li
可以设置它的 list-style-type 属性
square：实心方块
circle：空心圆
dotted：实心圆
none ：取消列表样式
disc ：高版本系统下的默认样式
5.有序列表
ol>li
可以设置它的 list-style-type 属性
lower-alpha :小写字母
upper-alpha : 大写字母
lower-roman : 小写罗马文
upper-roman : 大写罗马文
ol,ul,li 都是块属性标签
li 是列表项，并且 ol,ul的子元素，必须是li标签
6.定义列表
dl>dt
dl>dd
dl : 块标签 定义列表的 父元素
dt ：块标签，定义列表的 标题项
dd ：块标签，定义列表的 列表项
7.address 地址标签，一般的，他的内容是一个地址
8.blockquote 引用标签，一般引用的是一段文字，他的cite属性表示该文字引用的文献名目
不要使用html 官方没有的标签，虽然也会被浏览器渲染，但是不符合w3c 规范
分割线
换行符
行标签
span 标记标签，没有实际意义，通常用来渲染文字
iframe框架
src="需要显示的页面地址"
height="设置高度"
width="设置宽度"
a标签
href属性：用来设置超链接的地址
target属性：设置标签页的打开方式
_blank:在新标签页打开
_self :默认值，在当前页打开
作用：
1.设置一个超链接
2.设置锚点
最常用的效果是回到顶部,即 href="#"
如果在开发中需要设置a标签点击没有效果，则可以设置href属性为##，即 href="##"
不要设置href为空，这样会导致页面刷新
3.下载文件
a.如果设置的下载文件是音频，视频，图片，文档等，都需要经过压缩之后，再在href上设置文件的路径
b.如果是文本类型的文件，可以直接把文件路径设置在href属性上，直接由浏览器打开
例：
黄色块
绿色块
回到顶部
点不动
下载文本
下载文件
strong 强调标签
em 强调并且斜体
b 文本加粗（不常用，h5中即将废弃）
i 文本斜体
var 文本斜体（不常用，h5中即将废弃）
q标签 引用标签，他引用的内容都比较简短
pre标签 格式化输出
code 标签, 一般是嵌套代码使用
< 在html中渲染为<
> 在html中渲染为>
在html中渲染为 空格
图片
img 标签, 是一个单标签
src 属性: 用来设置图片资源路径
文件资源路径 分为三种
a.网络路径
图片的网络地址
b.绝对路径
从服务器根目录开始直到找到需要的文件整个路径，一般不使用
c.相对路径
相当于当前文件所在的资源路径
./ 代表的是当前目录
../代表的是上一级目录
（../../代表上上一级目录）
相对路径在开发中最常用
alt属性：用来解释图片的内容
作用：
1.当图片没有被加载出来的时候，会显示alt的内容
2.通过alt属性，告诉浏览器当前图片的内容
width/height：设置图片的宽和高，在实际的开发中一般只设置单个的宽或者高，另一侧根据比例大小显示
行标签和块标签总结
1.块属性标签
a.独自占据一行空间,支持宽和高的设置,设置完宽和高以后,仍然独占一行
b.支持上下 padding 和 上下 margin
2.行属性标签
a.不会独自占据一行空间,从左至右横向排列
b.无法设置宽和高,他的宽和高由内容撑开
c.不支持上下 padding 和 上下 margin
emmet语法
E代表标签名
E*n 创建n个标签名
E{内容}*n 创建n个内容为'...'的E标签
E{内容$}*n 创建n个内容为'...'+序号的E标签（$表示序号，从1开始）
>表示的是下一个层级的元素（子元素）
E>a 在E标签中添加子元素 a标签
+表示同级
E+P 同时创建兄弟元素E和P
^表示上一级
E >P^div 创建 div标签和 E标签同级，也就是创建P标签的上一级
使用[]设置属性
标签嵌套规则
1.块标签可以作为一个布局标签，嵌套所有的标签
2.行标签不能嵌套块标签
以下标签不能相互嵌套
1.p标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块标签
2.a标签不能相互嵌套
css样式表
设置类名
.类名{
样式内容
}
text-align属性：文本排布，一般放在块标签上，用来控制块标签中 行标签和文本的对齐方式
值：
left: 左对齐（默认）
center：居中对齐
right： 右对齐
css 层叠式样式表 他是用来给html结构添加样式的
css的引入方式：
1.行间引入
在标签上，设置style属性，在style中设置样式
2.内部样式表
在head中设置 style 标签，在标签中设置样式
3.外部样式表
开发中最常用
link和@import 引入css的区别:
1.@import是 css2.1之后才推出的，因此可能存在兼容问题，link不存在兼容问题
2.link不仅可以引入css，也可以引入其他类型的文件，功能更加强大
推荐使用 link
@import url(‘./css/goods.css’);
css文本操作
border属性：
border-width 设置border的 宽度
border-color 设置border的 颜色
border-style 设置border的 样式
他们三个也可以合写：
border：width style color;
可以给单独某一个边设置border
border-top 设置上边
border-left 设置左边
border-bottom 设置下边
border-right 设置右边
常用的border-style 值，
1.solid 实线
2.dotted 圆点虚线
3.dashed 短线虚线
4.none 隐藏border
5.double 双实线
6.3d边框：
groove 3d凹槽
ridge 3d凸槽
inset 内嵌
outset 外嵌
color 属性，设置文本颜色
值
1.英文单词
2.16进制 0-f ，# 后面跟六位表示颜色的数字，前两位表示红色，中间两位表示绿色，后面两位表示蓝色 #aabbcc 如果两两相等，则可以简写为 #abc
3.rgb(),rgba() 设置颜色，括号当中设置对应的数字，0-255，0表示黑色，255表示白色
rgb(255,0,0) 红色
rgba中的a表示透明度，取值范围是0-1，0表示完全透明，1表示完全不透明
text-decoration 文本修饰
值：
1.underline 下划线
2.overline 上划线
3.line-through 中划线（删除线）
4.none 去掉线（没有文本修饰线）
text-transfrom 文本转化
1.lowercase 全部小写
2.uppercase 全部大写
3.capitalize 单词首字母大写
line-height 行高
对于单行文本，line-height 设的高度如果和标签高度相同，则可以做 垂直居中效果
如果是多行文本，可以理解为行间距
direction 设置文字方向
ltr 默认，从左向右
rtl 从右向左
text-indent 首行缩进
他的值是具体的数值
word-spacing:30px;
设置两个单词之间的距离
letter-spacing:5px;
设置两个字符之间的距离
overflow属性
处理子级内容超出当前容器的部分，主要是对父级元素添加该属性
值：
hidden 超出部分隐藏
scroll 滚动查看超出部分
auto 自动渲染超出的部分
overflow-x 控制x轴方向的超出部分
overflow-y 控制y轴方向的超出部分
white-space属性：设置文本格式
nowrap 强制不换行
normal 强制换行
text-overflow：对超出的文本内容剪裁
ellipsis 超出的内容变为省略号
clip 直接裁掉超出的文本内容
单行文本超出添加省略号
overflow：hidden；
white-space:nowrap;
text-overflow:ellipsis;
字体设置
font-style：设置字体的样式
值:
italic 设置字体为斜体
normal 设置字体正常
font-weight：设置字体是否加粗
值：
normal 默认
bold 加粗
bolder 相对bold加粗
它的值也可以是具体的整百数字，范围是 100-900
400-> normal
700-> bold
900-> bolder
font-size：设置所修饰的字体的大小
1.目前浏览器默认字体大小是 16px
pc端浏览器的最小字体大小可以设置为 12px
font-family 设置文字的字体
可以同时设置多个字体，形如：
font-family：'a','b','c'...;
含义是 在客户端的设备上匹配 a字体，如果没有a字体，则继续匹配 b字体，依次进行匹配，直到匹配成功即可显示匹配到的字体
通用字体
1.serif 有衬线(类似锐化)
2.sans-serif 无衬线
font 也是一个 复合型 css 属性
可以直接按照下面的顺序书写
font：style weight size family;
注意，style 和 weight 不是必须写入的内容，如果简写至少必须要有 font-size 和 font-family
font:size family;
背景
background 设置标签元素的背景
background-color： 设置背景色
它的值可以是
1.英文单词
2.16进制表示颜色
3.rgb（）表示颜色
background-image： 设置背景图片
background-image： url（背景图地址）
background-repeat：背景图的平铺方式
值：
repeat 默认， x轴y轴都平铺
repeat-x： 沿x轴平铺
repeat-y: 沿y轴平铺
background-position： 设置背景图定位
background-position：x轴方向的值 y轴方向的值；
值可以是：
1.具体的数值
2.方位名词组合
left top right bottom center
background-attachment；设置背景图固定定位
值：
scroll 默认值，背景图片跟着页面一起滚动
fixed 根据浏览器可视区域，固定在具体的位置，它的定位参考点是 浏览器可视区域
background是一个复合型属性，可以写在一起，它的顺序是
background：color image repeat positio attachment
可以单独写
background：color；
background：image；
display属性
display属性：可以用来控制标签元素的显示属性
值:
block 把元素转化为块属性标签
inline 把元素转化为行属性标签
none； 隐藏标签元素
设置内联块元素（行内块元素）
display：display：inline-block；
它的本质是对内显示块标签属性，对外显示行标签属性
两个内联块元素之间的缝隙的处理方式
原因：两个内联块元素之间键入了回车，回车也是一个字符，它的大小跟父标签的font-size有关
解决办法：
1.去掉回车键
2.设置他们父元素的大小为0
（注意：字体大小是可以传递到子元素上的）
css选择器
基础选择器
1.通配选择器
*表示通配符，它可以匹配任何标签
*{
css内容
}
2.标签名选择器
给所有标签名为E的元素设置css样式
E {
css内容
}
3.类名选择器
使用时需要在标签上绑定 class=“类名”,如果有多个类名，使用空格隔开，类名最好不要超过5个
.类名{
css内容
}
4.id选择器
在一个页面中，id是唯一的，只能绑定在一个标签上，也就是一个页面中没有同名的id
#id名{
css内容
}
5.群组选择器
.wp,#abc,diiv{
css内容
}
层次选择器
1.后代选择器
通过E选择器设置E标签中的M选择器的css内容,M可以是E的子级，也可以是E的后代中的某一个选择器
E M{
css内容
}
2.父子选择器
通过E选择器找到E选择器的子级M选择器，设置css内容
E>M{
css内容
}
3.兄弟选择器
通过E选择器找到该元素之后的所有选择器名为M的兄弟元素，并设置css样式
E>M{
css内容
}
4.相邻兄弟选择器
通过E选择器找到该元素之后第一个兄弟元素M，并且对M设置
css样式
E+M{
css内容
}
伪类选择器
a的伪类
伪类是系统创建好的内部的类，用来对标签的某一个时机设置样式
link:初始时候的状态
visited：点击之后的状态
hover：鼠标悬浮时候的状态
active：鼠标按下不松手时候的状态
顺序是l -> v -> h -> a (先爱后恨)
ie8以后，任何标签都可以添加：hover 伪类
可以根据hover触发元素本身，以及通过元素能找到的元素的变化
选择器优先级
什么时候考虑选择器优先级：
不同的选择器，同时作用于同一个标签元素，并且他们具有相同的css属性， 对该css属性设置了不同的值
选择器优先级的强弱顺序：
1.!important 100000
2.行间样式，在标签上添加style属性 10000
3.id选择器 1000
4.类名选择器，伪类选择器，属性选择器 100
5.元素（标签名）选择器，伪元素 选择器 10
6.通配符选择器 1
7.系统默认提供的css属性 0
（假设后面的数字是权重的值，那么在比较的时候，只需要把选择器的值相加，然后比较大小既是权重的大小，如果他们的值相同，后来者居上）
盒模型
盒模型：在html中每一个标签都具有一个盒模型
盒模型组成部分：
Content（内容），padding（内边距），border（边框），margin（外边距）
Content：标签元素内容，一般自定义宽和高，或者由子元素的内容撑开宽和高
padding：设置元素内容到元素边框之间的距离
border：指的是元素的边框
margin：设置 当前元素到相邻元素之间的距离
padding内边距
padding-top：num； 设置上边距
padding-right：num； 设置右边距
padding-bottom：num；设置下边距
padding-left：num； 设置左边距
合写为：
padding：上 右 下 左；
左！=右 上=下
padding：上 右 下 左；
左=右 上！=下
padding：上 右 下；
左=右 上=下
padding：上 右；
左=右=上=下
padding：上；
margin外边距
margin-top 设置元素上边的外边距
margin-right 设置元素右边的外边距
margin-bottom 设置元素下边的外边距
margin-left 设置元素左边的外边距
合写：
margin：上 右 下 左；
左！=右 上=下
margin：上 右 下 左；
左=右 上！=下
margin：上 右 下；
左=右 上=下
margin：上 右；
左=右=上=下
margin：上；
margin的经典bug
1.上下两个兄弟元素的margin重叠问题
上下两个兄弟标签，设置margin的时候，他们之间的距离不是相加，而是谁的margin值大就显示谁的距离，即为值大的覆盖小的
可以理解为，上面元素的margin-bottom和下面的margin-top，他们的值取最大的一个
解决方法：给下面的元素添加 display：inline-block；
2.父子级子元素的margin-top传递问题
在子元素中设置margin-top，表现的结果是该margin-top传递到了父级元素上，使得父元素距离他上面的元素为该margin-top值
解决方法
a.给父元素添加 overflow：hidden；
b.给父元素添加 border；