客户端基础

最新推荐文章于 2024-08-10 22:11:57 发布

Goomaay

最新推荐文章于 2024-08-10 22:11:57 发布

阅读量188

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_46447150/article/details/104598102

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了客户端基础，包括HTML和CSS的基本概念。HTML用于定义内容结构，元素类型分为行级、块级和行级块元素。CSS规则由选择器和声明组成，可以通过行间、页面级和外部样式表引入。讨论了盒子模型、选择器优先级、定位体系以及BFC（Block Format Context）的概念。

摘要由CSDN通过智能技术生成

客户端基础

HTML：超文本标记语言 (Hypertext Markup Language) 用来定义内容结构
CSS：层叠样式表 (Cascading Style Sheets)

HTML：

HTML元素是通过使用<>识别
元素标记通常成对出现，没有结束标记的元素称为空标记
开始标记内可添加属性属性名=“属性值” ，属性可为元素添加额外信息

元素类型：

元素类型可分为以下三种：

行级元素(display:inline):内容决定元素的大小，不可通过css改变宽高。行级元素只能嵌套行级元素(注意：p元素不能嵌套 div元素)
块级元素(display:block):独占一行，可通过css改变宽高。块级元素可以嵌套任何元素(注意：a元素不能嵌套 a元素)
行级块元素(display:inline-block):内容决定大小，可根据css改变宽高。

注意：凡是带有 inline 的元素，都具有文字特性

盒子模型：

在这里插入图片描述

margin：外边距 border：壁 padding：内边距最中间部分为内容 ( width / height )

盒子的总宽 Width=margin(两侧)+border(两侧)+padding(两侧)+width(内容部分宽)

盒子的总高 Height=margin(两侧)+border(两侧)+padding(两侧)+height(内容部分高)

语义化结构标记：

标记可表示内部所展示的内容：

<header>头部</header> 
<nav>导航栏</nav>
<aside>附加信息(与周围主题相关)</aside>
<article>内容(表文章或可独立页面存在)</article>
<section>一个整体的部分主体</section>
<footer>尾部脚注</footer>

常用布局：

在这里插入图片描述

<!-- 第一种：最外层容器 固定 内部所有 容器大小 -->
<body>
    <div class="container">
        ....
    </div>
</body>
<!-- 第二种：最外层容器 只固定 头部容器以下 的容器大小 -->
<body>
    <header></header>
    <div class="container">
        ....
    </div>
</body>
<!-- 第三种：最外层容器 只固定 头脚容器 之内的 容器大小 -->
<body>
    <header></header>
    <div class="container">
        ....
    </div>
    <footer></footer>
</body>

CSS：

css规则有两个主要的部分构成：选择器，以及一条或多条的声明
每条声明由一个属性和一个值组成( 属性：“属性值” )
选择器通常是你需要改变样式的 HTML 元素

引入方式：

行间样式：写在元素开始标签内的 style 属性中
页面级样式：写在 head 元素中的 style 元素标签中
外部 css 文件：head 元素标签中引入 link 元素标签

选择器：

id 选择器，只可一对一
class、属性、伪类选择器，可以多对多
标签选择器、伪元素，选择所有的当前元素标签( div : 选择所有为 div 的元素标签 )
通配符选择器( * )，选择所有元素标签

层叠过程：

优先级（使用优先级高的，相同则比较特殊性） --> 特殊性（使用特殊性高，相同则使用源次序） --> 源次序（靠后的覆盖前面的）

优先级 ( 权重 )：当所有元素标签同时使用时，会有一个优先级顺序，这由权重值决定：

! important infinity

行间样式 1000

id 100

class | 属性 | 伪类 10

标签 | 伪元素 1

通配符 ( * ) 0

注意：这里的进制为 256 进制

声明冲突：属性相同，值不同

继承：子级会继承父级的某些 css 样式（文本类样式具有继承性）

定位体系：

三种定位体系：1.常规流 2.浮动流 3.定位流

常规流元素：在没有 css 的干预下，块级元素独占一行，行级元素并排显示，宽高自动
浮动元素：浮动元素的顶边，不得高于上一浮动元素的顶边
- 浮动元素摆放时会避开常规流元素
- 常规流元素摆放时无视浮动元素
( 子级浮动会导致父级高度塌陷 )
position 定位：

3.1.absolute：脱离原位置进行定位，相对最近有定位的父级进行定位，父级没有定位就相对文档进行定位

3.2.relative：保留原位置，相对自己的位置进行定位

3.3.fixed：固定位置

BFC ( Block Format Context ) 快格式化上下文

触发元素的 bfc

position ：absolute / fixed
display ：inline - block
float：left / right
overflow：hidden

bfc 的特性

使 bfc 内部浮动元素不会到处乱跑
和浮动元素盒子产生边界
阻止 margin 塌陷

浮动

清除浮动流必须要块级元素，行级元素无法勘测浮动流（文本元素可以看见浮动流）
块级元素只要添加或者清除浮动则会转化为行级元素
可用伪元素清除浮动，伪元素为行级元素，本身就存在

Goomaay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
客户端基础

客户端基础HTML：超文本标记语言 (Hypertext Markup Language) 用来定义内容结构CSS：层叠样式表 (Cascading Style Sheets)HTML：HTML元素是通过使用<>识别元素标记通常成对出现，没有结束标记的元素称为空标记开始标记内可添加属性属性名=“属性值” ，属性可为元素添加额外信息元素类型：元素类型可...
复制链接

扫一扫