03_layout
1、文档流
文档流（normal flow）
-网页是一个多层的结构，一层摞着一层
-通过css可以分别为每一层设置样式
-用户只能看见最上面一层
-这些层中，最底下的一层叫做文档流，文档流是网页的基础
我们创建的元素默认都是在文档流中进行排列
-对于我们来说，元素有两个状态
在文档流中
不在文档流中（脱离文档流）
元素在文档流中有什么特点????
-块元素
总是在页面中独占一行
默认宽度是父元素的全部（会把父元素body盛满）（网页多宽他杜宽）
默认高度被内容撑开（子元素）
-行内元素
不会独占一行，只占自身大小
自左向右水平排列，如果一行只能不能容纳2个span元素，
则元素会换到第二行继续自左向右排列
默认宽度和高度都是被内容撑开
那脱离文档流中有什么特点呢？？
2、盒子模型
2.1、盒模型、盒子模型、框模型(box model)
如何摆放？？？
知道形状、大小才能摆放
-css将页面所有元素都设置成一个矩形的盒子
-对页面的布局就变成摆放盒子到不同位置的问题
-每一个盒子都由以下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin)
2.2、盒子模型_内容区
/*
内容区，元素中的所有子元素和文本内容都在内容区中排列由width和height两个属性值决定内容区大小
*/
width: 200px;
height: 200px;
background-color: #bfa;
2.3、盒子模型_边框
边框的宽度
/*
边框的宽度 border-width：
用来指定四个方向的边框宽度
默认值，一般都是3个px
值的情况
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
除了border-width外还有一组border-xxx-width
xxx可以是 top right bottom left
border-top-width: 10px;
用来指定某一个方向的边框宽度
*/
/* border-width: 10px 20px 30px 50px; */
border-width: 10px;
边框的颜色
/*
边框的颜色：border-color用来指定边框的颜色
同样可以指定四个方向边的颜色
规则和上面那个一样
不指定颜色的话默认和color值(前景色）一样
*/
border-color: blueviolet red blue yellow;
/* color:red; */
边框的样式
/*
边框的样式：border-style：实线、虚线
solid：实线
dotted：点状虚线
dashed：虚线
double：双线
*/
border-style: solid dotted dashed double;
boder简写属性
/*
boder简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
除了这个，还有一组boder-xxx:
boder-top
border-bottom
border-right
border-left
通常用于只需要设置2个 1个 3个边框时
但一般遇见不设置右边边框的情况时：
最佳解决方案：
border:10px red solid;
border-right:none;
*/
border:10px red solid;
2.4、盒子模型_内边距
红色-边框 绿色-内边距 黄色-内容区
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: red solid 20px;
/*
内边距 padding
-内容区和边框之间的距离是内边距
-一共有四个方向的内边距
padding-top:20px ;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
-内边距大小会影响整个盒子的大小
-背景颜色会延伸到内边距上
-简写：padding：上 右 下 左
padding: 10px 20px 30px 40px;
盒子可见框的大小 由这三部分：内容区 边框 内边距 一起决定
所以计算大小时，需要将这三个区域加到一起计算
padding-top:20px ;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 20px; */
*/
padding: 10px 20px 30px 40px;
}
.inner{
width: 100%;
height: 100%;
background-color: rgb(249, 255, 170);
}
<div class="box1">
<div class="inner"></div>
</div>
2.5、盒子模型_外边距
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: red solid 20px;
/*
外边距
-外边距不会影响盒子可见框的大小，但是会影响盒子的位置
-不影响盒子可见框大小，但是影响盒子实际占用空间的大小
-一共有四个方向的内边距
margin-top:
上外边距，设置一个正值，元素回向下移动
margin-left:
左外边距，设置一个正值，元素回向右移动
margin-bottom:
下外边距，设置一个正值，该元素不会有效果，但他下面的元素回向下移动
margin-right:
默认情况下设置right不会产生任何效果 为什么？？？因为过渡约束
如果设置负值是向相反的方向移动
-页面元素是按照自左向右进行排列的
所以默认情况下如果我们设置左和上边距则会移动本元素
而设置右和下边距则移动其他元素
-margin的简写属性：和padding规则一样
margin：10px 20px 30px 40px;
*/
margin-bottom: 40px;
}
.box2{
width: 200px;
height: 200px;
background-color: #bfa;
border: red solid 20px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
2.6、盒子模型_水平方向的布局
<style>
.outer{
width: 800px;
height: 200px;
border: solid red 10px ;
}
.inner{
width: 400px;
height: 200px;
background-color: #bfa;
margin:0 auto;
/*
元素水平方向的布局：
元素在其父元素中水平方向的位置有以下几个属性决定：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局满足以下要求：
margin-left + border-left + padding-left + width + padding-right + border-right +
margin-right = 父元素内容区的宽度（width）（必须满足）
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 ????
以上等式必须要满足，如果相加等式不满足，则成为过渡约束，则等式自动调整
-调整的情况：
如果七个值中没有auto的情况，则浏览器会自动调整margin-right值使等式成立
即 0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
-七个值里面有三个可以设置为auto ：
width 不写的话就是auto
margin-right
margin-left
如果某个值为auto，则浏览器会自动调整auto的那个值使等式成立
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto=600
1.如果将一个宽度width和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距自动为0
width: auto;
margin:10 20 30 auto;
2.如果将三个值都设置为auto，则宽度最大，外边距为0
width: auto;
margin:10 20 auto auto;
3.如果将两个外边距都设置为auto，width为固定值，则会将两个外边距设置为相同的值
经常利用这个特点是一个元素在其父元素水平居中
示例：
width: 400px;
margin:0 auto;
*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"> </div>
aaa
<!-- 为什么aaa不紧挨着 inner的框？？？-->
</div>
</body>
2.7、盒子模型_垂直方向的布局
总结：
父元素没写高度的话就被子元素内容（不包括margin-bottom）撑开，写上高度就该是多少就是多少
.outer{
background-color: #bfa;
}
.inner{
width: 100px;
height: 200px;
background-color: black;
margin-bottom: 100px;
/*
-默认情况下父元素被内容（子元素）的高度撑开
*/
}
.box1{
width: 400px;
height: 200px;
background-color: #bfa;
/* -子元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素的高度，则子元素会从父元素会溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
visiable，默认值，子元素会溢出，在父元素外部位置显示
hidden，溢剪没，隐藏，溢出的内容被裁剪，不会显示
scroll，生成两个滚动条，通过滚动条查看完整内容
auto，根据需要生成滚动条，需要水平生成水平，不需要不生成
overflow-x:单独处理x方向
overflow-y单独处理y方向
*/
overflow:auto;
}
.box2{
width: 200px;
height: 300px;
background-color: rgba(253, 237, 5, 0.897);
}
2.8、垂直外边距重叠
.box1,.box2{
width: 200px;
height: 200px;
}
.box1{
background-color: #bfa;
margin-bottom: -100px;
/*
垂直外边距的重叠（折叠）
-相邻的垂直外边距会发生折叠
-兄弟元素
兄弟元素的相邻垂直外边距会取较大值（都是正值)
特殊情况：
相邻外边距一个正一个负，则取两者的和
相邻外边距都是负，则取两者绝对值较大的那个
兄弟元素之间的外边距重叠，对于开发是有利的，所以不需要处理
-父子元素
父子元素之间相邻外边距，子元素会传递给父元素（上外边距)
父子外边距折叠会影响页面的布局，必须要进行处理
*/
}
.box2{
background-color: rgba(253, 237, 5, 0.897);
margin-top: -250px;
}
.box3{
width: 200px;
height: 199px;
background-color: #bfa;
/* padding-top: 100px ; */
border-top:#bfa 1px solid;
}
.box4{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 99px;
}
<div class="box3">
<div class="box4"></div>
</div>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
未给子元素增加一个 margin-top: 100px;的效果如下
如果给子元素增加一个 margin-top: 100px; 会导致父元素下移100px，父子外边距的折叠会影响到页面的布局，必须要进行处理
第一种解决方案：父元素加一个 padding-top: 100px ; 并且把父元素改成这个height: 100px;
1、我们转换思路，将对子元素的调整转为对父元素的调整
.box3 {
width: 200px;
height: 200px;
background-color: #bfa;
padding-top: 100px; /* 不调整子元素的margin，而是转而调整父元素的padding */
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
/* margin-top: 100px; */
可以看到父元素位置虽然正确了，但是高度却被“撑大了”。我们之前说过，padding属性会影响元素的大小
2、这里我们还需要计算并手动调整下父元素的高度
.box3 {
width: 200px;
height: 100px; /* height: 200px; */
background-color: #bfa;
padding-top: 100px;
}
.box4 {
width: 100px;
height: 100px;
background-color: orange;
}
第二种方案：父元素加一个边框，使父元素和子元素的外边距分开border-top:\#bfa 1px solid;然后height: 199px;
子元素下面多1px，所以 margin-top: 99px;
1、我们仍然保留子元素的margin-top属性，但是给父元素加一个上边框
.box3{
width: 200px;
height: 199px;
/* height:100px; */
background-color: #bfa;
/* padding-top: 100px ; */
border-top:#bfa 1px solid; /* 在父元素上加一个border-top（上边框） */
}
.box4{
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 99px;/* 不删除，保留 */
}
2.9、行内元素的盒模型
.s1{
width: 100px;
height: 100px;
background-color: rosybrown;
/* border: 100px solid yellowgreen; */
/* display:none; */
visibility:hidden
/*
行内元素的盒模型：
行内元素不支持设置高度和宽度
行内元素可以设置border，但垂直方向外边距不影响页面布局
行内元素可以设置margin，但垂直方向外边距不影响页面布局
行内元素可以设置padding，垂直内边距不影响页面布局，只是会覆盖别的元素
如何解决行内元素可以设置宽高？？？
1. display：用来设置行内元素显示的类型
可取值：
inline: 将元素设置为行内元素
block: 将元素设置为块元素 独占一行
inline-block: 行内块元素
既可以设置宽度高度，又不独占一行
如果两个行内元素之间没有空格，页面中就不会有空格
table: 将元素设置为表格
none： 元素不在页面中显示 典型用法开始掩藏，鼠标移入出现下拉菜单 用的多
2. visibility:用来设置元素显示状态
visible:默认值 在页面正常显示
hidden: 在页面隐藏 不显示，但是依旧占据页面中的位置
*/
}
.box1{
width: 200px;
height: 200px;
background-color:#bfa;
}
<a href="JavaScript:;">链接</a>
<span class="s1">我是span1</span>
<span class="s1">我是span2</span><span class="s1">我是span2</span>
<div class="box1"></div>
3、默认样式
默认样式：
-通常情况下，浏览器会为元素设置默认样式
-默认样式的存在会影响到页面布局
通常情况下编写网页时必须要去除浏览器的样式（pc端）
解决方法：
1、在网页检查中找到已计算，去除默认样式，如margin：0；
2、*{}
3、重置样式
官方地址： CSS Tools: Reset CSS (meyerweb.com)
我们可以看到reset.css的作用就是将各个内外边距置为0，将一些样式置为none
4、normalize样式
这里并没有去除所有样式，因为normalize的作用不同于reset。reset是将所有默认样式去除，而normalize是将所有默认样式统一，这样在不同的浏览器里显示效果也是统一的
4、盒子的尺寸
默认情况下，盒子可见框大小由内容区+内边距+边框共同决定 10+10+200+10+10
**box-sizing：**用来设置盒子的计算方式（设置width和height的作用）
可选值：
content-box 默认值：宽度和高度用来设置内容区的大小
border-box :宽度和高度用来指盒子可见框的大小
width 和height指的是内容区和内边距和边框的总大小
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
/* 盒子可见框的大小为200px*200px */
box-sizing: border-box;
/* 盒子内容区的大小为200px*200px*/
/* box-sizing: content-box;*/
}
图一：box-sizing：content-box; 盒子内容区的大小为200px*200px
图二：box-sizing：border-box; 盒子可见框的大小为200px*200px
5、轮廓阴影和圆角
阴影 box-shadow
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/* 阴影 */
box-shadow:20px 20px 30px rgba(0,0,0,.5);
/* box-shadow:用来设置元素的阴影效果，不会影响页面布局
默认在元素正下方，与元素大小一样，想看到阴影需要设置偏移量
偏移量 默认0 0
第一个值 水平偏移量 设置阴影的水平位置 正值往右方向偏移，负值反方向移动
第二个值 垂直偏移量 设置阴影的垂直位置 正值往下方向偏移，负值反方向移动
第三个值 阴影的模糊半径 值越大 越模糊
第四个值 阴影的颜色 一般用rgba（）*/
}
轮廓 outline
/* border: solid blue 10px;
设置border会使.box元素变大，使得下面的元素下移*/
/* 轮廓 */
.box:hover{
outline:rgb(185, 94, 84) 10px solid;
}
/*
outline: red solid 10px;
用来设置元素的轮廓线，用法和border一样
不同于边框的是，他不影响盒子可见框的大小，不影响元素页面布局
经常用于鼠标移入状态
*/
圆角 boder-redius
.box2{
width: 200px;
height: 200px;
background-color: rgb(217, 248, 210);
/* 圆角 */
/* border-radius: 10px 20px 30px 40px; */
border-radius: 20px / 50px;
/* border-radius: 用来设置圆角 圆角设置的是圆的半径大小
设置椭圆角：border-radius: 20px/40px;横向20px 纵向40px 以/连接
可分别设置四个方向圆角
四个值：左上 右上 右下 左下（顺时针）
三个值：左上 右上/左下 右下
两个值：左上/左下 右上/右下
可单独设置四个圆角：
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
*/
/* 将元素设置为圆形 */
/* border-radius: 50% ; */
border-radius: 50% ;
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
