盒子模型

Posted 2020-07-27

一.边框样式：
1.border-color:边框颜色
　　1.1 border-top-color：上线颜色
　　1.2 border-bottom-color：下线颜色
.................................
　　1.3 border-color:颜色1 所有边框
　　1.4 border-color:颜色1 颜色2 上下为颜色1 左右为颜色2
　　1.5 border-color:颜色1 颜色2 颜色3 上为颜色1 左右为颜色2 下为颜色3
　　1.6 border-color:颜色1 颜色2 颜色3 颜色4 上右下左

2.border-width：指定的是边框的粗细
　　2.1 thin细
　　2.2 medium中等
　　2.3 thick粗
　　2.4 像素xxxpx
　　3.border-style：指定边框风格
　　3.1 none：默认
　　3.2 hidden：隐藏
　　3.3 dotted：圆点
　　3.4 dashed：虚线
　　3.5 solid：实线
　　3.6 double：双实线
4.border: 边框线宽度 颜色 边框风格
　　4.1 border:1px purple solid;
二.外边距
　　margin：外边距，盒子与盒子
　　margin-top：上外边距
　　margin-right：下外边距
　　margin-bottom
　　margin-left
　　margin:0px auto; 网页居中对齐的必要条件 1.块元素 2.固定宽度
三.内边距
　　padding：内边距，内容与盒子
　　padding-left ：左内边距
　　padding-right
　　padding-top
　　padding-bottom
　　padding：位置1 位置2 上下为位置一 左右为位置二
四.盒子模型尺寸
　　盒子模型总尺寸=border+padding+margin+内容宽度
　　box-sizing：content-box | border-box | inherit;
　　content-box:默认值，盒子的宽度或者高度=border+padding+(margin)+width/height
　　border-box:盒子的宽度或者高度等于元素内容的宽度或者高度
　　inherit：元素集成父元素的盒子模型模式
五.圆角
　　border-radius：圆角
　　border-radius：20px 10px 50px 30px; 四个属性值按顺时针排列

1.原形：
　　border-radius: 50%; 宽度和高度相同
2.半圆：
　　border-radius: 150px 150px 0px 0px; 两个角变，两个角不变，按照顺序，上半圆和下半圆宽度是高度的二倍，左半圆和右半圆高度是宽度的二倍
3.四分之一圆：
　　border-radius: 0px 0px 150px 0px; 一个角变，按照顺序，宽度和高度相同
六.盒子阴影
　　box-shadow:10px 10px 30px yellow;
　　inset：内阴影.