登陆界面导航栏CSS知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_81192892/article/details/145830411

1.元素定位（position）：

相对定位：relative 相对本身移动，占着原来位置，不脱离文档

绝对定位：absolute 相对于已定位的父元素的填充盒，脱离文档流

固定定位：fixed 相对于视口，脱离文档流，可以做侧边栏和固定UI

粘性定位：sticky达到一定值后呈现fixed特性，不脱离文档流

脱离文档流可用z-index控制层叠顺序。

.nav{
    margin:0 auto;
    padding-left: 300px;
    padding-right: 300px;
    height: 80px;
    width: 1360px;
    display: flex;
    flex-direction: row;
    position: sticky;
    top: 0;
    z-index: 999;
}

此处用到粘性定位。top：将其定位在上方，其父元素为html

2.float布局

float：left/right；

影响后续其他行内元素，使其在环绕在float元素周围

清除浮动影响：最后一个float设置clea：both

排序时，空间不足则先向下再向左，浮动元素的顶边不超过上一个浮动元素的顶边

！！！包含块：常规和浮动的包含块是内容区

绝对定位的包含块是已定位的父元素的填充盒（padding+box）

3.flex布局

将display设置为flex

主轴main axis 交叉轴cross axis

左上为起点star

容器属性：

flex-direction（主轴方向，即item排列方向）：row（水平左到右）row-reverse（水平右到左）column（垂直上到下）column-reverse（垂直下到上）

flex-warp（超过轴长换行）：warp（换）nowarp （不换）warp-reverse（换行后新一行在上面）

两个合并：flex-flow：<flex-direction> <flex-warp>

justify-content(在主轴对齐方式)：flex-star（主轴前端）flex-end（主轴结尾）center（居中）space-between（与前端无间隔）space-around（与前端有间隔，item之间双间隔）（与前端有间隔，item之间单间隔）

align-item（交叉轴对称方式）：

flex-star；flex-end；center；stretch；baseline（以第一行文字基线对齐）

align-content(warp换行后产生多轴线，轴线的对齐方式)：flex-star；flex-end；center；stretch；space-between；space-around

item项目属性：order：1；自定义排列顺序

align-self：自定义交叉轴对称方式

flex：<flex-grow><flex-shrink><flex-basis>

4.Grid布局

将display设置为grid

容器属性：

gird-template-rows(垂直分为5份)：100px 100px 100px 100px 100px；

定义GridLine则为：[Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6]；

gird-template-columns:(水平分为5份)：100px 100px 100px 100px 100px；

定义GridLine则为：[X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6]；

grid-template-areas(分配面积):"header header header header header"

"nav header header header header"

". footer footer footer ."

row-gap：垂直间隔

column-gap：水平间隔

repeat（4，1fr）：repeat（）函数参数为：次数，值，fr为grid的单位，代表剩余空间

item属性：

grid-row:（子容器占据垂直方向哪些位置，根据GirdLine定位）:Y2/Y6 or Y2/span 4（延伸4格）

grid-column：（子容器占据水平方向哪些位置，根据GirdLine定位）:X1/Y4 or Y1/span 3（延伸4格）

gird-area(子容器占据哪些分配面积，根据grid-template-areas命名来定位）：header

5.css居中方法：

水平居中：{

行内元素：父元素已居中，子元素用text-align：center居中

块级元素：指定宽度后，设置外边距margin为auto居中

flex布局：justify-content：center让子元素在主轴上居中

Grid布局：place-items：center让子元素在水平和垂直方向都居中

}

垂直居中：{

单行文本：设置line-height实现垂直居中

flex布局：设置align-items：center让子元素在交叉轴居中

使用绝对定位和负边距/transform：元素已知高度，让margin-top为负实现垂直居中或者让其定位在父元素的中心点(top:50% left:50%)，再通过transform位移自身50%来居中

6:css选择器优先级

内联式：

ID选择器：

类/属性/伪类选择器：

元素选择器/伪元素选择器：

从上到下依次比较，维度值相同则后覆盖前