CSS基础和布局复习
table布局 | div布局优势 |
浏览器支持完善 | |
表现和结构分离 | |
样式设计控制功能强大 | |
可以继承,层叠处理 |
Transitional // 松散过度型
Strict //严格型
Frameset //比较不常用的,使用框架使用这种模式
"<input/>"
但是在HTML中就不必这样
"<input>"即可
px : 像素 |
em : 当前对象体内的字体尺寸(好像英文比较常用这个尺寸) |
ex : 当前字符高度的相对尺寸 ( font-size:1.2ex,当前字符的1.2倍高) |
pt : 点/镑point (font-size:9pt;) |
pc : 派卡 pica |
in : 英寸 |
pc : 派卡 pica |
mm : 毫米 |
cm :厘米 |
rgb : (0,0,0) |
rgba:(0,0,0,0.2) |
rrggbb :十六进制的颜色单位 #ffffff; |
colorName : 字体颜色(color:blue) |
样式分有三种 :
- 行间样式
- 内部样式
- 外部样式
css布局和定位:
/固定宽度的布局/
/流式布局(按照%比)/
/弹性布局,根据字体 em进行布局/
1:一列自适应: width:80%;
<h5>一列固定居中: margin:0 auto;</h5>
<h5>二列固定宽度:</h5>
<div id="two-row" class="clearFix">
<style>
.clearFix:after{
content:"";
display:block;
visibility:visible;
clear:both;
height:0;
}
#two-row {
width:500px;
background:#666
}
#two-row .left{
width:200px;
background:#0C9;
float:left;
}
#two-row .right{
width:300px;
background:#069;
float:left;
}
</style>
<div class="left">row1</div>
<div class="right">row2</div>
</div>
2:两列宽度自适应:利用左右定位;中间居中
<div id="two-auto" class="clearFix">
<style>
.clearFix:after{
content:"";
display:block;
visibility:visible;
clear:both;
height:0;
}
#two-auto {
background:#666
}
#two-auto .left{
width:35%;
background:#0C9;
float:left;
}
#two-auto .right{
width:30%;
background:#069;
float:left;
}
</style>
<div class="left">auto-left</div>
<div class="right">auto-right</div>
</div>
3:两列右列宽度自适应
<div id="right-auto">
<style>
#right-auto{
}
#right-auto .left{
width:100px;
float:left;
background:#ccc;
}
#right-auto .right{
background:#f00;
border:2px solid #000;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
</div>
<h5>三列自适应</h5>
<div id="three">
<style>
#three{
position:relative;
}
#three .left{
position:absolute;
left:0;top:0;
width:100px;
height:300px;
background:#C99;
}
#three .right{
position:absolute;
top:0;right:0;
width:100px;
height:300px;
background:#C99;
}
#three .center{
margin-left:100px;
margin-right:100px;
height:300px;
background:#F03;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
<h5>三列自适应;利用左右浮动;中间居中</h5>
<div id="three-1">
<style>
#three-1{
position:relative;
}
#three-1 .left{
float:left;
width:100px;
height:300px;
background:#C99;
}
#three-1 .right{
float:right;
width:100px;
height:300px;
background:#C99;
}
#three-1 .center{
margin-left:100px;
margin-right:100px;
height:300px;
background:#F03;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
高度自适应:
盒模型; 主要是IE和IE6的怪异模式'
margin叠加和margin双倍解决
background
超出div的内容区域
img标签的clip剪切css
CSS基础和布局复习的更多相关文章
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- [19/06/07-星期五] CSS基础_布局&定位&背景样式
一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- 一、HTML和CSS基础--网页布局--实践--导航条菜单的制作
案例一:导航菜单的制作 垂直菜单
- 一、HTML和CSS基础--网页布局--如何用css进行网页布局
什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...
- 一、HTML和CSS基础--网页布局--实践--固定层效果
absolute和fixed的相同点: 第一,完全脱离标准文档流 第二,未设置偏移量时,都定位在父元素的左上角 absolute和fixed的不同点: 第一.当设置偏移量时,偏移参照基准不同 abso ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
随机推荐
- Cookie的用法
string strCookie=""; //创建一个名为user HttpCookie userCookie=new HttpCookie("user"); ...
- Visitor设计模式
我猜想许多人都知道访问者设计模式,这种模式在“四人帮”的那本可复用面向对象软件基础的书被描述过.这个模式自身其实一点也不复杂(和以往的其他设计模式一样). 如上图所示: 我知道这个模式很久了,但是我 ...
- Kail Linux渗透测试教程之Recon-NG框架
Kail Linux渗透测试教程之Recon-NG框架 信息收集 信息收集是网络攻击最重要的阶段之一.要想进行渗透攻击,就需要收集目标的各类信息.收集到的信息越多,攻击成功的概率也就越大.本章将介绍信 ...
- 【裸裸的左偏树】BZOJ1455-罗马游戏
[题目大意] 给出一些数和一些操作.M:合并两个数所在的集合,如果有任意一个数被删除则忽略操作:K:删除某个数所在集合中最小的数. [思路] 裸裸的,复习^ ^ #include<iostrea ...
- SCOJ 4493: DNA 最长公共子串 后缀自动机
4493: DNA 题目连接: http://acm.scu.edu.cn/soj/problem.action?id=4493 Description Deoxyribonucleic acid ( ...
- Linux知识(4)----文件系统结构
Ubantu 14.04的文件系统结构如下图所示: 参考资料: 1.http://www.cnblogs.com/wen858636827/archive/2012/12/26/2834373.htm ...
- CountDownLatch CyclicBarrier Semaphore 比较
document CountDownLatch A synchronization aid that allows one or more threads to wait until a set of ...
- Java Web----Java Web的数据库操作(三)
Java Web的数据库操作 前面介绍了JDBC技术和JDBC API及API的使用示例,下面详细介绍JDBC在Web中的应用. Java Web----Java Web的数据库操作(一) Java ...
- LT1961 升压型稳压器造就了兼具升压和降压能力的扁平状SEPIC
http://cds.linear.com/docs/cn/design-note/DN317%20sim_chs.pdf http://cds.linear.com/docs/en/datashee ...
- SQL SERVER 锁2
http://blog.csdn.net/huwei2003/article/details/4047191 http://www.cnblogs.com/huangxincheng/category ...