权文哲_20200112-权文哲

知识点总结

一、选择器(接昨天)

1、id选择器::网页标签ID与ID选择器同名,会适用此样式。ID要唯一

id选择器也称作id选择符,英文中称作 id selector ,其基本用法为:

elementId { }

其作用是选择页面上 id 属性(attribute)中等于指定值的元素
注:作为元素标识符,我们应该尽量保证id属性取值的唯一性。

2、伪类选择器:网页元素的各种状态(通常会给a元素设置并且注意顺序)

a:link{ color: #555555; text-decoration: none; }
a:visited{ color: #555555; }a:hover{ color: orange; text-decoration: underline; }a:active{ color: red; }a:link:未访问状态
a:visited:访问过后状态 a:hover:鼠标悬停状态 a:active:激活选定状态 注:定义顺序必须此顺序
/* :first-child 第一个子元素 /
p:first-child{ color: red; }
/
:last-child最后一个子元素 */
p:last-child{ color: red; }

3、后代选择器:后代选择器又称为包含选择器:空格即代表是后代

/后代/ li span{color: #0000ff; }
li a{color: black; }
.mydiv a{ }

div1 a{ font-size: 30px; }

/后代与伪类结合/
li a:hover{ color: red; }

4、子元素选择器:直接子标签适用此样式

子代选择器和后代选择器不同在于,只能出现在当前容器下的子类受用,不出现隔代继承。

5、 通用(配)选择器

*{ margin: 0; padding: 0; }

6、 组合选择器

li,p,#div1,.mydiv{ font-size: 16px; color: red; }

二、常用CSS属性

1、 元素尺寸

元素尺寸设计元素宽度和高度两个属性。

(1) 宽度

在CSS代码中通过 width 属性可以控制元素的宽度,其用法为:width : value ;
宽度的值常用像素(px)以及百分比来表示,采用百分比表示时需要注意,元素的实际宽度都是相对于其父元素的宽度来确定的
#### (2) 高度
在CSS代码中通过 height 属性可以控制元素的高度,其用法为:
height : value ;
### 2、边框(border)
#### 2.1 单个边框(上、下、左、右)
设置顺序:粗细(width)风格(style)颜色(color)

#### 2.2 圆角边框
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
这个属性允许你为元素添加圆角边框

3、外边距(margin)

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型,外边距总是在计算可见部分后额外添加。
margin 如果值超过一个,按上右下左(顺时针)的顺序渲染,如果缺省则上和下一样,左和右一样 (对称的值一样)

3.1 让块元素横向居中显示

margin:value auto;

3.2 外边距折叠

理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素,这些外边距将合并为一个外边距,即最大的单个外边距的大小。
在下面的例子中,我们有两个段落。顶部段落的页 margin-bottom 为50px。第二段的 margin-top 为30px。因为外边距折叠的概念,所以框之间的实际外边距是50px,而不是两个外边距的总和。

4、内边距(padding)

内边距位于边框和内容区域之间。与外边距不同,您不能有负数量的内边距,所以值必须是0或正的
值。应用于元素的任何背景都将显示在内边距后面,内边距通常用于将内容推离边框
padding 如果值超过一个,按上右下左的顺序渲染,如果缺省则上和下一样,左和右一样 (对称的值
一样)

5、盒模型

完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

5.1 盒模型的各个部分

Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

5.2 标准盒模型

在标准模型中,如果你给盒设置 width 和 height ,实际设置的是 content box。 padding 和 border再加上设置的宽高一起决定整个盒子的大小。
注: margin 不计入实际大小 —— 当然,它会影响盒子在页面所占空间,但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。

5.3 代替(IE)盒模型

使用这个模型,所有宽度都是可见宽度,所以内容宽度是该宽度减去边框和填充部分。
默认浏览器会使用标准盒模型。如果需要使用替代模型,您可以通过为其设置 box-sizing: border-box来实现。 这样就可以告诉浏览器使用 border-box 来定义区域,从而设定您想要的大小。

5.4 盒模型和内联盒子

以上所有的方法都完全适用于块级盒子。有些属性也可以应用于内联盒子,例如由 span元素创建的那些内联盒子。
在示例中,我们在一个段落中使用了 span ,并对其应用了宽度、高度、边距、边框和内边距。可以看到,宽度和高度被忽略了。外边距、内边距和边框是生效的,但它们不会改变其他内容与内联盒子的关系,因此内边距和边框会与段落中的其他单词重叠

6、dispaly:display 属性规定元素应该生成的框的类型。

block:元素呈现块元素特征,此元素前后会带有换行符
inline:元素呈现行内元素特征,元素前后没有换行符
inline-block:元素呈现行内并保持宽和高的属性,行内块元素
none:元素不做呈现,不占网页空间。与visibility:hidden不同,visibility不显示但占用网页空
间。

6.1 使用display:inline-block

display: inline-block 是一个特殊的值,它在内联和块之间提供了一个中间状态。这对于以下情况
非常有用:您不希望一个项切换到新行,但希望它可以设定宽度和高度,并避免上面看到的重叠。一个元素使用 display: inline-block ,实现我们需要的块级的部分效果:
设置 width 和 height 属性会生效。
padding , margin , 以及 border 会推开其他元素。
但是,它不会跳转到新行,如果显式添加 width 和 height 属性,它只会变得比其内容更大

7、背景样式

7.1 背景颜色

background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 值 。背景色扩展到元素的内容和内边距的下面。
元素的背景是元素的总大小,包括填充和边界(但不包括外边距)
color 指定背景颜色。eg: #567895 black rgb(255,255,255) rgba(255,255,255,.5) hsl(h 色相 0 到 360, s 饱和度 0% 为灰色, 100% 全 色, l 亮度 0% 为暗, 50% 为普通, 100% 为白) hsla()
transparent 指定背景颜色应该是透明的。这是默认
inherit 指定背景颜色,应该从父元素继承

7.2 背景图片

background-image 属性允许在元素的背景中显示图像.
默认情况下,大图不会缩小以适应方框,因此我们只能看到它的一个小角,而小图则是平铺以填充方
框。
如果除了背景图像外,还指定了背景颜色,则图像将显示在颜色的顶部

7.2.1 控制背景平铺

background-repeat 属性用于控制图像的平铺行为。可用的值是:
no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。
background-repeat 是 background-repeat-x 和 background-repeat-y的简写

7.2.2 调整背景图像的大小

background-size 属性,它可以设置长度或百分比值,来调整图像的大小以适应背景
你也可以使用关键字:
cover —浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。在这种情况下,有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下,如果图像的长宽比与盒子的长宽
比不同,则可能在图像的任何一边或顶部和底部出现间隙。

7.2.3 背景图像定位

background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系
中,框的左上角是(0,0),框沿着水平(x)和垂直(y)轴定位。
注意:默认的背景位置值是(0,0)
最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值
可以使用像 top 和 right 这样的关键字 例如:background-position: top center;
可以使用 长度值, and 百分比:background-position: 20px 10%;
可以混合使用关键字,长度值以及百分比:background-position: top 20px;
可以使用4个值的语法来指示到盒子的某些边的距离:background-position: top 20px right 10px; /* 将背景从顶部调整20px,从右侧调整10px */

7.3 渐变背景

渐变——当它用于背景时——就像图像一样,也可以使用 background-image 属性设置。(网上有很多渐变生成器,可以创建一个渐变,然后复制并粘贴到我们的源码上)
linear-gradient 线性梯度渐变,延伸到整个盒子上
radial-gradient 有一个固定的大小,因此会重复
例如:background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%)

7.4 多个背景图像

也可以有多个背景图像—在单个属性值中指定多个 background-image 值,用逗号分隔每个值
其他 background-* 属性也可以有值逗号分隔的方式相同的 background-image :
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;

7.5 背景附加

另一个可供选择的背景是指定他们如何滚动时,内容滚动。这是由 background-attachment 属性控制的,它可以接受以下值:
scroll : 使元素的背景在页面滚动时滚动。如果滚动了元素内容,则背景不会移动。实际上,背景被固定在页面的相同位置,所以它会随着页面的滚动而滚动。
fixed : 使元素的背景固定在视图端口上,这样当页面或元素内容滚动时,它就不会滚动。它将始
终保持在屏幕上相同的位置。
local : 这个值是后来添加的(它只在Internet Explorer 9+中受支持,而其他的在IE4+中受支持),因为滚动值相当混乱,在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元
素上,因此当您滚动元素时,背景也随之滚动。

7.6 background-clip

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下

border-box 背景延伸至边框外沿(但是在边框下层)
padding-box 背景延伸至内边距( padding )外沿。不会绘制到边框处。
content-box 背景被裁剪至内容区(content box)外沿
text 背景被裁剪成文字的前景色(这是一个实验性的 API,请尽量不要在生产环境中使用它。)

8、处理不同方向的文本

默认浏览器对方向从左到右的文本(如英文或法文)的支持,要优于从右到左的文本(如阿拉伯语)的支持。
然而,CSS在最近几年得到了改进,以更好地支持不同方向的文本,包括从右到左,也包括从上到下的
文本(如日文)——这些不同的方向属性被称为书写模式。

8.1 书写模式

CSS中的书写模式是指文本的排列方向是横向还是纵向的。 writing-mode 属性使我们从一种模式切换到另一种模式。
writing-mode 的三个值分别是:
horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr : 块流向从左向右。对应的文本方向是纵向的。
因此, writing-mode 属性实际上设定的是页面上块级元素的显示方向——要么是从上到下,要么是从
右到左,要么是从左到右。而这决定了文本的方向。

9、溢出处理

我们知道,CSS中万物皆盒,因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的,所以盒子里面的东西也不会老老实实待着。
一个盒子,在块方向上已经受到 height 的限制。然后我们已经加了过多的内容,以至于盒子里面没有
空间容纳。内容正在从盒子里面溢出,并让自己把盒子下面的段落弄得一团糟。为什么CSS默认会采取如此不整洁的方式,让内容这么凌乱地溢出出来呢?为何不把多余的内容隐藏起来,或者让盒子变大呢?
只要有可能,CSS就不会隐藏你的内容,隐藏引起的数据损失通常会造成困扰。在CSS的术语里面,这
会导致一些内容消失,你的访客可能不会注意到这一点,如果消失的是表格上的提交按钮,没有人能填完这个表格,这是很麻烦的事情!所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是,你会看到错误的CSS导致的一片混乱,或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出
来,你的网站需要修缮。

9.1 overflow属性

overflow 属性是你控制一个元素溢出的方式,它告诉浏览器你想怎样处理溢出。 overflow 的默认值为 visible ,这就是我们的内容溢出的时候,我们在默认情况下看到它们的原因。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 隐藏掉溢出。其余内容是不可见的。
scroll 显示滚动条,即使没有足够多引起溢出的内容(只要设置这个值,滚动条便一直存在)
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
/* 溢出文本省略处理 /
overflow: hidden; /
溢出部分 隐藏 /
white-space: nowrap; /
空白部分 不换行 /
text-overflow: ellipsis; /
溢出的文本变成省略号 */
你可以用 overflow 属性指定x轴和y轴方向的滚动,同时使用两个值进行传递。如果指定了两个
关键字,第一个对 overflow-x 生效而第二个对 overflow-y 生效。否则, overflow-x 和 overflow-y 将会被设置成同样的值。例如, overflow: scroll hidden 会把 overflow-x 设置
成 scroll ,而 overflow-y 则为 hidden

10、修饰字体文字

color:字体颜色
font-size:字体大小,通常用像素(px)来定义大小
font-weight:字体粗细 - bold 加粗 - normal 正常 - 100~900为字体指定了 9 级加粗度,数字 400 等价于 normal,而 700 等价于 bold
font-famliy:字体
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
font-style:字体风格
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
text-decoration:字体加横线
- none 无 - underline 下划线
- overline 上划线
- line-through 贯穿线
- blink 文本闪烁
text-align:字体所处位置
- left
- right
- center
- inherit 继承父元素的text-align属性值
line-height:行高
text-indent:首行字的缩进 建议用em(缩进多少倍数)做为单位
text-shadow:3px 4px 5px #AAA阴影 (CSS3的效果)

  • 3px向右偏移的像素值
  • 4px向下偏移的像素值
  • 5px 模糊效果
  • #AAA 阴影颜色
    vertical-align设置元素的垂直对齐方式。
  • baseline 默认。元素放置在父元素的基线上。
  • sub 垂直对齐文本的下标。
  • super 垂直对齐文本的上标
  • top 把元素的顶端与行中最高元素的顶端对齐
  • text-top 把元素的顶端与父元素字体的顶端对齐
  • middle 把此元素放置在父元素的中部。
  • bottom 把元素的顶端与行中最低的元素的顶端对齐。
  • text-bottom 把元素的底端与父元素字体的底端对齐
    ### 11、阴影
    box-shadow 属性可以设置一个或多个下拉阴影的框
    h-shadow 必需的。水平阴影的位置。允许负值
    v-shadow 必需的。垂直阴影的位置。允许负值
    blur 可选。模糊距离(程度)
    spread 可选。阴影的大小
    color 可选。阴影的颜色。
    inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
    ### 12、修改滚动条样式
    ::-webkit-scrollbar 滚动条整体部分(宽高等)
    ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是 垂直滚动条还是水平滚动条)
    ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
    ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去) ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
    ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
    例如:
    /* 滚动条整体部分 / .lyric-container::-webkit-scrollbar{ width: 15px; height: 15px; }
    /
    定义滚动条的轨道颜色、内阴影及圆角 / .lyric-container::-webkit-scrollbar-track{ background: rgb(239, 239, 239); border-radius:2px; }
    /
    滚动条里面的小方块 */ .lyric-container::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius:10px; }

心得体会

首先老师今天对昨天用js控制媒体元素的js部分进行详细解析,使我对这部分内容更加深刻,同时也解决了我昨天遗留的问题(如何获取键盘keycode值),然后老师又对大部分的css知识进行复习,复习的过程中我发现了原来学习的缺漏之处并加以补充,晚上我对老师今日复习的内容进行梳理,使我对这部分内容掌握的更加牢固,一分耕耘一分收获。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1