学习心得

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最小
<h1></h1>

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


6. 块级元素和行内元素的区别？分别列举？
块级元素：
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标签的下方
<style type="text/css">
   选择器{
        属性名:属性值;
        属性名:属性值;
        .......
   }
</style>
好处:
可以实现样式的公用,复用率比行内式高

• 外链式（引入一个外部文件夹种的样式表）

<link rel="stylesheet"  href="css样式文件的路径地址"/>

【选择器】
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,
<div class="clear"><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:hidden
6.让伪元素的内容高度为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 视频播放器