前端基础之常用知识点

前端基础之常用知识点

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,前后端交互吧,随着时代的发展,个人认为未来是移动端的天下,如何更高快,更高效的开发将是一个问题!

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

你可能感兴趣的:(前端之路)