CSS入门学习之--选择器，属性及使用，盒子模型，浮动定位

FranzYu_

已于 2024-02-03 10:25:00 修改

阅读量830

点赞数 21

文章标签： css 学习 css3

于 2024-01-23 20:07:19 首次发布

本文链接：https://blog.csdn.net/lilcur/article/details/135785634

版权

CSS入门学习之–选择器，属性及使用，盒子模型，浮动定位

前言，我们先要知道CSS的本质，就是定义元素的样式规则，告诉浏览器如何在网页中显示元素。接下来的这几个知识点都是围绕着这个目的去实现的。

文章目录

CSS入门学习之--选择器，属性及使用，盒子模型，浮动定位

1.css选择器

常见的css选择器：

类选择器
ID选择器
元素选择器
通用选择器
子元素选择器
后代选择器
相邻元素选择器
伪类选择器

(1)类选择器

匹配：根据类别名称选择具有特定类别的 HTML 元素，即class属性的值。

使用： .类名{}

例子：

.classname{
	width:200px;
}

(2)ID选择器

匹配：根据元素的唯一标识符选择 HTML 元素，即id属性选择一个与之匹配的元素，注意：每个ID属性都是唯一的。

使用：#id名{}

例子：

#idname{
    width:200px;
}

(3)元素选择器

匹配：根据元素名称选择HTML元素。

使用：元素名{}

例子：例如span标签

span {
	width:200px;
}

(4)通用选择器

匹配：选择所有元素。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值，更常见的做法是与其他选择器结合使用。

使用：* {}

例子：

* {
    width:200px
}

(5)子元素选择器

匹配：选择某父元素的子元素。

使用：.父元素 > .子元素 {}

例子：

.father > .son {
	width:200px;
}

(6)后代选择器

匹配：根据指定元素的后代关系选择HTML元素。

使用：.A B { } 对于这种格式来说，表示所有属于A元素后代的B元素。

例子：

<html>
	<body>
        <div class="father">
            <p class="son">子元素选择器</p>
            <div>
                <p class="grandson">后代选择器</p>
            </div>
        </div>
    </body>
</html>

.father p {
    width:200px;
}

(7)相邻元素选择器

匹配：选择紧接在另一元素后的元素，即另一个元素的直接兄弟元素，两者有相同的父元素。

使用：A + B { }

例子：

h3 + p {
	width:200px;
}

(8)伪类选择器

(8.1)伪类：

补充：伪类是选择器的一种，它用于选择处在特定状态的元素。比如当他们是在这一类型的第一个元素时，或者当鼠标悬停在元素上面时，或者当一个checkbox被选中或者禁用时，你希望将它们以特定状态呈现。

使用： : 伪类名称 { }

例子：

#element:hover {
    width:200px;
}

(8.2)伪元素

匹配： :: 伪选择器用于表示无法用HTML语义表达的实体。

例子： p::first-line 匹配所有 <p> 元素的第一行。

2.css常用属性

作为入门学习，我们只需要了解这几个常用的属性即可，其他的可以自行了解, 点击右侧链接可以跳转详解！！

(1)字体设置

font-size 设置字体大小。 font-size
font-style 设置字体样式。font-style
font-weight 设置字体粗细。font-weight
font-family 设置元素的字体列表。font-family
color 设置字体颜色。

(2)背景设置

background 设置各种背景属性。background
background-color 设置背景颜色。background-color
background-image 设置背景图像。background-image
background-size 设置背景图像大小。background-size
background-repeqt 设置是否/如何平铺背景图像。background-repeat

(3)边框属性

border-style 设置元素所有边框的样式。border-style
border-width 设置元元素所有边框的宽度。border-width
border-color 设置元素所有边框的颜色。border-color
border-radius 设置元素的外边框圆角。四个值对应顺序：左上角，右上角，右下角，左下角。border-radius
border-top 上边框。
border-right 右边框。
border-bottom 下边框。
border-lef 左边框。

(4)文本属性

text-transform 转换文本大小写。text-transform
text-decoration 指定添加到文本的修饰。text-decoration
text-align 设置内联内容的水平对齐方式。text-align
text-indent 缩进文本的第一行。text-indent
text-shadow 将一个或多个阴影应用于元素的文本内容。text-shadow

(5)边距属性

