HTML、CSS重要知识点及企业开发经验

一、html进阶篇
1、img元素中的alt属性用来代替图片显示不出来进而展示的文字，title属性代表鼠标放上图片后显示文字提示。
2、a元素的作用
1）超链接
2）锚点
3）打电话
4）发邮件
5）协议限字符
3、target属性
1）target="_blank"跳转到新页面
…
二、css基础选择器
1、id选择器
2、类选择器（class）
3、标签选择器（也就是元素标签）
4、通配符选择器
5、属性选择器（eg: [id]有属性叫id的元素或者 [id=‘xx’] 有id为xxx的元素）
三、css复杂选择器
1、父子选择器/派生选择器
2、直接子元素选择器
3、并列选择器 eg:div#only
4、分组选择器(eg：.demo1,.demo2{}相同的样式一起写)
四、css权重问题
1、!important > 行间样式 > id > 【class = 属性选择器】 > 标签 > 通配符
!important是老大
2、权重值：【用来当你写css时各种样式生效效果顺序】
!important Infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
3、行间样式 >内部样式>外部调用的样式
五、关于font字体的一些注意点
1、正常html页面的字体大小为16px
2、设置字体大小本质上是只改变字体的高
六、开发常用的基础css
1、text-align
2、text-indent:2em;首行缩进
3、line-height跟height一起用
4、text-decoration：line-throught;划斜线 underline下划线
5、cursor：pointer；鼠标箭头
6、伪类选择器 eg：像a:hover这种的
7、z-index改变层叠关系
8、vertical-align:垂直居中
七、css企业开发经验盒子模型跟层模型
1、行级元素
feature：内容决定元素所占位置，不可改变宽高
2、块级元素
独占一行，可以改变或宽高
eg: div p ul li ol form address等等
3、行级块元素
内容决定大小，可以改变宽高
eg:img
4、display有以下几个值
1）inline行级
2）block块级
3）inline-block行内块
5、盒子模型（由三部分组成）
1）盒子壁border
2）内边距padding
3）内容width+height
4）margin（外部部分边距，不是组成盒子的）
6、层模型
1）position：relative absolute
八、塌陷以及bfc、浮动流
1、塌陷问题解决
需触发bfc block format context块级格式化上下文
2、如何触发一个盒子的bfc
1）position:absolute
2）display:inline-block
3）float:left
4）overflow:hidden
两个兄弟元素的margin是合并的，用一个元素div包进去就解决了overflow：hidden；但是实际项目不解决
3、浮动元素产生了浮动流
1）所有产生了浮动流的元素，块级元素看不到他们；
2）产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素
3）清除浮动流：用clear:both
九、css包裹浮动元素开发实例经验
1、xx::before 必须用content:"";
xx::after
2、伪元素是行级元素
clear:both只能加进块级元素中
3、文字环绕图片，在图片中用float:left;
十、文字溢出、图片背景处理开发经验
1、文字溢出容器，要打点表示
1）单行文本
white-space：nowrap；
overflow:hidden;
text-overflow:ellipsis;
2）多行文本
一般没办法，是手写…进去，不用你去搜索百度看看，F12检查下
2、 背景图片处理
background-image图片
background-size大小
background-repeat是否平铺
background-position
3、文字代替图片(类似淘宝logo里面隐藏的文字)
1）第一种方法
text-indent多缩进点
white-space:nowrap
overflow:hidden
2）第二种方法
height:0px
padding-top:写高度进去
overflow:hidden。