HTML学习笔记记录---速预CSS(2) 复合属性、盒子模型、边框线、浮动、定位

news2025/1/14 9:36:27

复合属性写法:

{font: font-style font-weitght font-size/line-height font-family}
{font: 样式 粗细 字号 字体}
(书写瞬间为固定的不可更改)

block            块级元素        div
inline            行内元素        span
inline-block        行内块元素    img(图片)

块级元素占的是一整行,对其文字添加底纹颜色时会对整行添加。
行内元素不占据一整行,所以添加底纹颜色仅对有内容部分添加。

宽高部分:

width(宽)和 height(高)

{ width/height: 数值px; }

该命令可以对 块和行内块 的大小进行自定义,若行内块是一张图片,只指定 宽或高 则会进行比例修改,若即指定了宽又指定了高则不会按照比例修改。 
其中修改的块仅是对显示效果的修改,实际仍会占用一整行。

display 块、行内和行内块三种属性均可互相转换

盒子模型:

属性说明
内容content 盒子的实际内容
内边距padding 内容与边框之间的空间
边框border 盒子的边界
外边距margin边框的外部,盒子与其他元素之间的空间

border-style边框线类型:

solid实线边框,经典边框。
double双线边框,含有两条线。
groove槽线边框,看起来就像页面中的一个槽。
outset外凸边框,看起来就像从页面凸出来一样。
dotted虚线(点线)边框。
dashed破折线边框。
inset内凹边框,看起来像页面凹进去一样。
ridge脊线边框,看起来像页面上一个凸起来的山脊。

边框宽度:

border-width: 10px 5px 15px 20px;
按照上右下左的顺序来设置大小
border-width: 10px 5px 15px;
若不满四个值则缺少的值对本身的对位相同(上下)
border-width: 10px 0 15px 20px;
“ 0 ”值时可以不写单位

border-left指定左边框的属性
padding文本与边框上下左右的距离
margin与浏览器界面边框的距离

border-radius圆角边框线
使用数字指定角的弧度
border-radius: 15px;

浮动:

浮动属性用于创建副都给框,将其移动到一边,直到有一条边缘接触另一浮动框的边缘,这样就可以使元素浮动了。
选择器{ float: left/right/none ; }
none:不浮动
浮动相对于父元素浮动,仅在父元素的内部移动。

清除浮动:在父选择器内使用“overflow:hidden;”


定位:

相对定位:相对于元素在文档流中的正常位置进行定位。
绝对定位:相对于其最近的已定位祖先元素进行定位,不占据文档流。
固定定位:相对于浏览器窗口进行定位。不占据文档流,固定在屏幕上的位置,不随滚动而滚动。

使用方法:
relative    相对定位
absolute    绝对定位
fixed    固定定位
left    向左
top    向下

在选择器内输入“position:relative;”再输入“left:数值;”比正常位置向左改变多少距离了

相对定位一般用于微调布局、绝对定位一般用于比较复杂的布局、固定定位一般用于导航栏或侧边栏等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2276409.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WMS仓库管理系统,Vue前端开发,Java后端技术源码(源码学习)

一、项目背景和建设目标 随着企业业务的不断扩展,仓库管理成为影响生产效率、成本控制及客户满意度的重要环节。为了提升仓库作业的透明度、准确性和效率,本方案旨在构建一套全面、高效、易用的仓库管理系统(WMS)。该系统将涵盖库…

Docker Search失败,但是Pull成功的解决方法(环境:腾讯云服务器CentOS7系统安装Docker)

