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 ...
随机推荐
- Mysql Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) for operation '='
MySQL字符串比较bug: select * from table_a a left join table_b b on a.field_a = b.field_b error: Illegal ...
- Java开发代码性能优化总结
代码优化,可能说起来一些人觉得没用.可是我觉得应该平时开发过程中,就尽量要求自己,养成良好习惯,一个个小的优化点,积攒起来绝对是有大幅度效率提升的.好了,将平时看到用到总结的分享给大家. 代码优化的目 ...
- vsftpd安装配置 530 Permission denied.错误
yum install vsftpd service vsftpd start 530 Permission denied.错误 /etc/vsftpd/user_list 该文件里的用户账户在 ...
- spring squertz定时任务
spring squertz是一个强大的定时任务处理方式 1.需要的Jar quartz-1.8.5.jar commons-logging.jar spring-core-3.0.5.RELEASE ...
- Markdown简介以及常用语法
Markdown简介以及常用语法 最近发现用markdown记录东西很方便,感觉和emacs的org mode很类似,但是windows下使用emacs不是很方便.特此记录一下markdown常用的语 ...
- HashMap源码分析
最近一直特别忙,好不容易闲下来了.准备把HashMap的知识总结一下,很久以前看过HashMap源码.一直想把集合类的知识都总结一下,加深自己的基础.我觉的java的集合类特别重要,能够深刻理解和应用 ...
- python爬虫学习(7) —— 爬取你的AC代码
上一篇文章中,我们介绍了python爬虫利器--requests,并且拿HDU做了小测试. 这篇文章,我们来爬取一下自己AC的代码. 1 确定ac代码对应的页面 如下图所示,我们一般情况可以通过该顺序 ...
- python学习5
1.切片,python中一个比较重要的概念,其实和MATLAB中的数组的操作很相像. 比如对于 a =[1,2,3,4,...,100]如果想取前三个,即[1,2,3] 直接说a[0,3]即可,还可以 ...
- linux查看主板型号及内存硬件信息
公司服务器内存不够用了. 想看看买啥型号的. 购买内存条注意点: ddr3 or4 频率 块钱. 内存槽及内存条: dmidecode |grep -A16 "Memory Device ...
- [原]使用node-mapnik生成openstreetmap-carto风格的瓦片
上回说到如何在CentOS上部署node-mapnik,本想着接下来学习如何使用node-mapnik生成openstreetmap的瓦片图,没想到在接下来的近40天的时间里忙成了狗!好不容易等到元旦 ...