前端基础之常用知识点

前端基础之常用知识点

CSS书写规范：

• 选择器 与 { 之间必须包含空格
• 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格
• 并集选择器，每个选择器声明必须独占一行
• 一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确
• 属性定义必须另起一行
• 属性定义后必须以分号结尾

CSS属性书写顺序

• 布局定位属性：display / position / float / clear / visibility / overflow
• 自身属性：width / height / margin / padding / border / background
• 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
• 其他属性(CSS3)：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

CSS 布局的三种机制：
（网页布局的核心 —— 就是用 CSS 来摆放盒子位置）
1.普通流（标准流） 块级元素独占一行（自上而下排列） 行内元素在一行内（从左到右排列）
2.浮动 让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行
3.定位 将盒子定在某一个位置 自由的漂浮在其他盒子的上面（前后叠压）

布局流程：

1、必须确定页面的版心（可视区）， 我们测量可得知。
2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成
3、制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
4、然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

浮动

• 使用浮动的核心目的——让多个块级盒子在同一行显示
• 浮动的盒子不占位置
• 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

建议：

• 我们给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。
• 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

什么时候用清除浮动？
1.父级没高度
2.子盒子浮动了
3.影响下面布局了。

定位

• 相对定位是元素相对于它原来在标准流中的位置来说的。
  相对定位的特点：相对于自己原来在标准流中位置来移动的 （原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它）。

• 绝对定位是元素以带有定位的父级元素来移动位置的。
  绝对定位的特点：
  1.完全不占位置
  2.父元素没有定位，则以浏览器为准定位
  3.父元素要有定位

• 固定定位 是绝对定位的一种特殊形式
  固定定位的特点：
  1.完全不占位置
  2.只认浏览器的可视窗口（不随滚动条滚动）

一些心得：

• 在布局导航栏的时候考虑ul-li，li里包含a。
• 在考虑相同风格的盒子时，也是考虑ul-li。
• 在考虑一盒大盒子分为左右两侧的时候，考虑dd-dt。
• 综合运用浮动和定位，调整间距时仔细考虑margin和padding。
• 让一个盒子垂直（水平）居中，定位top：50%，margin-top:XXpx(盒子高度的一半)。

截止今日，前端基础已经学完了，也快开学了，后面慢慢的学移动端，js，前后端交互吧，随着时代的发展，个人认为未来是移动端的天下，如何更高快，更高效的开发将是一个问题！

如有错的地方希望大家能在评论区指正！共同进步！