金小刚_2021.01.12-郭青青
Tuesday,January,12th
知识点总结
CSS的复习与拓展
ID选择器:
:网页标签ID与ID选择器同名，会适用此样式。ID要唯
一
元素编号
与现实生活中每个人拥有一个唯一的公民身份号码(身份证编号)一样，
在HTML页面上每个元素都应该有一个唯一的编号，浏览器可以通过这个编号来管理该元素。
这个编号就是 元素编号，也称作 元素标识符 ( element identifier )
元素编号可以通过元素的 id 属性(attribute)来指定:
<div class="wrapper" id="first">
<input type="text" name="wd" id="wd" >
<input type="submit" value="百度一下" id="button-baidu" >
</div>
<div class="wrapper" id="second">
<input type="text" name="q" id="q" >
<input type="submit" value="360搜索" id="button-360" >
</div>
作为元素标识符，我们应该尽力保证 id 属性取值的唯一性。
id selector
id 选择器 也称作 id 选择符，英文中称作 id selector ，其基本用法为:
#elementId {
}
其作用是选择页面上 id 属性(attribute)中 等于 指定值的元素。
伪类：网页元素的各种状态
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;
}
后代选择器又称为包含选择器:空格即代表是后代
/*后代*/
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>
子元素选择器：直接子标签适用此样式
>是子选择器的标志
<!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>
子代选择器和后代选择器不同在于，只能出现在当前容器下的子类受用，不出现隔代继承
通用(配)选择器
*{
margin: 0;
padding: 0;
}
组合选择器
li,p,#div1,.mydiv{
font-size: 16px;
color: red;
}
常用CSS属性
元素尺寸
宽度
width : value ;
高度
height : value ;
边框 (border)
元素的边框涉及属性较多，不仅涉及 粗细 、样式 、颜色 等属性，
还可以针对某一条边来设置边框的 粗细、样式、颜色 等。
四周边框粗细
批量设置四边边框粗细可以通过 border-width 属性来实现:
border-width : width ;
四周边框风格
批量设置四边边框风格可以通过 border-style 属性来实现:
border-style : none | solid | double | dotted | ... ;
四周边框颜色
批量设置四边边框颜色可以通过 border-color 属性来实现:
border-color : color ;
四周边框
批量设置四边边框的 粗细、风格、颜色 可以通过 border 属性来实现:
border : width style color ;
注意： border 属性值的书写顺序:
- 粗细 ( width )
- 风格 ( style )
- 颜色 ( color )
顶部边框
所谓顶部边框，就是单独设置顶部的边框，让顶部边框具有独立的样式。
顶部边框粗细
单独设置顶部边框粗细可以通过 border-top-width 属性来实现:
border-top-width : width ;
顶部边框风格
单独设置顶部边框风格可以通过 border-top-style 属性来实现:
border-top-style : none | solid | double | dotted | ... ;
顶部边框颜色
单独设置顶部边框颜色可以通过 border-top-color 属性来实现:
border-top-color : color ;
顶部边框
依次设置顶部边框的 粗细、风格、颜色 可以通过 border-top 属性来实现:
border-top : width style color ;
注意 border-top 属性值的书写顺序:
-
粗细 ( width )
-
风格 ( style )
-
颜色 ( color )
底部边框
所谓底部边框，就是单独设置底部的边框，让底部边框具有独立的样式。
右侧边框
所谓右侧边框，就是单独设置右侧的边框，让右侧边框具有独立的样式。
左侧边框
所谓左侧边框，就是单独设置左侧的边框，让左侧边框具有独立的样式。
圆角边框
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
这个属性允许你为元素添加圆角边框
例如：给div元素添加圆角的边框
外边距
margin 属性设置元素的外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以
为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分
后额外添加
设置四周外边距
设置四周填充一致
margin: value;
margin 如果值超过一个，按上右下左(顺时针)的顺序渲染，如果缺省则上和下一样，左和右一样 （对
称的值一样）
margin: value1 value2 ...;
让块元素横向居中显示
margin: value auto;
外边距折叠
理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一
个外边距，即最大的单个外边距的大小。
在下面的例子中，我们有两个段落。顶部段落的页 margin-bottom 为50px。第二段的 margin-top 为
30px。因为外边距折叠的概念，所以框之间的实际外边距是50px，而不是两个外边距的总和。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.one {
margin-bottom: 50px;
}
.two {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<p class="one">I am paragraph one.</p>
<p class="two">I am paragraph two.</p>
</div>
</body>
</html>
内边距(填充)
padding 属性设置元素的填充
内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的
值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框
设置四周填充
设置四周填充一致:padding: value;
padding 如果值超过一个，按上右下左的顺序渲染，如果缺省则上和下一样，左和右一样 （对称的值
一样）
padding: value1 value2 ...;
盒子模型
盒模型的各个部分
CSS中组成一个块级盒子需要:
Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属
性设置
标准盒模型
在标准模型中，如果你给盒设置 width 和 height ，实际设置的是 content box。 padding 和 border
再加上设置的宽高一起决定整个盒子的大小。
注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空
间。盒子的范围到边框为止 —— 不会延伸到margin。
替代（IE）盒模型
你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，
css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和
填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).
盒子模型和内联盒子
display
display 属性规定元素应该生成的框的类型。
display属性的值：
block:元素呈现块元素特征，此元素前后会带有换行符
inline:元素呈现行内元素特征，元素前后没有换行符
inline-block：元素呈现行内并保持宽和高的属性，行内块元素
none:元素不做呈现，不占网页空间。与visibility：hidden不同，visibility不显示但占用网页空
间。
使用display: inline-block
display: inline-block 是一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况
非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
一个元素使用 display: inline-block ，实现我们需要的块级的部分效果：
设置 width 和 height 属性会生效。
padding , margin , 以及 border 会推开其他元素。
但是，它不会跳转到新行，如果显式添加 width 和 height 属性，它只会变得比其内容更大
背景样式
背景颜色
背景图片
- 控制背景平铺
- 调整背景图像的大小
- 背景图像定位
渐变背景
多个背景图像
背景附加
另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由 background-attachment 属性控制
的，它可以接受以下值:
scroll : 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背
景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
fixed : 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始
终保持在屏幕上相同的位置。
local : 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，
因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元
素上，因此当您滚动元素时，背景也随之滚动。
background-clip
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下
面。
使用background 的简写
background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与
size, repeat 方式等等。可以在一次声明中定义一个或多个属性： background-clip 、 backgroundcolor 、 background-image 、 background-origin 、 background-position 、 backgroundrepeat 、 background-size ，和 background-attachment 。
对于所有简写属性，任何没有被指定的值都会被设定为它们的 初始值。
处理不同方向的文本
默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的
支持。
然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的
文本（如日文）——这些不同的方向属性被称为书写模式。
什么是书写模式
CSS中的书写模式是指文本的排列方向是横向还是纵向的。 writing-mode 属性使我们从一种模式切换
到另一种模式。
writing-mode 的三个值分别是：
horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr : 块流向从左向右。对应的文本方向是纵向的。
因此， writing-mode 属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从
右到左，要么是从左到右。而这决定了文本的方向。
溢出的内容
我们知道，CSS中万物皆盒，因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢
出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。
一个盒子，在块方向上已经受到 height 的限制。然后我们已经加了过多的内容，以至于盒子里面没有
空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。
为什么CSS默认会采取如此不整洁的方式，让内容这么凌乱地溢出出来呢？为何不把多余的内容隐藏起
来，或者让盒子变大呢？
只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在CSS的术语里面，这
会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填
完这个表格，这是很麻烦的事情！所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是，你
会看到错误的CSS导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出
来，你的网站需要修缮。
overflow属性:visible,hidden,scroll,auto.
CSS的值
最常见的数字类型是 ，例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝
对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。
修饰字体文字
阴影：
h-shadow,v-shadow,blur,spread,color,inset
透明度
opacity 用于设置元素的透明度， 值的范围是 0~1 。1 为不透明， 0 为完全透明
鼠标样式
cursor 属性用于定义鼠标样式，可选值有: pointer 、 wait 、 help 、 copy 、 crosshair
用户也可以自定义一个鼠标样式:
心得体会
两天学习之后，总感觉这次在学习的过程当中，没有第一次来云创动力那么有学习的热情（为什么？）；由于一些外界原因，早上上课的时候，总是在梦想当中，搞得也很尴尬。
把关于前端的知识点复习完之后，希望老师也能给我们教一教关于后端的知识，满足一下我们的好奇心，或者说是本次寒假的小小心愿。
近期评论