前端开发：3、CSS之边框、盒子模型、浮动、溢出、定位、重叠、display
前端开发之CSS
一、CSS之边框
CSS border属性允许您指定元素边框的宽度、样式和颜色。
支持单侧修改、属性名简写
1、单侧修改-以左侧为例（left）
border-left-width:5px;
border-left-styl:dotted;
border-left-color:red
简写：
border-left：5px dotted red
2、多侧同时修改
border：5px dotted red
3、变宽倒角
border-radius：50%
CSS 边框样式
border-style 属性指定要显示的边框类型。
允许以下值：
dotted- 定义点线边框dashed- 定义虚线边框solid- 定义实线边框double- 定义双边框groove- 定义 3D 坡口边框。效果取决于 border-color 值ridge- 定义 3D 脊线边框。效果取决于 border-color 值inset- 定义 3D inset 边框。效果取决于 border-color 值outset- 定义 3D outset 边框。效果取决于 border-color 值none- 定义无边框hidden- 定义隐藏边框
二、display属性
| 值 | 描述 |
|---|---|
| none | 彻底隐藏标签，页面上不会显示标签且不会保留标签位置 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
补充:
1、visibility: hidden 与none较为相似，隐藏的不彻底，页面会保留标签位置
2、行内标签无法设置长款，只有块儿级标签可以设置
三、盒子模型
可以将标签看成是一个盒子
-
1、盒子里面的实际物体
- content（内容）
-
2、盒子内物体与盒子墙壁的距离
- padding（内边距、内填充）
-
3、盒子的厚度
- border（变宽）
-
4、盒子与盒子的距离，可以看成多个盒子排列在一起
- margin（边境）
/* !*padding: 20px; 上下左右*!*/
/* !*padding: 20px 40px; 上下 左右*!*/
/* !*padding: 10px 20px 30px;上 左右 下*!*/
/* !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致
针对标签的嵌套 水平方向可以居中
margin: 0 auto;
四、CSS之浮动
float 属性
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
clear 属性
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
clear 属性可设置以下值之一：
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
- inherit - 元素继承其父级的 clear 值
使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。
在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。
清除浮动
如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：
然后我们可以向包含元素添加 overflow: auto;，来解决此问题：
.clearfix {
overflow: auto;
}
只要您能够控制外边距和内边距（否则您可能会看到滚动条），overflow: auto clearfix 就会很好地工作。但是，新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站：
.clearfix::after {
content: "";
clear: both;
display: table;
}
五、CSS之溢出
Overflow
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：
visible- 默认。溢出没有被剪裁。内容在元素框外渲染hidden- 溢出被剪裁，其余内容将不可见scroll- 溢出被剪裁，同时添加滚动条以查看其余内容auto- 与scroll类似，但仅在必要时添加滚动条
注释：overflow 属性仅适用于具有指定高度的块元素。
注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。
六、CSS之定位
position 属性
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
- static静态(标签默认的状态 无法定位移动)
- relative相对定位(基于标签原来的位置)
- fixed固定定位(基于浏览器窗口固定不动)
- absolute绝对定位(基于某个定位过的父标签做定位)
- sticky据用户的滚动位置进行定位。
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。
.c1 {
background-color: red;
height: 100px;
width: 100px;
position: relative;
}
.c2 {
background-color: greenyellow;
height: 100px;
width: 200px;
position: absolute;
top: 100px;
left: 100px;
}
.c1 {
border: 5px solid black;
height: 100px;
width: 100px;
position: fixed;
right: 100px;
bottom: 200px;
}
六、CSS之重叠元素
Z-index
在对元素进行定位时，它们可以与其他元素重叠。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
元素可以设置正或负的堆叠顺序：
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
