边框border-*
- border-width(边框宽度)
- border-style:none, solid(实心), dashed(短横线),dotted(点线)
- border-color(边框颜色)
- border-radius(边框半径)
一个例子
- border统一写法(宽度,样式,颜色):border: 1px solid #f00;
- border 分 top right bottom left
border-top: 20px solid #f00;
border-right: 30px dashed #0f0;
border-bottom: 50px solid #00f;
border-left: 10px dotted #0ff;
- 覆盖写法
覆盖写法:需求,其他边都是5px,solid,黑色,只有右边是红色
border: 20px solid #000;
border-right-color: #f00;
border-radius: 20px;
- 关于方向的CSS样式,四种方法一次设定四个方向
以border-width为例
第一种:上右下左全部改成 40px border-width: 40px;
第二种,上下40px,左右20px border-width: 40px 20px;
第三种,上80px,下40px,左右 20px border-width: 80px 20px 40px;
第四种,上80px, 右20px, 下40px, 左10px border-width: 80px 20px 40px 10px;
border-color: #f00 #0f0 #00f #0ff;
内边距padding
padding也是上右下左四个方向
覆盖写法
padding: 5px;
padding-left: 1px;
一次性给出四个方向的设定
外边距margin
红色部分(background-color)是150+padding,黑色部分是border
border相当于盒子本身,padding就是相当于填充物,设定的高度宽度是瓷器大小,margin是这个盒子和其它盒子的间距
居中
块级元素居中-水平居中。经典的块级元素水平居中的办法
margin: 0 auto;
行内元素居中-水平居中-垂直居中
去除内外边距
外边距的合并
两个盒子的真实距离,不是两个盒子的margin之和,而是两个margin中最大的那个。
不要给两个盒子同时设定margin,把margin的值设定到一个盒子上
外边距的塌陷
TIPS:
什么情况下,padding不会撑开盒子?
当宽度没有设定的时候,padding不会撑开宽度
当高度没有设定的时候,padding不会撑开高度
一个例子
box-shadow(盒子阴影)
overflow(溢出)
visible-不剪切内容,不出滚动条(缺省)
auto-根据内容,决定使用hidden还是scroll
hidden-剪切内容,不出滚动条
scroll-剪切内容,无论如何都出滚动条,很丑
cursor(鼠标样式)
default pointer(手) move(移动) text(文本)
resize outline(轮廓)
outline:0 none
resize:none
本站技术原创文章,是由作者:常春 创作,如若转载请注明原文及出处:http://www.aiyouseo.com/jianzhan/1585.html