首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Web - CSS3基础语法与盒模型

Web - CSS3基础语法与盒模型

原创
作者头像
stark张宇
发布于 2025-02-02 11:25:20
发布于 2025-02-02 11:25:20
2990
举报
文章被收录于专栏:stark张宇stark张宇

概述

这篇文章是关于 Web 前端 CSS3 的基础语法与盒模型的讲解。包括 CSS3 层叠性及处理冲突规则、伪元素和新增伪类元素、属性选择器等。还介绍了文本与字体属性,如段落和行相关属性、字体文本属性。最后阐述了盒子模型,如元素隐藏、行内与块元素转换、盒子构成及相关属性等。

css3 层叠样式表

css全名叫做层叠样式表,层叠性是它很重要的性质,多个选择器可以同时作用于同一个标签,效果叠加。

css有严密的处理冲突的规则:ID权重 > Class权重 > 标签权重,复杂选择器可以通过个数的形式,计算权重:

项目

权重值

ID

2

Class

1

Tag

0

伪元素

1、::before 和::after

在被选元素的内容前面或后面插入额外的内容,常用来添加一些装饰性的元素或实现特定的布局效果。

代码语言:css
AI代码解释
复制
p::before {
  content: "▶";
  color: blue;
  margin-right: 5px;
}

p::after {
  content: "◀";
  color: green;
  margin-left: 5px;
}

2、::first-letter

用于选择并设置文本块中第一个字母的样式,可实现首字下沉等效果。

代码语言:css
AI代码解释
复制
p::first-letter {
  font-size: 2em;
  color: red;
  float: left;
  margin-right: 5px;
}

3、::first-line

用来选择并设置文本块中第一行的样式,比如可以改变第一行文本的字体、颜色、背景等。

代码语言:css
AI代码解释
复制
p::first-line {
  font-weight: bold;
  color: purple;
}

4、::selection

用于设置用户选中页面元素时的样式,包括文字选中时的背景色和文字颜色等。

代码语言:css
AI代码解释
复制
p::selection {
  background-color: yellow;
  color: black;
}

5、::placeholder

用于设置表单输入框中占位文本的样式,可调整占位文本的颜色、字体等。

代码语言:css
AI代码解释
复制
input::placeholder {
  color: gray;
  font-style: italic;
}

6、::marker

主要用于设置列表项标记(如项目符号或数字)的样式。

代码语言:css
AI代码解释
复制
ul li::marker {
  color: red;
  font-size: 1.2em;
}
新增伪类元素

1、:empty 选择空标签

2、:focus 选择当前获得焦点的表单元素

3、:enabled 和 :disabled 分别匹配可使用(启用)和不可使用(禁用)的表单元素。

4、:checked 匹配被选中的表单元素,如复选框、单选框。

5、root 选择根元素,即<html>标签

属性选择器

举例

意义

imgalt

选择有alt属性的img标签

imgalt="故宫"

选择有alt属性是故宫的img标签

imgalt^="北京"

选择有alt属性是北京开头的img标签

imgalt$="夜景"

选择有alt属性是夜景结尾的img标签

imgalt*="美"

选择有alt属性中含有美的img标签

imgalt~="手机拍摄"

选择有alt属性中有空格隔开的手机拍摄字样的img标签

img[alt

="参赛作品"]

选择有alt属性以参赛作品开头的img标签

序号选择器

举例

意义

:first-child

选择父元素的第一个子元素

:last-child

选择父元素的最后一个子元素

:nth-child(n)

第n个子元素

:nth-of-type(n)

选择父元素下指定类型的第n个元素,只针对指定类型的元素进行计数和选择,而不会考虑其他类型的元素

:nth-last-child(n)]

从父元素的最后一个子元素开始计数,选择第n个元素

:nth-last-of-type(n)

从父元素的最后一个指定类型的子元素开始计数,选择第n个元素

元素关系选择器

名称

举例

意义

子选择器

div > p

div的子标签p

相邻兄弟选择器

img+p

图片后面紧跟着的将被选中

通用兄弟选择器

p~span

p元素之后的所有同层级span元素

文本与字体属性

文本相关的属性普遍具有继承性,只需要给祖先标签设置,即可在后代所有标签中生效。因为文字相关属性有继承性,所以通常会设置body标签的字号、颜色、行高等,这样就能当做整个网页的默认样式了。

继承性有一个重要的原则:就近原则,在继承的情况下,选择器权重计算失效,而是就近原则。

段落和行相关属性

1、text-indent

设置段落首行的缩进,可以使用长度值(如px、em、rem等)或百分比来指定缩进量。

