1.文档流normal flow
-网页是一个多层结构
-通过CSS可以分别为每一层设置样式
-用户只能看到最顶层
-最底层：文档流（我们所创建的元素默认都是从文档流中进行排列）
<head> <style> .box1 { background-color: blue; } /*它的父元素为body*/ .box2 { width: 100px; background-color: red; } span { background-color: aqua; } </style> </head> <!-- 元素有两个状态：在文档流中/不在文档流（现在只考虑前者） -元素在文档流（基岩）中有什么特点：（元素也可以脱离文档流，不再区分块和行内） -块元素 div --块元素会在页面中独占一行 --默认宽度时父元素的全部（即浏览器设置宽度为多少，背景就宽多少） --默认高度是子元素的总和 -行内元素 span --行内元素不会只占一行，只占自身大小 --在页面中自左向右排列(若一行容纳不了，则会换行) --默认高度和宽度跟里面的元素有关 --> <body> <!--两个块元素--> <div class="box1"> 我是div1 </div> <div class="box2"> 我是div2 </div> <span>我是span1</span> <span>我是span2</span> </body>
2.盒子模型
<!--盒子模型(对元素进行布局) -CSS将页面中的所有元素都设置了一个矩形的盒子 -将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置 -每一个盒子都有一下几个部分组成： --内容区（content） --内边距（padding） --边框（border） --外边距（margin），决定盒子位置 --> <head> <style> .box1 { /*内容区content，元素中的所有子元素和文本都在内容去中 大小由width和height来设置*/ width: 100px; height: 100px; background-color: aqua; /*边框border，边框属于盒子边缘 设置边框： 宽度 border-width 颜色 border-color 样式 border-style 边框的大小会影响到盒子大小（盒子内容一直不变） */ border-width: 20px; border-color: red; border-style: solid; } </style> </head> <body> <div class="box1"> 1234 </div> </body>
1.盒子模型-边框
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 200px; height: 200px; background-color: rgb(6, 106, 139); /*边框，下面三个元素缺一不可（border-width有默认值，一般3px）*/ /*border-xxx-width,xxx可以为top right bottom left来指定某一个边的宽度*/ border-width: 10px 20px 30px 40px; /*边框上右下左（顺时针）宽度*/ /*指定边框颜色，同样可以分别制定四个边框的颜色，也可以用border-xxx-color指定颜色*/ border-color: orange red yellow green; /*指定边框样式，与上面类似。默认值为none（无边框） solid 实线 dotted 点状虚线 dashed 虚线 double 双线*/ border-style: solid dotted dashed double; } .box2 { width: 100px; height: 100px; background-color: rgb(6, 106, 139); /*border简写属性,没有顺序要求 border-xxx xxx可以为top right bottom left单独设置一边的样式*/ border: solid 10px orange; /*单独去掉一边*/ border-bottom: none; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
2.盒子模型-内边距
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 200px; height: 200px; background-color: rgb(6, 106, 139); border: solid 10px orange; /*内边距padding -内容区和边框之间的距离 -四个方向：padding-top/right/bottom/left 内边距的设置会影响到盒子大小，颜色默认为内容颜色 盒子可见框的大小由内容区+内边距+边框共同决定*/ padding-top: 50px; padding-bottom: 50px; padding-left: 50px; padding-right: 50px; /*padding的简写,上右下左，跟前面的border一样*/ padding: 10px 20px 30px 40px; } .inner { width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"> <div class="inner"> </div> </div> </body>
3.盒子模型-外边距
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 200px; height: 200px; background-color: aqua; border: 10px red solid; /*外边距margin 不影响盒子可见框的大小 影响盒子的位置 共有四个方向的外边距： margin-top/right/bottom/left */ margin-top: 100px; /*盒子向下移动*/ margin-left: 100px; /*盒子向右移动*/ /*margin简写，跟border一样*/ margin: 100px,100px; } </style> </head> <body> <div class="box1"></div> </body>
4.盒子模型-水平方向的布局
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer { /*width默认为auto*/ width: 800px; height: 200px; border: 10px red solid; } /*元素水平方向的布局： 元素在其父元素中水平方向的位置有以下几个属性共同决定 margin-left border-left padding-left width padding-right border-right margin-right(一般不用，浏览器会自动调整确保下面的等式成立) 要满足以下等式： 上面的加起来=父元素内容区的宽度 若不成立，则称为过度约束，等式会自动调整（一般调整margin-right） 水平居中：width:xxxpx;margin:0 auto; */ .inner { width: 200px; height: 200px; background-color: aqua; margin-left: 100px; margin-right: auto; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body>
5.盒子模型-垂直方向的布局
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*元素垂直方向的布局*/ .outer { width: 250px; height: 400px; background-color: #bfa; /*默认情况下父元素的高度被子元素撑开 若设置具体值，则按具体值来 */ } /*子元素实在父元素的内容区中排列的 若子元素大于父元素，则溢出 用overflow处理溢出的子元素 overflow:visible:默认显示 hidden：隐藏溢出部分 scroll:生成两个滚动条，通过滚动条查看完整内容 auto 根据需要生成滚动条*/ .inner { width: 100px; height: 100px; background-color: red; margin-bottom: 100px; overflow: auto; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner">111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111 </div> </div> </body>
6.盒子模型-外边距的折叠
（1）兄弟元素
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*外边距的重叠 "相邻"的"垂直方向"的外边距会出现重叠现象 兄弟元素 相邻垂直外边距取两者的较大值 特殊情况： 如果外边距一正一负，则取两者的和 如果外边距都为负，则取绝对值大的*/ .box1, .box2 { width: 50px; height: 50px; font-size: 50px; } /*box1的下外边距和box2的上外边距重叠了 尽管两个加起来是200px，但实际上是100px*/ .box1 { background-color: aqua; /*设置下外边距*/ margin-bottom: 50px; } .box2 { background-color: orange; /*设置上外边距*/ margin-top: 50px; } </style> </head>
（2）父子元素
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*外边距的重叠 "相邻"的"垂直方向"的外边距会出现重叠现象 父子元素： 相邻外边距，子元素会传递给父元素 会影响页面的布局，因此必须要处理 */ /*将子元素box4下移，不移动父元素box3*/ .box3 { width: 200px; height: 100px; background-color: aqua; padding-top: 100px; } .box4 { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="box3"> <div class="box4"></div> </div> </body>
7.行内元素的盒子模型
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .s1 { background-color: yellow; /*行内元素的盒子模型 行内元素不支持设置宽度和高度 行内元素可以设置padding，垂直方向的padding不会影响页面布局 行内元素可以设置border，垂直方向的border不会影响页面布局 行内元素可以设置margin，垂直方向的margin不会影响页面布局*/ /*width和height无效*/ width: 100px; height: 100px; padding: 100px; border: 50px solid red; margin: 20px; } .box1 { width: 200px; height: 200px; background-color: #bfa; } </style> </head> <body> <span class="s1"> 我是span </span> <div class="box1">我是box1</div> </body>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .s1 { background-color: yellow; margin: 100px; } .box1 { width: 200px; height: 200px; background-color: #bfa; } a { /*对于超链接的放大 width和height没有用 使用display设置元素显示的类型，这样可以使用width和height 可选值 （若隐藏，则不占位置） inline：将元素设为行内元素 block：将元素设为块元素 inline-block:行内块元素，既可以设置宽高，又不会独占一行 table:将元素设为表格 none：隐藏（可以设置为鼠标点击而显示）*/ /*visibility设置元素的显示状态 可选值（若隐藏，则依然占位置） visible:默认值，正常显示 hidden:隐藏，但是依然占据页面位置*/ display: inline-block;/*缺点：兼具行内元素和块元素的优缺点，两者之间有间隔*/ width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <a href="javascript:;">超链接</a> <a href="javascript:;">超链接</a> <span class="s1">我是span</span> <div class="box1">我是box1</div> </body>
8.浏览器的默认样式
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*浏览器的默认样式：浏览器为元素设置一些默认样式 会影响页面布局，一般要去除浏览器的默认样式*/ body { /*去除外边距*/ margin: 0; } p { margin: 0; } ul { margin: 0; padding: 0; margin-left: 20px; /*去除项目符号*/ list-style: none; } /*所有元素去除默认样式：*/ * { margin: 0; padding: 0; } /*一般不自己写，引用别人的文件来去除浏览器的默认样式 下面这条放到<style>上面 <link rel="stylesheet" href="./css/reset/css">*/ .box1 { width: 100px; height: 100px; border: 1px solid black; } </style> </head> <body> <!--标签之间自动有间隔（浏览器自动设置了外边距）--> <div class="box1">我是box1</div> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> </body>
9.盒子的尺寸
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 100px; height: 100px; background-color: #bfa; padding: 10px; border: 10px solid red; /*默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing，设置盒子尺寸的计算方式（即width和height） 可选值 content-box:默认值，宽度和高度用来设置内容区的大小(140px*140px) border-box:宽度和高度设置整个盒子的大小（100px*100px） */ box-sizing: content-box; } .box2 { width: 100px; height: 100px; background-color: #bfa; padding: 10px; border: 10px solid red; box-sizing: border-box; } </style> </head>
10.轮廓和圆角
（1）轮廓
<head> <style> .box1 { width: 200px; height: 200px; background-color: #bfa; /*outline用来设置元素的轮廓线，用法和border一样 但轮廓不会影响可见框的大小*/ outline: 10px solid red; } .box2 { width: 200px; height: 200px; background-color: #bfa; border: 10px solid red; } </style> </head> <body> <div class="box1"></div> <span>outline</span> <div class="box2"></div> <span>border</span> </body>
（2）阴影
<head> <style> .box1 { width: 200px; height: 200px; background-color: #bfa; /*box-shadow:设置元素的阴影效果，不影响页面布局 阴影默认在元素正下方，所以需要偏移量 第1个值：水平偏移：正右负左 第2个值：垂直偏移：正下负上 第3个值：阴影模糊半径 第4个值：阴影颜色 */ box-shadow: 10px 10px 20px rgb(0, 0, 0, .5); } </style> </head> <body> <div class="box1"></div> </body>
(3)圆角
<head> <style> .box1 { width: 200px; height: 200px; background-color: orange; /*圆角：border-radius同时设置四个角 也可以分别设置： border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius */ /*设置圆的半径*/ border-top-left-radius: 50px;/*正圆*/ border-top-right-radius: 50px 100px;/*椭圆*/ } .box2 { width: 200px; height: 200px; background-color: orange; /*设置为圆形*/ border-radius: 50%; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
