CSS学习笔记二

星石传说

已于 2023-11-06 12:20:12 修改

阅读量32

点赞数

分类专栏： python篇文章标签： css 学习笔记

于 2023-10-27 17:31:22 首次发布

本文链接：https://blog.csdn.net/2301_78630677/article/details/133819968

版权

python篇专栏收录该内容

92 篇文章 10 订阅

订阅专栏

CSS学习笔记二

前言

继续学习CSS的知识

一、盒模型

所有的HTML元素都可以被认为是盒子。CSS盒模型代表网站的设计和布局。
它由外边距(margin)，边框(border)，内边距（填充）(padding)和实际内容（content）组成。
属性以顺时针的顺序工作：顶部(top)，右侧(right)，底部(bottom)和左侧(left)

1.1. 元素的总宽度和高度

CSS通过盒模型来确定一个元素的大小以及如何放置它们。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

最终元素的总宽度和高度计算公式如下：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素高度 = 高度 + 顶部填充 + 底部填充 + 顶部边框 + 底部边框+ 顶部边距 + 底部边距

在盒模型中设置背景颜色时，将覆盖内容区域以及填充区域(padding)

1.2. border属性

语法：border: border-width | border-style | border-color

CSS的border属性允许自定义HTML元素的边框。为了向元素添加边框，您需要指定边框的大小，样式和颜色。

border-style属性

border-style的默认值是none，它没有定义边界。边框样式属性支持各种样式：点状(dotted)，虚线(dashed)，双线(double)，solid(实线)

在CSS中，可以使用以下属性为不同的边指定不同的边框：

border-top-style：上边框
border-right-style：右边框
border-bottom-style：下边框
border-left-style：左边框

border-width属性
border的属性可以单独设置。 border-width属性指定边框的宽度。
border-color属性
可以使用颜色名称关键字，RGB或十六进制值定义元素的边框颜色

1.3. height和width属性

这里注意不要和盒模型的总宽度和高度弄混

元素的宽度和高度也可以使用百分比来分配.

要设置元素的最小和最大高度或者宽度，可以使用以下属性：
min-width - 元素的最小宽度
min-height - 元素的最小高度
max-width - 元素的最大宽度
max-height - 元素的最大高度

二、背景属性

2.1. background-color属性

用于指定元素的背景颜色。

background-color属性为元素设置一种纯色背景。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

可以使用三种不同的格式的参数来定义：

颜色名称关键词：red、blue等；
十六进制值：#fff、#000、#6e6e6e等；
RGB：rgb(255,255,255)、rgba(0,0,0,0.5)等（使用rgba可以实现透明背景色）

2.2. background-image属性

background-image属性在元素中设置一个或多个背景图像

语法：background-image : url(图片路径)

2.3. background-repeat属性

background-repeat属性指定如何重复背景图像。
背景图像可以沿水平轴，垂直轴，两个轴重复，或者根本不重复。

background-repeat属性设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。

允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。

如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值。

repeat的取值如下:
repeat：背景图像在横向和纵向平铺，默认值。
repeat-x：背景图像在横向上平铺。
repeat-y：背景图像在纵向上平铺。
no-repeat：背景图像不平铺。
round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：背景图像以相同的间距平铺且填充满整个容器或某个方向（CSS3）

当将background-repeat属性设置为inherit时，它将采用与元素父级的属性相同的指定值。

2.4. background-attachment属性

background-attachment属性设置背景图像是固定的还是与页面的其余部分一起滚动。

background-attachment属性的参数：
scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。
inherit：规定应该从父元素继承 background-attachment 属性的设置。

三、CSS属性

3.1. 列表样式

CSS列表属性允许我们设置不同的列表项标记。在HTML中，有两种类型的列表：无序列表（< ul >）、有序列表（< ol >）

使用CSS，列表可以进一步风格化，图像可以用作列表项标记。其中一种方法是使用list-style-type属性，来设置列表的标签。具体设置如下：

none：无标记

disc：默认，标记是实心圆

circle：标记是空心圆。

square：标记是实心方块。

decimal：标记是数字。

decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)

lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)

upper-roman：大写罗马数字(I, II, III, IV, V, 等。)

lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

还有其他列表属性，如：

list-style-image ：图像设置为列表中的项目标记。
list-style-position ：指定标记框的位置（属性值包括：inside, outside），"list-style-position: outside"是默认值。

list-style属性是设置list-style-type，list-style-position和list-style-image的简写属性。
它用于在一个声明中设置所有的列表属性：

ul {
   list-style: square outside none;
}

/*未简化版*/
ul {
   list-style-type: square;
   list-style-position: outside;
   list-style-image: none;
}

