文章目录
文章目录
前言
提示：这里可以添加本文要记录的大概内容：
本周主要学习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(0255,0255,0~255) rgba(0255,0255,0255,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:子辈单独在交叉轴排列情况（仅仅控制自己的位置）
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
