layout布局

  • A+
所属分类:Web前端
摘要

文档流状态:在文档流,脱离文档流块元素:行内元素将页面中的所有元素都设置城一个矩形的盒子


文档流

  • 网页是一个多层的结构
  • 通过css可以分别设置每层的样式
  • 最下面的一层,就是文档流
  • 创建的元素默认是在文档流

文档流状态:在文档流,脱离文档流

文档流状态

在文档流

块元素:

  • 在页面中独占一行
  • 默认宽度是父元素的全部,会把父元素撑满
  • 默认高度是内容(子元素)撑开
  • 从上到下垂直排列
<div class="box1">我爱吃</div>     <div class="box2">鱼香茄子</div> 
    	.box1{             width: 100px;             background-color: royalblue;         }         .box2{             width: 100px;             background-color: yellowgreen;         } 

行内元素

  • 只占用自身的大小
  • 从左向右排列,如果一行中容纳不了行内元素了,则自动换行,然后再次从左向右
  • 默认的宽度和高度都是内容撑开

盒子模型

layout布局

将页面中的所有元素都设置城一个矩形的盒子

组成:

  1. 内容区(content):元素中的所有子元素和文本内容;由width和height来控制
  2. 内边距(padding)
  3. 边框(border):属于盒子的边缘,边框内是盒子内部,出了边框就是盒子外部了
    1. border-width:边框的宽度;一般都是3个像素,可以用来指定四个方向的边框的宽度
    2. border-color:边框的颜色
    3. border-style:边框风格(实线,虚线)
    4. 边框的大小会影响到盒子的大小所以算的时候要考虑边框的大小
  4. 外边距(margin)

前三个决定盒子大小,外边距决定位置

border-width

关于border-width的参数个数的意思:

  1. 四个参数:上右下左
  2. 三个参数:上 左右 下
  3. 两个参数:上下,左右

border-xxx-width :指定设置方向的边框

border-top-width:20px border-left-width:20px 

border-color

border-color:指定边框的颜色,同时也可以分别指定不同方向的颜色,规则和border-width一样,不指定,默认是是使用的color前景色的指定值

border-style

  1. solid 实线条
  2. dotted:点状虚线
  3. dashed:虚线
  4. double:双线

四个参数和border-width一致

border简写

参数可以调换顺序

  • border-top
  • border-right
  • border-bottom
  • border-left
  • border
border: 10px red solid; 

当参数是none的时候,就啥也设置

内边距

padding:内容区和边框之间的内边距

四个方向

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

内边距的设置会影响到盒子的大小,背景颜色会衍生到内边距上

盒子的可见框大小,由内容区,内边距和边框共同决定

padding 内边距四个参数的时候以是顺时针方向和border-width规则一样

外边距

margin

  • 不会影响到盒子可见框的大小
  • 会影响盒子的位置

盒子可见框:就是盒子能看见的全部部分

四个方向

  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left
  • 元素在页面是从左到右排序的 ,通俗的说,默认有个参照物,有个(0,0)坐标位置在屏幕的左上角
  • 默认设置左上,就会让元素坐标移动,右下其实是相对于自己,让其他盒子来改变位置的

如果有负值,那么就是相反的方向移动

盒子的水平布局

横向布局,元素在父元素的水平方向的位置由下面的几个元素决定

  • marging-left
  • border-left
  • padding-left
  • width
  • padding-right
  • border-right
  • margin-right

一个元素在父元素 中,水平布局必须要加上以上所有的左右边距

也就说,上面所有对左右布局的操作,加起来的像素都要和父元素的总宽度相等

  1. 如果不等,那么就会过度约束,浏览器会自动调整
  2. 如果上面的所有元素的属性没有auto,浏览器会自动调整margin-right的值来满足等式
  3. 所以说,只要出现了过度约束,那么就调margin-right

只有width和margin-right和margin-left能设置auto属性

  • 如果有一个设置了auto,则会自动调试auto的那个值来让等式成立,有里auto后就不会默认调试margin-right了,而是自动调试设置了auto的属性
  • 如果将一个宽度和一个外边距设置成了auto。则宽度默认会最大,边距会为0
  • 如果三个都设置为auto。则外边距也是0,宽度也是最大
  • 如果将两个外边距设置auto,宽度固定值,则会在父元素中水平居中

width 默认就是auto

盒子的垂直布局

  • 默认情况如果没有设置父元素的高度,则父元素的高度被内容撑开
  • 如果子元素高度的大小超过了父元素固定的高度,则子元素会从父元素中溢出

overflow:可以解决

