WEb开发之H5+CSS篇

最新推荐文章于 2024-07-10 16:05:14 发布

原创最新推荐文章于 2024-07-10 16:05:14 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html #html5 #前端

笔记同时被 3 个专栏收录

150 篇文章

订阅专栏

橘子太酸辣

118 篇文章

订阅专栏

橘子超酸辣

48 篇文章

订阅专栏

本文详细介绍了H5中的CSS盒子模型，包括边框(border)、外边距(margin)、内边距(padding)以及内容(content)的属性和用法。特别强调了如何利用外边距实现块级元素的水平居中，以及解决嵌套块元素垂直外边距塌陷的问题。此外，还提到了清除内外边距的方法，并展示了如何使用CSS3创建圆角边框和阴影效果。文章最后提供了关于文字阴影的实现方式。

WEb开发之H5+CSS篇

盒子模型的四个组成部分

边框（border）

border-width 边框粗细

border-style 边框样式

dotted 点线边框

solid 实线边框

dashed 虚线边框

border-color 边框颜色

border-top

border-bottom

border-left

border-right

注意：测量盒子大小的时候，不量边框。

如果测量的时候包含了边框，需要width/height减去边框宽度
外边距(margin)

margin-left 左外边距

margin-right 右外边距

margin-top 上外边距

margin-bottom 下外边距

注意：外边距可以让***块级盒子水平居中***，但必须满足两个条件：

1.盒子必须指定了宽度（width）。

2.盒子左右的外边距都设置为auto。
内边距(padding)

padding-left 左内边距

padding-right 右内边距

padding-top 上内边距

padding-bottom 下内边距

简写属性：padding:5px 上下左右

padding:5px 10px 上下左右

padding:5px 10px 20px 上左右下

padding:5px 10px 20px 30px 上右下左

注意：内容和边框有了距离，添加了内边距。

padding影响了盒子实际大小。

如果保证盒子跟效果图保持一致，则让***width/height减去多出来的内边距大小***即可。

技巧：行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
内容(content)
嵌套块元素垂直外边距的塌陷

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

解决方案

1.为父元素定义上边。 transparent透明

2.为父元素定义上内边距。

3.为父元素添加overflow:hidden。
清除内外边距

*{margin：0 ； padding：0}