css.day05

1. 外边距合并不是bug 而是一个特性（以最大的那个边距为准）

两个盒子是并列关系

两个盒子父子级关系

1. border

2.overflow:hidden;

3. padding 盒子实体（特殊情况下也可以使用）

2. float (浮动) left right

标准流：块级自己占一行行内可以放多个没有高和宽

脱离标准流盒子叠放次序

清除浮动

浮动本来是一个非常好的属性，我们经常用它来进行网页排版布局，但是，浮动虽然脱离了标准流，还是会影响正常的标准流，这时候，我们需要，用到一个叫清除浮动的属性 clear .

clear: left right both 三个属性值

其实，我们一般情况下直接 clear:both;

清除浮动之额外标签法

w3c组织提倡在最后一个标签的后面，添加一个新的标签里面写上 clear:both 这个语法。我们称之为额外标签法。

注意：因为left 和right 这个盒子浮动，影响了 footer ，所以在right 这个盒子后面添加新标签。

优点：简单

缺点：额外增加了代码

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}

body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}

a{text-decoration:none; color:#3c3c3c;}

a:hover{color:#f00; text-decoration:underline;}

.main{width:800px;margin:0 auto;}

.left{width:300px; height:200px; background-color:#0FF; float:left;}

.right{width:499px; height:200px; background-color:#CCC; float:right;}

.footer{height:100px; width:800px; background-color:#000; margin:0 auto}

.clear{clear:both;}

</style>

</head>

<body>

<div class="main">

    <div class="left"></div>

    <div class="right"></div>

    <div class="clear"></div>

</div>

<div class="footer"></div>

</body>

</html>

清除浮动之 overflow:hidden

这种方法是最简单的，一定是给大盒子加上overflow：hidden 这句话，就可以清除浮动。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}

body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}

a{text-decoration:none; color:#3c3c3c;}

a:hover{color:#f00; text-decoration:underline;}

.main{width:800px;margin:0 auto; overflow:hidden;}

.left{width:300px; height:200px; background-color:#0FF; float:left;}

.right{width:499px; height:200px; background-color:#CCC; float:right;}

.footer{height:100px; width:800px; background-color:#000; margin:0 auto}

</style>

</head>

<body>

<div class="main">

    <div class="left"></div>

    <div class="right"></div>

</div>

<div class="footer"></div>

</body>

</html>

优点：最简单的一种

缺点：里面的内容有定位，就引起麻烦所以，里面子盒子如果需要定位，不太推荐使用。

清除浮动之伪类after

专门写一个类：（网络比较火的写法）

格式如下：

.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}

.clearfix{zoom:1;} /*照顾ie6.7*/

解释： visibility:hidden 隐藏

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}

body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}

a{text-decoration:none; color:#3c3c3c;}

a:hover{color:#f00; text-decoration:underline;}

.main{width:800px;margin:0 auto;}

.left{width:300px; height:200px; background-color:#0FF; float:left;}

.right{width:499px; height:200px; background-color:#CCC; float:right;}

.footer{height:100px; width:800px; background-color:#000; margin:0 auto}

.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}

.clearfix{zoom:1;} /*照顾ie6.7*/

</style>

</head>

<body>

<div class="main clearfix">

    <div class="left"></div>

    <div class="right"></div>

</div>

<div class="footer"></div>

</body>

</html>

缺点：写法稍微麻烦

优点：调用方便不会增加标签

将来可能用的比较多的伪类 after before

代码如下：

.clearfix:after,.clearfix:before{content:"";display:table;}

.clearfix:after{clear:both;}

.clearfix{zoom:1;}

这种方法要求：现在大家了解，如果以后看到这种写法，要知道是清除浮动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{margin:0; padding:0;}

body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}

a{text-decoration:none; color:#3c3c3c;}

a:hover{color:#f00; text-decoration:underline;}

.main{width:800px;margin:0 auto;}

.left{width:300px; height:200px; background-color:#0FF; float:left;}

.right{width:499px; height:200px; background-color:#CCC; float:right;}

.footer{height:100px; width:800px; background-color:#000; margin:0 auto}

.clearfix:after,.clearfix:before{content:"";display:table;}

.clearfix:after{clear:both;}

.clearfix{zoom:1;}

</style>

</head>

<body>

<div class="main clearfix">

    <div class="left"></div>

    <div class="right"></div>

</div>

<div class="footer"></div>

</body>

</html>

overflow:hidden 作用（溢出隐藏）

可以调整兼容性（清除浮动）

一个大盒子，里面放着两个小盒子，这是典型的标准流的写法，这个父盒子可以不用指定高度，因为，小盒子可以给大盒子撑开，但是，如果这两个小盒子浮动了，脱离了标准流，浮起来，这时候，两个小盒子就不再是标准流，那么，父盒子就检测不到里面的内容。这个父盒子就会变成一条线。我们可以用overflow:hidden 检测复合内部内容。

overflow：hidden 常用的第一种用法：检测内部高度。

溢出隐藏（overflow:hidden）可以切割多余的内容

overflow:visible; 超出的部分显示

overflow:hidden 超出的部分隐藏

overflow:scroll 有事没事显示滚动条（不管超出还是不超出）

overflow:auto 超出就有滚动条，不超出就没有滚动条

隐藏元素

我们在页面中，经常会把一些元素显示出来，或者隐藏起来。

display 显示元素

display :block inline inline-block none;

display：none 隐藏元素

visibility:hidden 隐藏元素

也可以隐藏元素。

两者的区别

占位

它们两个最本质的区别就是：

visibility:hidden 虽然是隐藏的，但是还是占有自己位置

而 display:none 隐藏的同时，不占位置。

定位(position)

我们网页布局方法：

1. 标准流（最稳定）

2. 浮动流（float 其次）

3. 定位流 ( 稳定性最后)

定位是完全脱离标准流的一种布局方式。

定位的分类：

1.绝对定位 absolute

position：absolute；

定位和方位名词一起使用：

left top right bottom

position:absolute; top:20px;

绝对定位是以浏览器左上角为原点（0.0）

绝对定位不占位置

2.相对定位 (relative)

position:relative

1.相对定位是占位置的。

2.相对定位是以自己左上角为原点

3.叠放次序：

z-index: 数值;

数值越大盒子越靠上需要注意：数值后面一定不能加单位.

.one{z-index:10;}

注意：

如果父盒子是绝对定位，子盒子也是绝对定位，那么，子盒子会以父盒子的左上角为原点。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

.father{width:200px; height:200px; position:absolute; top:20px; left:20px; background-color:#966;}

.son{width:100px; height:100px; background-color:#096; position:absolute; top:0; left:0;}

</style>

</head>

<body>

<div class="father">

    <div  class="son"></div>

</div>

</body>

</html>

如果父盒子是相对定位，子盒子也是绝对定位，那么，子盒子会以父盒子的左上角为原点。

平时我们定位网页布局：父级相对子级绝对（父相子绝）

更改鼠标样式：

cursor：pointer;

鼠标样式：

.ani .cur

html{cursor:url(horse.ani);}

注意：更换鼠标样式ie支持的好，火狐之类的不支持。

cursor：pointer; 所有的浏览器都支持鼠标变成小手

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p,dl,dd,dt{margin:0; padding:0;}

body{font-size:14px; color:#3c3c3c; font-family:Arial, Helvetica, sans-serif;}

a{text-decoration:none; color:#3c3c3c;}

a:hover{text-decoration:underline;}

ul{list-style:none;}

.view{width:998px; height:190px; margin:50px auto; border:1px solid #D2E1F1;border-top:1px solid #458FCE; position:relative;}

.view dt{height:30px; background-color:#F6F9FE;}

.view dt a{color:#458fce; font-size:14px;padding:7px 0 0 12px;display:block; width:70px;}

.view dd {padding:20px 43px 0;}

.view dd li{float:left; margin-right:28px; text-align:center;}

.view dd li p{padding-top:8px;}

.view dd li a{font-size:12px;}

.view dd li a:hover{color:#f00;}

.view .nomargin{margin-right:0;}

.left{width:11px; height:20px; background:url(icon_r1_c1.png) no-repeat; display:block; position:absolute; top:90px; left:18px;}

.left:hover{background:url(icon_r1_c5.png) no-repeat;}

.right{background:url(icon_r1_c3.png) no-repeat; width:11px; height:20px;  display:block; position:absolute; top:90px; right:18px;}

</style>

</head>

<body>

<dl class="view">

    <dt><h2><a href="#">视觉焦点</a></h2></dt>

    <dd>

        <a href="#" class="left"></a>

          <ul>

                  <li>

                        <img src="01.jpg" />

                        <p><a href="#">泰国北部发生地震</a></p>

                </li>

                  <li>

                        <img src="01.jpg" />

                        <p><a href="#">泰国北部发生地震</a></p>

</li>

                  <li>

                        <img src="01.jpg" />

                        <p><a href="#">泰国北部发生地震</a></p>

                </li>

                  <li>

                        <img src="01.jpg" />

                        <p><a href="#">泰国北部发生地震</a></p>

                </li>

                  <li class="nomargin">

                        <img src="01.jpg" />

                        <p><a href="#">泰国北部发生地震</a></p>

                </li>

          </ul>

        <a href="#" class="right"></a>

    </dd>

</dl>

</body>

</html>

转载请备注。

css.day05的更多相关文章

2020年12月-第02阶段-前端基础-CSS Day05
CSS Day05 1. 学成在线页面制作理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为 ...
HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性
1.基本CSS选择器 (1)标记选择器 <style> h1{ color:red; font-size:25px;} &l ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
【day05】css
一.盒模型(BoxModel) 1.width 宽度 2.height 高度说明: 块元素和有宽高属性的标记(img,input) 能设置宽度和高度,而行元素不能设置宽高 3 ...
day05 Servlet 开发和 ServletConfig 与 ServletContext 对象
day05 Servlet 开发和 ServletConfig 与 ServletContext 对象 1. Servlet 开发入门 - hello world 2. Servlet 的调用过程和生 ...
JavaWeb(HTML +css+js+Servlet....)
注意 1.不要把函数命名为add(),不然容易和自带的冲突报错 2.是createElement 不要把create中的e写掉了 3.记得是getElementsByTaxName和getElemen ...
超全面的JavaWeb笔记day05<xml&dtd&jaxp>
0.表单提交方式(*****) button提交超链接提交事件 1.xml简介和应用(了解) 2.xml文档声明和乱码解决(*****) 文档声明必须放在第一行第一列设置xml编码和保存编码一 ...
Day05 xml详解
day05总结今日内容 XML语法 XML约束之DTD XML解析器介绍 XML解析之JAXP( DOM.SAX ) DOM4J Schema 一.XML语法 XML概述 1 什么是XML ...
Day05 - Flex 实现可伸缩的图片墙中文指南
Day05 - Flex 实现可伸缩的图片墙中文指南作者:liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战.项目免费提供了 30 个视频教程.30 ...

随机推荐

实现一个简单的sniffer
#include<stdio.h> #include<pcap.h> #include<unistd.h> #include<stdlib.h> //# ...
Objective-C基础便利构造器单例模式1-17
Objective-C基础便利构造器单例模式1-17 便利构造器单例模式 1.在声明时指定setter或getter方法,则用点运算符方法调用时默认调用的就是自己指定的方法2.单例:唯一性,如: ...
iOS证书详解－－再转
一.成员介绍1. Certification(证书)证书是对电脑开发资格的认证,每个开发者帐号有一套,分为两种:1) Developer Certification(开发证书)安装在电脑上 ...
Artem and Array
Codeforces Round #253 (Div. 1) C:http://codeforces.com/problemset/problem/442/C 题意:给你一个序列,然后你每次可以删除一 ...
Rabbit hunt
poj2606:http://poj.org/problem?id=2606 给你n个点,求在一条直线上的点最多有几个.题解:直接暴力,但是要注意,横坐标相等的情况,这是不能求斜力,只能特殊处理. # ...
转一篇NGINX+UWSGI+PYTHON+DJANGO部署文档
高远弄的,,专业,明晓..感谢哈哈. http://blog.csdn.net/tmpbook/article/details/42873667
zz将 VSTO 插件部署给所有用户
原文:zz将 VSTO 插件部署给所有用户注:本文原作者 Misha Shneerson 是 VSTO 团队的工程师.原文可以在下列地址找到:http://blogs.msdn.com/mshnee ...
Qt入门（8）——事件和事件过滤器
在Qt里,一个事件是继承自QEvent的对象.事件通过调用QObject::event(),被发送到继承自 QObject 的对象.事件发送就是一个事件已经产生,由 QEvent正好去表达,且QObj ...
【动态规划】Vijos P1616 迎接仪式
题目链接: https://vijos.org/p/1616 题目大意: 长度为N的字符串,只含‘j’和‘z’,可以将任意两个字符调换K次,求能够拥有的最多的'jz'串. 题目思路: [动态规划] 首 ...
guid转int
如果你想生成一个数字序列,你将会获得一个19位长的序列. 下面的方法会把GUID转换为Int64的数字序列. private static long GenerateIntID() { ...

css.day05

css.day05的更多相关文章

随机推荐

热门专题