overflow可选值:

  1. visible:默认肢,子元素会从父元素中溢出
  2. hidden: 解决浮动塌陷 子元素不会从父元素中溢出
  3. scroll: 生成滚动条
  4. auto :根据需要自动生成滚动条

overflow-x:单独处理水平

overflow-y:单独处理垂直

外边距的折叠

相邻垂直方向外边距会重叠

  1. 兄弟元素
    1. 兄弟元素之间的相邻的垂直的外部边距会取较大值(都是正值)
    2. 如果兄弟一正一负则取相加之和
    3. 如果都是负值,则取值绝对值最大的。也就说取偏移量最大
    4. 对开发有利,建议不处理这种现象
  2. 父子元素
    1. 子元素会传递给父元素,比如父元素没有设置上边距,子元素设置了,然后父元素也一起移动了
    2. 影响到了页面的布局,要处理。
    3. 处理方式:
      1. 使用padding来处理父元素
      2. 处理父元素的边框

行内元素的盒子模型

  • 行内元素不支持设置宽度和高度,width和height对行内元素没用
  • 可以设置padding,但是垂直方向的padding不会影响到页面的布局
  • 可以设置border。但是垂直方向的border不会影响到页面的布局
  • 可以设置margin。但是垂直方向的margin不会影响到页面的布局

display:用来设置元素显示的类型

可选值:

  1. ​ inline:将元素设置为行内元素
  2. ​ block: 将元素设置城块元素
  3. ​ inline-block:将元素设置行内块元素(结合一起) 替换标签,既可以设置高度和宽度,又不会独占一行
  4. ​ table: 将元素设置成一个表格
  5. ​ none : 元素不显示,直接干掉标签

visibility:设置元素的显示状态

  1. ​ visible:默认肢,元素在页面中正常显示
  2. ​ hideden:元素在页面隐藏,不显示,但是还是占有位置

为了提高响应速度,以及降低服务器的压力,建议,在大量使用显示隐藏的时候,使用visibility,

浏览器的默认样式

  • 通常情况,浏览器会设置默认的样式,不同的浏览器会有不同的样式
  • 默认样式:会影响到页面的布局,通常开发的时候,去除浏览器的默认样式
  • 现在最新的edge,默认是去除了部分元素的,但是不妨有低版本的浏览器运行你的网页
*{     margin: 0;     padding: 0;   }  

盒子的尺寸

盒子的可见框大小由内容区,内编辑和边框相加

box-sizing:用来设置盒子尺寸的计算方式(设置width和height的作用)也就是用来提升设置宽高的“作用域”

box-sizing: content-box; 

可选值:

  1. content-box:默认,宽度和高度设置内容区的大小
  2. border-box:宽度和高度用来设置整个盒子可见框的大小 这里是整个哦,(内容区+边框+内边距)

轮廓和圆角

轮廓

基本操作和border一摸一样,参数也是一样的

轮廓和边框不同点:轮廓不会影响到可见框的大小,也就说,不会影响到布局

 outline: 10px grey solid; 

阴影

阴影:也是不会影响布局的。

  1. honeydew: 颜色属性
  2. 其他的参数是阴影的偏移量(x,y)
 box-shadow: 10px 10px 50px honeydew; 
  1. 第一个值,水平偏移量x,正左负右
  2. 第二个值,垂直偏移量y,正下,负上
  3. 第三个值,阴影的模糊半径,越大 越模糊
  4. 第四个值,颜色,一般是用rgba

圆角

border-radius: 用来设置圆角,用来设置的圆的半径大小

  1. ​ border-bottom-right-radius: 右下
  2. ​ border-bottom-left-radius: 右左
  3. ​ border-top-left-radius: 左上
  4. ​ border-top-right-radius: 右上

如果两个参数,那么也是xy方向的半径

border-radius:直接四个参数,也是顺势针

50%则是圆形

浮动

float:浮动

通过浮动可以让一个元素的左侧和右侧移动,使用float属性来设置元素的浮动

浮动会脱离文档流

可选参数:

  1. none:默认值,不浮动
  2. left:元素左浮
  3. right:右浮动

元素设置浮动后,水平布局的等式不需要强制成行内元素

特点:

  1. 浮动元素会完全脱离文档流
  2. 设置浮动后,元素会向父元素左|右移动
  3. 元素移动的时候,不会移动出父元素的边界(主要是宽度)
  4. 向左或向右移动的时候,不会超过它前面的其他浮动元素(相邻或者兄弟),通俗的说,同一个父类元素的子元素浮动的时候,会在同一层,但是至于是哪一层就不清楚了,反正不是第一层,因为第一层是文档流嘛
  5. 如果浮动元素的上边是一个没有浮动的元素,是无法上移的,浮动是基于当前行来执行的
  6. 浮动元素不会超过它上一个浮动的兄弟元素,最多和兄弟飞的一样高

