HTML+CSS基础学习笔记(7)
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)的更多相关文章
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- HTML&CSS基础学习笔记1.16-单元格间距和表格主体
上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...
- HTML&CSS基础学习笔记1.32-选择器是什么
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...
- HTML&CSS基础学习笔记1.31-像素和相对长度
像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...
- CSS基础学习笔记
一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...
- HTML&CSS基础学习笔记1.33-元素选择器
元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...
- HTML&CSS基础学习笔记1.30-颜色的表达
颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...
- HTML&CSS基础学习笔记1.29-灵活地使用样式
灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...
- HTML&CSS基础学习笔记1.26-input重置表单
重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[ty ...
随机推荐
- Android自定义View带有删除按钮的EditText
转载请注明出处http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEditText,就是在Andr ...
- bzoj1034
贪心 尽可能让最强的赢,最弱的赢,都不行则最弱打最强 感性的想,我肯定要尽可能的赢,而且赢的要对等 实在不能赢就拿最小的拼,所谓的田忌赛马策略 由于总分一定,己方最差即己方最好时对方的分数 ..] o ...
- c语言开源项目--SQLite学习资料总结
同行博客: 1.http://www.cnblogs.com/hustcat/category/175618.html; 2.http://blog.csdn.net/zhoudaxia/articl ...
- 第一章 用three.js创建你的第一个3D场景
第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...
- bzoj 2829 信用卡凸包(凸包)
2829: 信用卡凸包 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1342 Solved: 577 [Submit][Status][Disc ...
- sqlmap win32下命令集合
http://testphp.vulnweb.com/artists.php?artist=1 #库 注意:--前面有一个空格 C:\Python27\sqlmap>sqlmap.py - ...
- HW4.23
public class Solution { public static void main(String[] args) { double sum = 0; for(int i = 1; i &l ...
- Mysql中查看表的类型InnoDB
问题描述: MySQL 数据表主要支持六种类型 ,分别是:BDB.HEAP.ISAM.MERGE.MYISAM.InnoBDB. 这六种又分为两类,一类是“事务安全型”(transaction-s ...
- 【转】shell 教程——06 Shell变量:Shell变量的定义、删除变量、只读变量、变量类型
Shell支持自定义变量. 定义变量 定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编 ...
- 16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...