css.day04

1. box   盒子模型

<p>   <span>   <hr/>   <div> 

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. 链接进行设置 

<label for=’search’>搜索一下</label>  <input type=”text” name=”search” id=’search’>

外边距合并的问题

以前，发现这个问题，认为是浏览器的问题（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 注释：  <!--    内容  -->    

 

转载请备注。 

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/brittany/p/4833784.html