css.day04

1. box 盒子模型

css+ div p span

css+ xhtml

border padding margin

border:1px solid #f00;

padding:20px

padding:30px 5px;

margin: 0 auto;

margin:10px 30px 40px; 上 10 左右时 30 下是40

margin:10px 20px 30px 40px;

padding 无论如何肯定影响实体大小错误

做网页标准否？

稳定性：

宽和高 padding margin

浅蓝紫色黄色

css 清除

input hr 默认有边框

body,div,ul,li,input,hr,textarea{margin:0;padding:0;border:0;}

一般三大步骤：

1.清除浏览器

2. body页面字体字号颜色进行规定

3. 链接进行设置

外边距合并的问题

以前，发现这个问题，认为是浏览器的问题（bug），但是，又发现，所有浏览器都这样，我们就认为是外边距的一个特性。我们称之为外边距合并（外边距塌陷）。

这个外边距合并的问题，水平外边距是不会出现的。只有在垂直外边距才出现。

1. 两个盒子是并列关系的

那么外边距会以这两个盒子最大的那个外边距为准。

2. 两个盒子是父子级关系（重点）

原因是小盒子和大盒子的外边距合并到了一起，但是，此时，我们不需要它们合并。

解决方法就是：把小盒子和大盒子的外边距隔开就可以了。

1.一般情况下，给大盒子加边框（border）

代码如下：

