从css中看到了什么?

    一直以来都是一个后台开发者,对前台页面的了解非常少。

   对于web界面,有两个抽象的认识:很容易(要写一个表单、一个信息展示页面是非常简单的)。很难,要实现页面的精美布局,实现动态效果,并且容易变化是很难的。

   前者是对简单的html element来说,掌握很容易,后者是对复杂的css属性以及其组合方式来说是非常的难。

 

   说页面难以控制,其实是对layout(布局)的理解不够导致的。我会常常为了放置一个元素而无法精确的定位其位置而头痛,在加上一些动态效果和并不专业的页面设计,整个过程就变得非常的困难了。

   首先要了解页面的两个重要概念inline和block,inline表示元素在一行内排列下去,而block则是一个元素为一行的排列。典型的<span>是inline的,<div>是block的。这些element可以随着css样式控制来改变inline、block的格局。在css中改变元素这重要属性的方法是通过display来改变。

   box的表示方法,有一组属性:width、height、border、padding、margin;一个盒子,他的尺寸是由inbox(width、height)、内边距(padding)、边框(border)和外边距(margin)构造而成。

   position ,整个页面如同流水一样,在一个层面上,按照inline和block的方式一个一个呈现的,我们可以通过某些方法让元素脱离这个“流”,在另一个层面上来表现自己。 这就是position属性了,他的值有static、absolute、relative、fixed等,static表示在这个静态的流上,absolute表示相对于父元素,它的位置所在。relative,相对于前一个元素来指定他的位置,fixed,固定在浏览器上。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值