CSS样式全攻略:从字体到盒模型
- CSS的概况:
- CSS的字体样式:
- font-size:设置字体的大小;
- font-style:设置字体的风格;
- font-variant:设置小型的大写字母字体;
- font-family:设置字体名;
- font-weight:设置字体的粗细。
- 水平对齐、垂直对齐的属性:
- text-align:left(表示左对齐) | right(表示右对齐) | center(表示居中) | justify(表示两端对齐);
- vertical-align:top(把元素的顶端与行中最高元素的顶端对齐) | middle (把此元素放到父元素的中部)| bottom(把元素的低端与行中最低元素的底端对齐) | text-top(把元素的顶端与父元素的顶端对齐) | text-bottom(把元素的低端与行中最低元素的底端对齐)。
- 背景background元素:
- 背景颜色background-color属性
- 背景图像background-image属性
- 背景图片重复background-repeat属性
- 背景图像位置background-position属性
- CSS盒式模型结构:
- Margin(边界)
- Border(边框)

- Padding (填充)
- Content(内容)
- 属于的文字表述
- html(hyper text markup language):是超文本标记语言,而不是编程语言。HTML是WEB页面的结构(用来标记描述网页)。
- CSS(级联样式表)(cascading style sheet)也成为层叠样式表http超文本传输协议。
- 脚本语言的客户端:在用户设备(如浏览器)上运行脚本语言的环境。
CSS样式表链接方式:外部链接link,内部样式表属性
Web简答题六个问题:
一、HTTP(超文本传输协议):
用于在WEB浏览器和WEB服务器之间传输超文本(如HTML页面、图片、演示表等)。它基于请求—响应模型,浏览器发起请求,服务器返回响应。
二、FTP(文件传输协议):
主要用于在网络上进行文件的上传和下载。比如说网站维护人员通过FTP客户端连接到服务器,上传更新的文件。
三、CSS盒式模型:
- 内容区(content):包含文本、图像等实际内容,其大小由width和height属性控制;
- 内边距(padding):内容区与边框之间的空白区域,可通过padding属性设置上、下、左、右内边距;
- 边框(border):围绕内边距和内容的线,可设置边框的样式、宽度和颜色。
- 外边距(margin):盒子与其他元素之间的空白区域,用于控制元素间的间距。
四、 DOM(文档对象模型)
1、定义:是针对HTML和XML文档的一个API(应用程序编辑接口),将文档呈现为节点数结构,以便javascript等脚本语言可以对其进行访问和操作;
2、 结构:文档的每个部分,如标签、属性、文本等都被视为一个节点。根节点是document,HTML元素是元素节点,文本内容是文本节点,属性是属性节点。
3、作用:通过DOM,开发者动态创建、修改、删除节点,改变元素样式、属性等。
五、 BOM(浏览器对象模型):
1、定义:提供了与浏览器窗口进行交互的对象集合,允许javascript访问和操作浏览器的功能。
2、主要对象:
(1)window:是BOM的核心对象,代表浏览器的窗口。它包含了很多属性和方法。如window.innerWidth获取窗口内部宽度,window.alert()弹出提示框。
(2)navigator:包含浏览器的相关信息,如navigator.userAgent可获取浏览器标识字符串。
(3)screen:提供有关用户屏幕的信息,例如screen.Width可得到屏幕宽度。
(4)history:管理浏览器的历史记录,history.back()可返回上一页。
六、 客户端的脚本语言(脚本语言):
客户端脚本语言是在客户端(通常指用户的的浏览器)所执行的脚本语言,javascript是典型的代表,具有以下特点使其成为客户端脚本语言:
- 运行环境:能在浏览器内置的javascript引擎中直接运行,无需额外服务器支持,用户访问网页时,浏览器解析并执行其中的javascript代码。例如网页上图片轮播效果,在用户本地浏览器即可实现。
- 与网页交互:可直接操作DOM,动态修改网页内容、结构和样式,响应用户的操作。如点击按钮显示隐藏元素,增强网页交互性与用户体验。
- 安全性:浏览器对其执行有安全限制,防止访问本地硬盘等敏感资源,保护用户信息安全。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)