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

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

相关推荐
互联网-小阿宇29 分钟前
【HTML+CSS+JS+VUE】web前端教程-31-css3新特性
前端·javascript·css
林涧泣32 分钟前
【Uniapp-Vue3】@import导入css样式及scss变量用法与static目录
css·uni-app·scss
han_1 小时前
为实现前端截图功能,我的dom-to-image踩坑之旅!
前端·javascript
不修×蝙蝠1 小时前
vue(七) vue进阶
前端·javascript·vue.js·前端框架·vue·ssm·进阶
ihengshuai1 小时前
Gitlab Runner安装与配置
前端·docker·云原生·gitlab·devops
甄同学1 小时前
【WPS】【WORD&WORD】【JavaScript】实现微软WORD自动更正的效果
开发语言·前端·javascript
passerby60611 小时前
实现一个响应式的本地存储localStorage
前端
用户9557660609582 小时前
**利用RAG和Self-Query优化检索:快速上手指南**
前端
JINGWHALE13 小时前
设计模式 行为型 备忘录模式(Memento Pattern)与 常见技术框架应用 解析
前端·人工智能·后端·设计模式·性能优化·系统架构·备忘录模式
用户9557660609583 小时前
**轻松实现RAG!使用Ollama和OpenAI的多查询检索模板讲解**
前端