<!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:300px; height:150px; background-color:#F00;border:1px solid #fff;}

  .son{width:100px; height:50px; background-color:#0F0; margin-top:50px; }

</style>

</head>

<body>

<div class="father">

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

</div>

</body>

</html>

2.给大盒子加代码： 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">

  .father{width:300px; height:150px; background-color:#F00; overflow:hidden;}

  .son{width:100px; height:50px; background-color:#0F0; margin-top:50px; }

</style>

</head>

<body>

<div class="father">

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

</div>

</body>

</html>

我们的css本身就很复杂，有些问题是莫名奇妙，所以，很多的方法，没有一中是都能用得到，也没有一种，永远都用不到的，我们只是在合适的地方用到合适的方法。

我们要做到，出了问题，为什么会出问题。如何去解决问题。

浮动（float）

浮动是页面布局中，非常非常重要的地方，使我们布局的核心。

页面布局之 标准流

什么是标准流：就是页面元素正常的显示方式，例如，块级元素，就是自己独占一行，例如行内元素，就是一行可以有好多个。

这种方式，在网页布局中，最稳定。（首推）

页面布局之 浮动流

浮动乃漂浮也。及其简单 float:left float: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">

.top,.bottom{width:300px; height:150px; background-color:#F00;}

.top{float:left;}

.bottom{background-color:#0F0;}

</style>

</head>

<body>

<div class="top">

</div>

<div class="bottom"></div>

</body>

</html>

如果给两个盒子都加浮动：

<!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">

.top,.bottom{width:300px; height:150px; background-color:#F00;}

.top{float:left;}

.bottom{background-color:#0F0; float:left;}

</style>

</head>

<body>

<div class="top">

</div>

<div class="bottom"></div>

</body>

</html>

因为float 只有左右两个属性所有，所有的浮动都是左右分的。

注意：大家用浮动布局是，切忌一句话：

浮动找浮动，不浮动找不浮动。

浮动：可以把块级元素转换为行内块（更加精确）

导航栏的效果

大盒子是 500*300

li小盒子 80*40

ctrl+shift+j 折叠代码

代码如下：

<!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">

*{margin:0; padding:0;}

body{font-size:12px; color:#3c3c3c; font-family:"微软雅黑"}

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

.box{width:500px; height:300px; border:1px solid #093; margin:50px auto;}

.box ul{list-style:none; margin:30px 10px;}

.box ul li{float:left; width:80px; height:40px; text-align:center; line-height:40px;}

</style>

</head>

<body>

<div class="box">

    <ul>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

                <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

        <li><a href="#">百度一下</a></li>

    </ul>

</div>

</body>

</html>

text-align 让盒子里面的文本水平对齐

盒子水平居中 margin:0 auto;

auto 自动充满

margin-left:auto 让左侧自动充满（好用）

网页布局版式

在布局一个页面前，首先我们应该要看透它的版式，这样可以帮助我们更好的去布局页面。

一列固定宽度且居中布局

<!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;}

.top{width:1180px; height:80px; background-color:#F00; margin:0 auto;}

.nav{width:1180px; height:35px; background-color:#0F0; margin:0 auto;}

.banner{width:100%; height:300px; background-color:#00F;}

.main{width:1180px; height:500px; background-color:#FF0; margin:0 auto;}

.footer{width:1180px; height:120px; background-color:#0FF; margin:0 auto;}

</style>

</head>

<body>

<div class="top"></div>

<div class="nav"></div>

<div class="banner"></div>

<div class="main"></div>

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

</body>

</html>

两列固定宽度左窄右宽型

<!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;}

#top,#nav,#banner,#main,#footer{width:1000px;  margin:1px auto;}

#top{height:80px; background-color:#F00;}

#nav{height:35px; background-color:#0f0;}

#banner{height:150px; background-color:#00F;}

.left{width:300px; height:500px; background-color:#099; float:left; }

.right{width:699px; height:500px; background-color:#396; float:right;}

</style>

</head>

<body>

<div id="top"></div>

<div id="nav"></div>

<div id="banner"></div>

<div id="main">

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

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

</div>

</body>

</html>

左中右型

html 注释：

转载请备注。

css.day04的更多相关文章

css.day04.eg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CSS Day04 css核心基础
1.在HTML中引入CSS的方法 (1)行内式行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用. 例如: <h1 style=“colo ...
2020年12月-第02阶段-前端基础-CSS Day04
1. 浮动(float) 记忆能够说出 CSS 的布局的三种机制理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮动应用能够利用浮动完成导航栏案例能够清 ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
【day04】css
一.CSS2.0[Cascading Style Sheets]层叠样式表 1.什么是CSS:修饰网页元素(标记)外观(比如给文字加颜色,大小,字体)的,W3C规定尽量用CSS样式替代XHTML属性 ...
day04 orm操作
day04 orm操作昨日内容回顾小白必会三板斧 request对象方法静态文件请求方式 python链接数据库 django链接数据库小白必会三板斧 HttpResponse :返回前端浏 ...
CSS的未来
仅供参考前言完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

随机推荐

Tornado 的教材
Tornado 的教材作者:杨昆链接:https://www.zhihu.com/question/19707966/answer/12731684来源:知乎著作权归作者所有,转载请联系作者获得授权 ...
显示Mac电脑下的隐藏文件
1. 在应用程序里打开终端, cd 你的文件夹名 ls -a 即可显示该文件夹下的所有隐藏文件 2. 如果你想打开整个系统的隐藏文件可以在终端下输入以下命令 defaults write com.ap ...
零零碎碎搞了一天最后发现是ruby版本问题
查来查去查不到问题,后来在stackoverflow看到: http://stackoverflow.com/questions/22352838/ruby-gem-install-json-fail ...
在 C++Builder 工程里使用 Visual C++ DLL（3个工具） good
译者序: 第一次读这篇文章是在 2001 年 10 月,帮我解决了一点小问题.本来不好意思翻译,因为英语水平实在太差.最近发现不少网友在问在 C++Builder 的工程里调用 Visual C++ ...
Android Wear开发 - 数据通讯 - 第四节 : 数据封装(解决不能序列化问题)
一. 前言背景一开始笔者在研究数据发送与接收的时候,看到Wear数据类DataMap除了可以put基本类型外,还有个fromBundle方法来构建一个DataMap对象.所以一口气的将原本功能上的 ...
JVM上的随机数与熵池策略
在apache-tomcat官方文档:如何让tomcat启动更快里面提到了一些启动时的优化项,其中一项是关于随机数生成时,采用的“熵源”(entropy source)的策略. 他提到tomcat7的 ...
Linxu安装Lamp环境
安装MySQL数据库 sudo apt-get install mysql-server mysql-client 下图为提示输入数据库密码,然后回车,之后还有提示,再重复输入一次,再回车最后安装完 ...
windows7+iis7+php的配置
最近在找工作,人被逼了,所以没事就学习php了.以下是开发环境的搭建: 环境搭建然后就是解析php脚本的两种配置方法: fastCgiModule与ISAPI方式两种配置方法本文为转载...
【POJ】3283 Card Hands
字典树. #include <iostream> #include <cstdio> #include <cstring> #include <string& ...
open和fopen的区别（转）
转载自:http://www.cnblogs.com/joeblackzqq/archive/2011/04/11/2013010.html open和fopen的区别: 1.缓冲文件系统缓冲文件系 ...

css.day04

css.day04的更多相关文章

随机推荐

热门专题