页面布局
1 页面组成
2 布局相关的标签
<div></div>定义文档中的分区或节<span></span>这是一个行内元素，没有任何意义<header></header>HTML5新增 定义 section 或 page 的页眉<footer></footer>HTML5新增 定义 section 或 page 的页脚<main></main>HTML5新增 标签规定文档的主要内容。<main>元素中的内容对于文档来讲应当是惟一的。它不该包含在 文档中重复出现的内容，好比侧栏、导航栏、版权信息、站点标志或搜索表单。IE都不识别<nav></nav>HTML5新增 表示连接导航部分 若是文档中有“先后”按钮，则应该把它放到元素中<section></section>HTML5新增 定义文档中的节 一般不推荐那些没有标题的内容使用section<article></article>HTML5新增 定义文章 论坛帖子 报纸文章 博客条目 用户评论<aside></aside>HTML5新增 相关内容，相关辅助信息，如侧边栏
3 盒子模型
3.1 什么是盒子模型
全部HTML元素能够看做盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。css
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。html
盒模型容许咱们在其它元素和周围元素边框之间的空间放置元素。html5
-
Margin(外边距) 清除边框外的区域，外边距是透明的。ios
-
Border(边框) 围绕在内边距和内容外的边框。web
-
Padding(内边距) 清除内容周围的区域，内边距是透明的。chrome
-
Content(内容) 盒子的内容，显示文本和图像。api
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> #box { width: 300px; height: 300px; padding: 20px; /*div中的内容距离边框的距离*/ border: 5px solid orange; /*设置边框的宽度、虚实线、颜色*/ /*外边距*/ margin: 20px; /*清除边框外的区域，外边距是透明的*/ background: pink; /*将边框内的背景颜色为粉红色*/ } </style> </head> <body> <h1>盒子模型</h1> <hr> <div id="box"> Lorem ipsum dolor sit amet. </div> </body> </html>
3.2 块级元素和内联元素(行内元素)
块级元素
- 老是在新行上开始，占据一整行；
- 高度，行高以及外边距和内边距均可控制；
- 宽度缺省是它的容器的100%，除非设定一个宽度
- 它能够容纳内联元素和其余块元素。
内联元素
- 和其余元素都在一行上；
- 高，行高及外边距和内边距部分可改变；
- 宽度只与内容有关；
- 行内元素只能容纳文本或者其余行内元素。
- 外边界只能对左右起做用，内边距都起做用
块级元素和内联元素的转换
display: block | inline | inline-block
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块状元素和内联元素</title> <!--搞明白什么是块状元素什么是内联元素，独占一行的就是块状元素，不然就是内联元素--> <style> h1 {width: 300px;} body { width: 200px; } strong { width: 200px; height: 100px; padding: 20px; border: 1px solid red; } div { border: 1px solid red; padding: 50px; } </style> </head> <!--强调只要独占一行就是块状元素--> <body> <h1>块状元素和内联元素</h1> <!--独占一行也是块状元素，块状元素设置宽和高是有效的--> 同志你好 <hr> <div> <!--独占一行--> Lorem ipsum dolor sit amet. </div> <a href="#">同志</a> <!--没有独占一行，超连接是内联元素--> 你好 <hr> <strong>我很状</strong> <!--独占一行--> </body> </html>
3.2 盒子模型之间的关系
document树
父元素 子元素 后代元素 祖先元素 兄弟元素浏览器
标准文档流
-
行内元素不占据单独的空间，依附于块级元素，行内元素没有本身的区域。它一样是DOM树中的一个节点，在这一点上行内元素和块级元素是没有区别的。安全
-
块级元素老是以块的形式表现出来，而且跟同级的兄弟块依次竖直排列，左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。app
盒子在标准流中的定位原则
- 行内元素之间的水平margin
- 块级元素之间的竖直margin (margin的塌陷)
- 嵌套盒子之间的margin, (子元素父元素margin合并)
- 将margin设置为负值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型关系</title> <!--经过对元素设置宽和高看所这只的宽和高是否有效来判断是块状元素仍是内联元素，设置宽和高有效的通常是块状元素，固然块状元素和内联元素能够经过某种机制进行相互转化--> <style> /*对块状元素进行设置宽高有效，默认宽度是父元素的宽，高度是自动（被内容撑开）*/ /*给父及元素设置外边框和内边距*/ #box01 { border:1px solid red; padding: 10px; } /*给父元素内的全部子元素设置边框和背景颜色，子元素嵌套在父元素内，固然咱们还能够针对父元素内的某一个子元素设置css样式*/ .item { width: 100px; height: 100px; background: pink; border: 1px dashed orange; } /*给父元素中的第一个子元素设置上、左、下三个外边距，咱们能够经过控制元素框的四个边的外边距来控制该框在大盒子中的位置*/ .item01 { margin-top: 10px; margin-left: 10px; margin-bottom: 30px; } /*给父元素内的第二个子元素设置上外边距，第一个子元素和第二个子元素是亲兄弟，并且上下相邻，可是第一个子元素的下外边距和第二个子元素的上外边距并非一种叠加的效果，而是取其中较大的外边距为二者的距离*/ .item02 { margin-top:40px; } /*----------------------------------------------------------------------------------------------------------------------------------*/ /*大部份内联元素设置宽高无效，默认宽度是自动(被内容撑开)，高度也是自动，设置内边距有效可是影响其余元素，CSS的文本属性 会对内联元素生效*/ /*给父内联元素总体设置边框和背景颜色*/ #box02 span { border:1px solid pink; background: #ccc; } /*给父内联元素加上边框，会覆盖前面的，可是不会覆盖背景颜色，由于这个也没有设置背景颜色，不存在覆盖这么一说*/ #box02 { border: 1px solid red; } /*给内蓝元素设置外边距，发现是设置不了的，可是左、右外边距是能够设置的*/ .span01 { margin-top: 20px; margin-left: 20px; margin-right:20px; } .span02 { margin-left: 10px; } </style> </head> <body> <h1>盒子模型关系</h1> <hr> <div id="box01"> <div class="item item01">1</div> <div class="item item02">2</div> <div class="item">3</div> <div class="item">4</div> </div> <hr> <div id="box02"> <!--内联元素--> <!--12和34之间有空格是因为换行引发的--> <span class="span01">1</span><span class="span02">2</span><span>3</span><span>4</span> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>塌陷问题</title> <style> /*只有块状元素的垂直方向才存在塌陷问题，内联元素是不存在塌陷问题的，由于内联元素是水平方向的*/ #box { width:200px; height:200px; background: #ccc; /*解决塌陷的两种方式：一是给父元素设置边框，（给子元素设置边框任然会塌陷），二是设置overflow:hidden;*/ /*border: 1px solid red;*/ overflow: hidden; } #inner { margin-left:50px; margin-top: 50px; width: 100px; height: 100px; background: orange; } </style> </head> <body> <h1>盒子模型关系</h1> <hr> <!--父元素和其内的子元素塌陷问题--> <div id="box"> <div id="inner"></div> </div> </body> </html>
3.3 盒子模型相关CSS属性
布局属性
-
display
| 值 | 描述 | | ------------ | ---------------------------------------------------- | | none | 此元素不会被显示。 | | block | 此元素将显示为块级元素，此元素先后会带有换行符。 | | inline | 默认。此元素会被显示为内联元素，元素先后没有换行符。 | | inline-block | 行内块元素。（CSS2.1 新增的值） |
-
float
| 值 | 描述 | | ------- | ---------------------------------------------------- | | left | 元素向左浮动。 | | right | 元素向右浮动。 | | none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 | | inherit | 规定应该从父元素继承 float 属性的值。 |
-
clear
| 值 | 描述 | | ------- | ------------------------------------- | | left | 在左侧不容许浮动元素。 | | right | 在右侧不容许浮动元素。 | | both | 在左右两侧均不容许浮动元素。 | | none | 默认值。容许浮动元素出如今两侧。 | | inherit | 规定应该从父元素继承 clear 属性的值。 |
-
visibility
| 值 | 描述 | | -------- | ------------------------------------------------------------ | | visible | 默认值。元素是可见的。 | | hidden | 元素是不可见的。 | | collapse | 当在表格元素中使用时，此值可删除一行或一列，可是它不会影响表格的布局。被行或列占据的空间会留给其余内容使用。若是此值被用在其余的元素上，会呈现为 "hidden"。 | | inherit | 规定应该从父元素继承 visibility 属性的值。 |
-
overflow
| 值 | 描述 | | ------- | -------------------------------------------------------- | | visible | 默认值。内容不会被修剪，会呈如今元素框以外。 | | hidden | 内容会被修剪，而且其他内容是不可见的。 | | scroll | 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。 | | auto | 若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。 | | inherit | 规定应该从父元素继承 overflow 属性的值。 |
-
overflow-x
-
overflow-y
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> div { display: inline-block; /*将div设置为行内块元素*/ /*max-width: 300px; 对块状有用*/ min-width: 300px; /*对inline-block 有用-------不管内容多小，框的宽度最小不会小于300px,当内容大于300px时，框的宽度会随内容的变长而被撑开*/ border: 1px solid red; } </style> </head> <body> <div> Lorem ipsum dolor sit amet. </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display</title> <style> /*设置选择器box内的每个子元素的框的宽和高以及背景颜色*/ .item { width:100px; height:100px; background:#ccc; border:1px solid pink; /*经过display:inline;------把块->内联*/ display: inline; } /*将box02内的全部选择器为a的元素设置边框以及背景颜色,可是经过html内的元素直到其实内联元素并不能设置宽高，因此咱们经过display:block;将其转换成块状元素，这样就能够设置框的宽高，而且能够点击跳转到指定的超连接*/ #box02 a{ width:100px; height:100px; background:#f5f5f5; border:1px solid red; /*经过display:block;------把内联 块*/ display: block; } /*将父元素即一个内联元素设置为一个块元素，而后设置宽、内边距、和框*/ .product-box { display: block; padding: 10px; width: 150px; border:1px solid #ccc; } /*设置图片的宽和父元素的宽保持一致，高通常不设置*/ .product-box img{ width:150px; } /*将列表变为*/ .list { list-style: none; text-align: center; /*将文本内容进行居中*/ font-size:0px; /*这样设置方框之间的间距就变为零了*/ } /**/ .list li { width: 100px; height: 100px; border:1px solid pink; background: #ccc; padding:10px; /*margin:20px;*/ /*设置为 inline-block*/ display:inline-block; font-size:16px; } </style> </head> <body> <div id="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <hr> <div id="box02"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div> <a href="1.html" class="product-box"> <div class="product"> <img src="../../dist/images_one/10.jpg" alt=""> <!--内联--> <h3>商品</h3> <p> Lorem ipsum dolor sit amet, </p> </div> </a> <hr> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <img src="../../dist/images_one/10.jpg" alt=""> <img src="../../dist/images_one/10.jpg" alt="" style="display: none"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相关属性</title> <style> #box { width:100px; height:100px; background: red; visibility: hidden; /*此元素的内容以及设置的css样式会被隐藏，虽然被隐藏了可是占据的空间(位置)依然存在*/ display: none; /*此元素以及设置的css样式将不会显示*/ } .box { width: 200px; height: 200px; border: 2px solid red; /*控制子元素的显示*/ /*overflow: hidden; /*隐藏溢出的部分*/ /*overflow: scroll; 出现滚动条，会出现右和下两个滚动条*/ /*overflow: auto; 出现滚动条*/ overflow-y:hidden; } .box ul { width:500px; } </style> </head> <body> <h1>相关属性</h1> <hr> <div id="box"> asdfasdfsadfasdf </div> <p>Lorem ipsum dolor sit amet.</p> <hr> <div class="box"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus modi repellat, laudantium asperiores dolor aliquid quae vitae quaerat delectus debitis magni nihil dolore voluptates facilis labore aut iure sit sint!</li> </ul> </div> </body> </html>
尺寸
- width / max-width / min-width
- height / max-height / min-height
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> div { display: inline-block; /*将div设置为行内块元素*/ /*max-width: 300px; 对块状有用*/ min-width: 300px; /*对inline-block 有用-------不管内容多小，框的宽度最小不会小于300px,当内容大于300px时，框的宽度会随内容的变长而被撑开*/ border: 1px solid red; } </style> </head> <body> <div> Lorem ipsum dolor sit amet. </div> </body> </html>
内补白
- padding / padding-left / padding-right / padding-top / padding-bottom
外边距
- margin
- margin-left
- margin-right
- margin-top
- margin-bottom
4 浮动
4.1 什么是浮动
- CSS的Float(浮动)，元素能够围绕其余元素向左或向右被推进
- 设置浮动，脱离普通文档流
- 浮动元素都会变为块级元素
- 若是不设置宽度，会尽量的窄
- 浮动元素以后的元素将围绕它 浮动元素以前的元素将不会受到影响。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { border: 1px solid red; /*将元素设置为浮动，以前没有设置框的宽度，那么宽度就是auto 的，即被内容撑开，可是若是没有设置为浮动元素，那么宽就是父元素的宽*/ float: left; } </style> </head> <body> <h1>浮动的特色</h1> <hr> <div class="box"> Lorem ipsum dolor </div> </body> </html>
4.2 设置浮动
.item { float:left } .item { float:right } /*float 属性的默认值是 none 表示没有浮动*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同志浮动</title> <style> /*给全部的box类选择器添加上内边距、虚线边框和下外边距*/ .box { padding: 20px; width: 1000px; border: 5px dashed red; margin-bottom: 10px; /*下外边距设置盒子之间的距离*/ } /*将所欲的item类选择器设置边框为实线、红线，背景颜色设置为灰色*/ .item { /*width:100px;*/ height:100px; background:#ccc; /*后面设置背景颜色会覆盖掉其背景颜色*/ border:2px solid red; } /*将全部的item02类选择器设置官渡和背景颜色，也就是每个虚框内的第一个框的背景颜色*/ .item02 { /*设置浮动*/ /*float:left;*/ width:50px; /*若是设置了浮动，没有设置该宽度，那么浮动元素的宽就是默认被内容撑开的，若是没有设置浮动，也没有设置该宽，则默认的宽是父元素的宽去掉内边距*/ background:#ccc; /*灰色*/ } /*将全部的item03类选择器设置官渡和背景颜色，也就是每个虚框内的第二个框的背景颜色*/ .item03 { width:80px; background:#369; /*蓝色*/ } /*将全部的item04类选择器设置官渡和背景颜色，也就是每个虚框内的第三个框的背景颜色*/ .item04 { width:100px; background:#f90; /*屎黄色*/ } /*-----------------------------------------------------------------------------------------------------*/ /* 一、元素向左或向有浮动不会调出父类的宽 二、元素浮动会调出文档流（对后面的元素产生影响） 三、元素一旦浮动会转换成块元素 四、浮动的元素并不会独占一行(可是并不会独占一行)，由于脱离文档流 五、浮动的元素宽度是默认的auto，默认是被内容撑开 六、多个元素浮动，会排成一排，宽度超过父元素的宽度会自动换行 七、浮动框不占据空间 */ /*第一个浮动*/ .box02 .item02 { float:left; } /*第二个浮动*/ .box03 .item03 { float: left; } /*第三个元素浮动*/ .box04 .item04 { float: left; } /*第三个元素 向右浮动*/ /*向右浮动碰到包含框就是停下，可是已经脱离文档流，也就不受包含框的控制了*/ .box05 .item04 { float: right; } /*第二个元素向右浮动*/ /*第二个向右浮动，碰到右边包含框停下，浮动后不占据空间，那么此时框3就会向上占据以前浮动框的位置，此时包含框的高度就是被没有浮动的1和3框撑开的*/ .box06 .item03 { float: right; } /*总体向左浮动*/ /*浮动元素不占据空间*/ /* 若是把全部三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框 包含框没有设置高度，会被没有浮动的子元素的框撑开，若是子元素的框都浮动，那么此时的包含框的高就是内边距的高 */ .box07 .item { float: left; } .box07 .item02 { height: 150px; } </style> </head> <body> <h1>浮动</h1> <hr> <div class="box box01"> <div class="item item02">1</div> <div class="item item03">2</div> <div class="item item04">3</div> </div> <h2>第一元素浮动</h2> <div class="box box02"> <div class="item item02">1</div> <div class="item item03">2</div> <div class="item item04">3</div> </div> <h2>第二元素浮动</h2> <div class="box box03"> <div class="item item02">1</div> <div class="item item03">2</div> <div class="item item04">3</div> </div> <h2>第三元素浮动</h2> <div class="box box04"> <div class="item item02">1</div> <div class="item item03">2</div> <div class="item item04">3</div> </div> <div style="clear:both"></div> <h2>第三元素向右浮动</h2> <div class="box box05"> <div class="item item02">1</div> <div class="item item03">2</div> <div class="item item04">3</div> </div> <div style="clear:both"></div> <h2>第二元素向右浮动</h2> <div class="box box06"> <div class="item item02">1</div> <div class="item item03">2</div> <div class="item item04">3</div> </div> <h2>所有向左浮动</h2> <div class="box box07"> <div class="item item02">1</div> <div class="item item03">2</div> <div class="item item04">3</div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首字符环绕</title> <style> /*设置字段的内容框的宽、内边距和颜色*/ p { width: 800px; padding: 10px; border: 1px solid #ccc; } /*将强调的首字母设置为浮动类型，浮动类型的元素就变成快元素，因此咱们为浮动的快元素设置宽，以及将强调的字体大小设置为默认字体大小的三倍*/ p strong { font-size:3em; /*将首字母的字体大小设置为默认字体大小的三倍*/ width: 40px; /*为了让内容不紧挨着浮动元素，咱们给浮动元素设置了宽，这样看起来就会更好看一点，首字母浮动后面的文本内容没有钻到浮动元素的下面，这是浏览器设置的，这样咱们就能看到完整的文本内容了*/ /*浮动*/ float: left; } </style> </head> <!-------------------------------------------------------------------------------------------------------> <body> <h1>同志环绕</h1> <hr> <p> <strong>L</strong>orem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid rerum temporibus, harum quia consequatur suscipit at facilis minima eveniet! Consectetur suscipit veniam doloremque, eligendi, porro soluta cupiditate voluptates eos? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laborum ipsum adipisci recusandae dicta dignissimos repellat rerum similique dolores quod molestiae voluptatum sed, animi sequi, mollitia asperiores voluptates, quasi quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius vel nam assumenda, rerum ullam officiis molestiae veniam, quos tempora necessitatibus illum minima reprehenderit explicabo dignissimos! Quas consequuntur, doloribus qui, sequi eum tenetur quia. Laborum quisquam, sunt iusto ipsa provident quos amet commodi officiis consequatur eveniet? Sunt ipsum molestias aperiam esse saepe, dolorum corporis nostrum tempora rerum laboriosam mollitia culpa doloribus fuga temporibus assumenda natus? Incidunt a, numquam quisquam aspernatur. Placeat, nihil, excepturi! Consequatur illum accusamus eveniet praesentium dolores doloribus, suscipit assumenda veniam, laudantium aspernatur quas. Nemo quo debitis, sint cupiditate natus, id, facere, soluta a tenetur dolores magnam recusandae! Itaque! </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字环绕图片</title> <style> /*给图片和文本内容总体设置一个框和内边距，而后在进行文字环绕图片的操做，咱们没有设置高，包含框的高会被内容撑开*/ article { width: 600px; padding: 10px; border: 2px solid #ccc; } /*将图片设置为浮动的，此时就变为了块状元素，为了避免让图片显示的太大，咱们设置了图片的宽度*/ article img { width:200px; /*设置显示图片的合适大小*/ float: left; margin-right:10px; /*设置块状元素的右外边框，使得文字环绕图片不是那么的紧凑，这样看起来会更好看*/ } </style> </head> <body> <h1>同志新闻</h1> <hr> <article> <img src="../../dist/images_one/10.jpg" alt=""> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta sit eos magni alias, nesciunt veniam at reiciendis eius. Labore inventore, sunt nulla ullam! Voluptate iste, libero unde tempora corporis autem voluptatum similique repellat perspiciatis ducimus, vero natus aperiam aliquam, ut reiciendis nesciunt. Quod cum, enim. Voluptatum quae eum repellendus quo voluptatem dolorem earum ut modi inventore sint reiciendis culpa recusandae ea neque harum nesciunt alias, totam, omnis nemo! Tempore, sunt expedita nemo minus nihil recusandae temporibus maiores quia numquam dolores voluptatibus eaque voluptatem debitis eos, nisi, quod quas. Corporis laudantium dolore, ipsam hic commodi, ullam illum necessitatibus nesciunt repudiandae! </p> </article> </body> </html>
4.3 清除浮动
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
所以，建立浮动框可使文本围绕图像：
要想阻止行框围绕浮动框，须要对该框应用 clear 属性。clear 属性的值能够是 left、right、both 或 none，它表示框的哪些边不该该挨着浮动框。
clear: both clear: left clear: right
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动影响</title> <!-- 选择器的做用就是选择要修饰的名字 --> <style> /* ### 1.2 浮动的影响 * 对后面元素影响。 后面元素会总体向前 * 对父元素有影响 （父元素的高不能被撑开） ### 1.3 消除浮动影响 * 消除元素对后面元素的影响， 在后面的元素设置 `clear:both/left/right` * 消除子元素浮动对父元素的影响 。 给元素浮动 或者 设置 `overflow` */ header { /*居中 左右是auto*/ margin: 0 auto; /*上下设置为多少无所谓，将左右外边距设置为自动，这样就能够是块元素居中*/ width: 800px; /*设置表头内容的宽度*/ /*height: 100px; 设置页头的框的高度，通常不进行让其成为一个固定值，而是随文本内容而被撑开*/ color: #000; /*设置表头中文本字体的颜色为黑色*/ text-align: center; /*将页头内的文本内容相对每个框进行居中*/ border: 2px solid red; /*设置边框，表头的总宽度是内容加上边框的宽度，能够经过审查元素进行查看*/ /*消除子元素浮动 对老子的影响*/ /* 1.3 消除浮动影响的两种方法： 消除元素对后面元素的影响， 在后面的元素设置 `clear:both/left/right`，通常值设置为both便可 消除子元素浮动对父元素的影响 。 给元素浮动或者设置 `overflow`-----溢出的意思 */ /*float: left;*/ /*将元素设置为向左浮动*/ overflow: auto; /*消除子元素浮动对父元素的影响*/ } /*对页头的logo进行设置，将期设置向左浮动，并为其设置宽度和背景颜色，因为页头没有设置高，会被内容撑开*/ /*line-height是行高的意思，height则是定义元素自身的高度*/ .logo { float: left; /*将logo设置为向左浮动*/ width: 200px; /*行高100px， 对.logo里面的文字*/ line-height: 100px; /*设置的是行高*/ background: #f90; height: 150px; /*设置元素的高*/ } .logo h1 { /*h1的行高，继承了父元素的行高 对h1里面的文字进行设置*/ margin: 0; } .banner { float: right; width: 580px; line-height: 100px; background: #369; /*将背景颜色设置为蓝色*/ } /*导航*/ nav { /*清楚前面的浮动对老子的影响*/ /* clear: both; clear: left; clear: right; */ clear: right; clear: left; clear: both; margin:10px auto; width:800px; text-align: center; background:pink; padding:10px 0px; } nav ul { list-style:none; margin:0; padding:0; } nav li { display: inline-block; } </style> </head> <!-- 设置网页的思想，先设置html元素，该网页须要分红两行，分别是页头和导航，而后在根据哪些元素须要设置为浮动元素，以及须要什么样的样式在style中经过选择器对指定的文本内容进行设置 --> <body> <!--页头--> <header> <!-- 将页头又分为两部分，分为左边的logo和右边的banner --> <div class="logo"> <h1>同志交友</h1> <!--能够经过设置换行来看行高和高的区别--> </div> <div class="banner"> Lorem ipsum dolor sit amet, </div> </header> <!--导航--> <nav> <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> </ul> </nav> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style> /*设置父元素的宽，*/ .list { border: 2px solid red; width: 600px; list-style: none; padding: 0; } .list li { width:100px; height: 100px; background:#ccc; border:1px solid green; float: left; /*将全部的li属性设置为向左浮动，你们都变为横向的，可是浮动的元素超过包含元素的框就会换行*/ } </style> </head> <body> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
4.4 浮动实验
实现如下实现
-
设置第一浮动的div
-
设置第2个浮动div
-
设置第3个浮动div
-
改变第三个浮动方向
-
改变第二个浮动方向
-
所有向左浮动,增长第一个的高度
-
使用clear属性清楚浮动的影响
-
扩展盒子的高度 (元素高度和浮动的元素)
-
段落首字母浮动
-
图片浮动
-
简单浮动布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局实例</title> <style> body { margin: 0px; } /*容器*/ .container { margin: 0 auto; /*让整个元素水平居中，通常网页的内筒也都是水平居中的*/ width: 1000px; } /*页头*/ .page-header { overflow: hidden;/*消除子元素对父元素的影响*/ background: #999; /*h1自带margin,背景的高度被内容撑开*/ color: #fff; /*font-size: 2em;*/ } /*页面主体*/ .page-main { } /*页面侧边栏*/ .aside { float: left; width:300px; height: 400px; border-right: 1px solid #999; } /*页面内容-------须要设置左右浮动*/ .content { float: right; width:680px; height:400px; } /*页脚*/ .page-footer { /*border:1px solid red;*/ clear: both; /*清除元素对后面元素的影响，若是不设置也页脚元素就会上去，由于页面元素已经变味浮动，不在占位置*/ overflow: hidden; /*消除子元素浮动对父元素的影响*/ color: #fff; background:#999; } </style> </head> <body> <div class="container"> <div class="page-header"> <h1>西红柿首富</h1> </div> <div class="page-main"> <div class="aside"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut obcaecati a illum optio soluta expedita aperiam numquam, laudantium illo impedit natus dolore ducimus pariatur nostrum necessitatibus itaque nihil eligendi. Officiis. </p> </div> <div class="content"> <h2>西红柿首富影评</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum doloremque non, perspiciatis modi sunt illo eveniet! Culpa quibusdam voluptatem laborum vel, nemo quidem ducimus impedit ad, perferendis rerum ab nostrum. </p> </div> </div> <div class="page-footer"> <h2>西红柿首富很棒</h2> </div> </div> </body> </html>
4.5 浮动相关CSS属性总结
- float 值: none(默认) /left /right
- clear 值: none(默认) /both /left /right
4.6 浮动布局小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局实例</title> <style> /*通用的设置*/ /*把一些元素自带外边距和内边距去掉*/ * { margin: 0; padding: 0; } /*设置全部的字体大小和字体的类型，并将文本内容进行居中，须要设置其余字体的大小能够以该字体的倍数进行设置*/ body { font:12px 'Microsoft YaHei',sans-serif; text-align: center; } /*设置总体的宽度，并让其居中，这样其内部全部的元素就能够显示在其宽度内*/ .container { width: 1000px; margin: 0 auto; } /*设置左或右浮动，须要设置浮动的元素直接经过选择器进行引用便可*/ .left { float: left; } .right { float: right; } /*将背景颜色设置为灰色，须要将背景颜色设置为灰色的直接经过选择器进行引用便可*/ .bg { background: #ccc; } /*消除元素对后面元素的影响，须要设置的直接经过选择器进行应用便可*/ .clearfix { height: 10px; clear: both; } /*设置边框，须要用的直接应用便可*/ .border { border: 1px solid #ccc; } /*end 通用设置*/ /*page-header 页头*/ /*经过margin设置块状元素之间的距离*/ .logo { width: 200px; height: 100px; margin-right: 10px; } .banner1 { width: 580px; height: 100px; margin-right: 10px; } .banner2 { width: 200px; height: 100px; } /*end page-header*/ /*page-nav 导航*/ .page-nav { height: 40px; } /*end page-nav*/ /*page-main*/ /*page-content*/ .page-content { width: 790px; } .page-aside { width: 200px; } .item01 { width: 388px; height: 198px; } .item02 { width:188px; height: 198px; margin-right:10px; } .item02-last { margin-right: 0px; } /*endpage-content*/ /*page-aside 侧边栏*/ .item03 { height:128px; } /*endpage-aside*/ /*end page-main*/ /*page-footer 页脚*/ .page-footer { height: 60px; } /*end page-footer*/ </style> </head> <body> <div class="container"> <!--页头--> <div class="page-header"> <div class="left bg logo">LOGO</div> <div class="left bg banner1">BANNER01</div> <div class="left bg banner2">BANNER02</div> </div> <!--end 页头--> <div class="clearfix"></div> <!--页面导航--> <div class="bg page-nav"> 导航 </div> <!--end 页面导航--> <div class="clearfix"></div> <!--页面主体，里面分为 左边的主要内容和右边的侧边栏--> <div class="page-main"> <!--主要内容--> <div class="left page-content"> <div class="row"> <div class="left border item01">栏目一</div> <div class="right border item01">栏目二</div> </div> <div class="clearfix"></div> <div class="row"> <div class="left border item02">栏目三</div> <div class="left border item02">栏目四</div> <div class="left border item02">栏目五</div> <div class="left border item02 item02-last">栏目六</div> </div> </div> <!--侧边栏--> <div class="right page-aside"> <div class="border item03">栏目七</div> <div class="clearfix"></div> <div class="border item03">栏目八</div> <div class="clearfix"></div> <div class="border item03">栏目就</div> </div> </div> <!--end 页面主体结束--> <div class="clearfix"></div> <!--页脚--> <div class="bg page-footer">页脚</div> <!--end 页脚--> </div> </body> </html>
5 定位
5.1 相对定位
- 使用相对定位的盒子,会相对于它原来的位置,经过偏移指定的距离,到达新的位置
- 使用相对定位的盒子,仍在标准流中,它对父块好兄弟盒子没有任何影响
.box { position: relative; top: 10px; left: 20px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title> <style> .box { width:150px; height: 150px; border:2px solid red; background: #ccc; /*设置为相对定位的元素*/ position: relative; /*left:100px; top:100px;*/ /*right:20px;*/ /*bottom: 100px;*/ left:100px; /*优先级高*/ /*right:100px;*/ } </style> </head> <body> <h1>相对定位</h1> <hr> <div class="box"></div> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facere vel exercitationem, sit saepe ut consectetur molestiae temporibus quasi earum praesentium. Molestiae autem, atque tempore. Veritatis odit ratione autem ipsam.</p> </body> </html>
5.2 绝对定位
- 使用绝对定位的盒子以它"最近"的一个"已经定位"的"祖先元素"为基准进行偏移. 若是没有已经定位的"祖先元素", 那么会以浏览器窗口为基准进行定位
- 绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其余的盒子就好像这个盒子不存在同样
.box { position: absolute; top: 10px; left: 20px }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> #box { width: 800px; padding: 20px; border: 2px solid red; /*设置相对定位*/ position: relative; /*position: absolute;*/ } p { border:1px solid #ccc; padding: 20px; } #inner { width: 100px; height:100px; background: #f90; /*绝对定位*/ position: absolute; left: 0px; top: 0px; } </style> </head> <body> <h1>绝对定位</h1> <hr> <div id="box"> <div id="inner">绝对定位</div> <hr> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, vitae veritatis porro perferendis harum sed minima eos exercitationem, praesentium id corporis deserunt eligendi laboriosam aliquid eius nesciunt temporibus a incidunt. </p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现元素 在页面中 水平和垂直都居中</title> <style> .box { width: 400px; height: 300px; background: pink; /*水平居中 */ /*margin:100px auto;*/ /*绝对定位*/ position: absolute; left: 50%; top: 50%; margin-left:-200px; /*负 元素宽度的一半*/ margin-top:-150px; /*负 元素高度的一半*/ } </style> </head> <body> <div class="box"> 是的发生发的 </div> </body> </html>
5.3 固定定位
以浏览器窗口为基准 窗口滚动时,依然保持位置不变
.box { position: fixed; top: 10px; left: 20px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同志</title> <style> #nav { width:100px; height: 200px; background: pink; /*设置固定定位 脱硫文档流*/ position: fixed; /*position: absolute;*/ /*left:20px; top:50px;*/ right:20px; bottom:30px; } </style> </head> <body> <h1>固定定位</h1> <hr> <div id="nav"></div> <hr> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam similique ex omnis excepturi voluptas deserunt ea nihil fugiat veritatis sapiente hic inventore, harum possimus vitae, ipsam explicabo aut architecto ipsum. </p> <div style="height:2000px"></div> </body> </html>
5.4 空间位置
- 使用css属性
z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素老是会处于堆叠顺序较低的元素的前面。 - z-index 仅能在定位元素上奏效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>空间位置</title> <style> .box01 { position: relative; width: 200px; height: 200px; background: pink; /*设置z-index*/ z-index:100; } .box02 { position: absolute; width: 300px; height: 100px; background: red; left: 10px; top: 20px; /*不服*/ z-index: 1000; } </style> </head> <body> <div class="box01">box01 相对定位 老子就想在上面</div> <div class="box02">box02 绝对定位</div> </body> </html>
5.5 定位相关CSS属性总结
- position static(默认值) /relative /position /fixed
- top
- left
- right
- bottom
- z-index auto(默认值)/数字
6 浏览器兼容性
6.1 浏览器分类
主流浏览器(原生浏览器)
拥有独立内核的浏览器 被称为主流浏览器
- chrome 内核 blink 早期的chrome使用apple的开源内核 webkit. 咱们依然习惯上称呼chrome的内核为webkit
- safari 内核 webkit
- IE 内核 Trident
- Firfox 内核 Gecko
- Opera v12.17之前采用 Presto 内核。后来紧跟chrome的步伐，使用chrome的内核 成为了壳浏览器
壳浏览器
在某浏览器内核之上增长相应的辅助功能，并改变其名称与外观的浏览器
opera、360安全、360极速、UC、搜狗、猎豹、QQ浏览器、2345浏览器、淘宝浏览器 等
6.2 浏览器对HTML5和CSS3的兼容性状况
- HTML5须要 IE9以及以上版本的IE浏览器支持
- CSS3不一样的模块对浏览器的兼容程度各不相同。 对于IE浏览器，确定须要IE9以及以上的浏览器支持
- chrome、firefox浏览器通常都会自动更新，因此兼容性特别棒！
- 手机浏览器，大多使用webkit内核，兼容性较好。关键是 手机上没有IE！
- 目前的国产浏览器，多采用双内核，使用chrome内核的时候兼容性较好
6.3 兼容技巧
设置IE使用最新的渲染引擎
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
让双核浏览器默认使用webkit内核
<meta name="renderer" content="webkit">
让IE8识别HTML5新增标签
<!--[if lt IE 9]> <script src="/html5shiv/dist/html5shiv.js"></script> <![endif]-->
相关文章
- 1. 页面布局
- 2. 页面布局3
- 3. HTML页面布局
- 4. 页面布局autoresizing
- 5. CSS 页面 布局
- 6. CSS3 & 页面布局
- 7. flexbox 页面布局
- 8. beego 页面布局
- 9. css页面布局
- 10. 页面布局一
- 更多相关文章...
- • ASP.NET Web Pages - 页面布局 - ASP.NET 教程
- • ASP.NET Web Pages - 全局页面 - ASP.NET 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • JDK13 GA发布：5大特性解读
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通过ViewHelper.setTranslationY实现View移动控制（NineOldAndroids开源项目）
- 3. 【Android】日常记录：BottomNavigationView自定义样式，修改点击后图片
- 4. maya 文件检查 ui和数据分离 （一）
- 5. eclipse 修改项目的jdk版本
- 6. Android InputMethod设置
- 7. Simulink中Bus Selector出现很多? ? ?
- 8. 【Openfire笔记】启动Mac版Openfire时提示“系统偏好设置错误”
- 9. AutoPLP在偏好标签中的生产与应用
- 10. 数据库关闭的四种方式
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 页面布局
- 2. 页面布局3
- 3. HTML页面布局
- 4. 页面布局autoresizing
- 5. CSS 页面 布局
- 6. CSS3 & 页面布局
- 7. flexbox 页面布局
- 8. beego 页面布局
- 9. css页面布局
- 10. 页面布局一