Web前端开发笔记20——盒子模型与阴影

本文详细介绍了CSS中的盒子模型概念,包括网页布局的过程、盒子的组成部分、如何设置细线边框、内边距与外边距的复合写法及用法、内外边距合并问题的解决方案等。此外还介绍了如何清除元素的默认内外边距、如何去除列表项前的小圆点、如何设置圆角矩形以及如何给文本添加阴影效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.网页布局过程:

  • 先准备好网页元素,网页元素基本都是盒子box。
  • 利用ccss设置好盒子样式,然后摆放到相应位置。
  • 往盒子里面装内容。

2.盒子的组成部分:

3.表格的细线边框:border-collapse属性控制浏览器绘制表格边框的方式。控制相邻单元格的边框。

语法:border-collapse:collapse;

  • collapse是合并的意思。

边框会影响盒子的大小。

4.padding的复合写法:

内边距会影响盒子大小。

为了保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小。(上面边框线的算法同理)

5.如果盒子本身没有指定width、height属性,则padding不会撑开盒子大小。

6.margin外边距标签:

margin和padding复合写法是一样的。

7.margin的典型用法:

8.外边距合并问题:

  • 相邻块元素垂直外边距的合并
  • 嵌套块元素垂直外边距的塌陷

解决方式:只设置一个边的边距。

9.清楚内外边距:网页元素很多都带有默认的内外边距。

注意点:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级或行内块级元素就可以了。

10.list-style:none;用于去掉li前面的项目符号(小圆点)。

11.border-radius:length;radius实际上就是一个半径,length就是圆的半径。

同时,也可以使用%来表示半径,其代表是宽度和高度的一半。

圆角矩形设置为高度的一般即可。

12.盒子阴影:

注:

  • 默认为外阴影,但是不可以写这个单词,否则阴影无效。
  • 盒子阴影不占用空间,不会影响其他盒子排序。

13.盒子阴影:text-shadow属性将阴影运用于文本中。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

言行物恒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值