前端学习第二周-选择器以及其分类，字体类属性，文本类属性，背景类属性，元素的隐藏方式，盒模型，浮动float，position定位以及弹性flex

文章目录

---

前言

提示：这里可以添加本文要记录的大概内容：

本周主要学习css样式的基础运用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

DAY 6

ctrl+~调出控制台

锚点
跳转页面

单位：

html的默认字体大小为16px
px:常用单位
em:自己本身字体的大小（如果自己设计了数值，则自己本身的大小；如果父级设计了大小，则继承父级的大小）（一般常用于首行缩进）
rem:根元素html的字体大小，默认16px；也可以更改，直接定义格式
vh:viewpoint height 视口的高度的百分之一 1vh=视口高度的1%,100vh=视口高度的100%
vw:视口宽度的百分之一 视口的宽度的百分之一 1vw=视口高度的1%,100vw=视口宽度的100%
%:页面的百分比，现在不常用
vmin,vmax:为vh,vw之间的最小值和最大值

引用方式：
link 任何版本都可以用；浏览器一边下载一边解析，效率更高；js可以随时进行修改样式；html提出

<link rel="stylesheet" href="">

@import 低版本不能用；下载完成才能解析；js没法修改；css提出
@import url（）

标签嵌套：
1.块级标签可以包含行内标签，行内标签也可以包含块级标签，但是不允许行内包含块级再包含行内标签；
2.<P>标签不能包含<li>标签
3.一般块级包含行内标签

选择器

0级选择器（0 0 0 0）：

*:通配符
 :空格-表示选择所有的后代
,:逗号-表示并列的关系
>:大于号-表示下一级关系，子代（最近辈）
+:加号-表示选择紧挨着的后面的兄弟元素
~:波浪号-选择后面所有满足条件的兄弟
相邻:什么符号也没有-表示选择的同一个元素（可用来增加权重）

1级选择器（0 0 0 1）：
标签选择器:选择某一类的标签
伪元素
::before/::after显示在内容之前/之后（input部分以及img等单标签不支持伪元素）
::select框选时触发

2级选择器（0 0 1 0）：
1.class:类选择器 .类名
2.属性选择器:后面讲
3.伪类 选择器
行为伪类
:hover鼠标悬停时候触发/:checked选中时触发
状态伪类
:required必填触发/:disabled用触发/::placeholder提示语句触发

3级选择器（0 1 0 0）：
id选择器 #id

4级选择器（1 0 0 0）：
行内样式（不建议写）

5级选择器
需要的属性 !important

字体类属性：

字体设置font-family:‘Courier New’,‘黑体’;<!--如果有英文，应该写在前面， 否则会被中文覆盖-->
字体大小font-size:12px;最小设置12px，默认继承html的16px
（transform:scale(0.5);可以转换字体整体大小，中间位置转换）
字体粗细font-weight:normal;默认值/400px;正常值/bold;加粗/lighter;更细
字体风格（控制字体倾斜）font-style:normal;默认值/italic;斜体/oblique;倾斜
大小写转换font-variant:small-caps;把小写的英文变成大写的样式，但是大小会变小
行高line-height:100px;行高等于高度，则可以垂直居中
font:上面属性的简写形式
border:1px solid red;

文本类属性：

