86133e1fbb8446eba359df02a5909cb6.jpg

border 边框

content 内容

padding内边距

margin外边

379e2a43a682474ab8b70c9fce998516.jpg

 

 1.边框 border

d303896ddd6a4747a452c78ab4fe3da6.jpg边框粗细px作为单位

borderstyle :

 solid 实线的  dashed虚线的    dotted 点的

 

边框的符合写法

那三个没有先后顺序

 

边框可以分开写

2ed1795203a64f698fbd5f670b417370.jpg

 

表格的细线边框

bordercollapse  控制相邻单元格的边框

bordercollapsecollapse 相邻单元格合并一起

 

边框会影响盒子的实际大小

 

 

2.内边距padding

 46309f01786b45a4acb04bc5dba68007.jpg

5f2e2d56dbfd4f5db5fe9fc8049ebec9.jpg

 padding影响盒子的实际大小

若保证盒子和效果图的大小一致,则让width / height减去多出来的内边距的大小

padding内边距可以撑开盒子,在做类似导航栏时,可以不给盒子宽度,直接给padding最合适

padding可以撑开盒子,有时候修改宽度

 

 

3.外边margin

fac8a648e50d4ffcbee455b7d3eb2bb8.jpg

1bd30cbd966b4c8e9e3cc1c6580a73b7.jpg

 

外边距可以让块级元素水平居中,满足条件

(1)盒子必须指定宽度

(2)盒子的左右外边距设置auto

f3a7cba74d9a4801868d704addc6ba6c.jpg

 以上方法是让块级元素水平居中行内元素或者行内元素水平居中给其父元素添加textaligncenter

 

0c4b955797464c79a6f26c0024eb9bfa.jpg

 (1)相邻块元素垂直外边距的合并

9f459d13d21e405d9780b8961f98f564.jpg

 取两者较大值就是相邻块元素垂直外边距的合并

解决方案:给一个盒子的外边距

 

(2)嵌套块元素垂直外边距的塌陷

7c7b0b419d7448b6beae75c365ca26ab.jpg

 对于两个嵌套关系(父子)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距

6e50b225693e47fc9372274479576da7.jpg 90d8726afa8441f889fc110affb107e3.jpg

 

 

清除内外边距:

网页元素很多都带有默认的内外边距,在布局时,首先要清除网页元素的内外边距。

20c971f446c54784aa8d512c5d3c10a2.jpg

 行内元素只设置左右外边距,不设置上下外边距

 

 

 

附:ps基本操作

df516b8eb2f341579b1094f88cf558cd.jpg

 

补:

1.圆角边框

9d9a3b798b6e4ba09e2aa43a0f7262e4.jpg 9526e08575a144d9953353ca033aa11a.jpg

 数值越大,圆的越明显

参数值可以是数值也可以是百分比

 

圆形的做法:数值为正方形高度的一半或50%

60d3d87e3fef44e6bbc5a46e3db00f64.jpg

 

圆角矩形做法:

圆角矩形设置为高度的一半

 

上面语法为简写:

可以跟两个值,三个值,四个值

四个值 :左上角 右上角 右下角 左下角顺时针

两个值:对角线 副对角线(交叉

feeeb59e3feb463c9125db5ba50f18ef.jpg

 

 

2.盒子阴影

5ee610f79d7f484d809780b84155cedb.jpg

 默认外部阴影,但是不可以写上去。

盒子阴影不占空间,不影响其他盒子的排列

 

鼠标经过,就会有阴影

f94bb232a7a246acbf419adf9879f9f3.jpg

 

 

3.文字阴影

12766397c3044b4b9604719443d67ea4.jpg

 

 

原文地址:https://blog.csdn.net/m0_62608983/article/details/128757486

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_24802.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注