前端学习第七天-css常用样式设置

达标要求

  • 掌握元素的显示与隐藏

  • 熟练应用溢出的文字隐藏

  • 熟练掌握版心和布局流程

1. 元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告。

1.1 display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。

1.2 visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置。

1.3 overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

1.4显示与隐藏总结

属性区别用途
display隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility隐藏对象，保留位置使用较少
overflow只是隐藏超出大小的部分1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

2. CSS用户界面样式

所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽

2.1 鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本 | not-allowed

鼠标放我身上查看效果哦：

<ul><li style="cursor:default">我是小白</li><li style="cursor:pointer">我是小手</li><li style="cursor:move">我是移动</li><li style="cursor:text">我是文本</li><li style="cursor:not-allowed"> 禁止</li>
</ul>

2.2 pointer-events(了解)

.disabled {pointer-events: none;
}

  • 阻止用户的点击动作产生任何效果

  • 阻止缺省鼠标指针的显示

  • 阻止CSS里的hover和active状态的变化触发事件

  • 阻止JavaScript点击动作触发的事件

2.3 轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width 
p{outline: #00FF00 dotted thick;}

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ： outline: 0; 或者 outline: none;

 <input type="text" style="outline: 0;"/>

2.4 vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

vertical-align : baseline |top |middle |bottom

设置或检索对象(图片、表单)内容的垂直对其方式，样式设定到图片或表单的选择器上。

值描述
baseline默认。元素放置在父元素的基线上。
top把元素的顶端与行中最高元素的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

3. 溢出的文字隐藏

3.1 word-break:自动换行

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

主要处理英文单词

3.2 white-space

如何处理元素内的空白

属性名white-space
属性值normal | nowrap
默认值normal
描述设置如何处理元素内的空白

  • normal：默认处理方式。空白会被浏览器忽略

  • nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。

下面的表格给总结了 white-space 属性的行为：

值空白符换行符自动换行
normal合并忽略允许
nowrap合并忽略不允许

3.3 text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

clip : 　不显示省略标记（...），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（...）

注意一定要首先强制一行内显示，再次和overflow属性 搭配使用

.hid-kk{width: 100px;height: 100px;display: block;/*1. 先强制一行内显示文本*/white-space: nowrap;/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;
}

4. CSS的书写顺序

（1）定位属性：position display float left top right bottom overflow clear z-index

（2）自身属性：width height padding border margin background

（3）文字样式：font-family font-size font-style font-weight font-varient color

（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

（5）css3中新增属性：content box-shadow border-radius transform……

按照上述1 2 3 4 5的顺序进行书写。

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

原理：浏览器的渲染流程

5. 版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

5.1 布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构 。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

5.2 一列固定宽度且居中

最为常用的结构

5.3 两列左窄右宽型

比如:小米官网

5.4 通栏平均分布型

比如:中岚签证

6. BFC(块级格式化上下文)

6.1 什么是BFC

BFC(Block formatting context)直译为"块级格式化上下文"。

在官方文档到中介绍：一个BFC区域包含创建该上下文元素的所有子元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。

6.2 如何创建BFC

  1. html根元素

  2. 设置浮动,float的值是left或者right

  3. 设置定位

    • position不是static或者relative

    • 是absoulte或者fixed

  4. display的值是inline-block,table-cell(表格单元格)等

  5. 设置overflow

    • overflow的值不是visible

    • 是hidden，auto，scroll

  6. 弹性布局，flex

6.3 利用BFC解决问题

  1. 解决外边距的塌陷问题(垂直塌陷)

  2. 利用BFC解决包含塌陷

  3. 清除浮动产生的影响

  4. BFC可以阻止标准流元素被浮动元素覆盖

    注意点:

    • 一个BFC区域只包含其子元素，不包括其子元素的子元素。

    • 并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。

    • 不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响

7.扩展

web前端开发规范

常见css类名

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Springboot接口参数校验

Springboot接口参数校验

在设计接口时我们通常需要对接口中的非法参数做校验&#xff0c;以降低在程序运行时因为一些非法参数而导致程序发生异常的风险&#xff0c;例如登录的时候需要校验用户名密码是否为空&#xff0c;创建用户的时候需要校验邮件、手机号码格式是否准确。如果在代码中对接口参数一…
阅读更多...
【Git教程】（三）提交详解 —— add、commit、status、stach命令的说明，提交散列值与历史，多次提交及忽略 ~

【Git教程】（三）提交详解 —— add、commit、status、stach命令的说明，提交散列值与历史，多次提交及忽略 ~

Git教程 提交详解 1️⃣ 访问权限与时间戳2️⃣ add命令与 commit 命令3️⃣ 提交散列值4️⃣ 提交历史5️⃣ 一种特别的提交查看方法6️⃣ 同一项目的多部不同历史6.1 部分输出&#xff1a;-n6.2 格式化输出&#xff1a;--format、--oneline6.3 统计修改信息&#xff1a;--st…
阅读更多...
Linux内存地址空间

Linux内存地址空间

目录 一、虚拟地址空间 1.虚拟地址空间的定义 2.虚拟地址空间的布局 二、内存壁垒 1.内存壁垒的定义​编辑 2.段错误 三、内存映射的建立与解除 &#xff08;1&#xff09;mmap &#xff08;2&#xff09;munmap &#xff08;3&#xff09;堆内存的分配和释放 1.sbrk …
阅读更多...
浅析能耗监测系统在大型数据中心的应用

浅析能耗监测系统在大型数据中心的应用

彭姝麟 Acrelpsl 1总体设计 大型数据中心能耗监测系统包含硬件和软件两大部分&#xff0c;其硬件组成主要包括监控服务器、主机设备、网络设备、环境参数传感器、通风模块等&#xff0c;总体采集逻辑采用三级监控体系。一级为主机设备&#xff0c;作为系统的应用层&#xff0c…
阅读更多...
【JSON2WEB】06 JSON2WEB前端框架搭建

【JSON2WEB】06 JSON2WEB前端框架搭建

【JSON2WEB】01 WEB管理信息系统架构设计 【JSON2WEB】02 JSON2WEB初步UI设计 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代码前端框架介绍 【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成 前端技术路线太多了&#xff0c;知识点更多&…
阅读更多...
【Maven】Maven 基础教程（一）：基础介绍、开发环境配置

【Maven】Maven 基础教程（一）：基础介绍、开发环境配置

《Maven 基础教程》系列&#xff0c;包含以下 3 篇文章&#xff1a; Maven 基础教程&#xff08;一&#xff09;&#xff1a;基础介绍、开发环境配置Maven 基础教程&#xff08;二&#xff09;&#xff1a;Maven 的使用Maven 基础教程&#xff08;三&#xff09;&#xff1a;b…
阅读更多...
探索数据宇宙：深入解析大数据分析与管理技术

探索数据宇宙：深入解析大数据分析与管理技术

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…
阅读更多...
Linux技巧|centos7|重新认识和学习egrep和grep命令

Linux技巧|centos7|重新认识和学习egrep和grep命令

前言&#xff1a; 相信提高文本检索工具&#xff0c;大家脑海里肯定有很多工具会自动跳出来&#xff0c;比如&#xff0c;grep&#xff0c;egrep&#xff0c;sed&#xff0c;cat&#xff0c;more&#xff0c;less&#xff0c;cut&#xff0c;awk&#xff0c;vim&#xff0c;vi…
阅读更多...
排序算法--堆排序

排序算法--堆排序

堆排序的时间复杂度是O&#xff08;N*logN&#xff09;&#xff0c;优于选择排序O&#xff08;N^2&#xff09; 一、堆 1.堆的概念&#xff1a;堆一般指的是二叉堆&#xff0c;顾名思义&#xff0c;二叉堆是完全二叉树或者近似完全二 2.堆的性质&#xff1a;①完全二叉树 ②每…
阅读更多...
【QT+QGIS跨平台编译】之六十二：【QGIS_CORE跨平台编译】—【错误处理：未定义类型QgsPolymorphicRelation】

【QT+QGIS跨平台编译】之六十二：【QGIS_CORE跨平台编译】—【错误处理：未定义类型QgsPolymorphicRelation】

文章目录 一、未定义类型QgsPolymorphicRelation二、解决办法一、未定义类型QgsPolymorphicRelation 报错信息： 错误原因为，使用了未定义类型 QgsPolymorphicRelation 二、解决办法 QgsRelation.h文件中 ①注释第36行： //class QgsPolymorphicRelation;②注释第414行： …
阅读更多...
智能家居控制系统（51单片机）

智能家居控制系统（51单片机）

smart_home_control_system 51单片机课设&#xff0c;智能家居控制系统 使用及转载请标明出处&#xff08;最好点个赞及star哈哈&#xff09; Github地址&#xff0c;带有PPT及流程图 Gitee码云地址&#xff0c;带有PPT及流程图 ​ 以STC89C52为主控芯片&#xff0c;以矩阵键…
阅读更多...
Linux Shell脚本练习（一）

Linux Shell脚本练习（一）

一、 Linux下执行Shell脚本的方式&#xff1a; 1、用shell程序执行脚本&#xff1a; a、根据你的shell脚本的类型&#xff0c;选择shell程序&#xff0c;常用的有sh&#xff0c;bash&#xff0c;tcsh等 b、程序的第一行#!/bin/bash里面指明了shell类型的&#xff0c;比如#!/…
阅读更多...
【监督学习之支持向量机（SVM）】

【监督学习之支持向量机（SVM）】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱基本原理支持向量线性SVM与非线性SVM优化问题软间隔与正则化SVM的应用实现 简述概要 了解监督学习-支持向量机&#xff08;SVM&#xff09; 知识图谱 支持向量机&#xff08;Support Vector Machine&…
阅读更多...
WPF的DataGrid自动生成中文列头

WPF的DataGrid自动生成中文列头

直接将一个对象集合绑定到DataGrid上面&#xff0c;设置自动生成列AutoGenerateColumns"True"&#xff0c;DataGrid会自动根据对象类的属性生成对应的列 示例类对象&#xff1a; public class DataModel{public int Id { get; set; }public string Name { get; set;…
阅读更多...
网站添加pwa操作和配置manifest.json后，没有效果排查问题

网站添加pwa操作和配置manifest.json后，没有效果排查问题

pwa技术官网&#xff1a;https://web.dev/learn/pwa 应用清单manifest.json文件字段说明&#xff1a;https://web.dev/articles/add-manifest?hlzh-cn Web App Manifest&#xff1a;Web App Manifest | MDN 当网站添加了manifest.json文件后&#xff0c;也引入到html中了&a…
阅读更多...
构建大语言模型的四个主要阶段

构建大语言模型的四个主要阶段

大规模语言模型的发展历程虽然只有短短不到五年的时间&#xff0c;但是发展速度相当惊人&#xff0c;国内外有超过百种大模型相继发布。中国人民大学赵鑫教授团队在文献按照时间线给出 2019 年至 2023 年比较有影响力并且模型参数量超过 100 亿的大规模语言模型。大规模语言模型…
阅读更多...
66-ES6：var,let,const，函数的声明方式，函数参数，剩余函数，延展操作符，严格模式

66-ES6：var,let,const，函数的声明方式，函数参数，剩余函数，延展操作符，严格模式

1.JavaScript语言的执行流程 编译阶段&#xff1a;构建执行函数&#xff1b;执行阶段&#xff1a;代码依次执行 2.代码块&#xff1a;{ } 3.变量声明方式var 有声明提升&#xff0c;允许重复声明&#xff0c;声明函数级作用域 访问&#xff1a;声明后访问都是正常的&…
阅读更多...
集成2.5G/5G/10G高速率网络变压器的RJ45网口连接器产品特点介绍

集成2.5G/5G/10G高速率网络变压器的RJ45网口连接器产品特点介绍

Hqst华轩盛(石门盈盛)电子导读&#xff1a;集成2.5G/5G/10G高速率网络变压器的RJ45网口连接器产品特点介绍&#xff1a; 第一、 高速率&#xff1a;支持高达2.5Gbps、5Gbps和10Gbps的传输速率&#xff0c;能够满足高带宽的网络应用需求。 第二、 集成2.5G/5G/10G高速率网…
阅读更多...
【C++庖丁解牛】类与对象

【C++庖丁解牛】类与对象

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.面向过程和面向对象…
阅读更多...
【5G 接口协议】GTP-U协议介绍

【5G 接口协议】GTP-U协议介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023