html css

html css
1.快捷键
win+E 打开资源文件
F12 或者 鼠标右键 打开控制台
file - new Project (新建文件项目仓库)
注释(不显示在浏览器中)：
ctrl+/ 单行注释
ctrl+shift+/ 多行注释
把光标移到想要复制行的任何一个地方：ctrl+D 复制整行
ctrl+Z 撤销 (回到上一步操作)

2.浏览器:
谷歌浏览器(调式我们的代码)
火狐浏览器
IE浏览器

3.html标签
用尖括号包起来,有一个开始标签,有一个结束标签,形成一套完成的标签
1)标题类 h1~h6 h的下标越大 字号越小 h1最大 h6最小

4.images 放图片的文件夹
5.网站头部的logo 外层套一个a标签,放链接跳转的地址
外层套h1,h1在标题标签的权重最大
logo 背景有2种情况：
1) img 插入图片 鼠标光标移到img元素上 鼠标右键 open in new tab (在新窗口打开)- ctrl+S 保存到本地文件夹中
2) 通过背景样式 引入到页面中

1. 块级元素和行内元素的区别？分别列举？
   块级元素：
   1)从上到下排列,独占一行
   2)ul/ol后面紧跟着只能是li标签
   3)dl 后面跟紧跟着只能是dt/dd
   4)p标签不能嵌套块级标签 包括它自己本身

div 划分快结构
h1~h6 标题类
p 文字段落
列表类 ul/li,ol/li,dl/dt/dd

行内元素：
2)从左到右,不独占一行
a,strong,b,em,i,span,sub,sup,input,button

table表格标签
lable form 添入input id名，起到聚焦作用，

内联元素:img
1)可以设置宽度
1.css样式
【方式一:行内式】
把css样式写在标签里面
style=”属性名:属性值;属性名:属性值”
多组属性名和属性值之间用分号隔开,如果最后一组属性名:属性值后面没有其他的值,最后的分号可以省略。
弊端:
html标签和css样式都放在页面,杂乱
没法公用,复用率比较低

【方式二:内嵌式】
把css样式和html结构分离开,放在style标签里面,style放到头部head标签里面,在title标签的下方

选择器{
属性名:属性值;
属性名:属性值;
…….
}

好处:
可以实现样式的公用,复用率比行内式高
外链式（引入一个外部文件夹种的样式表）

【选择器】
1)标签选择器:通过标签名选中元素

2.css样式属性
1)背景颜色:background-color
2)字体颜色:color
#fff 白色
#000 黑色
3)字体的粗细:font-weight
normal 正常(默认值)
bold 加粗
100~900 值越小 字体越细 反之 字体越粗
4)字体大小:font-size 单位:px(像素pixel)
5)段落缩进(文本缩进):text-indent 单位:em 一个em相当于一个字的间距

6)边框线：
button默认的边框线,我们要去掉它默认的边框线,border:0

增加边框线:
复合属性的写法:
border:border-width border-style border-color;
例如: border:1px solid #000;

拆分开的写法:
border-width 边框的宽度
border-style 边框线的类型
solid 实线
dashed 虚线
dotted 点状线
border-color 边框线的颜色

指定某一个方向的边框线:
border-bottom:1px solid #000下边框线
border-top:1px solid #000 上边框线
border-left:1px solid #000 左边框线
border-right:1px solid #000 右边框线

7)a标签有默认的下划线
去掉默认的下划线:text-decoration: none
8)内边距 padding
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距

复合属性padding:10px 20px 30px 40px;
上 右 下 左 (顺时针方向)

第一种情况:4个值:
padding:10px 20px 30px 40px;
上 右 下 左 (顺时针方向)
padding-top:10px
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

第二种情况:3个值
padding:10px 20px 30px;
上 左/右 下
padding-top:10px;
padding-right:20px; padding-left:20px;
padding-bottom:30px;

第三种情况:2个值
padding:10px 20px;
上/下 左右
padding-top:10px; padding-bottom:10px
padding-left:20px; padding-right:20px;

第四种情况:1个值;
padding:10px;
上/右/下/左 都是10px
padding-top:10px; padding-bottom:10px
padding-left:10px; padding-right:10px;

9)文字对齐居中方式
text-align:center 水平居中对齐
text-align:left 左对齐
text-align:right 右对齐

10)去掉列表ul前面的小黑点和ol前面的数字:
list-style:none

11)宽度 width
高度 height
行高 line-height
可以控制字垂直间距,行高和高度值一样,垂直居中;

