HTML
CSS
JavaScript基础
JavaScript(高级)DOM
React
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
——百度百科
/*
给谁更改样式 {改什么样式}
*/
p{
color: red; //键值对
font-size: 200px;
}
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说,就是选择标签用的。
<head>
与<head>
之间,并且用<style></style>
括起来,还可以单独文件(具体看第四章)<style></style>
可以放到任何地方,通俗约定放在head里略 想看的点击
选择器分为基础选择器
和复合选择器两大类
基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指绽定统一的CSS样式。
作用:
标签选择器可以把某一类标签全部选择出来,比如所有的<div>
标签和所有的<span>
标签。
优点:
能快速为页面中同类型的标签统一设置样式。
不能设计差异化样式,只能选择全部的当前标签
标签名 {
属性1: 属性值;
属性2: 属性值;
属性3: 属性值;
...
}
.red {
color: red;
}
<ul>
<li class="red">标签</li>
<li>web标准</li>
</ul>
不能用标签做类名
可以用短横线 - 命名
不要用纯数字,中文等命名
.setred {
color: red;
}
.font-size {
font-size: 40px;
}
<h1 class="setred font-size">红色,40像素字体大小</h1>//类与类之间空格空开即可
#id名 {
属性1: 属性值;
属性2: 属性值;
属性3: 属性值;
...
}
与类的区别:样式是通过#来定义的,结构通过id调用,只能调用1次,别人无法使用!
id经常与JavaScript搭配使用
选取页面中所有的元素(标签)
* {
color: red;
}
font-family: '字体名(尽量用英文名)';
font-size: 40px;
font-weight: bold; //(normal 、 bold 、 bolder 、 lighter 、 number)
font-style: italic; // 设置字体样式(倾斜)
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体加引号.
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
最常见的几个字体: body {font-family. ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’;}
字体大小设置
字体粗细设置
字体样式
这种方式比较难级,大家斟酌使用!
body{
font: font-style font-weight font-size/line-height font-family;
}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用
表示 | 属性值 |
---|---|
预定义的颜值 | red 、green、blue 、 pink |
十六进制 | #FF0000 、 #FF6600、#29D794 |
RGB代码 | rgb(83, 23, 23) |
text-align
属性用于设置元素内文本的对齐方式
属性值 | 解释 |
---|---|
center | 水平居中对齐 |
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
text-decoration
属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
记住如何添加下划线和删除下划线,其余了解即可
属性值 | 描述 |
---|---|
none | 默认 ,没有装饰线 |
underline | 下划线,<a> 自带下划线(常用) |
overline | 上划线(几乎不用) |
line-through | 删除线(不常用) |
text-indent
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
文本缩进属性用来指定文本的第一行的缩进,通常是将段落的首行缩进.
p {
text-indent: 2em; //也可以是px像素的单位,em是两个文字的距离
}
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.
行距并不改变文字的高度,而是改变上间距和下间距的高度,默认的行间距为16px(也就是文字的高度)
行间距 = 上间距+下间距+文本高度
p {
text-indent: 2em;
line-height: 60px;
}
按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类:
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3.外部样式表(链接式)
之前用的都是内部样式表,所以具体用法这里不再阐述
内部样式表(内嵌样式表)是写到html页面内部.是将所有的CSS代码抽取出来,单独放到一个<style>
标签中。<style>
标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>
标签中
通过此种方式,可以方便控制当前整个页面中的元素样式设置
代码结构清晰,但是并没有实现结构与样式完全分离
不好用,行内写容易被打
实际开发都是外部样式表.适合于样式比较多的情况.核心是:样式单独写到CSS文件中,之后把CSS到HTML页面中使用.
第一步 : 新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。
第二部 : 在HTML页面中,使用标签引入这个文件。
其中属性 rel 作用是 :定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet"”,表示被链接的文档是一个样式表css文件。
href 的 作 用 是 定义所链接外部样式表文件的路径,可以是相对路径,也可以是绝对路径。
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
1.生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成<div></div>
2.如果想要生成多个相同标签加上*
就可以了比如div*3
就可以快速生成3个div
3.如果有父子级关系的标签,可以用>
比如ul> li
就可以了
4.如果有兄弟关系的标签,用+
就可以了比如div+p
5.如果生成带有类名或者id名字的,直接写.demo或者#two tab键就可以了
6.约束标签并创建带类名的标签或带id的标签
7 .如果生成的div
类名是有顺序的,可以用自增符号$
8.如果想要在生成的标签内部写内容可以用{}表示
语法中不能有空格,要不然生成不了
CSS基本采取简写形式即可.
1. 比如 w200按tab 可以生成 width: 200px;
2.比如lh26按tab 可以生成line-height: 26px;
Ctrl+Alt+F
设置自动保存时,格式化代码
Ctrl+S即可格式化
没有的就别挣扎了,手动格式化也挺方便的
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括∶后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
元素1 元素2 {
样式...
}
元素1和元素2中间用空格隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2可以是儿子,也可以是孙了等,只要是元素1的后代即可
元素1和元素2可以是任意基础选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
(亲儿子选择器)
元素 > 元素2 {
样式声明
}
<div>
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分
div,
p,
.pig h1 {
color: pink;
}
<div>
<h1>啦啦啦</h1>
</div>
<p>我是段落</p>
<p>我是段落2</p>
<div class="pig">
<h1>我是粉色</h1>
</div>
并集选择器竖着写
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:
)表示,比如:hover .:first-child。
选择器 | 功能 |
---|---|
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已被访问的链接 |
a:hover | 选择鼠标指针位于其上的链接 |
a:active | 选择活动链接 |
1.为了确保生效,请按照LVHA的循顺序声明:link - :visited - :hover - :active。
2.记忆法:love hate或者lv包包hao 。
3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
:focus伪类选择器用于选取获得焦点
的表单元素。
焦点就是光标,一般情况<input>
类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体 | 较多 | 符号是逗号 .nav,header |
链接伪类选择 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}(设置a标签的css样式)和a:hover实际开发中的写法 |
:focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus记住这个写法 |
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>
自己占一行,比如一行可以放多个<span>
。
HTML元素一般分为块元素
和行内元素
两种类型。
<h1>~<h6>、<p>、<div>、<u>、<ol>、<li>
等,其中
注意
文字类的元素内不能使用块级元素
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素,特别是不能放<div>
同理,<h1>~<h6>
等都是文字类块级标签,里面也不能放其他块级元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
等
其中<span>
标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点︰
<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全(下面会讲)在行内元素中有几个特殊的标签——<img />、<input />、<td>,
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
特点:
1、和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
2、默认宽度就是它本身内容的宽度(行内元素特点)。
3、高度,行高、外边距以及内边距都可以控制(块级元素特点)。
特殊情况下,我们需要元素模式的转换,简单理解一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围。
行内元素转换为块元素display:block;
放到css里,即可将行内元素转换为块级元素
display:inline;
display:inline-block;
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
background-color: 颜色或transparent(透明);
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)
background-image:url(路径);
background-repeat:repeat|no-repeat|repeat-x|repeat-y
平铺、不平铺,沿着x轴平铺,沿着y轴平铺
默认情况下,背景是平铺的
background-position属性改变图片在背景的位置
参数值 | 说明 |
---|---|
length | 百分数 ; 由浮点数字和单位标识符组成的长度值 |
position | top、 center 、 bottom 、 left 、 center 、 right 方位名词 |
.imge {
width: 500px;
height: 5000px;
background-image: url(/image/xin.png);
background-repeat: no-repeat;
background-color: rgb(156, 153, 153);
background-position: top right; /*背景图片调整位置*/
}
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值是y坐标
background-position: left 30px;
background-attachment
参数 | 作用 |
---|---|
scroll | 背景图像是随着对象内容而滚动 |
fixed | 背景图像固定 |
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: rgb(255, 255, 255) no-repeat
url(/image/xin.png) fixed 20px 200px;
background: rgba(红,绿,蓝,透明度);
权重叠加
所谓盒子模型∶就是把HIML火Thu日1-i内知t,边好外边距、内边距、和实际内容
CSS,盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容
border可以设置元素的边框,边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色
语法:border:border-width || border-style || border-color
复合写法
border: 1px solid red;
边框分开写法
border-top: 1px solid red;
处理边框的粗细问题
问题:两边框之间重叠,需要使用合并
html中提到的cellspacing属性(设置单元格间距【写在html标签中】,当该属性的值为0时,表格边框的厚度为两个重叠的厚度1+1=2px)
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
/*合并相邻的边框*/
border-collapse: collapse;
边框影响实际盒子的大小
设置边框后,会影响实际的盒子的长宽。
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
内边距也会影响盒子的实际大小
内边距添加,不影响盒子大小的情况:如何盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小.作用:当父标签定义了长宽,那么子标签不用设置长宽但设置padding的值,可以不影响盒子大小
margin-bottom: xxpx;
写法与内边距相同
前提是
:
margin:0 auto;
问题又来了,那行内元素和行内块元素怎么居中呢?
行内元素或者行内块元素水平居中给其父元素增加text-align:center
即可
解决:给一个盒子添加外边距即可,不傻!
可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow:hidden。(这种方法最好,不会吧盒子变大)
解决的原理后面还会涉及,请继续往下看
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
* {
padding: 0px;
margin: 0px;
}
/*这段代码一般在css样式内第一行便写*/
行内元素尽量只设置左右的内外边距,顾及兼容性,很多浏览器设置了上下的内外边距也不显示不起作用(必须要设置的话,可以转换为块级元素和行内块元素)
li标签取消前面的符号
list-style: none;
border-radius: length;
radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
原理:用户定义的长度length,取一个同长度的圆,对齐对角的两个边
参数值:
可以是具体参数(px)也可以是百分比
可以跟四个值,分别代表左上角、右上角、右下角、左下角
两个值时,左上右下、右上左下
100%时,就是一个圆
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow(参数挺多,等我细细道来)
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅CSS颜色值。 |
inset | 可选。将外部阴影(outset)改为内部阴影。(outset不能出现在参数中,默认就是outset) |
盒子阴影不影响盒子大小
text-shadow
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
color | 可选。阴影的颜色。请参阅CSS颜色值。 |
网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置.
CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)∶
普通流(标准流)
标签按照规定好的默认方式排列
之前学的那些都是,利用元素排列,从上往下,按照块级、行级、行内块的标准
浮动
后面讲
定位
后面讲
- 多个块级盒子(div)水平排列成一行(不转换成行内块元素)
- 转换的行内块,元素间会有缝隙(较难控制)
-两个盒子左右排列(最左一个,最右一个)
浮动可以改变默认的排列方式
标准流管理垂直排列 浮动布局管理水平排列
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。(p话,继续往下看)
语法:
float: 属性值;
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左 浮动 |
right | 元素向右 浮动 |
1.浮动元素会脱离标准流(脱标)
脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标)
浮动的盒子不再保留原先的位置,所以标准流的元素可以与浮动的盒子重叠
2.浮动的元素会在一行内显示并且元素顶部对齐
除非显示不开,会换行显示
不管长宽都会沿着上沿对齐
浮动的元素互相贴靠在一起(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐.
3.浮动的元素会具有行内块元素的特性
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
如果行内元素有了浮动,则不需要转换块级或行内块元素就可以直接给高度和宽度
4. 常用的布局策略
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧.
1.浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2.一个元素浮动了,理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
为什么要清除浮动?
因为很多时候,父盒子不能够给他一个高,比如一些商品列表,随时都有增加,还有新闻这类的,需要自动的填充高度才可以。
所以这时候需要清除浮动
清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
选择器 {
clear:属性值;
}
属性值 | 说明 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响(一般用这个) |
额外标签法也称为隔墙法,是W3C推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=" clearboth”></div>
,或者其他标签(如<br />
等)。
● 优点︰通俗易懂,书写方便
● 缺点︰添加许多无意义的标签,结构化较差
<style>
.box {
background-color: #908e8e; }
.box1 {
width: 200px;
height: 100px;
background-color: blue;
float: left;
margin-left: 20px; }
.clear {
clear: both; } /*清除浮动*/
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<!-- 这个标签必须是块级元素,否则不行 -->
<div class="clear"></div>
</div>
</body>
这里还是不讲overflow的实现原理,等后面再讲
可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll 。子不教,父之过,注意是给父元素添加代码
● 优点︰代码简洁
● 缺点∶无法显示溢出的部分
一般使用overflow的hidden属性来清除浮动
给父盒子添加!给父盒子添加!给父盒子添加!
重要的事情说三遍!
:after方式是额外标签法的升级版。也是给父元素添加
给父元素添加
给父元素添加
!!!
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;)
.clearfix {
/*兼容 IE6、7*/
*zoom: 1;
这串代码先会写即可,后面会讲具体实现的原理(伪元素)
clearfix是类名,可以根据实际随意写
● 优点∶没有增加标签,结构更简单
● 缺点∶照顾低版本浏览器
也是给父元素添加
给父元素添加
给父元素添加
!!!
.clearfix:before,
.clearfix:after {
content : "";
display:table;
}
.clearfix:after {
clear:both;
)
.clearfix {
/*兼容 IE6、7*/
*zoom: 1;
}
优点︰代码更简洁,更好理解
缺点∶照顾低版本浏览器
clearfix是类名,可以根据实际随意写
这里只介绍比较常用的,想要深究的可以去看下面的链接
详情
我们产品类的图片经常用jpg格式的
实际经常用于一些图片小动画效果
如果想要切成背景透明的图片,请选择png格式.
对我们前端人员来说,最大的优点我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.
PS有很多切图的方式:图层切图
、切片切图、PS插件切图等等.
PS可以去B站找点视频教程学习一下,这里主要是讲CSS,不做PS的教程.
选中图层需要切的图层(可能是多个) ——> 右键图层 ——> 快速导出PNG
第一步:选中图片
第二步:导出图片
Cutterman
是一款运行在Photoshop中的插件,能够自动将你需要的图层进行输出,以替代传统的手工"导出web所用格式"以及使用切片工具进行挨个切图的繁琐流程。
Cutterman下载链接
Cutterman插件要求你的PS必须是完整版,不能是绿色版,所以大家需要安装完整版本。
这里能够使用,不是灰色的就可以用
无脑安装即可
安装完成后,重新打开PS
注册
登录即可
建议遵循以下顺序︰
最近有点忙,这里写的不太详细,等后期补。
定位模式 | 是否脱标 | 移动位置 | 是否常用 |
---|---|---|---|
static静态定位 | 否 | 不能使用边偏移 | 很少 |
relative相对定位 | 否(占有位置) | 相对于自身位置移 | 常用 |
absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)
数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
选择器 {
z-index: 1;
}
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中。left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px;:让盒子向左移动自身宽度的一半。
定位的特殊性
绝对定位和固定定位也和浮动类似.
1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
绝对定位(固定定位)会完全压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)但是绝对定位(固定定位)会压住下面标准流所有的内容。
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
display属性用于设置一个元素应如何显示。
display:none ;隐藏对象
display : block;除了转换为块级元素之外,同时还有显示元素的意思display隐藏元素后,不再占有原来的位置。
后面应用及其广泛,搭配JS可以做很多的网页特效。
visibility属性用于指定一个元素应可见还是隐藏。
visibility : visible;元素可视
visibility : hidden;元素隐藏
visibility隐藏元素后,继续占有原来的位置。
如果隐藏元素想要原来位置,就用visibility : hidden
如果隐藏元素不想要原来位置,就用display : none(用处更多重点)
终于要讲了。哈哈!!!
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超不超出内容,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
但是如果有定位的盒子,请慎用overflow:hidden因为它会隐藏多余的部分。
position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)。
position 属性
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值:
static
relative
fixed
absolute
sticky
元素其实是使用 top、bottom、left 和 right 属性定位的。但是,除非首先设置了 position 属性,否则这些属性将不起作用。根据不同的 position 值,它们的工作方式也不同。
position: static;
HTML 元素默认情况下的定位方式为 static(静态)。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位:
这个
实例
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
这个
实例
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
字体图标使用场景∶:主要用于显示网页中通用、常用的一些小图标
精灵图是有诸多优点的,但是缺点很明显。
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont.
展示的是图标,本质属于字体。
轻量级︰一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。
图标下载
icomoon
阿里图标库
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?aklfae’);
src: url(‘fonts/icomoon.eot?aklfae#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?aklfae’) format(‘truetype’),
url(‘fonts/icomoon.woff?aklfae’) format(‘woff’),
url(‘fonts/icomoon.svg?aklfae#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
}
复制到css样式里
复制这个图标,这个图标就是那个字体图标
复制到标签里
在选择器内,更改字体名
成功显示
如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selectionjson 从新上传,然后选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可。
文章浏览阅读1.9k次。 翻译:SpringSide团队 转载请注明出处。有很多人都很熟悉 Struts, 无论是从项目中直接获得的实战经验还是从书中了解到的。我们这一系列文章,将通过一个由 Stuts 转移到 Struts2 简单的例子向大家展现Struts2的所有特征。 在我们开始这个例子之前,你需要去知道一点 Struts2的背景知识。 在第一部分的文章中,我们将介绍Struts2与Struts的核心
文章浏览阅读94次。需要源码可以滴滴我。
文章浏览阅读188次。打开MRTG软件包中的"MRTG.cfg"文件,该文件是MRTG的主配置文件。打开MRTG软件包中的"MRTG.cfg"文件,该文件是MRTG的主配置文件。确保将命令中的"C:\MRTG"替换为你的MRTG安装目录和配置文件路径,"community"替换为你的SNMP团体字符串,"device_ip"替换为目标设备的IP地址。确保将命令中的"C:\MRTG"替换为你的MRTG安装目录和配置文件路径,"community"替换为你的SNMP团体字符串,"device_ip"替换为目标设备的IP地址。_mrtg 下载
文章浏览阅读1w次,点赞7次,收藏35次。Kaggle机器学习竞赛、托管数据库、编写和分享代码_kaggle在线写代码
文章浏览阅读3.1k次,点赞11次,收藏14次。CentOS7突然连接不了网络,使用systemctl status network后报如下错误network.service - LSB: Bring up/down networkingLoaded: loaded (/etc/rc.d/init.d/network; bad; vendor preset: disabled)Active: failed (Result: exit-code)【解决方案】停止NetworkManager并取消开机启动chkconfig NetworkMan_network.service - lsb: bring up/down networking loaded: loaded (/etc/rc.d/in
文章浏览阅读4.9w次,点赞312次,收藏1.3k次。前言GitHub作为程序员们的开源宝库,有着很多非常好的项目。对于初学者来说,游戏有着一种特殊的魅力。今天统计了GitHub上比较有趣的10个开源小游戏,其中有许多可以称之为经典。笔者是一名90后,《贪吃蛇》、《坦克大战》、《超级马里奥》和《太空侵略者》作为儿时的玩伴,陪伴笔者度过了很多时光,给笔者带来了非常多的回忆。1、Pacman(吃豆人游戏)项目演示地址: https://passe..._github开源小游戏
文章浏览阅读1.7k次。目标在本章中,我们将学习:寻找图像梯度、边缘等 我们将看到以下职能:cv2.sobel(), cv2.scharr(), cv2.Laplacian()等理论OpenCV提供三种类型的梯度滤波器或高通滤波器,Sobel、Scharr和Laplacian.我们会看到他们中的每一个。1.Sobel和Scharr衍生物¶Sobel算子是一种联合高斯平滑加微分运算,具有更强的..._opencv 计算梯度图像
文章浏览阅读2.6k次。网上找了找 零零碎碎有一些文章 没找到一个整体的 自己做完记录一下 防止忘了大体就是这样聊天气泡用的是https://blog.csdn.net/oterminator12/article/details/105790961这个文章看到的然后表情用的是https://blog.csdn.net/qq_36676433/article/details/104756685这个文章看到的整体结构及底部输入/表情选择部分body下的结构主要为最外层Column,然后聊天部分用F..._flutter表情包插件
文章浏览阅读2.8k次,点赞3次,收藏2次。登录便签,一直报错:执行此操作需要Internet,0x800704cf。笔者网络是没有问题的,其它程序可以正常访问。解决方法关闭代理1.Win+R打开运行,输入 inetcpl.cpl 打开internet选项界面2.切换到[连接]选项,点击局域网设置。红色框选处的两个勾取消。笔者上述配置后即可解决问题。如若还不能解决,试试下面这个方法设置DNS服务器地址,首选设置为4.2.2.1 备用设置为4.2.2.2..._xbox0x800704cf错误代码
文章浏览阅读8.9w次,点赞55次,收藏138次。在服务器上想要使用别人搭好的环境,但是又怕自己对环境的修改更新会影响他人的使用,这个时候可以使用conda命令进行复制环境。首先假设已经安装了Anaconda。根据已有环境名复制生成新的环境假设已有环境名为A,需要生成的环境名为B:conda create -n B --clone A根据已有环境路径复制生成新的环境假设已有环境路径为D:\A,需要生成的新的环境名为B:conda ..._conda clone
文章浏览阅读3.1k次。在本文中,我们非常详细地描述如何使用 MySQL connector 来同步 MySQL 和 Elasticsearch 的索引。它使用起来非常方便。如果大家对 Logstash 很熟悉的话,请参阅我之前的文章 “Elastic:开发者上手指南” 中的 “数据库数据同步章节。我们还可以使用 Pipeline 对数据进行清洗。这个就不做展示了。_mysql connectors
文章浏览阅读1.5k次。HttpClientUtils工具类。_httpclientutils