代码语言:css
AI代码解释
复制
p { text-indent: 2em; }

2、line-height

设置段落行与行之间的垂直间距,即行高。可以是数字、长度值或百分比。数字表示相对于字体大小的倍数;长度值直接指定行高的具体尺寸;百分比是相对于字体大小的比例。

代码语言:css
AI代码解释
复制
p { line-height: 1.5; }

3、text-align

设置段落文本的水平对齐方式,left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)等。

代码语言:css
AI代码解释
复制
p { text-align: center; }

4、letter-spacing

设置字符之间的水平间距,长度值,正值会增加字符间距,负值会减小字符间距。

代码语言:css
AI代码解释
复制
p { letter-spacing: 2px; }

5、word-spacing

设置单词之间的水平间距,长度值,用于调整单词之间的间隔距离。

代码语言:css
AI代码解释
复制
p { word-spacing: 5px; }
字体文本属性

1、font-family

指定文本使用的字体族。可以设置多个字体,按优先级排列,浏览器会依次尝试使用这些字体,直到找到可用的字体。

代码语言:css
AI代码解释
复制
p {
    font-family: "微软雅黑", Arial, sans-serif;
}

2、font-size

设置字体的大小。可以使用多种单位,如 px(像素)、em 、rem、% 等,网页文字正文字号通常是16px,浏览器最小支持10px字号。

3. font-weight

设置字体的粗细程度。常见取值有 normal(正常粗细)、bold(粗体),还可以使用数字值,范围从 100 - 900,数字越大字体越粗。

代码语言:css
AI代码解释
复制
strong {
    font-weight: bold;
}
span {
    font-weight: 600;
}

4、font-style

设置字体的样式,主要用于指定文本是否为斜体。取值有 normal(正常样式)、italic(斜体)。

5、text-decoration

text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)

代码语言:css
AI代码解释
复制
p.red-underline {
    text-decoration-line: underline;
    text-decoration-color: red;
}

盒子模型

在 CSS3 中,有多种方法可以隐藏元素,每种方法都有其特点和适用场景:

元素的隐藏

1、display

该属性值会让元素完全从文档流中移除,就好像这个元素在 HTML 文档中不存在一样。它不会占据页面的空间,也不会响应任何用户交互事件。

代码语言:css
AI代码解释
复制
.hidden-element {
    display: none;
}

2、visibility

元素虽然在页面上不可见,但它仍然占据原来的空间,并且保留其布局位置。也就是说,它会影响页面的布局,但不会显示内容,同时也不会响应鼠标事件等交互操作。

行内元素和块元素的相互转换

在 CSS3 中,可以使用display属性来实现行内元素和块元素的相互转换。

1、行内元素转换为块元素

代码语言:css
AI代码解释
复制
span {
  display: block;
}

2、块元素转换为行内元素

块元素如<div><p>等,默认会独占一行。若要将块元素转换为行内元素,需将display属性值设置为inline。

代码语言:css
AI代码解释
复制
div {
  display: inline;
}

3、转换为行内块元素

还有一种常见的情况是将元素转换为行内块元素,即display属性值设置为inline-block。这种方式结合了行内元素和块元素的部分特点,元素既可以在一行内显示,又可以设置宽度、高度等块级元素的属性。

代码语言:css
AI代码解释
复制
p {
  display: inline-block;
}
盒子模型

所有的html标签都可以看成柜型盒子,由width、height、padding、border构成,成为盒模型。

需要注意的是:++width、height不是盒子的总宽高,盒子的总宽度 = width + 左右padding + 左右border,盒子的总高度 = height + 上下padding + 上下border++

1、box-sizing

在 CSS3 中,box-sizing 属性用于定义元素在计算宽度和高度时所采用的盒模型类型,它可以改变元素的宽度和高度的计算方式。

2、margin

margin是盒子的外边距,即盒子其他盒子的距离,竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准。

一些元素比如body、ul、p,都有默认的margin,在开始制作网页的时候,要将他们清除。

盒子的水平居中,将盒子的左右两边的margin都设置成auto,盒子将水平居中。盒子的垂直居中,需要使用绝对定位技术实现。

3、padding

padding是盒子的内边距,即盒子边框内壁到文字的距离

4、width属性

width属性表示盒子内容的宽度,单位属性通常是px,移动端开发也会涉及百分数、rem等单位。

当块级元素div、h、li等没有设置width属性时,它将自动撑满,但这不意味着width属性可以继承。

5、height属性

