简单的css,从入门开始

来源:互联网 发布:淘宝网怎么游专营店 编辑:程序博客网 时间:2024/06/05 20:24
    CSS 基础知识
    下面几个入门教程不错:
    1、幕课网 - HTML+CSS基础课程:偏基础,可以在线练习和预览
    2、MDN - CSS入门教程: MDN 的官方文档
    3、学习 CSS 布局:排版和配色特别舒服,简短但不深入,适合概览入门

    CSS 定位问题

  北京做卧蚕哪家医院好http://www.010yestar.com/

    主要就是经典的绝对定位,相对定位问题。
    1、10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动。
    2、百度前端学院笔记 - 理解绝对定位:文章本身一般,几篇参考文献比较详细
    3、HTML和CSS高级指南之二——定位详解(译文):介绍浮动的使用,详细介绍定位的技巧,包括如何准确的给元素在 X 轴、Y 轴和 Z 轴定位
    三栏式布局
    涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,它们实现的效果是一样的,差别在于其实现的思想。
    圣杯布局
    圣杯:父盒子包含三个子盒子(左,中,右)
    中间盒子的宽度设置为 width: 100%; 独占一行;
    使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;
    .left {margin-left:-100%;} 把左边的盒子拉上去
    .right {margin-left:-右边盒子宽度px;} 把右边的盒子拉上去
    父盒子设置左右的 padding 来为左右盒子留位置;
    对左右盒子使用相对布局来占据 padding 的空白,避免中间盒子的内容被左右盒子覆盖;
    双飞翼布局
    双飞翼:父盒子包含三个子盒子(左,中,右),中间的子盒子里再加一个子盒子。
    中间盒子的宽度设置为 width: 100%; 独占一行;
    使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;
    在中间盒子里面再添加一个 div,然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置;
    圣杯和双飞翼异同
    圣杯布局和双飞翼布局解决的问题是一样的,都是两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
    两种方法基本思路都相同:首先让中间盒子 100% 宽度占满同一高度的空间,在左右两个盒子被挤出中间盒子所在区域时,使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。
    主要区别在于 如何使中间盒子的内容不被左右盒子遮挡:
    圣杯布局的方法:设置父盒子的 padding 值为左右盒子留出空位,再利用相对布局对左右盒子调整位置占据 padding 出来的空位;
    双飞翼布局的方法:在中间盒子里再增加一个子盒子,直接设置这个子盒子的 margin 值来让出空位,而不用再调整左右盒子。
    简单说起来就是双飞翼布局比圣杯布局多创建了一个 div,但不用相对布局了,少设置几个属性。
原创粉丝点击