为什么要使用这种布局?
传统表格的布局缺陷布局固定不够灵活。
什么是Div?
它是一个html标签,一个块级元素(单独显示一行,即如果后面还有元素,将会在下一行显示)。主要用途是结合CSS实现页面的布局。
什么是Span?
它是一个html标签,一个内联元素(显示一行,即如果后面还有元素,则显示在同一行上)。主要用途是结合CSS对括起来的内容进行样式的修饰。
CSS的作用是什么?
HTML构成了整个网站的骨架,CSS则是对其中的内容进行修饰和美化。
CSS的语法规范:
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
注:选择器的作用是快速查找需要设置样式的元素
三种基本选择器模式:
1.元素选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素选择器</title> <style> div{ font-size: 30px; color: red; } </style> </head> <body> <div> 选中1 </div> <div> 选中2 </div> <div> 选中3 </div> </body> </html>
2.类选择器(相比第一个它可以实现同类标签的不同选择)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> .div2{ font-size: 30; color: blue; } </style> </head> <body> <div> 选中1 </div> <div class="div2"> 选中2 </div> <div> 选中3 </div> </body> </html>3. id选择器(实现单个的选中)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id选择器</title> <style> #div3{ font-size: 30px; color: yellow; } </style> </head> <body> <div> 选中1 </div> <div class="div2"> 选中2 </div> <div id="div3"> 选中3 </div> </body> </html>
两种其他选择器:
1.层级选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <style> div p{ font-size: 30px; color: green; } </style> </head> <body> <div> <p> 选中1 </p> </div> </body> </html>2. 属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> input[type="text"]{ background-color: gold; } </style> </head> <body> 用户名:<input type="text" name="username" /><br /> 密码:<input type="password" name="password" /> </body> </html>
三种CSS引入方式
作用:CSS样式的代码所写的位置
1.内部引入
即是将<
style
>样式部分写在<head>里,默认style中type="text/css"
2.行内引入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素选择器</title> <style type="text/css"> div{ font-size: 30px; color: red; } </style> </head> <body> <div style="font-size: 20px;color: blueviolet;"> 这是行内引入 </div> </body> </html>注:style是任何标签都具有的属性。且style具有就近原则,选择最近的样式。
3. 外部引入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素选择器</title> <!--当使用外部引入是,需使用link标签,stylesheet代表层叠样式表,href代表外部引入的路径--> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div> 选中1 </div> <div> 选中2 </div> </body> </html>
CSS浮动
目的:将多个<div>标签在一行显示
规则:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以一旦前面的框发生变化,后面的框可能也会发生相应的变化。考虑到浮动框不在文档的普通流(即不浮动的框)中,所以文档的普通流中的块框将视浮动框为不存在。
设置:float属性(取值可以是left,right,none)
注意:一旦最后一个浮动框在最后一个位置放不下时,就会跳到下一行;如果前面的浮动框过高,后面放不下的浮动框将会被卡在较高的浮动框处。
如果想让前面的浮动对后面没有影响,该怎样设置清除浮动?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS浮动</title> <style> #one{ border: 1px solid red; width:300px; height: 150px; float:left; } #two{ border: 1px solid black; width:300px; height: 150px; } #three{ border: 1px solid blue; width:300px; height: 150px; } /*清除浮动*/ #clear{ clear:both; } </style> </head> <body> <div id="one"> </div> <div id="clear"> </div> <div id="two"> </div> <div id="three"> </div> </body> </html>CSS的盒子模型
注:当整个需要显示的内容居中,可设置属性值为auto;当内容需要居中时,可通过text-align:center进行设置;如果只设置一个像素,表示各边都是相同的像素;如果设置四个像素,以此表示的是上,右,下,左各边的边距;当然也可以通过padding-top,padding-right,padding-bottom,padding-left进行分别设置。可通过浏览器中F12进行调试。