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

2024-03-02 18:20

本文主要是介绍前端学习第七天-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类名

这篇关于前端学习第七天-css常用样式设置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/767024

相关文章

史上最详细 VUE2.0 全套 demo 讲解 基础3

史上最详细 VUE2.0 全套 demo 讲解 基础3(计算属性) 作者 混元霹雳手-Ziksang 二天基础1+基础2突然突破了1000的收藏率,这使我更觉得大家认可我这种分享模式,这也看的出来vue的热度,我在这段时间的分享中,我一直脑海里在转,如何用最好的demo,和更好的流程去写文章,我相信从基础1开始看,一定能在工作上面有很多大的收获,接下来还是按着我们约定的来 1.本文分享

史上最详细VUE2.0全套demo讲解 基础2

史上最详细VUE2.0全套demo讲解 基础2(列表渲染) 作者 :混元霹雳手-Ziksang 在基础1发布之后,我真心发现,根据api进一步分析,再结合工作中的实际demo给大家讲解之后,大清早就收获了平均一分种一个喜欢,这使我很欣慰,自己的努力没有白费,我决心称热打铁马上出击,打造基础2,在基础上的部分我将给大家讲解列表渲染 v-for指令,在我自己认为这个是基础篇的核心,为什么我要

Vue调试神器vue-devtools 的安装

Vue调试神器 vue-devtools 的安装 问题:为什么要安装该插件: 答案 :因为vue是进行数据驱动的,仅仅从chrome浏览器的控制台进行element查看,是看不到数据的动向的。 未安装的情形: 浏览器的控制台会提示你: 下载vue DevTools扩展以获得更好的开发体验;(插件的GitHub地址:https://github.com/vuejs/vue-devtools)

phpmyadmin常用选项设置

config.inc.php全部内容如下:(以phpmyadmin2.5.4为例) Quote: /* $Id: config.inc.php,v 1.204.2.1 2003/10/10 14:24:24 nijel Exp $ */// vim: expandtab sw=4 ts=4 sts=4: /*** phpMyAdmin Configuration File** All di

利用正则表达式过滤html代码(PHP)

http://www.tin.org/bin/man.cgi?section=7&topic=regex   <? // href替换 function  AHREF2text( $string ) {    return   eregi_replace ( ' <A .*HREF=("|')?([^ "']*)("|')?.*>([^<]*)</A> ' ,   ' [

linux学习:文件属性

在操作文件的时候,经常需要获取文件的属性,比如类型、权限、大小、所有者等等, 这些信息对于比如文件的传输、管理等是必不可少的,而这些信息  这三个函数的功能完全一样,区别是:stat( )参数是一个文件的名字,而 fstat( )的参数是一个已经被打开了的文件的描述符 fd,而lstat( )则可以获取链接文件本身的属性 文件属性的结构体 struct stat{dev_t st_de

35种网站常用Javascript技巧

1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border οncοntextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取、防止复制 3. οnpaste="return fa

【C++学习】C++特殊类的设计

文章标题 1.请设计一个类,不能被实例化2.请设计一个类,不能被拷贝3. 请设计一个类,只能在堆上创建对象4. 请设计一个类,只能在栈上创建对象5.请设计一个类,不能被继承6. 请设计一个类,只能创建一个对象(单例模式) 1.请设计一个类,不能被实例化 分析: 拷贝只会放生在两个场景中:拷贝构造函数以及赋值运算符重载,因此想要让一个类禁止拷贝,只需让该类不能调用拷贝构造函数

为jQuery添加自定义事件机制

关键字: jquery 插件 自定义事件机制     之前一直做flex,现在来做js,觉得js的事件机制不是很好用,参考flex的事件机制为jQuery开发一个插件,即自定义事件。 利用这个插件,jQuery对象能够派发自定义的事件,而父级的对象能够对此事件进行监听,对事件的处理依次分为捕获,目标,冒泡三个阶段。     捕获:从根结点出发,到派发事件的目标对象,如果注册了监听,即会执行监听

基于uQRCode封装的前端二维码生成组件实践

在前端开发中,二维码生成已成为一种常见需求。二维码凭借其简洁、方便的特点,被广泛应用于产品推广、信息交互等多个场景。在此背景下,开发一个易于使用且性能优越的二维码生成组件变得至关重要。本文基于uQRCode封装了一个前端二维码生成组件,并对其进行了详细的实践介绍。 效果图如下: 一、引言 随着移动互联网的普及,二维码技术在各个领域得到了广泛应用。在前端开发中,我们往往需要