Docker Search失败,但是Pull成功的解决方法(环境:腾讯云服务器CentOS7系统安装Docker) 背景解决思路 背景 在安装完成Docker后,成功启动Docker(Systemctl start Docker),使用搜索镜像命令(Dock…

ClickHouse vs StarRocks 选型对比

一、面向列存的 DBMS 新的选择 Hadoop 从诞生已经十三年了,Hadoop 的供应商争先恐后的为 Hadoop 贡献各种开源插件,发明各种的解决方案技术栈,一方面确实帮助很多用户解决了问题,但另一方面因为繁杂的技术栈与高昂的维护成本&…

慧集通(DataLinkX)iPaaS集成平台-业务建模之业务对象(二)

3.UI模板 当我们选择一条已经建好的业务对象点击功能按钮【UI模板】进入该业务对象的UI显示配置界面。 右边填写的是UI模板的编码以及对应名称;菜单界面配置以业务对象UI模板编码获取显示界面。 3.1【列表-按钮】 展示的对应业务对象界面的功能按钮配置&#xff1…

TCL小蓝翼新风空调亮相CES2025,斩获智慧新风技术创新大奖

1月7日-11日,被称为“科技界春晚”的CES 2025(国际消费类电子产品展览会)在美国拉斯维加斯举行。 本届CES,TCL小蓝翼新风空调更是惊艳亮相TCL展区,以领先的健康新风及AI技术,斩获CES2025 智慧新风技术创新…

【I/O编程】UNIX文件基础

IO编程的本质是通过 API 操作 文件。 什么是 IO I - Input 输入O - Output 输出 这里的输入和输出都是站在应用(运行中的程序)的角度。外部特指文件。 这里的文件是泛指,并不是只表示存在存盘中的常规文件。还有设备、套接字、管道、链接…

【计算机网络】深入浅出计算机网络

第一章 计算机网络在信息时代的作用 计算机网络已由一种通信基础设施发展成一种重要的信息服务基础设施 CNNIC 中国互联网网络信息中心 因特网概述 网络、互联网和因特网 网络(Network)由若干结点(Node)和连接这些结点的链路…

在IDEA上运行Java项目

新建一个项目,下面创建模块,然后在src下新建包名,最后见类(class) 设置主题 settings>apparence 设置字体 Editor> Font 设置注释 Editor>Color Scheme>Language Defaults>Comments 设置自动导包 …

ASO优化之应用程序本地化的类型和策略

应用程序本地化是进入全球移动电话用户市场的关键一步。但它到底是什么?应用程序本地化是指定制您的应用程序以适应多种语言、文化、语言和区域设置。这不仅仅是翻译,它考虑了地区法规、文化细微差别和当地偏好。本地化良好的应用程序可以引起用户的共鸣…

gcc编译过程中-L和-rpath的作用

前言 今天记录一下,在gcc编译过程中-L和-rpath的区别 -L是程序链接过程中指定链接动态库的路径,-rpath是程序运行过程中指定链接动态库的路径。(官方话术) 其实就是当gcc编译生成可执行文件的时候需要指定-L参数,才能找…

3D目标检测数据集——kitti数据集

KITTI官网网址:The KITTI Vision Benchmark Suite 下载数据集:The KITTI Vision Benchmark Suite KITTI数据集论文:CMSY9 github可视化代码:GitHub - kuixu/kitti_object_vis: KITTI Object Visualization (Birdview, Volumetric …

AI大模型赋能!移远通信打造具有“超能力”的AI智能玩具解决方案

随着无线通信、先进算法以及AI大模型等前沿技术的蓬勃发展,许多玩具已经从简单的互动设备进化为集教育、陪伴和娱乐功能于一身的AI智能玩具,在儿童群体中日渐风靡。不仅如此,因其能提供满满的情绪价值,在成年人和老年人市场中也展…

LED灯按键调光芯片、PWM调光IC、发光灯控制调光芯片

按键调光芯片,特别是LED灯使用PWM调光的芯片IC,是一种用于控制LED灯具亮度的集成电路,常用于台灯、壁灯、吊灯等照明设备中。这种芯片通过脉冲宽度调制(PWM)技术来调节LED的亮度,可以实现从最亮到最暗的平滑…

【专题】2025年节日营销趋势洞察报告汇总PDF洞察(附原数据表)

原文链接: https://tecdat.cn/?p38813 在当今复杂多变且竞争激烈的消费市场环境下,节日营销已成为企业获取市场份额、提升品牌影响力的关键战略时机。我们深知深入洞察节日营销趋势对于企业决策的重要性。 本报告汇总基于对 2024 年多个关键消费节点及…

what?ngify 比 axios 更好用,更强大?

文章目录 前言一、什么是ngify?二、npm安装三、发起请求3.1 获取 JSON 数据3.2 获取其他类型的数据3.3 改变服务器状态3.4 设置 URL 参数3.5 设置请求标头3.6 与服务器响应事件交互3.7 接收原始进度事件3.8 处理请求失败3.9 Http Observables 四、更换 HTTP 请求实现…

前端练习题

图片&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>用户信息页面</title><style>body {font-family: Arial, sans-serif;margin: 20px;}.user-info {display: flex;align-it…

jupyter notebook练手项目:线性回归——学习时间与成绩的关系

线性回归——学习时间与学习成绩的关系 第1步&#xff1a;导入工具库 pandas——数据分析库&#xff0c;提供了数据结构&#xff08;如DataFrame和Series&#xff09;和数据操作方法&#xff0c;方便对数据集进行读取、清洗、转换等操作。 matplotlib——绘图库&#xff0c;p…

车载音频开发(二):对音频数据作音量调节

通过前一个章节打下的基础车载音频开发&#xff08;一&#xff09;&#xff1a;从看懂wav开始https://blog.csdn.net/Hellomino_/article/details/140873133?fromshareblogdetail&sharetypeblogdetail&sharerId140873133&sharereferPC&sharesourceHellomino_&…

项目开发实践——基于SpringBoot+Vue3实现的在线考试系统(五)

文章目录 一、学生管理模块功能实现1、添加学生功能实现1.1 页面设计1.2 前端功能实现1.3 后端功能实现1.4 效果展示2、学生管理功能实现2.1 页面设计2.2 前端功能实现2.3 后端功能实现2.3.1 后端查询接口实现2.3.2 后端编辑接口实现2.3.3 后端删除接口实现2.4 效果展示二、代码…