组成:边框、外边距、内边距、内容
边框(border):三部分组成“ 边框粗细、边框样式、边框颜色 ”
属性 | 作用 |
---|---|
border-width | 定义边框的粗细,单位是px |
border-style | 边框的样式 solid(实线) dashed(虚线)dotted(点线) |
border-color | 边框颜色 |
简写border:1px solid red;
没有顺序!!!
边框的每一条边都能定义样式( border-top / bottom / left / right )
注意:这里在定义不同边的时候一定要注意层叠性!!!
表格的细线边框:解决表格边框粗细叠加的问题
border-collapse: collapse;
表示把相邻的边框合并在一起
内边距(padding):设置内边距,即边框与内容之间的距离
padding-left / right / top / bottom
分别定义四边的内边距
简写方式
值的个数 | 表达意思 |
---|---|
padding: 5px; | 代表4边的内边距都是5px |
padding: 5px 10px ; | 代表上下内边距是5px,左右内边距是10px |
padding: 5px 10px 20px ; | 代表上内边距是5px,左右内边距是10px,下内边距是20px |
padding: 5px 10px 20px 30px ; | 代表上内边距是5px,右10px,下20px,左30px,顺时针 |
注意:
外边距:用于控制盒子与盒子之间的距离
margin-left / right / top / bottom
分别定义四边的外边距
和padding语法基本相同
块级盒子水平居中
行内元素或者行内块元素水平居中给其父元素添加 text-align:center;即可
外边距合并:在使用margin定义块元素的垂直外边距时,可能会出现外边距合并
嵌套块元素塌陷解决方法:
清除内外边距:网页元素很多都会带有默认的内外边距,而不同浏览器的默认值不一致,所以我们在布局前,首先要清楚内外边距
*{
margin:0;
padding:0;
}
注意:行内元素尽量只设置左右内外边距
清除无序列表的小圆点
li{
list-style: none;
}
很常用!加上这行代码可以去掉小圆点
圆角边框:把盒子变成圆角的
border-radius: 10px;
通过设定radius(半径)的值来确定圆弧的大小,用该半径的圆去与盒子的两条相邻边切
所以数值越大弧度越明显
要想要做出圆形的盒子,先设置一个正方形盒子,在让半径等于边长的一半
width: 200px;
height: 200px;
border-radius: 50%;
圆角矩形:把半径设为盒子高度的一半
注意:border-radius可以设置多个值,4个数值是从左上角开始,顺时针的4个角的弧度
盒子阴影:用box-shadow来给盒子添加阴影
值 | 描述 |
---|---|
h-shadow | 必写,水平阴影的距离 |
v-shadow | 必写,垂直阴影的距离 |
blur | 模糊距离(虚实) |
spread | 阴影的尺寸 |
color | 阴影颜色,一般用半透明的 |
inset | 内阴影还是外阴影 |
注意:盒子阴影不占用空间,不影响其他盒子的排列
文字阴影:用text-shadow来添加阴影
值 | 描述 |
---|---|
h-shadow | 必写,水平阴影的距离 |
v-shadow | 必写,垂直阴影的距离 |
blur | 模糊距离(虚实) |
color | 阴影颜色,一般用半透明的 |
和盒子阴影写法一样