目录
1margin也可以设置负值，如果是负值则元素会向相反的方向移动
文档流
文档流:网页是一个多层的结构，一层摞着一层;通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层;这些层中，最底层被称为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列。
对于我们来说元素主要有两个状态:
在文档流中
不在文档流中(脱离文档流)
元素在文档流中的特点:
块元素:在页面独占一行;默认宽度是父元素的全部(把父元素撑开);默认高度是被内容撑开(子元素)
行内元素:行内元素不会独占一行，只占自身的大小;行内元素在页面中自左向右水平排列，如果一行之中不能排完，则元素会换到第二行继续自左向右排列;行内元素的默认宽度和高度都是被内容撑开
<style>
.box1{width:100px;background-color:yellow;}
.box2{width:100px;background-color:red;}</style></head>
<body><div class="box1">我是div1</div><div class="box2">我是div2</div>
<span>1</span><span>2</span>
<span>3</span><span>4</span>
</body>
盒模型
盒模型(盒子模型、框模型(box model))
CSS将页面中的所有元素都设置为了一个矩形盒子;将元素设置成矩形盒子后，对页面布局就变成了将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成:内容区(content),内边距(padding),边框(border),外边距(margin)
内容区(content),元素中的所有的子元素和文本内容都在内容区中排列;内容区的大小由width和height两个属性来设置(width,宽度;height,高度)
边框
边框(border),边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，要设置边框至少需要设置三个样式:
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
也可以简写:border:solid 10px orange;(顺序可以变)
<style>
border-width:10px;
border-color:red;
border-style:solid;</style>border-width:默认值一般是三个像素，可以用来指定四个方向的边框的宽度值的情况
四个值:上 右 下 左
三个值:上 左右 下
两个值:上下 左右
border-width:10px 20px 30px;除了border-width还有一组border-xxx-width(xxx可以是top,right,bottom,left)用来单独指定某一个边的宽度
border-top-width:10px;border-color用来指定边框的颜色，同样可以分别指定四个边框，规则和border-width一样
border-style指定边框的样式:solid表示实线，dottod表示点状虚线，dashed虚线，double双线，默认值是none(没有边框)
border-style:double;除了border以外还有四个border-xxx:border-top,border-right,border-bottom,border-left
border-top:10px solid orange内边距(padding)
内边距:内容区和边框之间的距离是内边距，一共有四个方向的内边距
padding-top(right,bottom,left)
内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上。可见框的大小由内容区，内边距和边框共同决定。
padding简写属性规则与border-width一样:
padding:10px 20px;外边距(margin)
外边距:外边距不会影响盒子可见框的大小，但是现在外边距会影响盒子的位置。
一共有四个方向的外边距:
margin-top:上外边距，设置一个正值，元素会向下移动
margin-right:默认情况下设置不会产生任何效果
margin-bottom:下外边距，设置一个正值，其下边的元素会向下移动
margin-left:左外边距，设置一个正值，元素会向右移动(元素在页面中是按照自左向右的顺序排序的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素)
1margin也可以设置负值，如果是负值则元素会向相反的方向移动
2margin的简写属性与padding规则一样
margin:10px 20px;水平布局
元素的水平方向布局:元素在其父元素中水平方向的位置由以下几个属性共同决定:
margin-left
border-left
padding-left
width
margin-right
border-right
padding-right
一个元素在其父元素中，水平布局必须满足以下的等式:
margin-left+border-left+padding-left+width+margin-right+border-right+padding-right=其父元素内容区的宽度(必须满足)
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，等式回自己调整
调整的情况:
如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足;
这七个值中有三个值可以设为auto(width,margin-left,margin-right)
如果某个值为auto,则自动调整为auto的那个值使等式成立;如果一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0;如果将三个值都设为auto，则外边距都是0，宽度最大;如果将两个外边距设为auto，宽度固定，外边距平分(其中width默认为auto)
<style>
.outer{width:800px;height:200px;border:10px red solid;}
.inner{width:200px;height:200px;background-color:#bfa;}</style></head>
<body>
<div class="outer">
<div class="inner"></div>
</div></body>垂直方向布局
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
.out{background-color:yellow;
height:200px;width:200px;
overflow:auto;}
.inner{width:100px;height:400px;background-color:orange;}
<body><div class="outer"><div class="inner"></div></div></body>使用overflow属性来设置父元素如何处理溢出的子元素
可选值:visible 默认值 子元素会从父元素中溢出来，在父元素外部显示
hidden:溢出来的内容将会被裁剪不会显示
scroll:生成两个滚动条，通过滚动条来查看完整的内容(x,y两个方向)
auto:根据需要生成滚动条
外边距的折叠
.out{background-color:yellow;
height:200px;width:200px;
overflow:auto;}
.inner{width:100px;height:400px;background-color:orange;}
<body><div class="outer"><div class="inner"></div></div></body>垂直外边距的重叠(折叠):相邻的垂直方向外边距会发生重叠现象
兄弟元素:兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
特殊情况:如果相邻外边距一正一负，则取两者的和;如果相邻的外边距都是负值，取两者中绝对值较大的
兄弟元素之间的外边距的重叠，对于开发有利，不需要处理
父子元素:父子元素间相邻外边距，子元素会传给父元素(上外边距)
(会影响到页面的布局，必须要进行处理)
.box3{width:100px;height:100px;backgrounp-color:orange;margin-top:100px;}
.box4{width:200px;height:200px;background-color:#bfa;}
</style></head><body>
<div class="box4"><div class="box3"></div></div>
行内元素的盒模型
行内元素的盒模型:行内元素不支持设置宽度和高度;可以设置padding(margin、border)，但是垂直方向padding(margin、border)不会影响页面的布局(不会上下挤其他元素只动自身)
display:用来设置元素显示的类型
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素(行内块，既可以设置宽度和高度又不会独占一行
table 将元素设置为一个表格
none 元素不在页面显示
a{display:inline-black;visibility:hidden;}</style>visiblity 用来设置元素的显示状态
可选值:visible 默认值，元素在页面中正常显示
hidden:元素在页面中隐藏不显示，但是依然占据页面的位置
浏览器默认样式
默认样式:通常情况下，浏览器会为元素设置默认样式，它会影响到页面的局面通常情况下必须去掉默认样式(PC端)
两种方式
1通配选择器
*body{margin:0px;padding:0px;}2引入文件
重叠样式表:专门用来对浏览器样式进行重置
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行统一
去除项目符号:
ul{list-style:none;}盒子的尺寸
默认情况下，盒子可见框大小由内容区、内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方法 可选值:
content:默认值，宽度和高度用来设置内容区的大小
border-box:宽度和高度用来设置整个盒子可见框的大小
width和height:内容区、内边距和边框的总大小
<style>
.box{width:100px;height:100px;background-color:red;padding:10px;
box-sizing:border-box;}</style>
<head><body><div class="box">
</div></body>轮廓和圆角
box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左
第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上
第三个值 阴影的模糊半径
第四个值 阴影的颜色
outline 用来设置元素的轮廓线，用法和border一样(轮廓不会影响可见框的大小)
border-radius:用来设置圆角 圆角设置圆的半径大小
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
border-radius可以分别指定四个角的圆角
四个值 左上 右上 右下 左下
三个值 左上 右上/左下 右下
两个值 左上/右下 右上/左下
<style>
.box1{width: 200px;height: 200px;background-color: rebeccapurple;
box-shadow:20px 20px 5px #bfa;
outline: 3px red solid;}
.box2{border-radius: 10px 50px;
width: 100px;height: 100px;background-color: rosybrown;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
浮动的简介
通过浮动可以使一个元素向其父元素的左侧或右侧移动;使用float属性来设置元素的移动
可选值:
none默认值，元素不动
left 元素向左移动
right 元素向右移动
注意，元素设置浮动以后，水平布局的等式不需强制成立(没有了边框的限制)，所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点:
1浮动元素会完全脱离文档流，不会占据文档流的位置
2设置浮动以后元素会向父元素的左侧或右侧移动
3浮动元素默认不会从父元素中移出
4浮动元素向左或向右移动时，不会超过它前面的其他浮动元素
5浮动元素不会超过它上边的兄弟元素，最多就是和它一样高
6如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
简单总结:浮动主要作用是让页面中的元素可以水平排列，水平布局
1254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
