Html和CSS基础

2021-12-28 220 阅读3分钟

记录一些基础知识

块级元素和行内元素

块级元素特点：元素独占一块；宽度可以设置；可以包含内联元素和其他元素块；未设置宽度时，默认宽度为容器的100%。常见的：div、p、form、h1～h6 行内元素特点：只能排在一行；只能包含文本或其他元素；宽度为内容宽度，设置宽高无效。常见：a、br、img、input等。

BFC（块级格式上下文）

概念：BFC时页面的一块渲染区域有自己的渲染规则，决定了其子元素如何布局，以及和其他元素的管理和作用。

使用场景：

```
去除边距重叠效应
```

清除浮动（让父元素的高度包含子元素浮动元素）

```
避免某元素被浮动元素覆盖
```

避免多列布局由于宽度计算四舍五入而自动换行

创建BFC方法

根元素，及html元素
float值部位none
overflow的值不为visible
display的值为inline-block、 table-cell、 table-caption
position的值为absolute或fixed 清除浮动方法
父级元素使用overflow: hidden;，使用了BFC方式，缺点：离开该元素所在区域的会被隐藏
使用额外标签.clear{clear: both;}
最优方案，使用为元素清除浮动

.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.clearfix {
    zoom: 1;
}

css选择器

id选择器（#id）
类选择器（.class）
标签选择器（div，p，img等）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*)
属性选择器（a[rel="external"]）
伪类选择器（a:hover, div:last-of-type, li:nth-child）

样式继承及优先级

可以继承的样式： font-size, font-family, color
不可继承的样式： border, padding, margin, width, height 样式优先级： !important > [id > class > tag]

display常见值

inline 默认-内联
none 隐藏
block 块级
table 表格
list-item 项目列表
inline-block 内连块
flex 弹性盒子

postition的值

static（默认）：按正常文档进行
relative：相对定位
absolute：绝对定位
fixed：固定定位，参照对象时可视窗口

垂直水平居中实现

针对行内元素

// 常见
text-aligin: center;
height: 100px;
line-height: 100px;

//利用table-cell布局
text-aligin: center;
display: table-cell;
vertical-align: middle;

针对块级元素

// 宽度已知利用绝对定位 + margin
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-right: -50px;

// 宽度未知利用绝对定位 + margin
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

// 利用父级设置flex布局
display: flex;
justify-content: center;
align-items: center;

自适应方案

利用rem，em，使用vw，vh，配合媒体查询实现

html {
    ...
    ...设置font-size: 62.5%是因为 16 * 0.625 = 10；方便后面的计算，这样1rem = 10px
    font-size: 62.5%;
    ...
    ...还可以根据不同的尺寸计算出相对页面宽度合理的vw值来定义font-size
}
html body {
    min-height: 100vh;
}
@media screen and (min-width: 1024px) {
    html {
        max-width: 1024px;
    }
}