html、css（2）|青训营笔记

亭好汀的
82 阅读6分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 3天

布局相关

box-sizing：一般来说会设置为*{box-sizing：border-box}，要不然的话默认的content-box在设置100%时，加上边框可能会使得文字超出页面大小

值说明
content-box默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 注： border-box 不包含 margin。
inherit指定 box-sizing 属性的值，应该从父元素继承

画三角形:

#app{
    height:0; /*指的是content-box的高度为0*/
    width:0;/*指的是content-box的宽度为0*/
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;/*上右下左*/
    border-style:solid;/*border默认为none无边框*/
    border-width:20px;
}

margin

距离其他容器的距离

/*表示水平居中*/
margin-left:auto;
margin-right:auto;

margin collapse:

在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。取大的那个边距，而非两个边距之和。

两个或多个

   两个或多个盒子是指元素之间的相互影响，单个元素不会存在外边距叠加的情况。

垂直方向

   只有垂直方向的外边距会发生外边距叠加。水平方向的外边距不存在叠加的情况。 overflow Overflow属性：

主要用于设置盒子的属性，规定当内容溢出元素框时发生的事情，这个属性主要有这个设置值

属性值含义
visible默认值，内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。
inherit规定应该从父元素集成overflow属性的值

display

在Html应用为排列的意思，Html中标签分为行内标签和块级标签，

行内标签（行内元素）

特点：多个标签存在一行，不能直接设置标签的高度、宽度、行高以及上下边距，但可以设置左右内外边距，依照内容撑开宽高。

块级标签（块级元素）

特点：独占一行，可以设置高度、宽度以及上下边距都可设置的属性值生效；如果不给宽度，块级标签就默认为浏览器的宽度，宽度就是100%；

而想让行内标签独占一行，或者块级标签并排显示，或者既要并排显示又要设置宽高就可以用到display属性了，

display中有三种常用的属性

display: inline; 将元素转化为行内元素，展示行内元素的特点

display: block; 将元素转化为块级元素，展示块级元素的特点

display: inline-block; 将元素转化为行内块元素，展示行内元素的并排显示的特点和块级元素可以设置宽高的特点

BFC 布局规则

1.内部的 box 会在垂直方向，一个接一个地放置。

  1. box 垂直方向由 Margin 决定，属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠。

  2. 每个元素的 margin box 的左边，与包含块 border box 的左边相接触。

  3. BFC 的区域不会与 float box 重叠。

  4. BFC 就是页面上的一个隔离容器，容器里的子元素不会影响外面的元素。

  5. 计算 BFC 的高度时，浮动元素也参与计算。

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流

IFC 布局规则

  1. 子元素水平方向横向排列，并且垂直方向起点为元素顶部

  2. 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】

  3. 在垂直方向上，子元素会以不同形式来对齐（vertical-align）

  4. float 元素优先排列

IFC 作用：解决元素垂直居中

Flex-box

水平对齐方式justify-content

属性值含义
flex-start默认值，左对齐
flex-end右对齐
center居中
space-between两端对齐，项目之间的间隔相等
space-around项目两侧的间距相同，项目之间的间距比两侧的间距大一倍

交叉轴对齐方式align-items

属性值含义
flex-start交叉轴的起点对齐
flex-end交叉轴的终点对齐
center交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐。
stretch（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。

缩小比例flex-shrink

flex-shrink：设置项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

放大比例flex-grow

flex-grow：设置项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性值都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性值为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex属性

flex属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值为0，1，auto

grid布局

grid布局是非常强大的css布局，它将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

属性名作用
grid-template-columns定义网格布局中的列数，并可定义每列的宽度
grid-template-rows定义网格布局的行数以及行高
grid-template是grid-template-rows ，grid-template-columns简写

grid-area：指定内容放在哪个区域，可使用grid-row-start、grid-column-start、grid-row-end、 grid-column-end的合并简写形式，直接指定项目的位置， 书写格式： grid-area: < row-start> / < column-start> / < row-end> / < column-end>;2/2/2/3

position属性

属性值含义
static默认值。没有定位，元素出现在正常流中
relative生成相对原位置定位的标签。
absolute生成绝对定位的标签，相对于标签本身第一个position为非 static父元素进行定位。
fixd生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动调的滑动而滑动。
avatar
文章
阅读
粉丝