3.块级元素和行内元素的区别？分别列举？
块级元素：
1)从上到下排列,独占一行
2)ul/ol后面紧跟着只能是li标签
3)dl 后面跟紧跟着只能是dt/dd
4)p标签不能嵌套块级标签 包括它自己本身
5)宽度默认是父级元素的宽度

div 划分快结构
h1~h6 标题类
p 文字段落
列表类 ul/li,ol/li,dl/dt/dd

行内元素：
1)从左往右排列,不独占一行
2)行内元素的宽高是它本身内容的宽高,设置宽高不起作用,如果想要设置宽高，需要添加css属性：display:block(转块级元素);
块级元素水平居中 margin:0 auto;
代码格式化:
code-Reformat code (ctrl+Alt+L)

【css样式】
1.浏览器自带的样式 禁灰的状态 我们修改不了
2.我们自定义的样式 可以修改

【选择器】
1.标签选择器 - 通过标签名来选择元素
2.class选择器也叫类选择器 - ‘.’,页面上class选择器可以出现多次,复用率高,有需要公用的样式,只需要在标签里面加相同的class名即可！
3.id选择器 - ‘#’
注意:一个页面中,相同的id名只能出现一次,id唯一(身份证),否则会报错
4.通配符选择器 - ‘*’ 指的选中页面上所有的元素
常用来去掉浏览器默认自带的css样式,一般放在所有样式的最上面;

5.后代选择器 E F 后代选择器 选择匹配的F元素，切匹配的F元素被包含在匹配的E元素内
子选择器 E>F 行啊un则匹配的F元素，且匹配的F元素是匹配的E元素的子元素
相邻兄弟选择器 E+F 相邻兄弟选择器 选择匹配的F元素仅位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的F元素后的所有的F元素

最多保留3个选择器的层级

7.交集选择器 标签名和class/id 并在一起 用来提高权重

【权重】- 谁的权利大
1.标签选择器 权重 1
2.class选择器 权重 10
3.id选择器 权重 100
4.通配符选择器 权重0~1
5.关系选择器(后代选择器,相邻兄弟选择器,交集选择器)
权重 计算:所有单独选择器的权重之和

.list1 li span em 10+1+1+1=13
.box+.box 10+10=20
div#box 1+100=101

标签属性行内元素:
特点:
1)从左往右依次排列,不独占一行
2)内容超过父元素的最大宽度,会自动折行
3)设置宽高不起作用,要设置宽高,需要把它转化为块级元素或者行内块元素,加上属性display:block 或者 display:inline-block;
4)行内元素设置padding和margin上下浏览器可以识别但是不起作用,左右可以起作用;

【display:block 和display:inline-block的区别】
display:block 把行内元素转化为块级元素 ,独占一行
display:inline-block 把行内元素转化为行内块元素,不独占一行,还可以设置宽高;

display:inline-block 有默认几像素的间距,解决办法?
給它的直接父元素加上一个属性:font-size:0;(字体大小为0)

【水平居中】
1.块级元素水平居中 div
margin:0 auto;
2.文字内容
水平居中 text-align:center 文本对齐
垂直居中,高度和行高一致(仅限单行文字内容)
例如:height:40px;
line-height:40px;

1.设置display:inline-block 和float 这2种方式有什么区别？
相同点:都可以实现让元素在一行显示
区别:
display:inline-block
问题:默认的间距空白
解决办法:給它直接父级加上font-size:0

float 浮动
弊端:
设置border和padding 不起作用;
解决办法：需要清除浮动(有4种方法可以清除浮动)

float:left 跟相当于转化为了块级元素,有了float:left;就不需要再加display:block;

浮动产生的负作用–对象:浮动元素的父元素
1设置背景颜色不起作用; background-color
2.设置边框线没有被撑开,边框线合并在一起了; border
3.设置内边距不起作用; padding

方法一: 给浮动元素的直接父级加 overflow:hidden overflow: auto;
隐藏溢出容器的内容且不出现滚动条 - 多的内容溢出隐藏

方法二:给浮动元素的直接父级加高度属性 height

方法三:在浮动元素的直接父级结束标签之前加一个空的div,并且給新添加的div加上一个class=’clear’,然后在css样式里面加上一个属性 clear:both;

【clear 表示清除浮动】
1)clear:both 清除左边和右边的浮动 不允许有浮动对象;
2)clear:left 清除左边的浮动 不允许有左边的浮动对象;
3)clear:right 清除右边的浮动 不允许有右边的浮动对象;
4)clear:none 允许有左右两边的浮动对象;

1.給父元素加上一个高度属性 height;
2.給父元素加上一个overflow:hidden;
3.給父元素结束标签之前加上一个空的div,

