HTMLS/CSS3

entropy is true

已于 2024-01-25 18:25:43 修改

阅读量408

点赞数 5

文章标签： css3 前端 css

于 2024-01-16 22:09:18 首次发布

本文链接：https://blog.csdn.net/2301_80148143/article/details/135632670

版权

html5

语义化标签

语义化标签：标签的名字赋予标签意义和作用。

如：p段落，h标题，li列表...

在HTML5中每一个区块都有对应语义化标签

<!-- 头部 -->
<header></header>
<!-- 主体 -->
<main></main>
<!-- 底部 -->
<footer></footer>

<!-- 头部 -->
<header>header</header>
<!-- 主体 -->
<main>
    <!-- 导航 -->
    <nav>nav</nav>
    <!-- 区块 -->
    <section>section</section>
    <section>section</section>
</main>
<!-- 侧边栏 -->
<aside></aside>
<!-- 底部 -->
<footer></footer>

以上图片仅供个人学习所用，侵权必删。

<header></header>头部

header 标签用于展示介绍性内容，通常包含一组介绍性的或者是辅助导航的实用元素

<main></main>主体

main标签通常是页面的主体内容区域

<footer></footer>底部

footer :表示页面页脚部分的版权数据、与文档相关的链接、责任声明等信息。

<nav></nav>导航

nav:定义文档或者页面的导航

<aside><//aside>侧边栏

aside :定义页面的侧边栏内容

<section></section>区域块

section: 定义文档中的节，区域块section 更像接近 div 的语义，就是在页面中开辟一块空间

css3

css伪代码-::after/::before

伪元素就是利用 css 代码在标签内部的前面，或者后面添加一个行内元素，这个行内元素你可以理解为 span 。

伪元素写法：

/* before */
选择器::before{
  /* 使用空白符号占位 */
  content: '';
}

/* after */
选择器::after{
  /* 使用空白符号占位 */
  content: '';
}

清除浮动

只需在父盒子上添加clearfix类名即可。

哪个盒子元素的子元素有浮动，就在哪个盒子上添加清除浮动

事件伪类

hover--鼠标移动上去

:hover一个标签来改变另一个标签的属性

：hover父元素，改变直接子元素的属性。

当鼠标移动上去以后，对应的地方，样式会发生改变。

完成这两种状态的转换，能完成这种转换过程的就是伪类。

li:hover{
    background-color: #47A0FC;
    color: white;
}

改变直接子元素的样式

<div>
    <span></span>
</div>

div:hover>span{
    background:blue;
}

active--鼠标点击时

active：鼠标点击时候的效果，这个效果在超链接中比较常见，注意这里的点击是点住鼠标不松开。

ul>li:active{
    /* 要改变的效果 */
    color: black;
}

hover一定要在 active 之前，否则不会生效。

focus--获取焦点后

focus:获取焦点的伪类，一般用于具有焦点的元素，比如 input比如我们可以让 input 获取到焦点以后，改变 input 的边框颜色

如何显示/隐藏元素

通过display:none来隐藏元素。

列表伪类

匹配父元素中第一个子元素：first-child

匹配父元素中最后一个子元素：last-child

匹配父元素中的第n个子元素-：nth-child(n)

odd（奇）even(偶)

列表伪类的适用条件是，同一级别，相同元素

display控制元素的显示和隐藏

display:none;

css装饰（cursor）

cursor鼠标箭头的变化，就是cursor实现的。如：

 cursor: pointer;

Flex弹性布局

其中最显著的效果就是把原来从上到下排列的块状元素变成水平排列。

注意:设为 Flex 布局以后，子元素的 float、clear 和 vertical-align属性将失效。

采用 Flex 布局的元素，称为 Flex 容器 (flex container) ，简称”容器”。它的所有子元素称为 Flex 项目 (flex item)，简称“项目”。采用 Flex 布局的元素，称为 Flex 容器 (flex container) ，简称”容器”。它的所有子元素称为 Flex 项目 (flex item)，简称“项目”。

fix布局中控制水平方向分布

1.调整水平方向的分布justify-content

justify--content属性定义了项目在水平方向上的对齐方式（justify--content 是容器的属性，设置在容器上）

2.调整垂直方向上的分布 align-items

align-items属性定义项目在垂直方向上如何对齐

-换行（flex-wrap）

flex-wrap:nowrap | wrap | wrap--reserve;

调整项目的大小（放大或压缩）

fiex:none不允许项目的压缩或放大

项目自动充满剩余的空间flex:1；

两栏自适应布局

两栏自适应布局指的是一栏固定宽度，另一栏随浏览器宽度的变化自动调节自己的宽度。

flex-direction 可以改变项目的排列方向

flex-direction:column使横向三栏变为纵向。

主轴：水平，从左到右

交叉轴：垂直，从上到下

通过设置flex-direction改变主轴和交叉轴的方向。

row:默认值

row-reverse:主轴为水平方向，起点在右端，

column：主轴为垂直方向，起点在上沿。

column-reverse:主轴为垂直方向，起点在下沿。

单行文本省略

/* 强制不换行 */
white-space: nowrap;
/* 隐藏超出部分 */
overflow: hidden;
/* 用省略号代替剩余内容 */
text-overflow: ellipsis;

多行文本超出省略

/* 隐藏超出部分 */
overflow : hidden;
/* 文本超出就用省略号 */
text-overflow: ellipsis;
/* 把对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* WebKit内核的浏览器的私有属性，设置文本超出2行就用省略号 */
-webkit-line-clamp: 2;
/* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;