CSS常见样式(二)

边框border-*

  • border-width(边框宽度)
  • border-style:none, solid(实心), dashed(短横线),dotted(点线)
  • border-color(边框颜色)
  • border-radius(边框半径)

CSS常见样式(二)

一个例子

CSS常见样式(二)

  • 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常见样式(二)

  • 关于方向的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;
一次性给出四个方向的设定

CSS常见样式(二)

外边距margin

红色部分(background-color)是150+padding,黑色部分是border

border相当于盒子本身,padding就是相当于填充物,设定的高度宽度是瓷器大小,margin是这个盒子和其它盒子的间距

CSS常见样式(二)

居中

块级元素居中-水平居中。经典的块级元素水平居中的办法

margin: 0 auto;

行内元素居中-水平居中-垂直居中

去除内外边距

CSS常见样式(二)

外边距的合并

两个盒子的真实距离,不是两个盒子的margin之和,而是两个margin中最大的那个。
不要给两个盒子同时设定margin,把margin的值设定到一个盒子上

外边距的塌陷

CSS常见样式(二)

CSS常见样式(二)

TIPS:

什么情况下,padding不会撑开盒子?
当宽度没有设定的时候,padding不会撑开宽度
当高度没有设定的时候,padding不会撑开高度

一个例子

CSS常见样式(二)

box-shadow(盒子阴影)

CSS常见样式(二)

overflow(溢出)

visible-不剪切内容,不出滚动条(缺省)
auto-根据内容,决定使用hidden还是scroll
hidden-剪切内容,不出滚动条
scroll-剪切内容,无论如何都出滚动条,很丑

CSS常见样式(二)

cursor(鼠标样式)

default        pointer(手)        move(移动)        text(文本)

CSS常见样式(二)

resize  outline(轮廓)

outline:0        none

resize:none

CSS常见样式(二)

 

本站技术原创文章,是由作者:常春 创作,如若转载请注明原文及出处:https://www.aiyouseo.com/jianzhan/1585.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注