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 ...
随机推荐
- 【Xamarin开发 Android 系列 2】VS2015跨平台开发的几种方式
原文:[Xamarin开发 Android 系列 2]VS2015跨平台开发的几种方式 在微软Build大会上,微软宣布在VS2015中支持三种方式进行跨平台的开发. 1. Xamarin 2. Co ...
- leetcode面试准备:Divide Two Integers
leetcode面试准备:Divide Two Integers 1 题目 Divide two integers without using multiplication, division and ...
- 《ruby编程语言》笔记2 对象
ruby是一门非常纯粹的面向对象的语言:所有值都是对象,而且没有基本类型(primitive type)和对象类型的区别,这一点不同于其他语言.在Ruby中,所有对象都继承一个Object类,而且共享 ...
- 9.png(9位图)在android中作为background使用导致居中属性不起作用的解决方法
在使用到9.png的布局上面添加 android:padding="0dip" 比如 <LinearLayout android:layout_widt ...
- bzoj3238
都LCP了很显然是要用到后缀数组的 显然前面的那个东西是可以直接算出来的 关键在于LCP的和怎么快速的计算 不难想到穷举height[i],然后判断这个height[i]可能成为多少对后缀的LCP 考 ...
- spoolsv.exe 报错,无法打印
在使用打印机过程中突然出现spoolsv.exe应用程序错误,内存不能written•••,检查打印驱动,打印机设置选项无法打开.怀疑是病毒所致,升级杀毒软件后安全模式下杀毒后没有发现病毒,重启后还是 ...
- HDOJ --- 1159 Common Subsequence
Common Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- JSP控制select不可再选择
首先分析下disable ,display和readonly: 1,Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效 ...
- bzoj 1493: [NOI2007]项链工厂(线段树)
1493: [NOI2007]项链工厂 Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 1256 Solved: 545[Submit][Status] ...
- hadoop作业调优参数整理及原理【转】
1 Map side tuning参数 1.1 MapTask运行内部原理 当map task开始运算,并产生中间数据时,其产生的中间结果并非直接就简单的写入磁盘.这中间的过程比较复杂,并且利用到了内 ...