CSS这件小事儿

最新推荐文章于 2024-05-27 08:01:07 发布

miao_599

最新推荐文章于 2024-05-27 08:01:07 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

分类专栏： css的tips 文章标签： CSS盒子模型

本文链接：https://blog.youkuaiyun.com/miao_599/article/details/89743492

3 篇文章

订阅专栏

本文整理了CSS零碎知识点，包括图片插入与背景图的大小、位置修改方法，清除元素默认内外边距，行内元素内外边距特点，外边距合并问题及解决方案，列表创建与样式设置，盒模型类型，以及盒子阴影设置等内容。

图片插入更改大小是用width和height，修改位置用margin，
背景图改大小，则用background-size，位置用background-position

清除元素默认内外边距用*{margin：0；padding:0}
行内元素只有左右内外边距，上下无效果或者效果不好
外边距合并，垂直的块级盒子以最大外边距为主，如：50+100->100
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中大的，即使父元素的上外边距为0，也会发生合并。

解决方案 1）为父元素定义1px的上边框或上内边距2）为父元素添加overflow：hidden
有序列表ol>li*3然后击Tab键创立;无序列表ul>li*3;去除圆点用list-style：none
设置样式时有优先使用width，其次padding，再次margin。当分不清内外边距时，采用宽度剩余法或者高度剩余法（即申请额外的width和height）
W3C推荐使用的盒模型 box-sizing：content-box（默认值）；此时盒子大小为width+padding+border。另外CSS3中新增一个模式：box-sizing：border-box，此时盒子大小就是width，即padding和border是包含在width里的，不会撑开盒子，不需要再进行计算了
盒子阴影 box-shadow：水平位置（必须）垂直位置（必须）模糊距离阴影尺寸（影子大小）阴影颜色内外阴影inset是内，outset是外（默认，可以不写）