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;

}

缩写

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. 【Xamarin开发 Android 系列 2】VS2015跨平台开发的几种方式

    原文:[Xamarin开发 Android 系列 2]VS2015跨平台开发的几种方式 在微软Build大会上,微软宣布在VS2015中支持三种方式进行跨平台的开发. 1. Xamarin 2. Co ...

  2. leetcode面试准备:Divide Two Integers

    leetcode面试准备:Divide Two Integers 1 题目 Divide two integers without using multiplication, division and ...

  3. 《ruby编程语言》笔记2 对象

    ruby是一门非常纯粹的面向对象的语言:所有值都是对象,而且没有基本类型(primitive type)和对象类型的区别,这一点不同于其他语言.在Ruby中,所有对象都继承一个Object类,而且共享 ...

  4. 9.png(9位图)在android中作为background使用导致居中属性不起作用的解决方法

    在使用到9.png的布局上面添加 android:padding="0dip" 比如 <LinearLayout            android:layout_widt ...

  5. bzoj3238

    都LCP了很显然是要用到后缀数组的 显然前面的那个东西是可以直接算出来的 关键在于LCP的和怎么快速的计算 不难想到穷举height[i],然后判断这个height[i]可能成为多少对后缀的LCP 考 ...

  6. spoolsv.exe 报错,无法打印

    在使用打印机过程中突然出现spoolsv.exe应用程序错误,内存不能written•••,检查打印驱动,打印机设置选项无法打开.怀疑是病毒所致,升级杀毒软件后安全模式下杀毒后没有发现病毒,重启后还是 ...

  7. HDOJ --- 1159 Common Subsequence

    Common Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  8. JSP控制select不可再选择

    首先分析下disable ,display和readonly: 1,Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效 ...

  9. bzoj 1493: [NOI2007]项链工厂(线段树)

    1493: [NOI2007]项链工厂 Time Limit: 30 Sec  Memory Limit: 64 MBSubmit: 1256  Solved: 545[Submit][Status] ...

  10. hadoop作业调优参数整理及原理【转】

    1 Map side tuning参数 1.1 MapTask运行内部原理 当map task开始运算,并产生中间数据时,其产生的中间结果并非直接就简单的写入磁盘.这中间的过程比较复杂,并且利用到了内 ...