CSS布局基础 | 青训营

熊猫241
137 阅读4分钟

布局（Layout）是什么

  • 确定内容的大小和位置的算法
  • 依据元素、容器兄弟节点和内容等信息来计算

布局的相关技术

  • 常规流
    • 行级(如：span ,a ,strong ,em ,b ,s ,i ,font)
    • 块级(如：div ，p ，ul , li ,h1-h6）
    • 表格布局
    • FlexBox
    • Grid布局

还有一种行内块元素（如：img ,input ,select ,textarea ,button ,label）可通过display来转换

  • 浮动
  • 定位

一、基本认识

1、盒子的两个常用性质：

width：盒子宽度，指的是border以内的部分（不包括border宽度）取值可为数值，百分数（对上级盒子的占比），auto

height：盒子高度，指的border以内的部分

对行内元素设置宽高是无用的，内容多大盒子就多大，但可以设置line-height

2、盒子区域划分

盒子区域的划分可以分为部分：padding，border，margin

image.png

padding：盒子的内边距，盒子边框线和内容之间的间距

.box{ 
    padding: 2px 4px 3px 10px;/*(上，右，下，左)*/
    /*或者*/
    padding-top: 2px;
    padding-right: 4px;
    padding-bottom: 3px;
    padding-left: 10px;
    /*对边一样的话还可以*/
    padding: 2px 4px；/*上下，左右*/
    
}

border：边框线

分别对四个方向的边框线进行样式设置

image.png

依靠这种性质我们可以作出三角形

image.png

css代码如下

        .b {
            width: 0;
            height: 0;
            background-color: blue;
            border-bottom: red 10px solid;
            border-top: black 10px solid; 
            border-left : 10px gold solid;
            border-right: 10px green solid;
            /* margin: auto ; */
        }

margin：盒子的外边距，盒子与盒子之间的距离

margin与padding使用方法同理

注意：浮动元素、绝对定位和固定定位元素的都不会触发外边距合并的问题

3、居中方式

  1. 利用margin：0 auto或text-align：center样式实现水平居中;
  2. 利用”高==行高“实现垂直居中;
  3. 利用table实现垂直居中;
  4. 利用绝对定位实现垂直居中。

二、常规流（Normal Flow）

根元素、浮动和绝对定位的元素会脱离常规流，其他元素都在常规流之内。

1、行及排版上下文

  1. 盒子在一行内水平摆放。
  2. 一行放不下就换行。
  3. text-align决定一个盒子的水平对齐
  4. vertical-align决定一个盒子的垂直对齐
  5. 避开浮动

2、块级排版上下文

  1. 盒子从上到下摆放
  2. margin合并
  3. 内盒不与外盒margin合并（由此可以解决相邻盒子合并的问题）
  4. 不与浮动元素重叠

浮动

  • 浮动最开始是为了做文字环绕图片的效果，对于盒子要尽量避免使用浮动，让它回归最初的目的，因此我们常使用定位来实现。
  • 浮动 float 默认盒子转换为行内块

三、定位（position）

定位 = 定位模式 + 边偏移

边偏移：top、right、left、bottom

1、属性

  1. static：默认值，非定位元素，边偏移不起作用。
  2. relative：相对原本位置偏移，不脱离文档流
  3. absolute：绝对定位，相对非static祖先元素定位
  4. fixed：相对于窗口绝对定位
  5. sticky:粘性定位，和fixed定位有些相似，不同之处在于，一开始可以自由滑动，当到一定位置时就会在那里不动，较少使用。

当top和bottom同时指定时，并且 height没有被指定或者指定为auto的时候，top和bottom都会生效； 如果 height被限制，则top属性会优先设置，bottom属性则会被忽略。

2、relative

  • 不脱标——占位置（流内其他元素当他没有偏移一样布局）
  • 相对于自己本应该在的位置进行偏移

image.png

3、absolute

  • 完全脱标——完全不占位置
  • 相对于最近的非static祖先定位（父级没定位，则以浏览器为准定位）进行边偏移

子绝父相

子级是绝对定位，父级是相对定位，子级相对父级进行定位移动。

4、fixed

  • 完全脱标——完全不占位置
  • 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

5、sticky

  • 粘性定位在使用时要注意父级元素不能设置 overflow:hidden或者 overflow:auto不然就没有效果了
  • 如果元素在viewport里面，边偏移属性的效果和position为relative等同；如果元素在viewport外面，边偏移属性的效果和position为fixed等同

绝对定位和固定定位会将盒子转换为行内块

avatar
文章
阅读
粉丝