html css一些基础知识点的整理

浅显的名词解释
html：即HyperText Markup Language，超文本标记语言。
css：即Cascading Style Sheets，层叠样式表。
JavaScript：也称为ECMAScript，广义上包括ECMAScript，DOM，BOM。
jQuery：JavaScript框架，write Less，Do More，封装JavaScript代码，优化HTML文档操作、事件处理、动画设计和Ajax交互。
Ajax：即Asynchronous Javascript And XML，异步 JavaScript 和 XML，创建交互式网页应用的网页开发技术。
Bootstrap：基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架。
less： CSS 预处理器，让 CSS 具有动态性。
SEO：搜索引擎优化技术：告诉搜索引擎爬虫，我们的网站是关于什么的
空格符 &nbsp
< 字符 &lt
>字符 &gt
targrt=_blank 新标签跳转
css 的引入：行间样式，页面级css，外部css文件
css选择器与权重
！important： Infinity
行间样式： 1000
id选择器：100
class选择器|属性|伪类：10
标签选择器|伪元素：1
通配符选择器：0
进制：256
父子选择器： a b
直接子元素选择器： a>b
并列选择器： ab
分组选择器： a，b，c
浏览器底层原理：遍历选择器自右向左。
颜色写法：纯英文单词（测试用），颜色代码，颜色函数。
透明色：transparent。
简单的三角形画法：利用border。
实现文本水平垂直居中
首行缩进两字符：text-indent：2em ；
像素：px，相对单位。1em=1 font-size。
text-decoration：文本修饰；
cursor：光标
伪类选择器：hover
行级元素，内联元素（inline）：内容决定元素所占位置，不可以通过css改变宽高。 span strong em a del
块级元素（block）：独占一行，可以通过css改变宽高。div p ul li ol form address。
行级块元素（inline-block）：内容决定大小，可以改变宽高。
凡是带有inline的元素，都有文字特性。用于解决图片之间的空隙。改变元素属性。
盒子的三大部分
盒子壁： border
内边距：padding
盒子内容：width+heigth

外边距：margin
盒子模型：margin+border+padding+（content=width+heigth）
body有默认的margin：8px；
层模型：position定位
absolute：脱离原来位置进行定位，最近有定位的父级进行定位，如果没有有定位的父级，相对于文档进行定位
relative：保留原来位置进行定位，相对于自己原来的位置进行定位。
fixed：相对于页面位置进行定位
两栏布局
两个经典bug：
margin塌陷
BFC：block format context，改变语法规则。
触发盒子的BFC：
1设置position：absolute
2.display：inline-block
3float：left/right
4overflow：hidden

margin合并：兄弟元素垂直方向的margin会合并。
解决：在一个元素上多加上另一个的距离
浮动模型：float：left/right
浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的块级元素和文本类元素以及文本可以看到浮动元素。
伪元素：bofore，after
span：：before，span：：after{
content："";
clrea:both;
displat:block;
}
文字环绕图片：float的最原始用法。
文字溢出
单行文本打点显示：css{
white-space：nowrap；
overflor：overhidden；
text-overflow：ellipsis；
}
多行文本截断处理：css{
文本高度和div高度处理；
overflow：hidden；
}
背景图片的引入和处理
background-image：
background-size：100%；
background-repeat：no-repeat（repeat-x，repeat-y）；
background-position：100px ，100px；(或者top left right bottom center=50% 50%)
行级元素只能嵌套行级元素
块级元素可以嵌套任何元素，但是p标签不可以嵌套块级元素，会被斩断成两段。
a标签里不可以嵌套a标签。
inline 和inline-block都是文本类元素
position：absolute/float：left，right设置时，会把元素转变成inline-block元素。
行级块元素里面有文本类内容的时候，外面的文字与其内部文本底部对齐。vertical属性可以设置对齐方式和距离。
文字前后小图片的插入：利用伪元素。

小蜜蜂

html css一些基础知识点的整理