CSS基础（3）

11.边框

边框颜色 border-color:#000

边框宽度 border-width:1px;

border-left 设置左边框，一般单独设置左边框样式使用

border-right 设置右边框，一般单独设置右边框样式使用

border-top 设置上边框，一般单独设置上边框样式使用

border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

边框样式值如下：

none : 　无边框。与任何指定的border-width值无关

hidden : 　隐藏边框。IE不支持

dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

solid : 　实线边框（常用）

double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

groove : 　根据border-color的值画3D凹槽

ridge : 　根据border-color的值画菱形边框

inset : 　根据border-color的值画3D凹边

outset : 　根据border-color的值画3D凸边

复合方式

border:5px solid red;

12.盒子模型

每个·HTML元素都可以视为一个矩形盒子，这些盒子可以包含内容、内边距、边框和外边距

外边距margin、边框border、内边距padding、内容content四个属性

自身的身高 width height

内边距 padding

盒子边框 border

与其他盒子的距离 margin 外边距

1.border 边框

常见的写法 border:1px solid #foo;

单独属性:

border-widh:

border-style:

dotted 点状虚线

dashed（虚线）

solid（实线）

double（双实线）

border-color(颜色)

2.padding 属性设置或返回元素的内边距。

该属性可使用 1 到 4 种值：

如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。

如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边距是 10px。

如果规定三种值，比如：div {padding: 50px 10px 20px} - 上内边距是 50px，左内边距和右内边距是 10px，下内边距是 20px。

如果规定四种值，比如：div {padding: 50px 10px 20px 30px} - 上内边距是 50px，右内边距是 10px，下内边距是 20px，左内边距是 30px。

3.margin 外边距

值：与padding相同

单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

margin:10px  上下左右都会腾出10px出来

margin:0px auto; 居中

4.content

元素的实际内容所在的区域，可以通过`width`和`height`属性设置其大小。

13.溢出

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

14.float  脱离文档流浮动

left  元素向左浮动。

right 元素向右浮动

清除浮动

clear: both;(/left/right)

关于浮动理解可参考大佬博客：

经验分享：CSS浮动(float,clear)通俗讲解 - 杨元 - 博客园 (cnblogs.com)https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

15.定位

position

static静态定位（不对它的位置进行改变，在哪里就在那里） 

默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。

fixed固定定位（参照物--浏览器窗口）---做 弹窗广告用到

生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。

relative（相对定位 ）（参照物以他本身）

生成相对定位的元素，相对于其正常位置进行定位。

absolute（绝对定位）(除了static都可以，找到参照物-->与它最近的已经有定位的父元素进行定位)

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(值越大越在上边）。

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

16.总结

css先到这里，后续遇到不会的或者没见过的随时补充