,然后給这个class名加上一个css样式属性;.clear{ clear:both;}4.通过伪元素:after来清除浮动,实现原理和清除浮动的第三种办法相同;給父元素加上一个class名叫class=”clearfix”;給这个class之后添加一个空的标签元素;:after 表示在元素之后添加内容;:before 表示在元素之前添加内容;css样式属性条件:1.保证是块级元素 display:block;2.伪元素:after里面的内容为空 content:”;3.左右浮动都給清除掉 clear:both;4.所有可见性的元素都隐藏 visibility: hidden;5.超出内容部分溢出隐藏 overflow:hidden6.让伪元素的内容高度为0 height:0;7.让伪元素的字体大小为0 font-size:0;

*zoom:1 兼容IE7 版本浏览器

清除浮动的固定写法:
.clearfix:after{
display:block;
content:”;
clear:both;
visibility: hidden;
overflow:hidden;
height:0;
font-size:0;
}
.clearfix{
*zoom:1;
}

【浮动的方向】
float:left 对象浮动在左边
float:right 对象浮动在右边
float:none 对象不浮动(默认值)
【定位】
绝对定位:position:absolute;
1)绝对定位元素会脱离文档流(元素漂浮起来了),而且它的位置被其他的元素占领;
2)通过上下左右(top/bottom/left/right)四个方向指定元素的位置;
3)方位同时有上下(top/bottom),跟着top的值走;
方位同时有左右(left/right),跟着left的值走;
4)绝对定位元素一定要有相对定位的参照物(加在直接父元素上position:relative),如果父元素没有相对参照物，它会一层一层往上查找,直到找到最外层的根元素(body)为止;
5)通过z-index能改变它的层级关系;

相对定位:position:relative;
1)相对定位不会脱离文档流,它原本的位置还在,不会其他的元素占领;
2)通过上下左右(top/bottom/left/right)四个方向指定元素的位置;
3)方位同时有上下(top/bottom),跟着top的值走;
方位同时有左右(left/right),跟着left的值走;
4)相对定位的参照物:是它自己本身;
5)通过z-index能改变它的层级关系;

固定定位:position:fixed
1)绝对定位元素会脱离文档流(元素漂浮起来了),而且它的位置被其他的元素占领;
2)会固定在位置上,并不会随着滚动条的滚动而滚动;
3)通过上下左右(top/bottom/left/right)四个方向指定元素的位置;
4)方位同时有上下(top/bottom),跟着top的值走;
方位同时有左右(left/right),跟着left的值走;
5)固定参照物:浏览器的窗口
6)通过z-index能改变它的层级关系;

定位元素(绝对定位,相对定位,固定定位)的相同点：
1)都可以通过top/bottom/left/right四个方向控制它的位置;
2)都可以通过z-index改变元素的层级关系;

定位元素(绝对定位,相对定位,固定定位)的不同点:
1.是否脱离文档流;
2.参照物;

nav 导航栏 nav-wrap
header 里面有一个网站的logo

【文字内容对齐的方式】
text-align:center 居中对齐
text-align:left 左对齐
text-align:right 右对齐

【元素居中】
块级水平居中:margin:0 auto;
文字内容水平居中:text-align:center;
文字内容垂直居中：height和line-height的值设一样的值;

定位类->布局–>盒子模型类->字体文本类->背景/边框类–>其他
href=”javascript:; 禁止a标签的默认链接跳转的行为

【盒子阴影】box-shadow
例如：
.box{
box-shadow:1px 1px 1px 1px #000;
}
1、第一个值：阴影x轴的偏移量（可以取负值）
2、第二个值：阴影y轴的偏移量（可以取负值）
3、第三个值：阴影的模糊半径（不可以取负值）
4、第四个值：阴影的扩展范围（不可以取负值）
5、第五个值：阴影的颜色
rgba(2,2,2,.34) alpha 透明度
通过颜色面板，所有#的12进制颜色都有对应的rgb色值

ffff rgb(255,255,255)白色

000 rgb(0,0,0)黑色

总结:
a
链接跳转
audio
音乐播放器
b
加粗
br 换行 折行
body
页面的主体
button
按钮
caption
table表格的标题
div
用划分块结构
dldtdd
定义列表
em
表示斜体
footer
底部
form
表单
h1-h6
标题标签
head 头部
header
划分结构-头部的结构
hr 下划线
i
斜体
img
插入图片
input
表单元素
link 引入外部的css文件
li
无序列表
label
包在表单的外层
ol
有序列表
option 下拉选框
p
文字段落
strong
加粗
span
无意义
sub 下标
sup
上标
style 样式风格
select 下拉选选框
tabletrthtd
表格
title 显示在浏览器页卡的内容
ulli
无序列表
video
视频播放器