CSS基础-6-CSDN博客

本文链接：https://blog.csdn.net/zqm_1994/article/details/131801027

一、CSS表格属性

1.border：设置表格边框，语法：border:1px solid red; (粗细边框样式边框颜色)

2.border-collapse：设置表格边框是否折叠成一个单一的边框或隔开

collapse：表示折叠

separate：表示分开

3.width和height：表格的宽度和高度

4.text-align：设置表格内容水平对齐方式

5.vertical-align：设置垂直对齐方式

6.padding：控制边框和表格内容之间的间距，应使用td和th元素

7.background-color：设置背景颜色

二、CSS边框属性

1.border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

2.border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

3.border-width属性设置一个元素的四个边框的宽度。此属性可以有一到四个值。

注: 1个值【4个边框都一样】，2个值【上下一组，左右一组】

3个值【左右一组,上边，下边】，4个值【4个边框各不相同】

上面这三个属性可以分为4组

border-top-color，border-right-color，border-bottom-color，border-left-color

border-top-style，border-right-style，border-bottom-style，border-left-style

border-top-width，border-right-width，border-bottom-width，border-left-width

我们可以通过border属性设置4边的边框

三、盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

四、CSS display与visibility

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

五、CSS position（定位）

1.static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象；静态定位的元素不会受到 top, bottom, left, right影响。

2.fixed：元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动，fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素和其他元素重叠。

3.relative：相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

4.absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>.；absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。

5.sticky：sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

示例：

<!DOCTYPE html>

<html>

<head>

<title>CSS Sticky</title>

<style>

div.sticky {

position: sticky;

top: 100px;

padding: 40px;

text-align: center;

color: blue;

background-color: #cae8ca;

border: 1px solid #4CAF50;

}

</style>

</head>

<body>

<p>来回滚动我</p>

<p>来回滚动我</p>

<p>来回滚动我</p>

</div>

<div class="sticky">我是粘性定位!</div>

</body>

</html>

六、CSS overflow（布局）

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

注意:overflow 属性只工作于指定高度的块元素上

overflow属性有以下值：

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。