CSS-学习笔记三
绝对定位：
1. 脱离了文档流，没有浮动效果
2. 默认情况下，设置了绝对定位的块，它的Top,left是相对于浏览器的
3. 当给设置了绝对定位的块的父元素设置定位的时候（绝对、相对、固定），
那么改元素的top和left相对的是父元素的。
相对定位：
1. 没有脱离文档流，浮动有影响
2. 设置相对定位的块，不管它的父元素是否定位，那么它的top,left始终是相对它的父元素
3. 只有设置了定位的块，才有top,left属性
4. div默认: position:static 存在于文档流，浮动有影响
固定定位：
1.脱离文档流，不会出现滚动条
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="CSS/Demo.css" rel="stylesheet" />
</head>
<body> <!--四种定位：static, fixed, absolute,relative-->
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div> <div id="d4">
<div id="d5"></div>
<div id="d6"></div>
</div> <div id="d7"></div> <div id="d8">
<div id="d9">居中</div>
</div> <div id="d10"></div>
<div id="d11"></div>
<div id="d12"></div> <div id="d13">
内容太多超过边框内容太多,多出的地方隐藏。内容太多超过边框内容太多,多出的地方隐藏。内容太多超过边框内容太多,多出的地方隐藏。内容太多超过边框内容太多,多出的地方隐藏。
</div> <div id="dcon">
<h2 id="dtitle"><a href="javascript:;">武汉房产/腾讯看房</a></h2>
<div id="dtop">
<div id="dpic"><img src="Picture/2.jpg" /></div>
<div id="dcom">
<a href="javascript:;">最牛钉子户坚守十几年 曾拒2000万补偿</a>
</div>
</div>
<div id="dlist">
<ul>
<li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
<li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
<li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
<li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
<li><a href="javascript:;">房产中介市场存隐忧：黑中介骗了租客骗房东</a></li>
</ul>
</div>
</div> </body>
</html>
*{
padding :0px;
margin :0px;
font-family :"微软雅黑";
list-style-type:none ;
}
a{
text-decoration :none;
}
/*绝对定位：
1. 脱离了文档流，没有浮动效果
2. 默认情况下，设置了绝对定位的块，它的Top,left是相对于浏览器的
3. 当给设置了绝对定位的块的父元素设置定位的时候（绝对、相对、固定），
那么改元素的top和left相对的是父元素的。
*/
#d1{
width :300px;
height :300px;
border :solid 1px red;
margin-top :100px;
margin-left :100px;
/*position :absolute ;*/
}
#d2{
width :100px;
height :100px;
border :solid 1px blue;
position :absolute ;
top:200px; /*只有在设置了定位后才有效果，否则无效果*/
left:200px;
}
#d3{
width :100px;
height :100px;
border :solid 1px black;
top:200px;/*无效果*/
left:200px;
}
/*相对定位：
1. 没有脱离文档流，浮动有影响
2. 设置相对定位的块，不管它的父元素是否定位，那么它的top,left始终是相对它的父元素
3. 只有设置了定位的块，才有top,left属性
4. div默认: position:static 存在于文档流，浮动有影响
*/
#d4{
width :300px;
height :300px;
border :solid 1px red;
margin-top :100px;
margin-left :100px;
/*position :absolute ;*/
}
#d5{
width :100px;
height :100px;
border :solid 1px blue;
position :relative ;
/*position :absolute ;*/
float: left; /*浮动有影响*/
/*top: 200px;
left: 200px;*/
}
#d6 {
width: 100px;
height: 100px;
border: solid 1px black;
position: relative;
float: left; /*浮动有影响*/
top: 200px;
left: 200px;
}
/*固定定位：
1.脱离文档流，不会出现滚动条*/
#d7{
width :100px;
height :100px;
border :solid 1px red;
position :fixed;
bottom :200px;
right :100px;
}
/*居中放置*/
#d8{
width :300px;
height :300px;
border :solid 1px red;
position :absolute;
left :%;
top:%;
margin-top :-150px;
margin-left :-150px;
}
#d9{
width :100px;
height :100px;
border :solid 1px red;
position :relative ;
left :%;
margin-left :-50px;
top:%;
margin-top :-50px;
}
/*层级由z-index控制，越大就约在上面*/
#d10{
width :100px;
height :100px;
border :solid 2px red;
background-color:yellow;
position :absolute ;
top:900px;
left:100px;
z-index :;
}
#d11{
width :100px;
height :100px;
border :solid 2px red;
background-color:orange;
position :absolute ;
top:920px;
left:120px;
z-index :;
}
#d12{
width :100px;
height :100px;
border :solid 2px red;
background-color:forestgreen;
position :absolute ;
top:910px;
left:110px;
}
#d13{
width :100px;
height :100px;
border:solid 1px red;
/*overflow :hidden ;隐藏超出的部分*/
overflow :auto ;/*超出的部分自动带有滚动条*/
/*overflow :scroll ;/*不管超出没超出都有滚动条*/*/
}
#dcon{
width :350px;
height :280px;
border:solid 1px #D2E1F1;
position :absolute ;
top:1100px;
left :100px;
}
#dtitle{
height :32px;
background-color :#F6FAFD;
font-size :16px;
line-height :32px;
padding-left :10px;
width :%; /*这里有问题，还是会多出来一节*/
}
#dtitle a{
color :#0873C0;
}
#dtop{
height :76px;
width :%;
margin :10px 0px;
}
#dcom{
width :170px;
margin-top :18px;
}
#dpic,#dcom{
float :left ;
}
#dpic{
margin :0px 10px;
}
#dcom a{
color:#3B639F;
font-weight :;
}
#dlist{
margin-left :10px;
}
#dlist li{
line-height :26px;
background-image :url("../Picture/3.png");
background-repeat:no-repeat ;
padding-left :20px;
background-position :0px 6px;
}
#dlist li a{
font-size :14px;
color :#172C45;
}
#dlist li a:hover{
color :#f00;
}
CSS-学习笔记三的更多相关文章
- CSS学习笔记三：自定义单选框，复选框，开关
一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...
- css学习笔记三
总结一下水平居中和垂直居中的方法,欢迎交流指正,共同进步! 1.水平居中 1.1):行内元素水平居中,在其父类设置text-align:center; 1.2): 块级元素水平居中有三种 第一种:定宽 ...
- CSS学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
随机推荐
- MyEclipse 2016正式版更新内容
MyEclipse 2016 Stable 1.0正式发布!在保留之前CI系列的工具之外,又新增了许多非常棒的新功能.正式版下载地址 Eclipse Mars MyEclipse 2016基于Ecli ...
- 利用github pages创建简单的网站
github.com 作为最流行的源代码管理工具已经风靡全球,同时在依托于github也衍生出了各种各样的应用,比如可以利用github搭建博客系统等等. 先换个话题,我们每人手头都或多或少有些&qu ...
- 了解JavaScript 对象的属性操作
提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...
- 高仿ios版美团框架项目源码
高仿美团框架基本已搭好.代码简单易懂,适合新人.适合新人.新人. <ignore_js_op> 源码你可以到ios教程网那里下载吧,这里我就不上传了,http://ios.662p ...
- Java类加载基本过程
基本过程: 根据类的全限定名称加载定义类的二进制字节流. 将字节流代表的静态存储结构转化为方法区的运行时数据结构 内存中生成一个代表这个类的java.lang.Class对象,作为方法去这个类的各 ...
- 统计分析中Type I Error与Type II Error的区别
统计分析中Type I Error与Type II Error的区别 在统计分析中,经常提到Type I Error和Type II Error.他们的基本概念是什么?有什么区别? 下面的表格显示 b ...
- 2015-12-01 SQL查询语句基础
1.查询全体学生的学号与姓名select sno,snamefrom student;3.查询全体学生的详细信息select *from student;4.查询全体学生的姓名及其出生年份select ...
- APUE学习之三个特殊位 设置用户ID（set-user-ID），设置组ID（set-group-ID），sticky
设置用户ID(set-user-ID),设置组ID(set-group-ID),sticky set-user-ID: SUID 当文件的该位有设置时,表示当该文件被执行时,程序具有文件 ...
- 怎么知道Fragment属于哪个Activity呢？
如果程序是一条线运行的,Fragment 中 getActivity() 是获取的上一个打开或者执行的Activity中的值. 多个Activity也是如此,就看顺序是怎么执行的,getActiv ...
- Linux 查看命令源码
一.简介 有时候想看看ls.cat.more等命令的源代码,本文介绍相应查看方法. 二.方法 参考: http://blog.csdn.net/silentpebble/article/details ...