CSS布局模型

在网页中,元素有三种布局模型:

1、流动模型(Flow)

2、浮动模型(Float)

3、层模型(Layer)

一、流动模型

流动(Flow)是默认的网页布局模型,网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容。

典型特征:

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。

2、在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

二、浮动模型(float)

块状元素都是独占一行,如果想让两个块状元素并排显示,则可以设置元素浮动实现。

{

  3个属性值

left——左浮动

      right——右浮动

none——不浮动

  特点:元素会左移,或右移,直至触碰到容器为止。

#当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。

  #当元素设置浮动属性后,会对相邻的元素产生影响,相邻元素特指紧邻后面的元素。

}

Eg:设置浮动

左浮动

右浮动

一左一右浮动

清除浮动的常用方法

1、clear属性——常用clear:both;

如果知道是那边受浮动影响可以使用:clear:left,clear:right

2、同时设置width:100%(或固定宽度)+overflow:hidden;

{

  注:当父包含块缩成一条时,用clear:both;方法清除浮动无效,它一般用于紧邻后面的元素的清除浮动。这个时候可以使用第二种方法。

}

层模型

层布局模型就像是PhotoShop中的图层编辑功能,每个图层能够精确定位操作。

层模型三种形式:

1、绝对定位(position:absolute)

2、相对定位(position:relative)

3、固定定位(position:fixed)

 三、层模型——绝对定位

Eg:实现div元素相对于浏览器窗口向右移动100px,向下移动50px。

四、层模型——相对定位

相对定位完成的过程是首先按static(float)方式生成一个元素,然后相对以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动

Eg1:实现div相对以前位置向下移动50px,向右移动100px

Eg2:什么叫做“偏移前的位置保留不动”?

代码解释:

从效果图可以看出,虽然div元素相对以前的位置产生了偏移,但是div元素以前的位置还是保留着,所以后面的span元素是显示在了div元素以前位置的后面。

五、层模型——固定定位

fixed:表示固定定位,与absolute定位类似相似,但它的相对移动的坐标是视图本身(屏幕内的网页窗口)。

由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化。

除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响。

这与background-attachment:fixed;属性功能相同。

Eg:实现相对浏览器向右移动100px,向下移动50px,并且拖动滚动条时位置固定不变。

六、Relative与Absolute组合使用

代码解释:

1、参照定位的元素必须是相对定位元素的前辈元素

2、参照定位的元素必须加入position:relative

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位。

这样box2就可以相对于父元素box1定位了(这里参照物就可以不是浏览器,而可以自由设置)

七、盒模型代码简写

Eg:

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

缩写

1、如果top、right、bottom、left的值相同,如:

margin:10px  10px  10px  10px;

可缩写为:

margin:10px;

2、如果top和bottom值相同、left和right值相同,如:

margin:10px  20px  10px  20px;

可缩写为:

margin:10px  20px;

3、如果left和right的值相同,如:

margin:10px  20px  30px  20px;

可缩写为:

margin:10px  20px  30px;

注意:padding、border的缩写方法和margin是一致的。

八、颜色值缩写

当设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

Eg1:

p{color:#000000;}

可以缩写为:

p{color:#000;}

例子2:

p{color:#336699;}

可以缩写为:

p{color:#369;}

九、字体缩写

Eg:

body{

  font-style:italic;

  font-variant:small-caps;

  font-weight:bold;

  font-size:12px;

  font-height:1.5em;

  font-family:"宋体",sans-serif;

}

  1. 缩写

body{

  font : italic  small-caps  bold  12px/1.5em"宋体", sans-serif;

}

代码解释:

1、字体缩写至少要指定font-size和font-family属性,其它属性如果未指定将自动使用默认值。

2、在缩写时font-size和line-height中间要加入"/"斜杠

十、颜色值与长度值

1、颜色值

#英文命令颜色

p{

  color:red;

}

#RGB颜色(每一项值取0~255之间的整数或0%~100%的百分数)

p{

  color:rgb(133,45,200);

}

p{

  color:rgb(20%,33%,25%);

}

#十六进制颜色(每一项值由0~225变成十六进制00~ff)

p{

  color:#00ffff;

}

2、长度值

#px(像素)

#em

#%百分比

HTML+CSS基础学习笔记(7)的更多相关文章

  1. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  2. HTML&CSS基础学习笔记1.16-单元格间距和表格主体

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

  3. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

  4. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  5. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  6. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

  7. HTML&CSS基础学习笔记1.30-颜色的表达

    颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...

  8. HTML&CSS基础学习笔记1.29-灵活地使用样式

    灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...

  9. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  10. HTML&CSS基础学习笔记1.26-input重置表单

    重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...

随机推荐

  1. Android自定义View带有删除按钮的EditText

    转载请注明出处http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEditText,就是在Andr ...

  2. bzoj1034

    贪心 尽可能让最强的赢,最弱的赢,都不行则最弱打最强 感性的想,我肯定要尽可能的赢,而且赢的要对等 实在不能赢就拿最小的拼,所谓的田忌赛马策略 由于总分一定,己方最差即己方最好时对方的分数 ..] o ...

  3. c语言开源项目--SQLite学习资料总结

    同行博客: 1.http://www.cnblogs.com/hustcat/category/175618.html; 2.http://blog.csdn.net/zhoudaxia/articl ...

  4. 第一章 用three.js创建你的第一个3D场景

    第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...

  5. bzoj 2829 信用卡凸包(凸包)

    2829: 信用卡凸包 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 1342  Solved: 577 [Submit][Status][Disc ...

  6. sqlmap win32下命令集合

    http://testphp.vulnweb.com/artists.php?artist=1    #库 注意:--前面有一个空格 C:\Python27\sqlmap>sqlmap.py - ...

  7. HW4.23

    public class Solution { public static void main(String[] args) { double sum = 0; for(int i = 1; i &l ...

  8. Mysql中查看表的类型InnoDB

    问题描述:   MySQL 数据表主要支持六种类型 ,分别是:BDB.HEAP.ISAM.MERGE.MYISAM.InnoBDB. 这六种又分为两类,一类是“事务安全型”(transaction-s ...

  9. 【转】shell 教程——06 Shell变量:Shell变量的定义、删除变量、只读变量、变量类型

    Shell支持自定义变量. 定义变量 定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编 ...

  10. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...