CSS基础知识汇总梳理

最新推荐文章于 2024-07-21 20:52:32 发布

真的不想起床

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量367

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45985175/article/details/118530999

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、css实例

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

p {
color:red;
text-align:center;
}

2、CSS 注释

CSS注释以 /* 开始, 以 */ 结束

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

3、插入样式表

外部样式表
内部样式表
内联样式

外部样式表

每个页面使用标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存

2.1、内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

2.2、内联样式

当样式仅需要在一个元素上应用一次时。要使用内联样式。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

2.3、多重样式优先级

一般情况下，优先级如下：

内联样式> 内部样式 >外部样式 > 浏览器默认样式

4、background

background-color
背景颜色
background-image
元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
background-repeat
不想让图像平铺，使用 background-repeat 属性
background-attachment
设置背景图片是否固定或者随着页面的一部分滚动
background-position
可以利用 background-position 属性改变图像在背景中的位置

5、宽度和高度

height 和 width 属性用于设置元素的高度和宽度。
height和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度

5.1、CSS 高度和宽度值

height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。
inherit - 从其父值继承高度/宽度。

5.2、 max-width

可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。

6、Text文本

6.1、文本颜色

h1 {color:#00ff00;}

6.2、对齐方式

左 left 文字居左
右 right 文字居右
居中 center 文字居中
文字两端对齐 justify 文字前后两端对齐

h1 {text-align:center;}

6.3、文本修饰

overline
line-through
underline
none

从设计的角度看 text-decoration属性主要是用来删除链接的下划线

6.4、文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写

uppercase 大写
lowercase 小写
capitalize 首写字母大写

6.5、文本缩进

文本缩进属性是用来指定文本的第一行的缩进

p {text-indent:50px;}

6.6、字体样式

normal 正常 - 正常显示文本
italic 以斜体字显示的文字

p {font-style:normal;}

6.6、字体大小

font-size 属性设置文本的大小
字体大小的值可以是绝对或相对的大小。

6.6.1、绝对大小：

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用

相对大小：

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小

设置字体大小像素

可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

h1 {font-size:40px;}

6.6.2、用em来设置字体大小

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;}

6.6.3、使用百分比和EM组合

设置元素的默认字体大小的是百分比。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

7、a 链接

7.1、四个链接状态：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

7.2、文本修饰

text-decoration 属性主要用于删除链接中的下划线

a:link {text-decoration:none;}

7.3、背景颜色

a:link {background-color:#B2FF99;}

8、盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

边距
边框
填充
实际内容
List item

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的
Content(内容) - 盒子的内容，显示文本和图像。
当指定一个 CSS 元素的宽度和高度属性时，只是设置内容的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)
= 450px

若设置总宽度为 250 像素的元素：

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

9、border 边框

9.1、border-style 边框样式

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

在CSS中，可以指定不同的侧面不同的边框：

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

9.2 border-width 边框宽度

为边框指定宽度有两种方法：

可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
使用 3 个关键字之一，它们分别是thick 、medium（默认值）和 thin。

9.3 border-color 边框颜色

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式
还可以设置边框的颜色为"transparent"透明。

9.4 边框-简写属性

border-width 边框宽度
border-style 边框样式
border-color 边框颜色

10、margin 外边距

元素的 margin用来控制元素 border与其周围元素之间的距离大小，margin 没有背景颜色，是完全透明的，margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
在这里插入图片描述
可能的值：

auto
使元素在其容器中水平居中
length
定义一个固定的margin（使用像素，pt，em等）
%
以包含元素宽度的百分比计的外边距
inherit
继承自父元素

10.1、简写属性

margin 属性是以下各外边距属性的简写属性：

margin-top
margin-right
margin-bottom
margin-left

margin有四个值

上-右-下-左顺时针

 margin:25px 50px 75px 100px;

上边距为25px
右边距为50px
下边距为75px
左边距为100px

margin 属性设置三个值

margin: 25px 50px 75px;

上外边距是 25px
右和左外边距是 50px
下外边距是 75px

margin 属性设置两个值

margin: 25px 50px;

上和下外边距是 25px
右和左外边距是 50px

margin 属性设置了一个值

margin: 25px;

所有四个外边距都是 25px

10.2、外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

10.2.1、当一个元素出现在另一个元素上面时

在这里插入图片描述

10.2.2、当一个元素包含在另一个元素中时

（假设没有内边距或边框把外边距分隔开）
在这里插入图片描述

10.2.3、与自身发生合并

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
在这里插入图片描述
如果这个外边距遇到另一个元素的外边距，它还会发生合并：

11、padding 外边距

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit 指定应从父元素继承内边距
不允许负值，margin可以为负值

padding - 简写属性

padding 属性是以下各内边距属性的简写属性：

padding-top
padding-right
padding-bottom
padding-left

11.1、padding 属性有四个值

padding: 25px 50px 75px 100px;

上内边距是 25px
右内边距是 50px
下内边距是 75px
左内边距是 100px

11.2、 padding 属性有三个值

