20210112 周瑞兵

一、 知识点总结

1.选择器

1.1 ID选择器

1.1.1 元素编号

在HTML页面上每个元素都应该有一个唯一的编号(就像在现实生活中,每个人都有一个属于自己的身份证号一样),浏览器可以通过这个编号来管理该元素。这个编号就是 元素编号,也称作 元素标识符 ( element identifier )。元素编号可以通过元素的 id 属性(attribute)来指定,为此我们应努力确保ID属性的唯一性。

1.1.2 ID选择器基本用法

网页标签ID与ID选择器同名,则适用此样式,其基本用法为:

#elementId{

}

1.2 伪类:网页元素的各种状态

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:激活选定状态
注:定义顺序必须是此顺序
简记方法:先爱(l:link  v:visited)后恨(h:hover  ate:active)

1.3 后代选择器(包含选择器):用空格隔开

li span{
color: #0000ff;
}
li a{
color: black;
}
.mydiv a{
}
#div1 a{
font-size: 30px;
}
/*后代与伪类结合*/
li a:hover{
color: red;
}
<div class=”mydiv”>
<a href=”#”>是是</a>
</div>
<div id="div1">
<a href="#">是是</a>
</div>

1.4 子元素选择器:直接子标签适用此样式(用 ’>‘ 隔开)

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</boy>
</html>

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

1.5 组合选择器 (将不同的选择器组合在一起)

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

1.6 通配选择器

*{
margin: 0;
padding: 0;
}

1.7 选择器之间的优先级

判断依据:哪个选择器去定的范围小,哪个选择器的优先级高。

也可以通过!important改变优先级。

2 常用的CSS属性

2.1 元素尺寸

2.1.1 元素宽度

在CSS代码中通过 width 属性可以控制元素的宽度,其用法为:

width : value ;

value 可以使用 像素也可以使用百分比赋值。

2.1.2 元素高度

在CSS代码中通过 width 属性可以控制元素的宽度,其用法为同width一致。

2.2 边框(border)

元素的边框涉及属性较多,不仅涉及 粗细 、样式 、颜色 等属性,
还可以针对某一条边来设置边框的 粗细、样式、颜色 等。

2.2.1 边框粗细

边框粗细的设置可以通过 border-width 属性来实现:

border-width:value;

2.2.2 边框风格

边框风格的设置可以通过 border-width 属性来实现:

border-style : none | solid | double | dotted | ... ;

2.2.3 边框颜色

边框颜色的设置可以通过 border-width 属性来实现:

border-color : color ;

通常设置四边边框的 粗细、风格、颜色 可以通过 border 属性来实现:

border : width style color ;

2.3 外边距

margin 属性设置元素的外边距。
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以
为负。设置负值会导致和其他内容重叠。

无论使用标准模型还是替代模型,外边距总是在计算可见部分
后额外添加

2.3.1 设置外边距

设置四周填充一致,用法如下:

margin: value;

margin 如果值超过一个,按上右下左(顺时针)的顺序渲染,如果缺省则上和下一样,左和右一样 (对
称的值一样)

margin: value1 value2 ...;

2.3.2 让块元素横向居中显示

margin: value auto;

2.3.3 外边距折叠

如果你有两个外边距相接的元素,这些外边距将合并为一个外边距,即最大的单个外边距的大小

2.4 内边距

padding 属性设置元素的填充
内边距位于边框和内容区域之间。与外边距不同,您不能有负数量的内边距,所以值必须是0或正的
值。应用于元素的任何背景都将显示在内边距后面,内边距通常用于将内容推离边框。

2.4.1 设置内边距

设置四周填充一致,用法如下:

padding: value;

padding 如果值超过一个,按上右下左(顺时针)的顺序渲染,如果缺省则上和下一样,左和右一样 (对
称的值一样)

padding: value1 value2 ...;

2.5 盒子模型

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

2.5.1 盒子模型的各个部分

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

2.5.2 标准盒子模型

在标准模型中,如果你给盒设置 width 和 height ,实际设置的是 content box。 padding 和 border
再加上设置的宽高一起决定整个盒子的大小。

2.5.3 盒子模型和内联盒子

以上所有方法均适用于块级盒子;有些属性也适合于内联盒子(宽和高对于内联盒子是不生效的)。

2.6 display

display 属性规定元素应该生成的框的类型,通过display属性可以很方便地实现块级元素和内联元素之间的互换。

display属性的值:

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

2.7 背景样式

2.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 指定背景颜色,应该从父元素继承

2.7.2 背景图片

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

2.7.2.1 控制背景平铺

background-repeat 属性用于控制图像的平铺行为。可用的值是:

  • no-repeat — 不重复。
  • repeat-x—水平重复。
  • repeat-y —垂直重复。
  • repeat— 在两个方向重复。

2.7.2.2 调整背景图像的大小

background-size 属性,它可以设置长度或百分比值,来调整图像的大小以适应背景
你也可以使用关键字:

  • cover —浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。在这种情况
    下,有些图像可能会跳出盒子外
  • contain — 浏览器将使图像的大小适合盒子内。在这种情况下,如果图像的长宽比与盒子的长宽
    比不同,则可能在图像的任何一边或顶部和底部出现间隙。

2.7.2.3 背景图像的定位

background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系
中,框的左上角是(0,0),框沿着水平(x)和垂直(y)轴定位。

最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值
你可以使用像topright 这样的关键字

background-position: top center;

或者使用 长度值, and 百分比:

background-position: 20px 10%;

你也可以混合使用关键字,长度值以及百分比:

background-position: top 20px;

2.8 溢出的内容

我们知道,CSS中万物皆盒,因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢
出是在你往盒子里面塞太多东西的时候发生的,所以盒子里面的东西也不会老老实实待着。

<style>
.box {
border: 1px solid #333333;
width: 200px;
height: 80px;
}
</style>
<div class="box">这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多,就会出
现溢出的情况。如果溢出设置为隐藏,则任何溢出都将不可见。</div>
<p>此内容在方框之外。</p>

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

2.8.1 overflow属性

overflow 属性是你控制一个元素溢出的方式,它告诉浏览器你想怎样处理溢出。 overflow 的默认值
为 visible ,这就是我们的内容溢出的时候,我们在默认情况下看到它们的原因。
可选值:

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 隐藏掉溢出。其余内容是不可见的。
scroll 显示滚动条,即使没有足够多引起溢出的内容
auto 如果内容需要被修剪,则浏览器会显示滚动条以便查看其余的内容。

2.8.1.1 文本溢出时变为...

overflow:hidden;
text-overflow:ellipsis;

二、心得体会

学习是一个引导的过程,学习是一个领悟的过程,复习以往的知识点,会有新的收获,新的理解;

标签

评论

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