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

复合属性写法:

{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:数值;”比正常位置向左改变多少距离了

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot-Day1

1.Springboot入门 创建Maven工程 导入spring-boot-stater-web起步依赖 编写Controller 提供启动类 2.yml配置信息书写与获取 书写 # 发件人信息 email:user: 172349823457qq.comcode: sajdajlwhjfgfkllwhost: smtp.qq.comauth: true ​ # 学生爱好 hobbies:- 打篮球- 踢…

基于扩频解扩+汉明编译码+交织的lora通信系统matlab性能仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a 3.部分核心程序 (完整版代码包含详细中文注释和操作步骤视频&#xff09…

针对服务器磁盘爆满,MySql数据库始终无法启动,怎么解决

(点击即可进入聊天助手) 很多站长在运营网站的过程当中都会遇到一个问题,就是网站突然无法打开,数据一直无法启动 无论是强制重启还是,删除网站内的所有应用,数据库一直无法启动 这个时候,就需要常见的运维手段了,需要对服务器后台各个资源,进行逐一排查…

LeetCode1170 比较字符串最小字母出现频次

字符串算法探秘:最小字母频次统计与比较问题剖析 在编程的世界里,字符串处理问题犹如繁星般繁多且各具特色。今天,我们聚焦于一道饶有趣味的题目,它涉及到对字符串中最小字母出现频次的统计以及基于此的比较操作。这道题不仅考验…

Kafka 分区管理

分区是主题的子集,每个主题可以被分割成多个分区,一个分区有一个主副本(Leader)及一个或多个从(Follower)副本。分区允许将数据分布在多个broker上,这样可以提高数据的处理能力、并行性及可靠性…

xcrun: error: invalid active developer path 解决

在拉取 github 代码时,提示如下报错: xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun 原因是:这是由于 Xcode command line t…

2025华数杯国际赛A题完整论文讲解(含每一问python代码+数据+可视化图)

大家好呀,从发布赛题一直到现在,总算完成了2025“华数杯”国际大学生数学建模竞赛A题Can He Swim Faster的完整的成品论文。 本论文可以保证原创,保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文…

Python 二次元初音未来桌宠

标题 相关资源文件已经打包成EXE文件,可双击直接运行程序,且文章末尾已附上相关源码,以供大家学习交流,博主主页还有更多Python相关程序案例,秉着开源精神的想法,望大家喜欢,点个关注不迷路&…

vue3学习日记5 - 项目起步

最近发现职场前端用的框架大多为vue,所以最近也跟着黑马程序员vue3的课程进行学习,以下是我的学习记录 视频网址: Day2-11.项目起步-静态资源引入和ErrorLen安装_哔哩哔哩_bilibili 学习日记: vue3学习日记1 - 环境搭建-CSDN博…

【Linux系统】—— vim 的使用

【Linux系统】—— vim 的使用 1 vim 的基本概念2 vim 的多模式3 命令模式下的命令集3.1 进入/退出其他模式3.2 光标移动命令集3.3 复制/剪切/粘贴/删除命令集3.4 撤销命令集3.5 查找命令集3.6 替换命令集3.7 进入与退出替换模式 4 批量化编译5 底行模式6 vim 小技巧7 vim简单配…

JAVA实战开源项目:课程智能组卷系统(Vue+SpringBoot) 附源码

本文项目编号 T 009 ,文末自助获取源码 \color{red}{T009,文末自助获取源码} T009,文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 老…

了解 Ansys Mechanical 中的网格方法:综合指南

网格是每个有限元分析 (FEA) 仿真的支柱。它将几何图形划分为离散单元,使 Ansys Mechanical 能够近似模型在各种条件下的行为。结构良好的网格可确保准确、可靠和计算高效的结果,而结构不佳的网格可能会导致错误、收敛问题或不必要…

【Linux】深刻理解软硬链接

一.软硬链接操作 1.软连接 touch 创建一个文件file.txt ,对该文件创建对应的软链接改怎么做呢? ln -s file.txt file-soft.link .给对应文件创建软连接。 软连接本质就是一个独立的文件,因为我们对应的软连接有独立的inode,他…

施耐德M241与MR30-FBS-MT 在Machine Expert V2.0的组态过程

一、系统概述 MR30分布式IO是一个高度灵活的可扩展分布式 I/O 系统,MR30-FBC-MT用于通过 Modbus TCP 总线将过程信号连接到上一级控制器。 具有以下特点: 结构紧凑 PUSH IN端子,易于安装,布线简单 灵活性高:开关量模…

大数据技术在服饰行业的应用

大数据技术的快速发展为各行各业带来了深刻的变革,本文将详细探讨大数据技术的发展脉络,大数据技术推动服饰企业的数字化转型,旨在为相关领域的研究和实践提供参考。 什么是大数据大数据技术的发展历程大数据在服饰行业的应用总结 1&#xff…

Vue2+OpenLayers添加/删除点、点击事件功能实现(提供Gitee源码)

目录 一、案例截图 二、安装OpenLayers库 三、安装Element-UI 四、代码实现 4.1、添加一个点 4.2、删除所有点 4.3、根据经纬度删除点 4.4、给点添加点击事件 4.5、完整代码 五、Gitee源码 一、案例截图 可以新增/删除标记点,点击标记点可以获取到当前标…

Windows 10 ARM工控主板连接I2S音频芯片

在Windows工控主板应用中,音频功能是一项基本的需求,USB声卡在x86/x64 Windows系统上就可直接免驱使用,但这些USB声卡通常不提供ARM上的Windows系统驱动。本文将介绍如何利用安装在ARM上的Windows工控主板——ESM8400的I2S接口、连接WM8960音…

【Rust】错误处理机制

目录 思维导图 引言 一、错误处理的重要性 1.1 软件中的错误普遍存在 1.2 编译时错误处理要求 二、错误的分类 2.1 可恢复错误(Recoverable Errors) 2.2 不可恢复错误(Unrecoverable Errors) 三、Rust 的错误处理机制 3…

提升租赁效率的租赁小程序全解析

内容概要 在如今快节奏的生活中,租赁小程序俨然成为了提升租赁效率的一把利器。无论是个人还是企业,都会因其便捷的功能而受益。简单来说,租赁小程序能让繁琐的租赁流程变得轻松、高效。在这里,我们将带您畅游租赁小程序的海洋&a…

SSM商城设计与实现

摘 要 本文的主要工作是对基于B/S模式及JSP技术的基于智能推荐的b2c销售网站进行了研究与设计。本文首先介绍了基于智能推荐的b2c销售网站的背景,分析比较了国内外相关基于智能推荐的b2c销售网站的运行模式、系统特点与开发技术。然后分析了目前热点的各种Web应用开…