p.s:这是我在学习中总结出来知识,如有不对,请多包涵。谢谢。

CSS样式:行内样式,内部样式,外部样式,他们的优先级是:行内,内部,外部,遵循就近原则。

一、HTML+CSS布局分为三大类,一是流式布局,二是浮动布局,三是绝对定位布局。

1、流式布局

  流式布局,如同水经过不同通道,呈现出不一样的方式。流式布局也是如此。流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

2、浮动布局

  利用float(浮动)属性来并排定位元素,并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果,例如环绕在照片周围,但是当你把它应用到一 个<div>标签上时,浮动就变成了一个强大的网页布局工具。float属性把一个网页元素移动到网页(或者其他包含块)的一边。任何显示在 浮动元素下方的HTML都在网页中上移,并环绕在浮动周围。

3、绝对定位布局

  通过设置position属性实现的布局,是CSS中规定的第三种定位机制,能够实现横向多列布局及较为复杂的定位。position属性:(1)静态定位(2)相对定位(3)绝对定位
可设置4个属性值:static(静态定位)| relative(相对定位)| absolute(绝对定位)| fixed(固定定位)。

二、W3C标准

  如图所示:

  

三、CSS规定的定位机制

  1.标准文档流:

    标准文档流:从上而下,从左到右,输出文档内容。由块级元素、行级元素构成。

    块级元素:从左到右撑满页面,独占一行,触碰到页面边缘时,会自动换行。如<div>、<ul>、<li>、<dl>、<dt>和<p>等等.....

    行级元素:能在同一行内显示,不会改变HTML文档结构,无法设置宽高,如果想设置宽高,需加入display:block 或者inline-block;如:<span>  、<img>和大部分表单元素。

    块级元素和行级元素都属于盒子模型。

    盒子模型=网页布局的基石,由4部分组成:
        1、边框(border)
        2、外边距(margin)
        3、内边距(padding)
        4、盒子中的内容(content)

    如图所示:

    

        

      盒子模型尺寸:border+padding+margin+盒子内中尺寸。

      

学习CSS一些事(上)的更多相关文章

  1. 学习CSS一些事(下)

    2.浮动(float) 浮动(float)特点:1.元素会左移.右移,直到触碰到容器为止.    2.设置浮动元素,仍旧处于标准文档流. 3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随着内容 ...

  2. 学习CSS的瓶颈

    何为学习瓶颈 学习到了一定的阶段,就很难继续提高水平的一种现象 这是很多人都正面对的,但同时自己并未意识到. 既然是瓶颈,那么一旦突破了,就是广阔天空! 你是否经常面对这样的情景: 遇到一个奇葩问题, ...

  3. 如何深入学习CSS

    学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...

  4. 学习 CSS 样式

    1.CSS浮动  :  http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论:           ...

  5. css知多少(2)——学习css的思路

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

  6. 【图片版】学习CSS网格布局

    简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...

  7. Git学习系列之Windows上安装Git之后的一些配置(图文详解)

    不多说,直接上干货! 前面博客 Git学习系列之Windows上安装Git详细步骤(图文详解) 第一次使用Git时,需要对Git进行一些配置,以方便使用Git. 不过,这种配置工作只需要进行一次便可, ...

  8. 前端开发笔记(2)css基础(上)

    CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...

  9. 学习CSS的思路(转)

    两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...

随机推荐

  1. 工作总结:VS2010/MFC编程入门之十六(对话框:消息对话框)

    原文地址:http://www.jizhuomi.com/software/171.html 我们在使用Windows系统的过程中经常会见到消息对话框,提示我们有异常发生或提出询问等.因为在软件开发中 ...

  2. Git初体验

    http://www.cnblogs.com/yejiurui/archive/2013/07/29/3223153.html

  3. Qt如何去掉按钮等控件的虚线框(焦点框)(三种办法)

    方法1:可以通过代码ui->pushButton->setFocusPolicy(Qt::NoFocus)或在Qt Creator的属性列表中设置. 方法2:如果在嵌入式设备中需要通过按键 ...

  4. CentOS 6.3上搭建PPTP VPN

    系统版本:CentOS 6.3_x86_64 eth0:172.16.10.72(实验环境当公网IP使用) eth1:192.168.100.50 1.检测是否支持ppp模块 # cat /dev/p ...

  5. (转载)PHP常用函数

    (转载)http://www.cnblogs.com/dreamhome/archive/2011/05/04/2037011.html <?php //==================== ...

  6. 动态规划 计数型DP:dobra

    令人愉快的单词(dobra)时间限制: 0.1 秒空间限制: 32 MB [问题描述]Lea 在她的一生中碰到过很多单词.其中的很大一部分都使她不愉快.作为补偿,她开始创造一些愉快的单词. Lea 通 ...

  7. 解决SQL Server管理器无法连接远程数据库Error: 1326错误

    解决SQL Server管理器无法连接远程数据库Error: 1326错误 我们在在使用SQL Server时都会遇到使用SQL Server Management Studio无法连接远程数据库实例 ...

  8. 使用atomic一定是线程安全的吗

    这个问题很少遇到,但是答案当然不是.atomic在set方法里加了锁,防止了多线程一直去写这个property,造成难以预计的数值.但这也只是读写的锁定.跟线程安全其实还是差一些.看下面. @inte ...

  9. 浅谈异步IO各模型优缺点

    本文只讨论OverLapped I/O的三种异步模型及完成端口,像select.SWASelect不作讨论,讨论顺序从劣到优,方便于循序渐进地对比,更容易区分各模型之间的差别. 1. OverLapp ...

  10. java 复用类的三种方式区别 组合,继承,代理的区别

    1. 组合 : 只需在新类中产生现有类的对象 .(is - a 有一个) 新类是由现有类的对象组成. (引用初始化与作用域?) 2. 继承 : 按照现有类的类型来创造新类. (has - a 有一个) ...