color:
1.关键字：英语单词
2.#+三个16进制的数（12,34,56相同即可简写，简写情况下，第四个数是透明度）
3.rgb/rgba rgb(0_255,0255,0~255) rgba(0_255,0255,0_255,01)
4.hsla(hue色盘,saturation饱和度,lightness亮度,alpha透明度
color:transparent;透明 transparent=rgba(0,0,0,0)
currentColor:指向当前color的值*
文本修饰线text-decoration:underline;下划线/overline;上划线/line-through;中划线
首行缩进text-indent:2em;可以支持负数，但是没意义
文本对齐text-align:left;/right;/center;/justify;控制文本水平排列当文本对齐设置为 justify , 为两端对齐时，需要文本内容必须超过一行才能触发，如内容不足一行，则按照默认方式进行处理
文本转换text-transform:uppercase;大写/lowercase;小写/capitalize;首字母大写
overflow:auto;/visible;/hidden;/scroll;文本超出处理，默认visible可见，hidden超出隐藏，auto超过自动出滚动条，scroll直接垂直水平加滚动条
white-space:rap默认换行，不换行nowrap
文本溢出text-overflow:clip;剪切/ellipsis;超出替换成省略号
（结合overflow:hidden使用）

/*多行显示省略*/
display:-webkit-box; /*//弹性盒模型*/
-webkit-box-orient:vertical; /* //上下垂直*/
-webkit-line-clamp:2; /*//自定义行数*/
overflow:hidden; /*//超出文本隐藏*/
text-overflow:ellipsis;/*//超出部分省略号显示

text-transform:lowercase;全小写/uppercase;全大写/capitalize;所有的单词首字母大写
letter-spacing:10px;每个字或字母都会读到间距，适用于中文
word-spacing:20px;要读空格，适用于英文

背景类属性

background-color:red;背景颜色
background-image:url();背景图片
background-repeat:no-repeat;背景图片重复/repeat-x;/repeat-y;/round;/space;
background-position:10px 20px;背景图片的位置/left;/center;只设一个值时，默认为x的值/rignt center;10% 10%;(百分比不建议用)/right 20px top 40px;
background-size:80px 60px;背景图片大小/10% 20px;百分比调整，一般不使用/cover;全覆盖，但会被剪切（以最短的边决定，较常用）/contain;覆盖一部分（以最长的边决定）
background-attachment:scroll;背景关联滚动/fixed;背景固定(固定的基点，按照窗口来固定)
background-origin:padding-box;图片初始绘制原点，默认值背景图片的绘制方式从padding开始/content-box;从内容开始绘制/border-box;从边框开始绘制
background-clip:padding-box;图片的绘制区域，默认值背景图片的绘制方式从padding开始/content-box;从内容开始绘制/border-box;从边框开始绘制
background:;简写形式

DAY 7

绝对路径：盘符绝对路径一般不使用，网络绝对路径在使用别的服务器时需要使用，加速访问；
相对路径

元素的隐藏方式：

display:none;<!--隐藏后不占用位置-->
opacity:0;<!--设置透明度等于0，隐藏后占用位置；子级可以单独设置透明度，但是永远小于父级：实际上子级的值=子级设置的值*父级的值-->
visibility:hidden;<!--隐藏后占位，不影响子级，子级可以单独设置-->
transform:scale(0);<!--隐藏后占位，子级不可以单独设置*-->
overflow:hidden;<!--超出部分隐藏,特殊使用，配合绝对定位可以全部隐藏-->

outline：轮廓线，不占位置，优先使用
border：边框线，会占用位置<!--input有边框线，和内部的边框线-->
vertical-align:middle;<!--设置垂直对齐方式，任何选择值可以去掉图片下面的空白（默认中文基线对齐）；图片和文字居中对齐；上下垂直居中-->
cursor：pointer;<!--鼠标的样式更改-->

可以到 组件.com拿资源
需要引用样式重置
eg:border-sizeing:border-box;使用ie盒子

盒模型：

1.content:内容显示区域
2.padding:内边距，内容和border之间的空白区域
有四个值可以确定；一个值确定四边；两个值确定上下，左右三个值确定上，左右，下；四个字确定上，右，下，左顺时针）
3.border:边框线
制作三角形：调整border-left等的宽度
补充九宫格制图：边框图片 border-image:url() 33.33% round;平铺图案，或自动缩小/repeat;平铺图案，但是会被剪切
4.margin:外边距，盒子与盒子之间的距离

margin会导致的问题
1.产生margin叠压，是bug但是不影响我们的布局
原因：垂直方向上，一个margin-bottom,一个margin-top,两个值只有最大值生效
2.产生margin塌陷，是bug会影响我们的布局，需要解决
原因：外层是块级盒子，子辈也是块级盒子，子辈margin-top,会让父级塌陷至子辈的位置

BFC：块级格式化上下文
让一个盒子变成一个封闭的容器，容器里面的元素不会影响外面的元素
触发条件（如何创建BFC）：
body 根元素本身就是BFC
表现形式 display:flex,inline-block,table-cell
浮动 float的值不是none
定位 position:absolute;绝对定位/fixed;固定 position的值不是static或者relative
控制内容溢出 overflow：hidden;/auto;/scroll;

BFC:取消盒子margin塌陷；可以阻止元素被浮动元素覆盖

盒子模型两种分类:

1.标准盒子：content-box;*
计算宽（高）度：border2+padding2+content
但是设置的width,height只针对于content,一旦修改Border或者padding,盒子的大小会变化
2.ie盒子（怪异盒子）：border-box;
计算宽（高）度：border2+padding2+content
设置的width和height，就是border+padding+content的总和

DAY 8

一般设置图片的格式和大小，直接定义到该标签，不要定义其父级.box1>img

浮动float

普通文档流：所有的标签，从上往下，从左往右依次排列
浮动：让元素脱离普通文档流，原先的位置（节点）不存在，后面的元素会挤上来，浮动的元素要停止，
要么已经父级边界点，要么遇到另一个浮动的元素
(只能左右浮动，浮动会影响后面所有的元素的改变；浮动到父级的边界点停止，或者遇到另一个浮动元素停止)
块级标签无法检测到是否有浮动，会被遮挡；文本、行内元素可以检测到浮动元素，不会被遮挡
浮动：需要并排的元素都需要设置浮动；并且父级的宽度需要够大
浮动的元素一定能设置宽高
垂直显示的盒子，不要设置浮动；大盒子带着小盒子跑

浮动的特性：
1.包裹性：如果块级元素不设置宽度，浮动后，宽度由内容撑开；如果没有内容，宽度为0
2.高度塌陷：如果父级不设置高度，高度由子级撑开，但是子级浮动之后，父级的高度会塌陷
3.行内元素块状化：行内元素浮动后可以设置宽高，在浏览器上显示的display:bolck,但是实际的表现形式是inline-block
4.形成BFC,可以解决margin的塌陷

（面试）清除浮动：
1.在浮动的元素后面的元素上面加上clear:both;(添加空标签，空标签上加clear:

2.BFC （叔侄类）
3.用伪元素来闭合浮动 ::after （自己子辈对外类的影响，叔侄类关系）
4.全部都用浮动*

width:calc(100% / 7 + 10px)  <!--自动计算行距-->

圣杯布局/左中右布局/双飞翼布局

1.先引用base.css基础文件，再引用设定的css文件
2.块级元素使用margin:0 auto;可以实现水平居中，但只对块元素生效

DAY 9

position定位

static:静止的，默认值，没有任何特殊的；并且设置top，bottom，left，right偏移量不起作用，z-index，层级也不会起作用
relative:相对的（会在老家留坑，遵循文档流）
作用：1.给绝对定位的元素提供定位基点；（依次向上级去找定位基点）
2.重点是让层级z-index生效（也可以让四个偏移量top，bottom，left，right，但一般不使用）
obsolute:绝对的，会导致元素脱离普通文档流，就是原来位置不存在，对其他元素进行压盖（一定要去找一个给他提供绝对定位的最近的上级）
偏移量是否生效1.是否设置宽高度；2.left和top的值优先级更高，四个字同时存在，只对该两值生效
（也可以给自己后代提供定位基点，但是一般不使用）

        特性：1.包裹性：如果一个块级标签不设置宽度，绝对定位后，宽度由内容撑开；如果没有内容，宽度为0
	           2.高度塌陷：如果一个块级标签不设置高度，子辈绝对定位后，高度会塌陷
			   3.去浮动：绝对定位的权重大于浮动
			   4.bfc

overflow:
relative在外层，overflow元素在中间，绝对定位元素在中间，不会被裁减

<!--  调整子级在父级正中：
  子绝父相 top:50%;left:50%
  1.已知盒子的大小，宽高一半的负值
    margin-top:-50px;
  2.不知大小 transform:translate(-50%,-50%)-->

fixed:固定定位，相对于窗口进行定位，也会导致元素脱离普通文档流，就是原来位置不存在；特性同上
（注意fixed的元素，会被祖先的transform:translate()所影响，会导致其坐标系的改变，位置的变化）
sticky:粘性定位
z-index：层级，设置成absolute,fixed,z-index自动成为auto(最好是每级隔10，留出一定层级，方便后续添加；数值越高，层级越高）
         要生效，position必须设置成fixed，absolute，relative其中之一，只用relative

DAY 10

弹性flex

一般设计块级盒子为弹性盒子display:flex，行内也可以使用display：inline-flex设置成弹性盒子，但一般不常用
不能跨辈控制，只能控制亲子级

父级盒子属性：
   △1.flex-direction：决定主轴的是x轴还是y轴，以及其方向
	    row：默认值，决定主轴是x轴，方向：从左到右
		row-reverse：决定主轴是x轴，方向：从右到左
		column：决定主轴是y轴，方向：从上到下
		column-reverse：决定主轴是y轴，方向：从下到上
	2.flex-wrap  控制儿子换行的情况，换行的行距由子级均分（需要生效，必须第一排位置放不下）
	    nowrap:默认值，默认不换行
		wrap:正常换行
		wrap-reverse：换行，并且每一行还要对换位置
	*  flex-flow：flex-direction + flex-wrap的合成属性
△△△3.justify-content:控制子辈元素在主轴的排列情况（需要生效，主轴需要还有空余位置）
		flex-start:默认值，子辈一起排在主轴的开始
		flex-end：子辈一起排在主轴的结尾
	   △center：子辈一起排在主轴的中间
		space-between:子辈之间平分间隙，两边挨着父级边界
		space-around：两边到父级边距，是儿子之间间隙的一半
		space-evenly:两边到父级边距，和儿子之间间隙的一样
△△△4.align-item:控制子辈在交叉轴的排列情况（单排生效），对齐项
      flex-start：默认值，子辈一起排在交叉轴的开始
	  flex-end：子辈一起排在交叉轴的末尾
	 △flex-center：子辈一起排在交叉轴的中间
	  baseline：子辈基线对准
	 5.align-content:控制子辈在交叉轴的排列情况（多排生效）
	  flex-start：默认值，子辈一起排在交叉轴的开始
	  flex-end：子辈一起排在交叉轴的末尾
	 △flex-center：子辈一起排在交叉轴的中间
	  space-between:子辈之间平分间隙，两端挨着父级
	  space-around：两边到父级边距，是儿子之间间隙的一半
儿子盒子属性：
	1.order：控制某个儿子的排列顺序，默认值为0
	
	2.flex_grow:增长因子，控制子级的增长多少（要有空余位置才生效）
	          默认值为0，如果都设置为1，就平分剩下的空余位置
			  如果某个子级为2，就是其他设置成1的子级增长的大小的一倍，3为增长的3倍
	3.flex-shink:缩减因子，控制子级的缩减多少（要有不换行，有挤压才生效）
	          默认值为1，则为原始大小缩减同样部分，如果设置为0.则不缩减
			  如果某个子级为2，就是其他设置成1的子级缩减的大小的一倍，3为缩减的3倍
	4.flex-basis:300px;
				主轴为x轴，控制宽度，权重大于width
				主轴为y轴，控制高度，权重大于height
△△△5.flex:flex-grow,flex-shrink,flex-basis(fle:1 == flex:1 1 auto;作用，主动占满剩下的位置)
	6.align-self:子辈单独在交叉轴排列情况（仅仅控制自己的位置）