CSS各种样式属性快速查询（2）

写在前面：

        这篇文章不是教程，更偏向于在实战时记不清某些属性的时候作查询用。

        如果对你有用的话，可以关注我追更呀（笔芯·.jpg）

目录

写在前面：

图片

宽&高

对齐方式

水平对齐

垂直对齐

文字相对图片出现的位置

边框

设置所有边框

设置四边边框中的一边

为四条边各自设置样式

边宽

边框风格/样式

边框颜色

边框弧度

所有边框一样弧度

四个角弧度不同

水平和垂直各自四个角弧度不同

折叠边框

---

图片

weight	宽
height	高
text-align	对齐方式（水平）
vertical-align	对齐方式（垂直）
float	文字相对图片出现的位置
opacity	透明度
border	边框

宽&高

weight: 500px;
height: 1080px;

注：有两种方式供选用：直接规定像素大小或者可以用百分比

        使用像素时，如果只设置图片宽或高，图片等比例放大或缩小；如果两个都设置，则将设置好的宽和高充满

        百分比由相对于父标签的宽&高的比例决定

对齐方式

水平对齐

text-align: center;/*居中*/
text-align: left;/*左*/
text-align: right;/*右*/

注：img也属于文本的一部分，所以和文字的对齐一样使用text-align，没有img-align！

垂直对齐

vertical-align: middle;/*居中*/
vertical-align: top;/*顶*/
vertical-align: bottom;/*底*/

文字相对图片出现的位置

float: left; /*图片在字左边*/
float: right; /*图片在字右边*/

边框

border	所有边框
border-top	设置四边边框中的一边
border-bottom
border-left
border-right
border-width	边宽
border-style	边框风格/样式
border-color	边框颜色
border-radius	边框弧度
border-collapse	折叠表格边框

设置所有边框

border: 2px solid blue;

注：2px，solid和blue是三个属性（这里是简写），所以每两个属性之间用空格隔开

        2px指的是边框宽度，多用数字

        solid指的是边框样式，有solid（实线），dashed（虚线），dotted（点线），double（双线）。

        blue指颜色，可以用单词或数字。

设置四边边框中的一边

border-top: 2px solid blue;/*上*/
border-bottom: 2px solid blue;/*下*/
border-left: 2px solid blue;/*左*/
border-right: 2px solid blue;/*右*/

注：2px，solid和blue的使用方式和注意事项同上

为四条边各自设置样式

注：当边框属性为一个时，改变全部边框；

        当边框属性为二个时，第一个值改变上下，第二个值改变左右；

        当边框属性为三个时，第一个值改变上，第二个值改变左右，第三个值改变下；

边宽

border-width:5px;
border-width:5px 10px;
border-width:5px 10px 5px;
border-width:5px 5px 10px 5px ; 

边框风格/样式

border-style:solid;
border-style:solid dashed ;
border-style:solid dashed dotted ;
border-style:solid dashed dotted solid ;

注：边框样式有solid（实线），dashed（虚线），dotted（点线），double（双线）。

边框颜色

border-color:blue;
border-color:blue green;
border-color:blue green yellow;
border-color:blue green yellow red;

注：颜色可以用单词或数字，详见CSS各种样式属性快速查询（1）。

边框弧度

所有边框一样弧度

border-radius: 10px;
border-radius: 10%;

四个角弧度不同

border-radius: 10px 20px;

注：如果两个属性，第一个值表示左上和右下，第二个值表示右上和左下。（呈对角线分布）

border-radius: 10px 20px 25px;

注：如果三个属性，第一个表示左上，第二个值表示右上和左下（反对角线），第三个表示右下。

border-radius: 10px 20px 25px 30px;

水平和垂直各自四个角弧度不同

border-radius:100px/50px;
border-radius: 20px 30px 40px 50px/60px 70px 80px 90px;

注：斜杠左边的值表示水平半径，右边的值表示垂直半径。

        可以同时设置1到4个值，中间用空格分开。水平半径的最后一个和竖直半径的第一个之间没有空格。

折叠边框

border-collapse: collapse; /*将表格和单元格的边框折叠*/
border-collapse: inherit; /*从父元素继承*/

To be continued...