零基础Vue的小白学习路——CSS基础（三）表格相关属性、背景相关属性、盒子模型、浮动

最新推荐文章于 2024-05-11 14:48:12 发布

mapleleaves0520

最新推荐文章于 2024-05-11 14:48:12 发布

阅读量649

点赞数

文章标签： vue.js 学习 css

本文链接：https://blog.csdn.net/qq_36215279/article/details/132267463

版权

表格相关属性：
- 1、边框相关属性：
  - border：像素大小，颜色，形状
- 2、表格独有属性：
  - table-layout：控制表格列宽
  - border-spacing：控制单元格间距
  - border-collapse：合并相邻单元格的边框
  - empty-cells：控制是否隐藏没有内容的单元格
  - caption-side：设置表格标题的位置
背景相关属性：
- background-color：设置背景颜色
- background-image：url() ：设置背景图片
- background-repeat：设置背景的重复方式
- background-position：控制背景图片的位置
  - 1、水平垂直的位置名
  - 2、具体像素值控制
- background：复合属性
鼠标相关属性：
- cursor：
  - 鼠标形状：move（移动）、wait（等待）、crossshair（十字架）、help（帮助）、pointer（手）、cursor：url()（自定义鼠标形状）
CSS长度单位：
- px（具体像素值）
- em（字体大小的倍数）
- rem（根元素字体大小的倍数）
- %（相对其父元素的百分比）
元素的显示模式：
- 块元素：独占一行，不会与任何元素共用一行，从上到下排列，宽度撑满整个父元素。高度由内容撑开。
  - 主题结构标签：html、body
  - 排版标签：h1~h6、hr、p、pre、div
  - 列表标签：ul、ol、li、dl、dt、dd
  - 表格相关标签：table、caption、tbody、thead、tfoot、tr
  - form、option
- 行内元素：不独占一行，宽高由内容撑开。无法设置宽高。
  - 文本标签：br、em、strong、sup、sub、del、ins、span
  - a、label
- 行内块元素：不独占一行，宽高由内容撑开。可以设置宽高。
  - 图片：img
  - 单元格：td、th
  - 表单控件：input、textarea、select、button
  - 框架标签：iframe
修改元素的显示模式：
- display：修改元素的默认显示模式
  - block/inline-block/inline/none
盒子模型：
- 内容：content
  - height/width/min-width/max-width/min-height/max-width
  - 注意：盒子模型默认宽度=父元素的content宽度 - 自身左右的margin
  - 内容溢出问题：
    - overflow ： hidden/scroll/visible/auto
- 内边距：padding
  - 单独设置：padding/padding-left/padding-right/padding-top/padding-bottom
  - 复合属性：padding：上下，左右（两个值）。上，左右，下（三个值）。上、右、下、左（四个值）。
  - 注意：行内元素padding不单独占位置，可能会与其他紧邻元素产生重叠。
- 边框：border
  - 单独设置：border-width、border-color、border-style(每一条边框还可以单独设置，指定上下左右位置即可，例如border-left-width)
  - 复合属性：border：像素大小、颜色、形状（每一条边框可以单独设置，指定上下左右位置即可，例如border-left）
- 外边距：margin
  - 单独设置：margin-left、magin-right、magin-top、magin-bottom
  - 复合属性：margin
  - 注意：1、子元素的magin是根据父元素的content来计算的；2、块元素或行内块元素设置上、左margin影响自身位置，下、右margin影响兄弟元素位置；3、行类元素设置上下margin不起作用，可以设置左右margin。4、margin左右值设置为auto，可实现元素在其父元素的水平居中。5、margin值可以为负值
  - margin塌陷问题：给第一个子元素的上margin和最后一个子元素的下margin会作用给父元素。可以通过给父元素设置不为0的padding或border来解决，也可以使用overflow：hidden解决。
  - margin合并问题：上下margin可以合并（取margin最大值），左右margin不行。
- 隐藏元素的两种方式：
  - 1、display：none 隐藏了且不占位
  - 2、visibility：hidden 隐藏了但仍占位
- 样式的继承：
  - 继承属性：字体属性、文本属性（除了vertical-align）等
  - 不会继承：边框、背景、内边距、外边距、宽高、溢出方式等。
- 元素的默认样式：
  - 元素一般都有默认的样式，例如：
    - 1、<a>：下划线、字体颜色、鼠标形状
    - 2、<h1>-<h6>：文字加粗、字体大小、上下外边距
    - 3、<p>元素：上下外边距
    - 4、<ul>、<ol>：左内边距
    - 5、<body>：8px外边距
  - 优先级：元素的默认样式 > 继承的样式
- 布局技巧：
  - 1、行内元素、行内块元素，可以被父元素当作文本处理：可以处理行内元素、行内块元素在父元素中的对齐。例如：text-align/line-height/text-indent等。
  - 2、让子元素在父元素中水平居中：
    - 若子元素为块元素：给父元素加上margin：0 auto；
    - 若子元素为行内元素/行内块元素：给父元素加上text-align：center。
  - 3、让子元素在父元素中垂直居中：
    - 若子元素为块元素：给子元素加上margin-top：（值为父元素content - 子元素盒子总高）/ 2
    - 若子元素为行内元素、行内块元素：让父元素的height = line-height，父元素font-size设置为0。每个子元素加上vertical-align：middle。
- 元素之间的空白问题：行内元素、行内块元素，彼此之间的换行会被解析为一个空白字符。
  - 1、去掉换行和空格（不推荐）
  - 2、给父元素设置font-size：0，再给需要显示文字的元素，单独设置字体大小。
- 行内块的幽灵空白问题：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
  - 1、给行内块设置vertical-align：bottom/top/middle。
  - 2、若父元素中只有一张图片，则设置图片为块元素，display：block。
  - 3、给父元素设置为font-size = 0。如果该行内块内部还有文本，则还需单独设置需要显示文本的font-size。
浮动：早期用来实现文字环绕图片效果，现在是主流的页面布局方式之一。
- 元素浮动的特点：
  - 1、脱离文档流
  - 2、浮动后默认宽高都由内容撑开，而且可以设置宽高
  - 3、不会独占一行
  - 4、不会margin合并，也不会margin塌陷
  - 5、不会像行内块一样被当作文本处理（没有行内块的空白问题）
- 浮动后的影响：
  - 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
  - 对父元素的影响：不能撑起父元素的高度，导致父元素的高度塌陷；但父元素的宽度依然束缚浮动的元素。
- 解决浮动后的影响：
  - 父元素高度塌陷问题：
    - 1、给父元素设置高度
    - 2、父元素浮动
    - 3、overflow：hidden
    - 4、clear
    - 5、::after{content:'' ； display:block； clear:both}
- 浮动进行页面布局：（待续）