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 ...
随机推荐
- Lucene的分析资料【转】
Lucene 源码剖析 1 目录 2 Lucene是什么 2.1.1 强大特性 2.1.2 API组成- 2.1.3 Hello World! 2.1.4 Lucene roadmap 3 索引文件结 ...
- iOS - UITableView中Cell重用机制导致Cell内容出错的解决办法
"UITableView" iOS开发中重量级的控件之一;在日常开发中我们大多数会选择自定Cell来满足自己开发中的需求, 但是有些时候Cell也是可以不自定义的(比如某一个简单的 ...
- javaScript基础语法（上）
相关理论概念: 直接量的概念:直接描述某个(些)存储空间的值的量,如变量的值.对象的值.数组的值. 数据类型:在数据结构中的定义是一个值的集合以及定义在这个值集上的一组操作. 1.变量的声明和使用 变 ...
- jdbc数据库连接过程及驱动加载与设计模式详解
首先要导入JDBC的jar包:接下来,代码:Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类, 也就 ...
- AEAI CRM_v1.5.2升级说明，开源客户关系管理系统
1.升级说明 本次AEAI CRM升级内容主要是针对数通畅联推出AEAI ECP企业云联平台而升级的,其中对AEAI CRM的各模块进行扩展,同时增加了移动门户版功能及为AEAI ECP提供数据服务接 ...
- 关于sql中in 和 exists 的效率问题，in真的效率低吗
原文: http://www.cnblogs.com/AdamLee/p/5054674.html 在网上看到很多关于sql中使用in效率低的问题,于是自己做了测试来验证是否是众人说的那样. 群众: ...
- Linux下用ftp更新web内容！
使用ftp更新web!让网页更新一次OK! 配置如下: 1.在Linux下安装ftp服务器! yum -y install vsftpd #ftp由vsftpd提供! 2.配置主配置文件/etc/vs ...
- ngx_http_uwsgi_module模块.md
ngx_http_uwsgi_module ngx_http_uwsgi_module模块允许将请求传递到uwsgi服务器. 示例配置: location / { include uwsgi_para ...
- BFC和haslayout
待补充 参考链接:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 标准浏览器: BFC(block formatt ...
- init.d functions的daemon函数
daemon函数说明 # 该函数的作用是启动一个可执行的二进制程序: # 使用方法: # .daemon {--check program|--check=program} [--user usern ...