前端学习第七天-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里的hoveractive状态的变化触发事件

  • 阻止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.mzph.cn/news/719562.shtml

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

相关文章

数据结构从入门到精通——链表

链表 前言一、链表1.1 链表的概念及结构1.2 链表的分类1.3 链表的实现1.4 链表面试题1.5 双向链表的实现 二、顺序表和链表的区别三、单项链表实现具体代码text.htext.cmain.c单链表的打印空间的开辟链表的头插、尾插链表的头删、尾删链表中元素的查找链表在指定位置之前、之后…

LabVIEW齿轮传动健康状态静电在线监测

LabVIEW齿轮传动健康状态静电在线监测 随着工业自动化的不断发展&#xff0c;齿轮传动作为最常见的机械传动方式之一&#xff0c;在各种机械设备中发挥着至关重要的作用。然而&#xff0c;齿轮在长期运行过程中易受到磨损、变形等因素影响&#xff0c;进而影响整个机械系统的稳…

【爬虫实战】——Python爬取天气信息

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

大模型推荐落地啦!融合知识图谱,蚂蚁集团发布!

引言&#xff1a;电商推荐系统的新突破 随着电子商务平台的蓬勃发展&#xff0c;推荐系统已成为帮助用户在信息过载时代中筛选和发现产品的关键工具。然而&#xff0c;传统的推荐系统主要依赖历史数据和用户反馈&#xff0c;这限制了它们在新商品推出和用户意图转变时的有效性…

使用AspectJ进行面向切面编程(AOP)

第1章 引言 大家好&#xff0c;我是小黑&#xff0c;业务开发中&#xff0c;咱们经常会遇到这样的情况&#xff1a;有些代码几乎在每个方法里都要用到&#xff0c;比如日志记录、权限校验、或者性能监测。如果每次都手动加入这些代码&#xff0c;不仅效率低下&#xff0c;而且…

深入了解接口测试:方法、工具和关键考虑因素

接口测试是软件测试中的一项重要工作&#xff0c;它涉及到系统与系统之间的交互点。接口可以是外部接口&#xff0c;也可以是内部接口&#xff0c;包括上层服务与下层服务接口以及同级接口。在接口测试中&#xff0c;我们需要确保接口能够按照预期的方式进行通信和交互&#xf…

C++ 模拟OJ

目录 1、1576. 替换所有的问号 2、 495. 提莫攻击 3、6. Z 字形变换 4、38. 外观数列 5、 1419. 数青蛙 1、1576. 替换所有的问号 思路&#xff1a;分情况讨论 ?zs&#xff1a;左边没有元素&#xff0c;则仅需保证替换元素与右侧不相等&#xff1b;z?s&#xff1a;左右都…

islide2024免费版PPT插件下载

一、功能概览 iSlide PPT插件是一款专为PowerPoint用户设计的辅助工具&#xff0c;其功能全面且实用&#xff0c;主要包括但不限于以下几点&#xff1a; 设计元素库&#xff1a;提供丰富的设计元素&#xff0c;如主题、布局、图标、配色等&#xff0c;用户可以直接拖拽使用&a…

【Python】OpenCV-使用ResNet50进行图像分类

使用ResNet50进行图像分类 如何使用ResNet50模型对图像进行分类。 import os import cv2 import numpy as np from tensorflow.keras.applications.resnet50 import ResNet50, preprocess_input, decode_predictions from tensorflow.keras.preprocessing import image# 设置…

【Python】进阶学习:pandas--read_excel()函数的基本使用

【Python】进阶学习&#xff1a;pandas–read_excel()函数的基本使用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希…

【好书推荐-第七期】《RTC程序设计:实时音视频权威指南》(音视频开发必看!)

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公粽号&#xff1a;洲与AI。 &#x1f388; 本文专栏&#xff1a;本文收录…

nodejs,JSDOM 补 window环境

window[atob] 是一个在浏览器中使用的 JavaScript 函数&#xff0c;用于将 base64 编码的字符串解码为原始数据。具体来说&#xff0c;atob 函数会将 base64 字符串解码为一个 DOMString&#xff0c;其中包含解码后的二进制数据。这在处理从服务器获取的 base64 编码的数据或在…

多平台拼音输入法软件的开发

拼音输入法从上个世纪发展到现在, 已经发展了几十年了, 技术上已经非常成熟了. 换句话说, 就是实际上没多少技术含量, 随便来个人就能手搓一个. 本文介绍一个简单的多平台拼音输入法软件的设计和实现, 支持 GNU/Linux (ibus) 平台 (PC) 和 Android 平台 (手机). 目录 1 中文输…

E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系。

比如&#xff0c;安装ros的时候&#xff0c;用 执行&#xff1a; sudo apt install ros-melodic-desktop-full 出现如下问题&#xff1a; 如果你根据提示&#xff0c;安装ros-melodic-desktop&#xff0c;他有会说类似“E: 无法修正错误&#xff0c;因为您要求某些软件包保持…

Vue.js入门指南:简介、环境配置与Yarn创建项目

一、Vue.js简介 Vue.js&#xff0c;一个流行的JavaScript框架&#xff0c;以其直观、灵活和高效的特点&#xff0c;在前端开发者中赢得了广泛的赞誉。Vue.js的核心库专注于视图层&#xff0c;使得开发者能够构建出响应式的数据绑定和组合的视图组件。Vue.js的目标是通过尽可能简…

BUUCTF---[极客大挑战 2019]Http1

1.题目描述&#xff0c;在地址框输入下面的网址 2.来到页面&#xff0c;ctrlu查看源码&#xff0c;仔细观察会看到一个.php的跳转页面 3.点进去页面提示It doesnt come from https://Sycsecret.buuoj.cn 4.页面提示它不是来源于这个网址&#xff0c;我们需要用bp抓包对数据进行…

Web开发介绍,制作小网站流程和需要的技术【详解】

1.什么是web开发 Web&#xff1a;全球广域网&#xff0c;也称为万维网(www World Wide Web)&#xff0c;能够通过浏览器访问的网站。 所以Web开发说白了&#xff0c;就是开发网站的&#xff0c;例如网站&#xff1a;淘宝&#xff0c;京东等等 2. 网站的工作流程 1.首先我们需…

sparse transformer 常见稀疏注意力

参考&#xff1a; https://zhuanlan.zhihu.com/p/259591644 主要就是降低transformer自注意力模块的复杂度 复杂度主要就是 Q K^T影响的&#xff0c;稀疏注意力就是在Q点乘K的转置这模块做文章 下列式一些sparse transformer稀疏注意力方法 a、transformer原始的 &#xff0…

b站小土堆pytorch学习记录—— P17 土堆说卷积操作

文章目录 一、前置知识什么是卷积操作 二、代码 一、前置知识 什么是卷积操作 推荐几个高赞博客&#xff1a; 卷积最容易理解的解释 卷积神经网络&#xff08;CNN&#xff09;详细介绍及其原理详解 还有pytorch官网的动态图&#xff1a; pytorch卷积 二、代码 import t…