ThikHome 2017-04-23
内边距
按照上、右、下、左的分别设置各地的内边距,各边可以使用不同的单位或百分比值:
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; } //还可以这样写 h1 {padding: 10px 0.25em 2ex 20%;}
如果上、右、下、左的值一样可以这样写
h1 {padding: 10px;} //个边值均为10
外边距
可以用margin来设置上下左右的外边距
margin 可以是任何长度单位。例如:像素、英寸、毫米、em
与内边距设置相同,这些值得顺序是从上外边距(top)开始围着顺时针旋转的
margin: top right bottom left
h1 {margin : 10px 0px 15px 5px;}
相对路径与绝对路径
通过position来定义路径类型。
position:absolute为绝对路径,
.div { position: absolute; left: 100px; top: 100px; }
position:relative;为相对路径,也就是在同一个<div/>标签中,相对于绝对位置的标签的位置。
.div { position: relative; left: 100px; top: 20px; }
boder边框属性
通过boder属性来定义边框样式;
边框四周宽度
.div { boder: 1px; }
设置边框四边宽度,(boder-top;boder-right;boder-bottom;boder-left);
设置边框颜色:
.div { boder-color: black; #8b8b8b; rgba(67, 138, 200, 0.91); } //还可以写成这种形式: .div{boder: 1px solid #8b8b8b} //就是边框宽度为1px的实线灰色边框;
还可以写成这种形式: boder: 1px solid #8b8b8b;就是边框宽度为1px的实线灰色边框;
bpder-radius设置边框圆角
如:bpder-radius:5px(圆角半径)
(border-top-left-radius; border-top-right-radius; border-bottom-left-radius; border-bottom-right-radius;)
设置文本水平对齐方式:text-align:center;(left;right)
设置垂直居中:line-height:50px(c垂直距离的二分之一)
设置居上:vertical-align:top;(left;right;bottom;)
给边框定义最小长宽:
最小高度: 例
.div { _height: 195px; min-height: 195px; //这样当div中的内容超过最小高度后,div会自动适应高度,将边框撑开