第二 html/css总结

Posted 2020-12-04 xingguang009

html:

　　html:语义化的标签
　　div:块级 页面进行分割

　　span:行内标签

　　
　　img:

　　ul ol dl
　　它的孩子只能是li

　　a:
　　　　href:链接地址 路径==》 相对路径： ../imgs/a.png

　　table
　　form
　　input
　　文本级的标签：p、a、span、i、em 只能放文本、图片、表单元素

　　排版标签：div、ul、ol、li、

　　行内标签：文本级标签中除了p，其它标签都是行内标签（行内块）
　　块级标签：所有的排版标签都是块级标签，再加上p、

css:
　　**************display、浮动、定位、z-index*************
　　行内标签：display：inline;
　　（1）在一行内显示
　　（2）不能设置宽高
　　（3）它的宽和高是内容的宽高
　　块级标签：display:block;
　　（1）独占一行
　　（2）可以设置宽高
　　（3）它的宽是父盒子的宽度100%；
　　行内块标签：img input display:inline-block;
　　（1）在一行内显示
　　（2）可以设置宽高


　　通过display属性对标签进行转化 none|inline-block|block

　　css选择器：
　　　　基础选择器和高级选择器
　　基础选择器：
　　　　标签选择器：选择的标签的‘共性’，而不是特性
　　　　div{}、ul{}、ol{}、form{}
　　类选择器：.box{}

　　　　id选择器：#box{} 只能选择器的特性，主要是为了js

　　*通配符选择器：重置样式

　　高级选择器：
　　　　后代选择器(儿子、孙子、。。。。。)
　　　　div p{}
　　　　子代选择器（儿子）
　　　　div>p{}
　　　　组合选择器：
　　　　div,ul,dl,form{}

　　交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器
　　　　//012
　　　　form input.active{
　　　　width:200px;
　　　　}

　　　　//002
　　　　form input{

　　　　}

　　伪类选择器： “爱恨准则”
　　　　a:hover{
　　　　}

　　伪元素选择器：
　　　　p:first-letter{
　　　　}

　　　　p::after{

　　　　}

　　/*解决浮动带来的问题*/
　　content:‘‘;

　　clear:both;
　　display: block;
　　visibility: hidden;
　　height: 0;
　　}

权重问题：
　　数数的问题

行内的样式>内接样式>外接

权重问题比较
　　100>010>001
　　id>类>标签

（1）css的继承性：
　　继承来的属性权重为0，如果权重都为0，谁描述的近谁优先
　　#tt{}
　　.active{}

继承和权重
　　记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

　　但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

（2） 盒模型：
（3） 标准文档流
　　margin:调整兄弟之间的距离
　　padding:调整父子标签之间的位置，注意盒模型的计算


坑1：
　　margin垂直方向塌陷问题：
　　当设置第一个盒子为margin-bottom:50px;
　　第二个盒子为margin-top:100px;那么小的margin会掉到大的magin中，这就是margin塌陷
　　解决办法：float浮动就不会再出现塌陷

　　水平方向上不会出现塌陷问题。

‘奇技淫巧’
（4）浮动的现象
　　（1）脱标：脱标的元素不在标准文档流下占位置
　　　　浏览器认为第一个盒子不是标准文档流的盒子，认为第二个盒子为标准文档流下的盒子
　　（2）浮动的元素互相贴靠
　　（3）浮动元素有字围效果
　　第一个元素浮动，第二个元素不浮动，那么第二个元素的文字会围绕着第一个浮动元素显示
　　（4）凡是脱标（浮动、绝对定位、固定定位）的元素，不区分行内标签还是块标签，宽高可以任意设置
浮动永远不是一个盒子在浮动，要浮动一起浮动
　　（5）浮动带来的好处：
　　　　1.实现元素并排
　　　　2.可以按照自己的规则走（设置盒模型的宽和高）
　　（6）浮动带来的问题
　　父盒子撑不起来了
　　（7）浮动解决：
　　　　（1）给父盒子设置固定高度 百年不变导航栏
　　　　（2）内墙法：
　　　　　　给最后一个浮动的元素添加一个块级标签，并且该标签设置属性 clear：both;
　　　　（3）伪元素清除法：********
　　　　　　.clearfix:after {
　　　　　　content: ".";
　　　　　　display: block;
　　　　　　height: 0;
　　　　　　visibility: hidden;
　　　　　　clear: both
　　　　　　}
　　　　（4）overflow:hidden
　　（8）overflow:本意是隐藏
　　　　visible 默认值。内容不会被修剪，会呈现在元素框之外。
　　　　hidden 内容会被修剪，并且其余内容是不可见的。
　　　　scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
　　　　auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
　　　　inherit 规定应该从父元素继承 overflow 属性的值。

