寒假学习记录

寒假学习CSS的小记录

这篇博客用来记录本人寒假学习CSS过程中所了解到的小知识、困难以及解决方法。
还会涉及到小程序开发过程中的思考与做法。

目录

1. css学习
2. 程序开发
3. 页面样式美学知识

css学习

1月3日

1.sans-serif对应汉字中的黑体，定义font-family时,最好在最后加一个sans-serif,这样如果所列出的字体都不能用，则默认的sans-serif字体能保证调用，在不同操作系统下，网页字体都能被显示。

2.加上sans-serif就能保证调用的原因
sans-serif无衬线字体，是一类字体，它在操作系统或者浏览器里是可以设置的，你可以把它设置成宋体，也可以设置成微软雅黑，而设置的这种字体肯定是当前系统里存在的字体，所以使用这个字体就一肯能显示出来，所以加上sans-serif就能保证调用。

3.Sans-serif简介：Sans-serif是专指西文中没有衬线的字体，与汉字字体中的黑体相对应。该类字体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。

常见的无衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

4.id选择器使用方法

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id 属性只能在每个 HTML 文档中出现一次。
Q：使用id可以让减少代码的繁琐吗?定义好相同既定的颜色与字体后，在wxml相应部分代码插入id即可。还是用一组更方便呢

5.id 选择器和派生选择器

即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

p元素和h2元素均被得到了特殊的处理

6.类选择器

.center {text-align: center}

类名的第一个字符不能使用数字

1月4日

1.背景

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

①background-color：
可以设置颜色，内边距（padding）
默认值是 transparent（透明）

②background-image：
使用url引用图片

③background-repeat:
在页面上对背景图像进行平铺，属性值 repeat 导致图像在水平垂直方向上都平铺，repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。

④background-position
可以利用 background-position 属性改变图像在背景中的位置。
定位关键词：
a.关键字
例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。

单一关键字	等价关键字
center	center center
top top	center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

b.百分数值
百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。
background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非设置了不同的位置值。

c.长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

⑤background-attachment：
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

通过 background-attachment 属性可以防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不受到滚动的影响

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

2.文本

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

①CSS字体
5 种通用字体系列：
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体

②font-family:
使用其可以进行设置通用字体或指定具体
当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，则需要在 font-family 声明中加单/双引号。

③font-style：
该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

④font-variant：
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

p {font-variant:small-caps;}

⑤font-weight ：
设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

⑥font-size
设置文本的大小。
font-size 值可以是绝对或相对值。
普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

1月6日

⑦text-indent：
实现文本的缩进。
所有元素的第一行都可以缩进一个给定的长度，该长度可以是负值。

p {text-indent: 5em;}

一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

⑧text-align：

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。 justify在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。

所有 text-align 的默认值是 left。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

1月5日

3.边框
格式：border: 边框粗细 线条格式 边框颜色;
线条格式：
solid（实线）/dotted（点线）/dashed（虚线）

wxss学习

1月5日

1.wxss选择器
①标签选择器
格式：标签名{…}
页面中所有的该标签都为该形式。

如：

view
{
background:black;
}

该页面中所有view的背景均为黑色。

②类选择器
格式：.类名{…}
在页面中元素的标签内添加class=“类名”，在wxss界面上对该类的操作仅反映在该类上。

③后代选择器
格式：.类名 标签名{}/.类名 .类名(第一个为父代，第二个为子代)
在标签内进行嵌套标签，则称嵌套标签为该标签的后代。
要对该后代进行操作，可以单独定义类名，也可以采用后代选择器的形式进行操作。

1月6日

2.wxss常用属性
①line-height：行高
②border-radius：圆角
当设定元素的长与宽时，用百分比设置其圆角

.button{
width:100px;
height:100px;
border-radius:50%;
}

则button元素将变为一个正圆。
③white-space：nowrap（不折行）
④overflow：hidden（文字超出部分隐藏）
⑤text-overflow：ellipsis（文字超出部分用…代替）
③④⑤用于文字超出部分使用…省略
⑥display：
inline-block：允许多个元素占据同一行
flex：设置之后不管屏幕比例如何变化，同一行中两个元素的相对位置永远保持不变。

程序开发

1月12日-1月17日

1.为input加上小图标可以采用view组件包裹input组件和image组件的方法
2.hidden元素只对块状布局生效，dispaly：flex将导致hidden失效
3.利用hidden、bingtap、setdata可以达到点击态的效果

参考链接：
https://www.cnblogs.com/herizai/p/8463916.html
https://www.bilibili.com/video/BV1Mt411c7aD?t=1404
https://blog.csdn.net/weixin_34268843/article/details/89753054
https://www.cnblogs.com/dekevin/p/10248489.html