其他特点

浮动不会盖住文字,文字会自动环绕在浮动的图片的周围

脱离文档流的特点:

  1. 块元素:不在单独占页面的一行,脱离后,块元素的宽度和高度默认都被内容撑开,根据内容的大小来决定宽高,可以简单的理解变成了行内元素(内联元素),但是还是有块级元素的特点,可以说是成了替换标签(元素)
  2. 行内元素:行内元素脱离后则变成 了块级元素了,特点和块级元素一样。可以说是成了替换标签(元素)

浮动塌陷问题

在使用浮动的时候,主要是高度塌陷问题,在块级元素中很常见

 .outer{             border:  10px red solid;         }          .innder{             float: left;             width: 100px;             height: 100px;             background-color: rosybrown;         } 
    <div class="outer">             <div class="innder">              </div>      </div> 

layout布局

  • 默认的块级元素中,父元素的高度默认是被子元素撑开的
  • 当子元素浮动后,脱离了父元素的文档流,无法撑起父元素的高度 ,这里已经影响到了页面的其他元素的布局了

bcf

  • Blocak
  • FOrmating
  • Context

块级格式化环境。是css中隐含的熟属性 可以为一个元素开启BFC

开启bfc的方式:

  1. 父元素一起浮动,给父元素也写float标签,则是让父元素一起飞

  2. 将元素设置成行内块元素(替换标签)display:inline-blocak

  3. overflow:非visible,默认是visibe,设置成其他的,例如是hideen

    1.       overflow: hidden; 

开启后的特点:

  1. 开启的bfc元素不会被浮动的元素覆盖
  2. 开启BFC元素,子元素和父元素的外边距不会重叠。
  3. 可以包含浮动的子元素,子元素就不会脱离父元素的文档流

clear

clear:不让某个元素因为其他元素的浮动的影响来改变位置。清除浮动元素元素来对当前元素的影响

可选值:

  1. left:清除左浮动
  2. right:清除右浮动
  3. both:清除两侧中,最大影响的

原理:自动给元素添加一个边距(上边距 margin-top)

after伪类

这里是操作父元素

  .box1::after{             display: block;             clear: both;             content: '';         } 

clearfix

同时解决高度塌陷和外边距重叠

这里操作的也是夫元素

   <div class="box1 clearfix">         <div class="box2"></div>     </div> 
    .clearfix::before,.clearfix::after{         content: '';         display: table;         clear: both;     } 

定位

position:是一种高级的布局手段

可以将一个元素设置在页面的任何位置

position可选值:

  1. static:默认,元素静止,不开启定位
  2. relative:相对定位
  3. absolute:绝对定位
  4. sticky:粘滞(zhi)定位
  5. fixed:固定定位

父相子绝

相对定位

  position: relative; 

如果不设置偏移量元素不会发生变化

偏移量(offset):,需要设置偏移量来设置元素的位置

可选值:

  1. top:定位元素和定位位置上边的距离 相对于上面,则向下移动
  2. bottom:定位元素和定位位置下面的距离
  3. right:定位元素和定位位置右边的距离
  4. left:定位元素和定位位置左边的距离

相对定位是参照文档流定位的,默认是body

和浮动一样,会提高元素的层级,但是没有脱离文档流

不会改变的元素,块级元素还是块级,内联还是内联

绝对定位

  position: absolute; 
  1. 如果不设置偏移量,元素的位置不会发生变化
  2. 会从文档流脱离,则会改变布局的结构
  3. 会改变元素的性质,和浮动类似,变成替换标签
  4. 会提升使用定位的元素的层级
  5. 相对于其包含块进行定位
  6. 包含块(containing block):
    1. 正常情况:就是离当前元素最近的祖先块元素
    2. 使用了绝对定位的情况:离最近的开启了定位的祖先元素,可能内行元素也开启了绝对定位
    3. 如果所有的祖先元素都没有开启定位,就相对于根元素(文档流)htm:初始包含块

固定定位

小广告

            position: fixed; 
  1. 固定定位也是绝对定位,大部分特定和绝对定位一样
  2. 和绝对定位不同的是,永远参照浏览器的视口
  3. 不会随着网页的滚动而滚动

视口:浏览器的可见窗口,但是不是根元素。可视区域,

粘滞定位

          position: sticky; 
  • 老版本的浏览器可能不支持
  • 和相对定位类似
  • 不同的是,可以在元素到到某个位置后固定,比如top:0,在top位置到0的时候就不动了。