CSS布局与定位通过概念图对页面进行划分进而设置盒子模型页面上 区域 图片 导航 列表 段落 都可以是盒子页面中所有元素都可以看成一个盒子，占据一定的页面空间盒子模型组成content内容height高度width宽度padding内边距border边框margin外边距除content外其余都是css样式的属性以下几部分分方向一个盒子的实际宽度、高度：content+padding+border+margin例子<html><head><style type="text/css">#box{ width:100px; height:100px; border:1px solid; padding:20px; margin:10px; }</style></head><body> <div id="box"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div></body>overflow属性当内容溢出盒子框，overflow属性取值hidden：超出部分不可见scroll：显示滚动条auto：如果有超出部分，显示滚动条border属性用来设置盒子边框用hr标签会有很多限制，利用border属性可进行替代hr标签样式的操作border-width：px、thin、medium、thickborder-style：dashed（横线）、dotted（点）、solid（实线）、double（双实线）border-color：颜色border：width style color例子：用子属性:div{ border-width：2px； border-style：solid； border-color：red； }统一运用border:div{ border solid red; }水平分割线可多次使用引用使用class属性引用line即可.line{ height:1px; width:500px; border-top:1px solid #e5e5e5； }padding margin 属性对浏览器默认设置清零*{ margin:0; padding:0: }取值：px、%（外层盒子的宽度和高度）内边距外边距组成padding：5px；margin：5px；上右下左padding-top：10%；margin-top：10%；上padding-leftmargin-left左padding-rightmargin-right右padding-bottommargin-bottom下marginmargin：1px；以margin为例，padding，border三个属性都分为四个方向设置方式：margin：1px； （意味四个方向都是1px）margin：1px 2px 1px 3px； （按照上右下左顺时针）margin：1px 2px； （top与bottom为1px，left与right为2px）margin：1px 2px 3px （省略left，与right相等2px）注意：margin的合并：垂直方向合并（如两个盒子垂直方向外边距合并按照高度更高显示，水平方向不合并水平居中对于图片文字水平居中：text-align：center；div水平区域：margin：0 auto；（第一个上下的值 auto为左右值 会按照宽度自动解析）css定位机制概述概述：通过对盒子的位置定位分类：文档流 浮动定位 层定位文档流flow为默认情况，从上到下从左到右，有的元素单独一行浮动float对于上下排列需左右排列，对大盒子拆分若干列层定位layer同图层一样前后叠加一起如需设置position属性文档流定位元素分类：block、inline、inline-block元素类型转换：display属性相互转换：display：none 元素不会被显示display：block 显示为block元素display：inline 显示为inline元素display：inline-block 显示为inline-block元素blockblock元素特点独占一行元素的height、width、margin、padding都可设置常见的block元素<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<form>将元素显示为block元素例如a元素a{ display:block; }inline元素a转换为block元素从而使a元素具有块状元素特点inlineinline元素特点不单独占用一行width、height不可设置width就是它包含的文字或图片的宽度，不可改变常见的inline元素<span>、< a >（超链接）将元素显示为inline元素display:inline;inline元素之间有一个间距问题比如两个超链接元素在网页展视出来两个超链接之间有间隙两个inline元素水平排列默认的间隙解决方式：通常将inline转完block等其他方式显示inline-block就是同时具备inline元素、block元素的特点不单独占用一行元素的height、width、margin、padding都可以设置常见的inline-block元素<img>将元素显示为inline-block元素display:inline-block;案例水平导航栏鼠标悬停背景橙色包围实现：<!DOCTYPE html> <html lang="en"> <head> <meta chraset="UTF-8"> <title>mysite</title> <style> *{ padding:0 margin:0 } #nav{ width:300px; margin:100px auto; font-size:0; } a{ display:inline-block; width:80px; height:30px; font-size:14px; text-align:center; line-height:30px; text-decoration:none; border-bottom:1px solid #ccc } a:hover{ color:white; background-color:#ccc; border:1px solid; border-left-color:orange; border-top-color:orange; border-right-color:orange; } </style></head> <body> <div id="nav"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </div> </body></html>浮动定位float属性：left、rightclear属性：left、right、bothfloat属性right：右浮动left：左浮动none：不浮动float用处特点图文混排时，希望图片位于文字左右侧时需要浮动定位设置常用，多列布局时盒子左右浮动时需设置水平排列浮动后原位置被占用宽度不够时浮动clear属性both —— 清除左右两边的浮动right —— 清除右侧方向left —— 清除左侧浮动none —— 默认值，只在需要移除已指定的清除值时用到单方向清除浮动的用法设置clear：right 并不是指把浮动元素去掉，而是右侧不会有浮动元素，所以另起一行成为右边的样式双侧清除浮动的用法将footer单独占据一行显示为如图所示设置clear：both 是指左右两侧没有浮动元素 从而达到单独一行的效果整体案例<!DOCTYPE html> <html lang="en"> <head> <meta chraset="UTF-8"> <title>上 中 下</title> <link rel="stylesheet" href="css/style.css"/></head> <body> <div id="container"> <div id="header"> </div> <div id="nav"> </div> <div id="main"> <div id="asid1" class="aside"> </div> <div id="content"> </div> <div id="aside2" class="aside"> </div> </div> <div id="footer"> </div> </div> </body></html>css部分*{ margin:0; padding:0; }body{ font-family:"微软雅黑"; font-size:14px; }#container{ margin:0 auto; width:900px; }#header{ height:100px; background:#6cf; margin-bottom:5px; }#nav{ height:30px; background:#09c; margin-bottom:5px; }#main{ height:500px; margin-bottom:5px; }.aside{ float:left; width:100px; height:500px; background:#6cf; }#aside1{ }#aside2{ margin-left:5px }#content{ float:left; margin-left:5px; width:690px; height:500px; background:#cff; }#footer{ height:60px; background:#6cf } 层定位如同图像软件中的图层一样可以对每个layer能够精确定位操作希望网页的元素可以层叠在另外一个元素上 运用层定位相对于哪一层来定位运用position属性 fixed relative absolute位置的设定left属性right属性top属性bottom属性前后叠加顺序z-index属性（值大的在上面）position属性（相对于谁定位）static：默认值没有定位，元素出现在正常的流中top，bottom，left，right，z-index 无效fixed：固定定位相对于浏览器窗口进行定位top，bottom，left，right，z-index 有效relative：相对定位相对于其直接父元素进行定位top，bottom，left，right，z-index 有效absolute：绝对定位相对于static定位以外的第一个父元素进行定位top，bottom，left，right，z-index 有效固定定位position：fix不会随浏览器窗口的滚动条滚动而变化总在视线里的元素相对定位position：relative定位为relative的元素脱离正常的文档流中，但其在文档流的原位置依然存在relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式绝对定位position：absolute定位为absolute的层脱离正常文本流，但与relative的区别：其在正常流中的原位置不再存在对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层对于absolute定位的层，如果其父层都为定义absolute或relative，则其将相对body进行定位relative+absolute文字跟着图片移动 css部分 div{ border:1px solid red; color:#fff } #box1{ width:170px; height:190px; position:relative; } #box2{ width:99%; positione:absolute; bottom:0; } html部分 <div id="box1"> <img src="coffee.jpg"> <div id="box2">一起来享受咖啡带来的温暖把 </div>