height属性表示盒子的内容高度,height属性的单位通常是px,移动端开发也会涉及到百分数、rem等单位。

盒子的height属性如果不设置,它将自动被其内容撑开,如果没有内容,则height默认是0。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Swift 自定义返回按钮
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
星宇大前端
2019/10/25
1.8K0
swift 对象储存地址分析
版权声明:转载请标明出处 https://blog.csdn.net/ZY_FlyWay/article/details/79216805
星宇大前端
2019/01/15
1.7K0
C++ 指针总结
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
星宇大前端
2019/10/25
7590
导航栏搜索框简单封装
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
星宇大前端
2019/10/25
1.3K0
【PAT乙级】害死人不偿命的(3n+1)猜想
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
喜欢ctrl的cxk
2019/11/08
3700
Swift:属性访问类别
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
菜菜不吃蔡
2019/11/03
8850
Swift:属性访问类别
3-6 银行业务队列简单模拟 (20 分)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
韩旭051
2019/11/08
7430
Swift:瀑布流 网络加载图片 Swift5
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
菜菜不吃蔡
2019/10/30
1.7K0
Java基础-多重循环
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
cwl_java
2019/11/12
8160
swift 3.0基本数据语法
swift 3.0 字符串的介绍 OC和Swift中字符串的区别 在OC中字符串类型时NSString,在Swift中字符串类型是String OC中字符串@"",Swift中字符串"" 使用 String 的原因 String 是一个结构体,性能更高 NSString 是一个 OC 对象,性能略差 String 支持直接遍历 Swift 提供了 String 和 NSString 之间的无缝转换 字符串的使用 遍历字符串 // 字符串遍历 var str = "Hello, Swift" for c in
用户1941540
2018/05/11
7870
整数奇偶排列
输入10个整数,彼此以空格分隔。重新排序以后输出(也按空格分隔),要求: 1.先输出其中的奇数,并按从大到小排列; 2.然后输出其中的偶数,并按从小到大排列。
喜欢ctrl的cxk
2019/11/07
7580
【LeetCode】1217. Play with Chips
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
韩旭051
2019/11/07
6170
通过Swift学函数式编程
在文章SWIFT IS A LOT LIKE SCALA [1] 提到Swift和Scala有很大的相似之处,在某些特性甚至比Scala对函数式编程的支持更友好。笔者遂从Swift语言出发,学习函数式编程[2] [3],并记录笔记如下。
刘笑江
2018/05/28
8002
iOS常用的数据存储方式
针对应用的字体大小、是否保存用户名等偏好设置,IOS的每个应用都有个NSUserDefaults实例,通过它来存取偏好设置。NSUserDefaults设置数据的时候,不是立即写入,而是根据时间戳定时地把缓存中的数据写入本地磁盘。所以调用了set方法之后数据有可能还没有写入磁盘应用程序就终止了。
公众号iOS逆向
2021/07/05
2.1K0
iOS常用的数据存储方式
Swift| 基础语法(三)
总结下 swift下的基础语法,里面涉及到:常量&变量、Swift中的数据类型、逻辑分支、循环、字符串相关、数组和字典、方法的书写调用等内容,考虑到阅读体验分多篇来展示,希望对大家学习swift有所帮助,同时也是对自己的一个总结。
進无尽
2018/09/12
1.7K0
Swift| 基础语法(三)
iOS网络请求指南: 请求参数的拼接(签名)、返回参数解析(JSON/XML解析)、案例(条码支付综合前置平台申请退款)
post请求body为XML的二进制数据的问题总结:不管是ASI 还是AFNetwork框架的使用方法,都是采用原生态的请求对象NSMutableURLRequest
公众号iOS逆向
2021/04/13
1.5K0
iOS网络请求指南: 请求参数的拼接(签名)、返回参数解析(JSON/XML解析)、案例(条码支付综合前置平台申请退款)
swift 邮箱、密码、手机号、身份证验证正则
/验证邮箱 class func validateEmail(email: String) -> Bool { if email.count == 0 { return false } let emailRegex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,4}" let emailTest:NSPredicate = NSPredicate(forma
星宇大前端
2019/01/15
6.2K2
【PAT乙级】数字加密
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
喜欢ctrl的cxk
2019/11/08
3370
Swift 学习Using Swift mix and match, network: 写rss读者
4. need a feed manager: FeedManager.swift
全栈程序员站长
2022/07/06
1.4K0
Swift 读标准库源码笔记 -- Integers(基本数据类型篇)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
星宇大前端
2019/10/25
1.1K0
相关推荐
Swift 自定义返回按钮
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档