一、盒子模型
1、边框
border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式、边框颜色。语法：
border:border-width | border-style | border-color| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
-
边框复合写法没有规定的顺序
表格细线边框
border-collapse:collapse;-
collapse是合并的意思
2、内边距
padding属性用于设置内边距，即边框与内容之间的距离
| padding-left | 左内边框 |
| padding-right | 右内边框 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
padding复合写法
| padding:5px | 1个值，代表上下左右都有5像素内边距 |
| padding:5px 10px; | 2个值，代表上下内边距都是5像素 左右内边距是10像素 |
| padding:5px 10px 20px; | 3个值，代表上内边距5像素 左右内边距10像素 下内边距20像素 |
| padding:5px 10px 20px 30px; | 4个值，代表上是5像素 下是20像素 左是30像素 顺时针 |
注意：padding也会影响到盒子的实际大小，会比实际大
3、外边距
margin属性用于设置外边距，即控制盒子与盒子之间的距离
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
嵌套块元素垂直外边距的塌陷
解决方案：
-
可以为父元素定义上边框
-
可以为父元素定义上内边框
-
可以为父元素添加overflow:hidden
4、清除内外边距
* {
padding:0; /*清楚内边距*/
margin:0; /*清楚外边距*/
} 5、圆角边框
border-radius
border-radius:lenth;-
radius参数值可以用px为单位也可以用%为单位
-
如果是正方形，想要设置一个圆，把数据修改为高度或者宽度的一般即可，或者直接写成50%
-
如果是个矩形，设置为高度的一半就可以做
-
该属性是一个简写属性，可以跟四个属性值，分别是左上角、右上角、左下角、右下角
-
分开写border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius
<html>
<head>
<style>
div {
width: 300px;
height: 150px;
background-color: pink;
border-radius: 10px;
}
</style>
</head>
<body>
<d
border-top-left-radiusiv></div>
</body>
</html>
6、盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
-
默认的是外阴影（outside），但是不能写这个单词，否则会导致阴影无效
-
盒子阴影不占用空间，不会影响其他盒子排列
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: #ffc0cb;
margin: 100px auto;
box-shadow: 10px 10px 10px 10px black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7、文字阴影
text-shadow:h-shadow v-shadow blur color;属性：
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
二、CSS浮动
1、浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法：
选择器 {
float: 属性值；
}属性：
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动特性：
-
脱标
-
脱离标准普通的控制（浮）移动到指定位置（动），俗称脱标
-
浮动的盒子不再保留原先的位置
-
-
如果设置了多个盒子均浮动，则它们会按照属性值——行内显示并且顶端对齐排列
-
浮动元素具有行内块元素的特点
注意：
-
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
-
一个盒子里有多个盒子，如果其中一个盒子浮动了，那么其他盒子也应该浮动，以避免出现问题
<html>
<head>
<title>浮动</title>
<style>
.one {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="one">浮动的盒子</div>
<div class="two">没有浮动的盒子</div>
</body>
</html>
2、清除浮动
语法：
选择器 {
clear:属性值；
}属性：
| left | 不允许左侧有浮动（清除左侧浮动的影响） |
| right | 不允许右侧有浮动（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的ying'xiang |
方法：
（1）、额外标签法（隔墙法）
额外标签法会在浮动元素末尾添加一个空标签，例如<div style="clear.both"></div>，或者其他标签
-
优点：通俗易懂
-
缺点：添加许多无意义的标签，结构化较差
<html>
<head>
<title>浮动</title>
<style>
.box {
width: 800px;
height: 1px soild blue;
margin: 0 auto;
}
.box2 {
float:left;
width: 300px;
height: 200px;
background-color: purple;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="box2">1</div>
<div class="box3">2</div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>（2）、父级添加overflow属性
可以给父级添加overflow属性，将其值设置为hidden、auto、scroll
<html>
<head>
<title>浮动</title>
<style>
.box {
overflow: hidden;
width: 800px;
height: 1px soild blue;
margin: 0 auto;
}
.box2 {
float:left;
width: 300px;
height: 200px;
background-color: purple;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="box2">1</div>
<div class="box3">2</div>
</div>
<div class="footer"></div>
</body>
</html>（3）、父级添加after伪元素
:after方式是额外标签的升级版，也是给父元素添加
-
优点：没有增加标签，结构更简单
-
缺点：低版本浏览器不支持
<html>
<head>
<title>浮动</title>
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.box {
width: 800px;
height: 1px soild blue;
margin: 0 auto;
}
.box2 {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box2">1</div>
<div class="box3">2</div>
</div>
<div class="footer"></div>
</body>
</html>（4）、父级添加双伪元素
也是给父元素添加
-
优点：代码更简洁
-
缺点：低版本浏览器不支持
<html>
<head>
<title>浮动</title>
<style>
.clearfix:after,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.box {
width: 800px;
height: 1px soild blue;
margin: 0 auto;
}
.box2 {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="box2">1</div>
<div class="box3">2</div>
</div>
<div class="footer"></div>
</body>
</html>三、定位
1、定义
定位是将盒子定在某一个位置，所以定位也是摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
| relatie相对定位 | 否（占有位置） | 相对于自身位置移动 | 常用 |
| absolute绝对定位 | 否（不占有位置） | 带有定位的父级 | 常用 |
| fixed固定定位 | 否（不占有位置） | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否（占有位置） | 浏览器可视区 | 当前阶段少 |
2、定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
3、边偏移
边偏移就是定位的盒子移动到最终位置，
| top | top:80px | 顶端偏移量：定义元素相对于其父元素上下线的距离 |
| bottom | bottom:80px | 底部偏移量：定义元素相对于其父元素上下边线的距离 |
| left | left:80px | 左侧偏移量：定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量：定义元素相对于其父元素右边线的距离 |
4、静态定位
静态定位是元素的默认定位方式，无定位的意思。语法：
选择器 {
position:static;
}-
静态定位是按照标准流特性摆放位置，它没有边偏移
-
静态定位在布局中很少用到
5、相对定位
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。语法：
选择器 {
position:relative;
}特点：
-
它相对于自己原来的位置来移动的（移动的时候参照点是自己原来的位置）
-
原来在标准流的位置继续占有，后的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
6、绝对定位
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。语法：
选择器 {
position:absolute;
}特点：
-
如果没有祖先元素胡总和祖先元素没有定位，则以浏览器为准定位
-
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位祖先元素为参考点移动位置
-
绝对定位不再占有原先的位置（脱标）
7、子绝父相
子级是绝对定位的话，父级要用相对定位
-
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
-
父盒子需要加定位限制子盒子在父盒子内显示
-
父盒子布局时，需要占有位置，因此父亲只能是相对定位
8、固定定位
固定定位是元素固定于浏览器可视区的位置。语法：
选择器 {
position:fixed;
}固定定位特点：
1、以浏览器的可视窗口为参照点移动元素
-
跟父元素没有任何关系
-
不跟随滚动条滚动
2、固定定位不在占有原先的位置
固定定位在版心右侧：
-
让固定定位的盒子left：50%。走到浏览器可视区的一半位置
-
让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置
9、粘性定位
粘性定位可以认为是相对定位和固定定位的混合。语法：
选择器 {
position:sticky:10px;
}特点：
-
以浏览器的可视窗口为参照点移动元素
-
粘性定位占有原先的位置
-
必须添加top、left、right、bottom其中一个才有效
<html>
<head>
<title>test</title>
<style>
body {
height: 3000px;
}
.nav {
position: sticky;
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="nav">导航栏</div>
</body>
</html>10、定位的叠放次序
在使用定位布局时，可能会出现盒子重叠的情况，此时可使用z-index来控制盒子的前后次序（z轴）。语法：
选择器 {
z-index:1;
}-
数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上
-
如果属性值相同，则按照书写顺序，后来者居上
-
数字后面不能加单位
-
只有定位的盒子才有z-index属性
四、元素的显示与隐藏
1、dispaly显示隐藏元素
display属性用于设置一个元素该如何显示
-
diaplay:none：隐藏对象
-
display:block：除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后不占有原先位置
2、visibility显示隐藏元素
让一个元素在页面中隐藏或者显示出来
-
visibility:visible：元素可见
-
visibility:hidden：元素隐藏
visibility隐藏元素后继续占有原先的位置
3、overflow溢出显示隐藏
让一个元素在页面中隐藏或显示出来
| visible | 不剪切内容也不添加滚动条 |
| hidden | 显示超过对象尺寸的内容，超过的部分隐藏 |
| scroll | 不管有没有超出的内容，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
