html-day06继承&文本溢出&元素类型

简介: html-day06继承&文本溢出&元素类型

html-day06继承&文本溢出&元素类型


1.继承 【面试题】

概念:有上下级关系的元素之间,上级元素的样式被下级元素所拥有,这个现象就是继承。
文本相关的属性和列表相关的属性会被继承。
面试题:请列举15个会被继承的属性!

2.单行文本溢出显示省略号 【面试题】

1.设置宽度  width:*px;
2.强制不换行   white-space:nowrap;
3.设置溢出隐藏  overflow:hidden;
4.设置溢出的标识是省略号    text-overflow:ellipsis;
多行文本溢出显示省略号,用js实现。
 white-space:nowrap不换行 | pre保留原格式 (pre-line | pre-wrap)| normal
 overflow:hidden隐藏 | auto自动调整是否出现滚动条 | scroll滚动条;
 text-overflow:ellipsis省略号 | clip切割;

3.元素类型及转换

常规分类:
    块级元素:默认独占整行,可以设置宽高等
    行级元素:有多宽占据多宽,不可以设置宽高、垂直方向的内外边距。
    行内块元素:有多宽占据多宽,可以设置宽高等。
    可变元素:了解
非主流分类:
    置换元素:浏览器通过解析元素的属性和属性值,决定渲染什么样的效果。 input  img   button 
    非置换元素:除去置换的就是非置换。
元素类型的转换语法:
    display: inline 行级元素 | block块级元素 | inline-block行内块元素 | none 隐藏;
隐藏应用场景:类似button整块区域都可以点击跳转给 a 设置隐藏
让谁显示,鼠标就悬停在该元素的父级上

4层级选择器

   e   f{ }   选中e元素的后代f
    e > f{ }   选中e元素的子代f
    e,f{   }   选中e和f

5项目实战

第一步:建立项目英文名称的文件夹
  qianfeng
第二步:项目文件夹里创建css文件夹、images文件夹(imgs)、index.html...
  1、css文件夹
    reset.css(重置样式表) | normalize.css 网络搜索reset.css | nomalize.css cdn cv下来
    common.css(公共样式表)
    index.css(首页 与html文件名称一致)
  2、imgs文件夹
  3、index.html (首页)
  ...
第三步:link链接先reset后index
相关文章
|
6天前
|
前端开发 开发者 容器
|
6天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
15 4
|
6天前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
21 1
|
6天前
|
存储 数据安全/隐私保护
html的输入框类型
html的输入框类型
15 1
|
6天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
6天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如<template>元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
|
6天前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>`等基本元素及`<div>`、`<span>`、`<a>`、`<img>`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
|
6天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
6天前
|
搜索推荐
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
25 0
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
|
6天前
|
JavaScript 前端开发
在JavaScript中怎样获取或修改HTML元素。
在JavaScript中怎样获取或修改HTML元素。