CSS学习笔记

1.float
float:left或right
将原本上下排列的元素改成左右排列
要用margin保持间距，不然会黏再一起
clear
clear:left或right
float会造成文绕图，clear可以让清掉不需要文绕图的地方
排版都用语法控制，很难控制出要的效果，有时候就会好想跟illustrator一样，直接用排上去就好

2.width是区块宽度
计算width:总宽度-两边的padding-两边的border
加入盒子模型网页感觉变得超有质感

3.放背景图
语法:background-image
background-image:url(档案路径)
背景重复方向
语法:background-repeat
值:repeat、repeat-x、repeat-y、no-repeat
(预设、水平重复、垂直重复、不重复)
span元素
用在没有标记的地方，例如只用在段落里的其中几个文字上
加上< span >元素，并帮class命名：< span class=“名称” >< /span >
选择器
因为p和div的元素在一个页面会被大量使用，每个样式又都可能不一样，所以会先帮同样样式的取名字，然后再用CSS的选择器分别做修改

id属性作为选择器

只有一个区块的时候使用
先在html档上将要改样式的元素加上id属性并命名
CSS档上的选择器名称:元素名称#id名称(元素名称可省略)
ex:要做在< p id=“lead” >的区块上，元素名称为p#lead或是 #lead
class属性作为选择器

有多个区块用同一个样式的时候使用
先在html档上将要改样式的元素每一个都加上class属性并命名(取1个群组名)
选择器名称:元素名称.class名称(元素名称若都是同元素可省略，但是有不同元素上有class不能省略)
ex:要做在< p class=“more” >的区块上，元素名称为p.lead或是 .lead
苏格兰场精英 2021/6/20 18:23:05
用float设定三栏式版面
可以先用把区块都各上一种底色，区块位置会比较好分辨
三个区块都用float:left; (三个区块会紧连)
区块间要有间距的话，最右边区块用float:right;最左边增加margin:right的设定

4.用float跟div设定三栏式版面
用在不照原始码顺序配置版面的时候(例:左边2个区块上下放，右边1个区块)
先用< div id=“contents” >设定2个要放左边的区块，做出2栏式，设定float:left;
最右边的区块用float:right;
.box li

用相同大小的box以网格排列版面

将所有box都设成float:left;，之后做修改就不用再class(box会紧邻)

设间距:用margin-right:OOpx;和margin-bottom:OOpx(但是最右边会被挤到下面去)

用虚拟类别:nth-child(n)或overflow:hidden可以解决右边方块被下移的问题

float排版的限制

横向并列的区块不会自动拉成同高度，而且只能向上对齐，不能向下或置中排列对齐。

5.类名或标签名::placeholder {color: red;}

css超出一行显示省略号：

给定宽度(width:100px)、

超出隐藏（overflow:hidden）、

强制在同一行显示（white-space: nowrap）、

省略号（text-overflow:ellipsis）

6.em：移动端常用的字体尺寸单位，相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。

7.rem：r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

8.vh：vh就是当前屏幕可见高度的1%，即 height:100vh == height:100%;

它的好处是当元素没有内容时候，设置height:100%该元素不会被撑开，

但设置height:100vh，该元素会被撑开屏幕高度一致。

9.vw：viewpoint width，视窗宽度，1vw = 视窗宽度的1%。

vw就是当前屏幕宽度的1%，

当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，

但100vw是相对于屏幕可见宽度来设置，所以会出现50vw 比50%大的情况。