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)
关于浮动理解可参考大佬博客:
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先到这里,后续遇到不会的或者没见过的随时补充