margin 在元素所有四个面上设置边距。margin
margin-bottom 设置元素的底边距。 margin-bottom
margin-left 设置元素的左边距。margin-left
margin-right 设置元素的底右边距。margin-right
margin-top 设置元素的上边距。margin-top

(6)填充元素

padding 在元素的所有四个面上设置填充。 padding
padding-bottom 将填充设置为元素的底面。padding-bottom
padding-left 将填充设置为元素的左面。padding-left
padding-right 将填充设置为元素的右面。padding-right
padding-top 将填充设置为元素的上面。padding-top

(6)垂直对齐

vertical-align

(7)光标属性

CSS cursor 属性使用方法及示例 - 菜鸟教程 (cainiaojc.com)

cursor: hand; /*链接手指*/
cursor: crosshair /*十字体 */
cursor: s-resize /*箭头朝下 */
cursor: move /*十字箭头, 朝右*/
cursor: help /*加一问号 */
cursor: w-resize /*箭头朝左 */
cursor: n-resize /*箭头朝上 */
cursor: ne-resize /*箭头朝右上 */
cursor: nw-resize /*箭头朝左上 */
cursor: text /*文字型*/
cursor: se-resize /*箭头斜右下 */
cursor: sw-resize /*箭头斜左下*/
cursor: wait /*漏斗*/

3.css盒子模型

网页布局中，我们如何将文字，图片排列的像是美工效果图一样井然有序呢？这就需要使用我们的盒子模型。

盒子模型描述了由元素生成的矩形盒子。

（3.1）网页布局的本质：

本质就是利用css设置好盒子的大小，摆放盒子的位置，最后把网页元素比如文字图片等等，放入盒子里面。无论是 web page，还是移动端 App，亦或是 PC 端应用。对于具有二维性的界面，盒子模型几乎无处不在。

（3.2）盒子模型的组成：

盒子模型从内到外分别是：内容（content），内边距（padding），边框（border），外边距（margin）。我们使用f12打开开发者工具选中页面元素就可以清晰的看到对应的属性和属性值。其中：

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height。
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

模型可参考：盒子模型图片

（3.3）两种盒子模型

接下来我们来了解css的两种盒模型：标准盒模型，怪异盒模型。

标准盒模型：元素的宽度和高度只包括内容（content），不包括内边距（padding），边框（border）和外边距（margin）。
怪异盒模型：元素的宽度和高度包括内容（content），内边距（padding）和边框（border），不包括外边距（margin）。

在标准盒模型中，宽高就是content的宽高，也就是说width、height设置的是content的宽高，剩下的三部分内容我们就可以根据需要去设置。如下：

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

在怪异盒模型中，宽高等于content+padding+border加在一起的宽高，当我们设定好宽高后，再设置padding跟border并不会像标准盒模型向外，而是会向内。怪异盒模型由**box-sizing设置，当border-box**为属性值时就是怪异盒模型，content-box就是标准盒模型。怪异盒模型margin等的设置规则时跟标准的是一样的。如下：

.box{
    width: 100px;
    height: 100px;
    margin: 50px;
    padding: 10px;
    box-sizing: border-box;
    background: orange;
    border: 5px solid red;
}

4.css浮动定位

网页布局方式有以下几种：

标准流（普通流，文档流）：网页按照元素的书写顺序依次排列。
浮动
定位
Flexbox 和 Grid （自适应布局）。·

浮动:

浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果，如图所示: 图片

float（浮动） 属性指定一个元素应延期容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，但仍然保持部分的流动性。

浮动属性用于创建移动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘，这样即可是的元素进行浮动。浮动是相对于父元素浮动，只会在父元素的内部移动。

语法：

选择器{
	float: left/right/none;
}

浮动的三大特性：

1.脱离标准流，不占位置（自己原来的位置漏给后面的标流）。
2.浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙。
3.任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。

清除浮动的方式

(1)给浮动父元素添加overflow属性：

.father{
	overflow:hidden;
}

(2)after伪元素清除浮动：

.father::after{
	content: "";
	display: table;
	clear: both;
}

定位

CSS的定位可以让我们定义元素在网页中出现的位置，我们通过定位可以任意摆放元素。

定位方式有以下五种：

static
relative
absolute
fixed
sticky

具体内容，可参考：

position - CSS：层叠样式表 | MDN (mozilla.org)

23. CSS position定位（5种方式） - 掘金 (juejin.cn)

thank you