padding: 25px 50px 75px;

上内边距是 25px
右和左内边距是 50px
下内边距是 75px

11.3、 padding 属性有两个值

padding: 25px 50px;

上和下内边距是 25px
右和左内边距是 50px

11.4、 padding 属性有一个值

padding: 25px;

所有四个内边距都是 25px

12、Display(显示)

display属性规定是否/如何显示元素，用于控制布局。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为block 或inline

12.1、块和内联元素

块元素(block)是一个元素，占用了全部宽度，在前后都是换行符。

<h1>
<p>
<div>

内联元素(inline)只需要必要的宽度，不强制换行。

<span>
<a>

12.2、改变元素显示

可以更改内联元素和块元素
设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类
因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

eg:

把列表项显示为内联元素
<li>未更改前：
在这里插入图片描述
修改后：

li {display:inline;}

在这里插入图片描述

12.3、块级元素

块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

12.4、内联元素

内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

12.5、 Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素

 display:none

或

visibility:hidden

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

13、position 属性

position 属性指定了元素的定位类型。
有五个不同的位置值：

static
relative
fixed
absolute
sticky
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了position属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

13.1、static

HTML 元素默认情况下的定位方式为 static（静态）
静态定位的元素不受 top、bottom、left 和 right 属性的影响
position: static;的元素没有定位，遵循正常的文档流对象;

13.2、fixed

元素的位置相对于浏览器窗口是固定位置。

Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
即使窗口是滚动的它也不会移动：
top、right、bottom 和 left 属性用于定位此元素。

p
{
    position:fixed;
    top:30px;
    right:5px;
}

13.3、relative 相对定位

position: relative;的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
即使相对定位元素的内容移动,预留空间的元素仍保存在正常流动。
在这里插入图片描述

h2.pos_top
{
    position:relative;
    top:-50px;
}

在这里插入图片描述

13.4、absolute 绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，它将使用文档主体（body），并随页面滚动一起移动.
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

子绝父相
“被定位的”元素是其位置除 static 以外的任何元素。

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 1px solid #73AD21;
}

在这里插入图片描述

13.5、sticky粘性定位

position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

当到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）

13.6、z-index

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
一个元素可以有正数或负数的堆叠顺序：

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

注意：如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。

14、CSS 布局 - 溢出

overflow 属性用于控制内容溢出元素框时显示的方式。
overflow 属性可设置以下值：

visible：默认。溢出没有被剪裁。内容在元素框外渲
hidden：溢出被剪裁，其余内容将不可见
scroll：溢出被剪裁，同时添加滚动条以查看其余内容
auto：与 scroll 类似，但仅在必要时添加滚动条
inherit 规定应该从父元素继承 overflow 属性的值。

overflow 属性仅适用于具有指定高度的块元素。

14.1、overflow: visible

默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染：

 overflow: visible;

在这里插入图片描述

14.2、overflow: hidden

如果使用 hidden 值，溢出会被裁剪，其余内容被隐藏：
在这里插入图片描述

14.3、overflow: scroll

如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使不需要）：
在这里插入图片描述

不需要滚动条，依然添加了。

14.4、overflow: auto

auto 值类似于 scroll，但是它仅在必要时添加滚动条：
在这里插入图片描述

14.5、overflow-x 和 overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。

div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

15、Float 浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。Float往往是用于图像，但它在布局时一样非常有用。
float 属性可以设置以下值之一：

left：元素浮动到其容器的左侧
right：元素浮动在其容器的右侧
none：元素不会浮动（将显示在文本中刚出现的位置），默认值。
inherit：元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果

15.1、float: right;

img
{
    float:right;
}

<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>

在这里插入图片描述

15.2、float: left

img {
  float: left;
}

在这里插入图片描述

15.3、float:none；

img 
{
    float:none;
}

在这里插入图片描述

15.4、对普通流影响

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

15.4.1、

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
在这里插入图片描述

15.4.2、

（1）当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
（2）如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
在这里插入图片描述

15.4.3、

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
在这里插入图片描述

15.5、clear属性

指定元素的左侧或右侧不允许浮动的元素：

left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

15.5.1、

img
{
	float:left;
}
p.clear
{
	
}

<body>

<img src="logocss.gif" width="95" height="84" />
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>

</body>

在这里插入图片描述

15.5.2、

img
{
	float:left;
}
p.clear
{
	clear:right;
}

在这里插入图片描述
和none效果一样

15.5.3、

img
{
  float:left;
}
p.clear
{
  clear:left;
}

在这里插入图片描述

真的不想起床

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识汇总梳理

css1、css实例CSS声明总是以分号(;)结束，声明总以大括号({})括起来:p {color:red;text-align:center;}2、CSS 注释CSS注释以 /* 开始, 以 */ 结束/*这是个注释*/p{ text-align:center; /*这是另一个注释*/ color:black; font-family:arial;}3、插入样式表外部样式表内部样式表内联样式外部样式表每个页面使用标签链接到样式
复制链接

扫一扫