HTML与CSS学习 demo6

HTML与CSS学习

这篇笔记主要讲了CSS盒子模型(border，padding，margin)，圆角边框，盒子阴影，文字阴影
这篇笔记是初学者写下的笔记，如有错误，欢迎前来指正

CSS盒子模型

• border边框
• content内容
• padding内边距：边框和内容的距离
• margin外边距：盒子与盒子之间的距离
• 在审查元素里的CSS部分里的Computed里面可以看见这四个属性

边框 (border)

• 边框复合语法：

border: border-width | border-style | border-color;
/* 没有先后顺序，上面是推荐顺序 */

属性	作用
border-width	边框粗细，单位px
border-style	边框的样式
border-color	边框颜色

• border-style：solid (实线边框) dashed (虚线边框) dotted (点线边框)

• 分别设置四周边框：

border-top:
border-bottom:

表格细线边框

• table ， td 和 th 都要在CSS属性里，所有的部分才都有边框
• 两个单元格都有边框，导致边框变粗
• 解决方法：合并相邻单元格边框

border-collapse: collapse;
/* 表示相邻的边框合并在一起 */

• 注意：边框会影响盒子实际大小
• 实际大小 = 内容宽度 + border宽度*2

内边距 (padding)

• 内容跟边框的距离
• 可以通过方位名词来分别设置到四边的距离

padding-left: 20px;
padding-top: 20px;

padding复合属性

值的个数	属性
padding: 5px;	上下左右都是5px的内边距
padding:5px 10px;	上下为5px，左右为10px
padding: 5px 10px 20px;	上内边距是5px，左右内边距是10px，下内边距是20px
padding: 5px 10px 20px 30px;	上为5px，右为10px，下为20px，左为30px 按顺时针顺序

• padding也会影响盒子实际大小

• 注意：子类盒子在没有指定宽度的情况下不会撑大父类盒子

外边距 (magin)

• 盒子和盒子之间的距离

• 同样可以用方位名词来分别声明上下左右的外边距

• margin外边距复合属性写法和padding一致

margin应用：块元素水平居中

• 满足条件：

  1. 盒子必须指定了宽度
  2. 盒子左右外边距都设置为auto margin: 0 auto;

• 注意：无法给行内块元素和行内元素居中对齐

  • 解决方法，给父元素加属性text-align: center;

嵌套块元素塌陷

• 两个嵌套关系(父子关系)的块元素，父元素有上外边距，子元素也有上外边距，此时父元素会向下较大的外边距值

• 解决方案：

  • 给父元素一个上边框 (边框颜色透明参数transparent)
  • 给父元素定义上内边距
  • 给父元素添加overflow: hidden 常用

• 注意：浮动的盒子不会有外边距塌陷的问题

清除内外边距

• 网页内容默认携带内外边距

• 代码样例：

* {
  padding: 0;
  margin: 0;
  /* 所有的标签都选出来，清楚所有的内外边距 */
}

• 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。转换为块元素和行内块元素就可以随意设置

PS的基本操作

• Ctrl+R快速调出标尺 (单位像素)
• 按住空格，抓手工具
• Ctrl+D 取消选区

示例总结

• 遇到不知道什么时候用什么的标签

• 遇到产品标题用h 大量段落用p

• 盒子和盒子之间用margin

• 盒子和内容之间用padding

• 去掉li里的圆点list-style: none;

圆角边框

• 语法：

border-radius: length;
/* length是圆的半径，和矩形的两个边相切 */

• 常用写法：

• 圆形：

  • 圆角边框设置为正方形边长的一半(可以用百分比表示)

• 圆角矩形：

  • 圆角边框设置为高度的一半

• 复合属性

  • 一个参数时四个角都设置相同弧度
  • 两个参数左上和右下是第一个参数，右上和左下是另一个参数
  • 有四个参数时按顺时针顺序设置弧度

• 分别设置：

  • border-top-left-radius左上角
  • 先上下，后左右

盒子阴影

• 代码样例：

box-shadow: h-shadow | v-shadow | blur | spread | color | inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	模糊距离
spread	阴影的尺寸
color	阴影的颜色(rgba)
inset	将外部阴影(outset)改为内部阴影

• 注意：虽然outside为外阴影(默认值)，但写的时候不能把outside写在阴影属性里面，否则会导致阴影失效

• 阴影不占用空间，不会影响其他盒子

• 任何盒子都可以添加:hover属性

• 常用阴影：

box-shadow: 0 2px 4px rgba(0, 0, 0, .2);

文字阴影

• 代码样例：

text-shadow: h-shadow | v-shadow | blur | color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
bulr	模糊的距离
color	阴影颜色(rgba)