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 注释: <!-- 内容 -->
转载请备注。