数据驱动视图

　　　（9）浮动元素margin的问题
　　　　标准流下的标签,兄弟之间使用margin调整位置，父子之间使用padding调整子标签的位置（小心盒模型的计算）

　　　　脱标的元素，margin和padding可以任意使用

　　　　浮动的盒子： margin: 0 auto;不起任何作用

　　　　使用margin：0 auto;注意点：

　　　　　　1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

　　　　　　2.只有标准流下的盒子 才能使用margin:0 auto;

　　　　　　当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

　　　　　　3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

　　　　（10）css单位选择:
　　　　　　px: 绝对单位 固定不变的
　　　　　　em: 相对字体 根据父盒子的字体大小来设置的单位
　　　　　　%：
　　　　　　rem: 只根据html的font-size来调整页面所有标签的盒模型的大小
　　　　　　
　　　　（11）line-height
　　　　　　(1)针对单行文本垂直居中

　　　　　　　　公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。

　　　　　　(2)针对多行文本垂直居中

　　　　　　　　行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。

　　　　　　　　第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px

　　　　　　　　第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

　　　　（12）background: 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等
　　　　　　background-image:url(./1.jpg)
　　　　　　background-repeat: repeat|no-repeat|repeat-x|repeat-y
　　　　　　background-position: x y;
　　　　　　x和y如果是正值，意味着调整当前图片的位置信息，相对于原来的位置进行调整
　　　　　　x和y如果是负值，切背景图，注意：一定要有明确的width和height "精灵图技术"

　　　　　　

雪碧图技术：　　　　　

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？

其实就是 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

 

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

　　　要记住：
　　　　#000 黑
　　　　#fff 白
　　　　#f00 红
　　　　#333 灰
　　　　#222 深灰
　　　　#ccc 浅灰
　　　　（13）iconfont

　　　　　　iconfont图标只能从这个   http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3   去获取

　　　　（14）定位：

　　　　　(1)相对定位
　　　　　　如果仅仅对当前盒子设置相对定位，那么它与原来的盒子没有任何变化、

　　　　　　只有一个作用：父相子绝
　　　　　　不要使用相对定位来做压盖现象

　　　　　　微调元素位置

　　　　　　二种现象：
　　　　　　1.不脱标
　　　　　　2.形影分离老家留坑（恶心）

　　　　　(2)绝对定位
　　　　　　现象：
　　　　　　1.设置绝对定位的盒子，脱离标准流
　　　　       参考点：
　　　　　　一、单独一个绝对定位的盒子

　　　　　　　1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
　　　　　　　2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。（爱立信）

　　　　　　二、以父辈盒子作为参考点
　　　　　　　1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

　　　　　　　2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

    　　　　　　3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
  　　注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

　　还要注意，绝对定位的盒子无视父辈的padding
　　设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中
　　　　　(3)固定定位　　　

　　　　　特性: 

　　　　　　1.脱标 2.遮盖，提升层级 3.固定不变

　　　　   参考点：

　　　　　　设置固定定位，用top描述。那么是以浏览器的左上角为参考点
　　　　　　如果用bottom描述，那么是以浏览器的左下角为参考点

　　　　   作用： 1.返回顶部栏 2.固定导航栏 3.小广告

　　　　　（15）：z-index　　　　　

　　　　　　这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。

• • • z-index 值表示谁压着谁，数值大的压盖住数值小的，
    • 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
    • z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
    • 从父现象：父亲怂了，儿子再牛逼也没用