浅谈CSS

Xixibao
11 min readMar 15, 2021

之前我们大概总结了关于HTML,以及网页如何传输,还有浏览器如何显示我们的页面的知识点。

下面讲讲CSS,它主要用于渲染我们的页面。

我们知道的是HTML里面有很多的标签,那如果我们只有那个标签的内容的话,它就会排列混乱,因为没有东西可以约束它的排版。

所以就出现了CSS。 CSS其中一个知识点就是盒模型,也就是把每一个元素都装到了一个盒子里,然后就可以实现给这个盒子定位,设置元素内容的边框,颜色等等就更方便整齐了。CSS的盒模型包括两个,一个是标准盒模型,还有一个是IE盒模型。 当写CSS的时候,如果给相应元素写了box-sizing 属性,就代表设置了一个盒模型。box-sizing 属性一共有三个,分别是border-box, padding-box,和content-box. border-box就是那个盒模型的height 和width一直包括到了border那一层。然后content-box 就只包括最中间的content部分啦!这个在之后计算元素之间的宽度大小的时候会有用,关于盒模型大家可以自己去网上查一下图片,最中间是content,依次向外就是padding, border,margin .

但是只有盒模型是不够的,因为对于一些负责的页面比如说实现垂直居中就不容易。所以🈶了flex盒模型。

flex盒模型主要有两种属性,分别是容器属性还有元素属性。
容器属性有:flex-direction(决定横着排还是竖着排), flex-wrap(决定是否换行),justify-content(水平对齐方式), align-items(纵向对齐方式)。
元素属性:flex-grow(按比例放大属性,即使有足够的空间也不沾满);flex-shrink(缩小比例);flex 为flex-grow,flex-shrink,以及flex-basis 的简写, flex-basis 定义了分配多余的空间的时候,项目占据的空间。order定义了元素的排列顺序,越小越靠前。
可以用flex实现一个圣杯布局:👇

https://segmentfault.com/a/1190000013631838

BFC(块级格式化上下文)这个名词听上去很复杂,其实尝试过就会更好理解一点。比如说,我们想写一个在一行里面并列的两个内容,就可以用一个<div>包住他们,然后把这个div 的overflow属性设置为auto。然后给要浮动的那个子元素设置overflow=left,就可以用外面的div包住那个子元素了;除此之外,还可以解决元素元素margin 塌陷问题。
那么什么才算BFC呢? BFC是一个独立渲染的区域,触发BFC之后,浮动的元素也会参与计算。。
1、弹性元素(display:flex)display:inline-block,inline-flex,table-cell,table-caption都可以; overflow不为visible的(overflow:hidden/auto);绝对定位的元素(position:absolute等);Position 不为relative或者static,如果不理解或者忘记了可以看一下:

--

--

Xixibao
Xixibao

No responses yet