CSS/HTML
CSS/HTML
一、基础知识
1、盒子模型：
padding设置内边距（上右下左），margin设置外边距，border设置边框
2、单位
相对长度单位 ：em，rem，%
绝对长度单位：cm，px，pt等
3、overflow处理溢出，默认值是visable，即不处理；hidden隐藏溢出内容，scroll分别在元素右、下创建滚动条，可以滑动查看内容，auto只在右侧创建滚动条，inherit从父元素继承
4、渐变：
线性渐变：linear-gradient(to 方向，red 50%，，)
径向渐变：radial-gradient(形状，，，)
圆锥渐变：conic-gradient(from角度，，，)
5、CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式
伪元素:不属于页面元素
：：before{}
：：after{}
6、transform：变换
旋转rotate（角度）
transform-origin定义旋转的基点
translate(x,y)控制水平方向和垂直方向同时移动（也就是×轴和Y轴同时移动)
translate：scale(a,b) 缩放
7、过渡transition： transition-property transition-duration transition-timing-function transition-delay
transition-property:规定设置过渡效果的CSS属性的名称。
transition-duration:规定完或过渡效果需要多少秒或毫秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:定义过渡效果何时开始。
8、关键帧@keyframes
9、设置样式
.style(class=”style”)
#style(id=”style”)
标签{ }
#mian定义的是id为"main"这个元素的样式，#main只能定义id为"main"这个元素的样式
.main的意思是新建一个名为"main"的样式，.main一但定义以后,可以让其他的元素来调用,方法为class="main"
在同一个层里同时出现id和class样式，id更优先于class
一、CSS布局
1. 正常流布局
不改变默认布局规则，不对页面进行任何布局控制，浏览器默认的 HTML 布局方式，HTML 元素完全按照源码中出现的先后次序显示
2. 弹性盒子：display=flex
flex-wrap:wrap;设置多行
justify-content: flex-start | flex-end | center | space-between | space-around
主轴对齐：行首对齐(左对齐)|行末对齐(右对齐)|居中|两头对齐|平均分布
align-items: flex-start | flex-end | center [ baseline | stretch
交叉轴对齐：上端对齐|下端对齐|居中对齐|文本基线对齐|上下对齐并铺满
3. 网格布局：display=grid
fr 单位按比例划分了可用空间
使用 grid-column-gap 属性来定义列间隙；使用grid-row-gap来定义行间隙；使用grid-gap 可以同时设定两者。
repeat重复构建具有某些宽度配置的某些列
用 grid-template-rows 和 grid-template-columns 两个属性定义了一些行和列的轨道
grid-column 和 grid-row 两个属性来指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束
4.浮动布局：浮动元素空间释放
float：left/right/none/inherit
将元素浮动到左侧/右侧/默认不浮动/继承父元素的浮动属性
clear清除浮动
解决浮动塌陷：
a、clear：清除存在的浮动
b、使用Overflow：设置为除visible外的其他值
c、clearfix小技巧：先向包含浮动内容及其本身的盒子后方插入一些生成的内容，并将生成的内容清除浮动。
content: ""
clear: both
display: block
d、设置display：flow-root
5、定位布局：position属性
静态定位——static
相对定位——relative：能够把一个正常布局流中的元素从它的默认位置按坐标进行相对移动，用top、bottom、left和right来精确指定要将定位元素
移动到的位置
绝对定位——absolute：用于将元素移出正常布局流，以坐标的形式相对于它的容器定位到 web 页面的任何位置，以创建复杂的布局，使用top、bottom、left和right调整元素大小
固定定位——fixed：定位的坐标不会应用于"容器"边框来计算元素的位置，而是会应用于视口 (viewport) 边框
粘性定位——sticky：当一个元素被指定了position: sticky时，它会在正常布局流中滚动，直到它出现在了我们给它设定的相对于容器的位置，这时候它就会停止随滚动移动，就像它被应用了position: fixed一样。
6、表格布局：display=table
当table 布局属性被应用于排列非table元素时，这种用法被称为“使用 CSS 表格”
7、多列布局：内容按列排序
无法为某一特定的列设置独特的背景色、文本颜色
column-count指定列数
column-width以至少某个宽度的尽可能多的列来填充容器
column-gap更改列间间隙
column-rule在列间加分割线，分割线位于间隙中，不占宽度
break-inside控制 multicol 和多页媒体中的内容拆分、折断，avoid不拆开
column-span属性用来设置元素应该跨多少列，none/all
8、响应式设计
根据不同的分辨率，执行不同的页面样式，实现自适应
核心在于媒体查询@media
可以在title标签上面加上meta标签
二、垂直居中
1、flex布局设置居中
<div class="outer">
<div class="inner"></div>
</div>
<style>
.outer{
background-color: blanchedalmond;
width: 300px;
height:300px;
display: flex;
justify-content: center;/*主轴居中*/
align-items: center;/*交叉轴居中*/
}
.inner{
background-color: rgb(202, 17, 17);
width: 200px;
height: 200px;
}
</style>
2、grid布局设置居中
<div class="outer">
<div class="inner"></div>
</div>
<style>
.outer{
background-color: blanchedalmond;
width: 300px;
height:300px;
display: grid;
}
.inner{
background-color: rgb(202, 17, 17);
width: 200px;
height: 200px;
align-self: center;
justify-self: center;
}
</style>
3、通过伪元素::before实现CSS垂直居中
<div class="outer">
<div class="inner"></div>
</div>
<style>
.outer{
background-color: blanchedalmond;
width: 300px;
height:300px;
display:inline-block;
text-align: center;
}
.inner{
background-color: rgb(202, 17, 17);
display:inline-block;
vertical-align:middle;
width: 200px;
height: 200px;
}
.outer::before{
width:0;
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
</style>
4、通过表格布局设置居中
<div class="outer">
<div class="inner">hello world</div>
</div>
<style>
.outer{
background-color: blanchedalmond;
width: 300px;
height:300px;
display:table;
}
.inner{
display:table-cell;
vertical-align:middle;
text-align: center;
}
</style>
5、通过相对定位和绝对定位设置
a、给父元素position:relative，再给子元素position:absolute
top属性值计算方式:父元素的高度/2-子元素高度/2
left属性值计算方式:父元素宽度值/2-子元素宽度值/2
<div class="outer">
<div class="inner"></div>
</div>
<style>
.outer{
background-color: blanchedalmond;
position: relative;
width: 300px;
height:300px;
}
.inner{
background-color: rgb(202, 17, 17);
position: absolute;
width: 200px;
height: 200px;
top:50px;
left:50px;
}
</style>
b、给父元素position:absolute，再给子元素position:relative，通过translateY即可定位到垂直居中的位置。
<div class="outer">
<div class="inner"></div>
</div>
<style>
.outer{
background-color: blanchedalmond;
width: 300px;
height:300px;
position: absolute;
}
.inner{
background-color: rgb(202, 17, 17);
width: 200px;
height: 200px;
position: relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
6、absolute+负margin（设置为宽高的一半）
<div class="outer">
<div class="inner"></div>
</div>
<style>
.outer{
background-color: blanchedalmond;
width: 300px;
height:300px;
position: absolute;
}
.inner{
background-color: rgb(202, 17, 17);
width: 200px;
height: 200px;
position: absolute;
top:50%;
left:50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
当宽度和高度未知时，使用absolute+transform:translate(-50%,-50%);
<div class="outer">
<div class="inner"></div>
</div>
<style>
.outer{
background-color: blanchedalmond;
width: 300px;
height:300px;
position: absolute;
}
.inner{
background-color: rgb(202, 17, 17);
width: 200px;
height: 200px;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
三、CSS预处理器
less:一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。
1、转化命令：lessc index.less index.css
2、变量：定义时@变量名:值，使用时直接用@变量名
选择器变量：@变量名:#id
属性变量：@名:属性名
url变量：@url:”../../”
声明变量 （变量名用大括号包裹）
用变量定义变量
3、运算：加减法时以第一个数据的单位为基准，乘除时单位要统一
4、变量作用域：就近原则
5、嵌套：代替层叠或与层叠结合使用
6、父级引用使用&
7、媒体查询@media screen{}
8、混合：混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
如果Mixins名称后面不加小括号，则会编译到CSS中。如果加上小括号，则不会被编译。
9、!important关键字用于覆盖特定属性。如果我们在Mixins引用后面加上!important关键字,则会将Mixins中的所有属性标记为!important。优先应用使用!important关键字标记的属性。
10、继承：
&:extend(.a)只继承a的样式
&:extend(.a.b)只继承b的样式
11、导入：
@import "style";相当于引入style.less
或者@import url('./base.less');
scss:
1、转换命令：sass index.scss index.css
2、变量：
声明：$变量名：变量值；
默认变量：在值后面加上!default 即可，覆盖的方式是在默认变量之前重新声明下变量即可
3、运算：
如果除式中没有变量或者不是在一个数学表达式中（有加法减法等），就要将除式运算用小括号括起来，否则“/”不会被当做除号运算。
4、嵌套：
属性嵌套（有相同的属性前缀）;伪类嵌套
5、混合指令@mixin：声明@mixin 名字{}；调用@include 名字
6、继承@extend：
在scss中的继承，可以继承类样式块中所有样式代码，而且编译出来的css会将选择器合并在一起，形成组合选择器。
用占位符%声明的代码，如果不被@extend调用就不会被编译。（使用@extend调用）
7、插值语句：#{ }
8、注释：
/*注释内容:会在编译出来的css文件中显示*/
//注释内容:不会在编译出来的css文件中显示
