传智播客前端学习第五天总结

目录

购物车

背景半透明

体会边框（ctrl+0复原浏览器）

边框宽，样式，颜色

边框四个边

合并相邻边框

边距

内边距

内边距撑开盒子的问题解决

padding不会撑开盒子大小

外边距

盒子水平居中

外边距合并

清除元素的默认内外边距

盒子圆角

盒子阴影

浮动

浮动标签

浮动特性

---

购物车

• left top 和 left bottom

背景半透明

• 单词：alpha
• 特点：0~1之间
• 使用：background-color：rgba（0,0,0,0.8）；（color：pink；是文字的颜色）

 

• 注：是rgba，不是rgb 

体会边框（ctrl+0复原浏览器）

边框宽，样式，颜色

• 单词：border-width，border-color，border-style
• 特点：三者缺一不可
• 使用：border：1px solid blue；（连写）

边框四个边

• 单词：border-top（bottom，left，right）
• 特点：可这样使用（border-top-color：red；）
• 使用：border-top：1px solid red；

合并相邻边框

• 单词：border-collapse
• 特点：多个边框会重叠导致边框线较粗
• 使用：table，td { border-collapse：collapse； }

边距

一个盒子的宽由width，padding，border组成

内边距

• 单词：padding
• 特点：盒子与内容间的距离（不方便给宽的时候用padding给盒子撑一撑）
• 使用：padding：10px 20px 30px 40px；（顺时针）

内边距撑开盒子的问题解决

将设定好的盒子大小减去内边距所占用的大小（div套div会变成盒子套盒子，而div并列会每个盒子占一行）

padding不会撑开盒子大小

子盒子不给宽，所以padding值不会撑开盒子

外边距

• 单词：margin
• 特点：盒子与盒子的距离
• 使用：margin：10px 20px 30px 40px；（顺时针）

盒子水平居中

• text-align：center；（让盒子的内容（内部的文字，行内元素，行内块元素）居中对齐）
• margin：0 auto；（只要保证左右是auto即可）

外边距合并

• 两个相邻盒子的距离为变成较大的那一个（解决方案：给一个盒子外边距即可） 
• 嵌套元素的垂直外边距合并（外部盒子无内边距和边框的情况下）（解决方案：overflow：hidden；溢出隐藏）

清除元素的默认内外边距

* { padding：0；  margin：0；}  （实际开发中一般会指定标签）

盒子圆角

• 单词：border-radius
• 特点：中心到角的距离
• 使用：border-radius：1px 1px 1px 1px；（50% 相当于 四个值为宽高的一般，前提是一个正方形）

盒子阴影

• 单词：box-shadow
• 特点：水平阴影，垂直阴影（有负值），模糊距离，阴影大小，阴影颜色
• 使用：box-shadow：0px 15px 30px（10px）rgba（0,0,0,0,0.1）；（少一个阴影大小）

 

• 注：transition：all 1s；（渐变）

浮动

• 标准流：块级元素占一行，从上到下。行内元素空格分开，从左到右。
• 浮动：利用浮动将多个div盒子一行内显示。

浮动标签

• 单词：float
• 特点：left，right，none
• 使用：float：left；

浮动特性

• 浮动不能跨越padding
• 多个一行内浮动的盒子需要和标准流的父级搭配使用
• 浮动会让元素默认转换为行内块元素