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 ...
随机推荐
- iOS HTTP访问网络受限
HTTP访问网络受限,只需要在项目工程里的Info.plist添加 <key>NSAppTransportSecurity</key> <dict> <key ...
- Atitti.dw cc 2015 绿色版本安装总结
Atitti.dw cc 2015 绿色版本安装总结 1.1. 安装程序无法初始化.请下载adobe Support Advisor检测该问题.1 1.1.1. Adobe Application M ...
- Hbase入门教程--单节点伪分布式模式的安装与使用
Hbase入门简介 HBase是一个分布式的.面向列的开源数据库,该技术来源于 FayChang 所撰写的Google论文"Bigtable:一个结构化数据的分布式存储系统".就像 ...
- AD域撤销域用户管理员权限方案
一.简介 公司大部分主机加入域已有一段时间了,由于某软件没管理员权限不能执行,所以管理员权限一直没撤销,不能完全实现域的管理效果.但起码实现了域用户脱离不了域的控制:http://www.cnblog ...
- Vuforia Android 6 Camera Error
环境 引擎: Unity 5.3.6f1 SDK: Vuforia 6.0.112 测试系统:Android 4.2/4.3 6.0 Android 6出错 在Android 6下Vuforia打印的 ...
- EL表达式杂项
1.<%@ page isELIgnored="false" %> 是否忽略EL表达式,如果值为ture,那么 ${..}这样的会直接原样输出,不会进行EL表达式计算 ...
- Log4j配置详解(转)
一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...
- UOJ #221 【NOI2016】 循环之美
题目链接:循环之美 这道题感觉非常优美--能有一个这么优美的题面和较高的思维难度真的不容易-- 为了表示方便,让我先讲一下两个符号.\([a]\)表示如果\(a\)为真,那么返回\(1\),否则返回\ ...
- Qt 开启鼠标跟踪，自动激活mouseMoveEvent的问题
最近在Qt上实现一个功能,鼠标在图片上移动,触发mouseMoveEvent事件,进而生成一个小的半透明窗口,放大显示以鼠标为中心的一个区域的图像并随鼠标移动.但是,必须鼠标摁下,才触发mouseMo ...
- [LeetCode] Basic Calculator 基本计算器
Implement a basic calculator to evaluate a simple expression string. The expression string may conta ...