3.2. 表格样式

border-collapse属性

border-collapse属性指定表格边框为设置合并边框或默认分开。
如果边框是分开的，则可以使用border-spacing属性来更改间距。

collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
inherit：规定应该从父元素继承 border-collapse 属性的值。

caption-side属性

caption-side属性指定表标题的位置。值可以设置为 top 或 bottom

empty-cells属性

empty-cells属性设置是否显示表格中的空单元格（仅用于"分离边框"模式）
参数值可以是：

show：在空单元格周围绘制边框。默认。
hide ：不在空单元格周围绘制边框。
inherit：规定应该从父元素继承 empty-cells 属性的值

table-layout属性

table-layout指定如何计算表格列的宽度。

参数值可以是：

auto：默认。列宽度由单元格内容设定。
fixed ：列宽由表格宽度和列宽度设定。

3.3. 链接样式

链接可以使用任何CSS属性（例如，color，font-family，background等）来设置样式。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

以下四个链接状态是：

a:link - 定义普通的、未被访问的链接
a:visited - 定义已被访问的链接
a:active - 链接被点击的时刻
a:hover - 鼠标指针位于链接的上方

当为链接设置样式时，必须遵循以下规则：
a:hover 必须在a:link和a:visited之后；a:active 必须在a:hover之后

默认情况下，文本链接由浏览器加下划线。

处理带链接的文本CSS最常见的用法之一是删除下划线。text-decoration属性用于删除下划线

a:link {
   text-decoration: none;
}

3.4. 自定义鼠标光标样式

cursor属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

cursor属性还有许多其他的值，例如：

auto -默认，浏览器设置的光标
default - 默认光标
crosshair - 光标显示为十字准线
pointer - 光标显示手形图标
move -此光标指示某对象可被移动
e-resize -此光标指示矩形框的边缘可被向右（东）移动
ne-resize-此光标指示矩形框的边缘可被向上及向右移动（北/东）
nw-resize-此光标指示矩形框的边缘可被向上及向左移动（北/西）
n-resize -此光标指示矩形框的边缘可被向上（北）移动
se-resize-此光标指示矩形框的边缘可被向下及向右移动（南/东）
sw-resize-此光标指示矩形框的边缘可被向下及向左移动（南/西）
text -此光标指示文本
wait -此光标指示程序正忙（通常是一只表或沙漏，在win10中以一个旋转的圆环表示）
help -此光标指示可用的帮助（通常是一个问号或一个气球）

四、CSS定位与布局

4.1. display属性

网页上的每个元素都是一个盒模型。display属性决定了盒模型的行为方式，设置元素如何被显示。

display常用的属性共有4个值：

display: none; – 让标签消失(隐藏元素并脱离文档流)
display: inline; – 内联元素(内联标签)
display: block; – 块级元素(块级标签)
display: inline-block; – 既有inline的属性也有block属性

display：block
block(块元素)是占用最大可用宽度的元素，此元素将显示为块级元素，此元素前后会带有换行符。
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度
block元素可以设置width和height属性。块级元素即使设置了宽度,仍然是独占一行
block元素也可以设置margin和padding属性
display: inline
转换为内联元素(内联表签)。
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
inline元素的宽度是自身内容的宽度(默认有多少占多少)
inline元素设置width和height属性无效
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display：none
display:none 隐藏一个元素
display:none属性-不占用任何空间
display:none属性-隐藏当前元素，它的子元素也一定无法显示
display:none属性-会引起页面重绘和回流，脱离文档
该元素将被隐藏，在页面显示时不会展现出来，就好像该元素不存在一样。
display：inline-block
display：inline-block属性，既有inline的属性也有block属性
它结合了上述inline和block的特点，如下：
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行
能够改变元素的height，width的值
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果

4.2. visibility属性

visibility属性用于指定元素的可见性。即元素是可见的还是隐藏的.

最常见的值是visible和hidden。

visibility：visible属性值定义的元素是可见的，元素会显示出来，是默认的属性值。
visibility：hidden属性值定义的元素是不可见的，元素不会显示出来，但还会占据原有的空间。
我们可以将visibility属性设置为“hidden”来隐藏元素。

display:none是彻底消失，不占空间，浏览器也不会解析该元素，当diaplay值为none时会产生回流和重绘
visibility:hidden只是看不到了，但占有相对空间，不会彻底消失，浏览器会解析该元素，只重绘不回流

4.3. position属性

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。可以使用top, bottom, left, 和 right属性来定位元素。

position属性的值可以为：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static：默认值。没有定位（静态定位），元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit：规定应该从父元素继承 position 属性的值。