css-layout

最新推荐文章于 2024-01-10 21:57:51 发布

原创最新推荐文章于 2024-01-10 21:57:51 发布 · 429 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #layout

css 专栏收录该内容

5 篇文章

订阅专栏

CSS - 布局

盒子模型

padding:内边距,顺时针,会导致盒子的宽高增加,主要用于父子盒子重要

border:style,width,color

border-width:thin,medium,thick,像素值

border-style:none,dotted,dashed,soild,double

border-radius:10px,圆角

outline:外边框

margin:长度上下合并,左右叠加(body相对于html有一个默认的margin),主要用于兄弟盒子
```
 1、当父盒子没有设置border时，子元素设置margin-top会导致父盒子下沉。
 2、设置盒子的padding，需要减小宽高以保持盒子的整体尺寸不变
```
注意:常用Html标签具有默认的内外边距，开发之前会统一清除
浮动
- 行内元素:在一行上,span,a,img,input等,水平排列,没有宽高,和内容等宽
- 块级元素:相当于图层,div,h1,p,ul,li,table等.独占一行,可设置宽高,和页面等宽
```
  * 块级元素和行级元素的转变:display属性,block;inline;none
```
- float属性:left;right;none,float布局会使页面高度塌陷,解决办法:给浮动元素的父级元素添加overflow:hidden扩展盒子高度
  - 浮动元素脱离标准文档流,使父容器失去高度,影响了后续元素
```
  * 浮动元素的位置空出来，由非浮动元素占据
  * 浮动元素不论是块级还是行级元素，都可以水平排列，同时设置宽度和高度
```
  - 浮动元素具有相互贴靠特点
  - 浮动元素具有文字围绕特点,浮动元素的空间被后续非浮动元素占据，但是非浮动元素中的内容（文字、块元素和行级元素）被排除在该区域外
  - 浮动元素不设置宽度时具有收缩特点
  - 父级元素的宽度是所有浮动子元素的宽度之和
- 清除浮动:在收浮动影响的元素中添加clear:both(两边清空)
标准文档流

特点:空白折叠,底部对齐,自动换行

脱离标准文档流的主要技术手段是浮动和绝对定位
定位

默认值,没有定位,以标准流方式显示:static

相对定位:relative
1. 相对定位坐标原点是自身;原来在文档流中的位置
2. 如果设置了position:relative,但是没有设置top/left则元素不动
3. 可以使用margin:auto实现居中显示
4. 相对定位不会脱离文档流
5. 和绝对定位配合,作为定位基准点,微调位置

绝对定位:absolute
1. 绝对定位坐标原点是非static父元素的左上角
  - 距离最近的具备定位特性的祖先元素
  - 祖先元素都没有定位时，以页面和浏览器窗口为基准
2. 如果设置了position:absolute,但是没有设置top/left则元素不动
3. 不可以使用margin:auto实现居中显示
4. 绝对定位会脱离文档流(和float一样)
固定定位:fixed
1. 固定定位的参考点永远是浏览器窗口
2. 脱离文档流
3. z-index:设置高度,放在顶层
4. 不会随着滚动条移动,可以用于遮盖\提示款和返回顶部的指示器
  
  在父容器中控制子元素的位置 display:flex
  
  当容器宽度不足时是否换行 flex-wrap:warp
  
  flex布局不会高度塌陷
  
  水平对齐方式:justify-content
  
  垂直对齐方式:align-items
  
  最小高度:min-height(可自动改变)
DIV+CSS布局技术
1. 表格布局
  
  结构自适应
  
  维护不便,性能差,不支持搜索引擎,建议使用div+css
2. 单列布局-水平对齐
  - 子元素是行级元素时使用text-align对齐
    
    父元素text-align：center，子元素display：inline-block
```
.container{
     width: 500px;
     height: 200px;
     text-align: center;
     border: solid 1px grey;
     position: relative;
}
.container .div01{
     display: inline-block;
     border: solid 1px grey;
}
```
  - 非定位时子元素水平对齐方式
    - 设置display+text-align
    - 设置margin+width
```
.container .div02{
    margin: auto;
    width: 30px;
    border: solid 1px grey;
}
```
  - 绝对定位时子元素水平对齐方式
    - 设置left+margin-left
```
.container .div03{
    position: absolute;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    border: solid 1px grey;
}
```
3. 单列布局-垂直对齐
  1. 行级元素垂直对齐使用line-height
```
.container-vertical{
    width: 500px;
    height: 200px;
    border: solid 1px grey;
    position: relative;
}

.container-vertical .span04{
    width: 20px;
    height: 20px;
    line-height: 200px;
    border: solid 1px grey;
}
```
  1. 非绝对定位的居中对齐
    - 设置display+vertical-align
```
.container-vertical{
    width: 500px;
    height: 200px;
    border: solid 1px grey;
    vertical-align: middle;
    display: table-cell;
}
.container-vertical .div05{
    width: 30px;
    height: 20px;
    border: solid 1px grey;
}
```
  2. 绝对定位的居中对齐
    - 使用top+margin-top
```
 .container-vertical{
     width: 500px;
     height: 200px;
     position: relative;
     border: solid 1px grey;
 }
 .container-vertical .div06{
     width: 30px;
     height: 20px;
     position: absolute;
     top:50%;
     margin-top: -15px;
     border: solid 1px grey;
 }
```
4. 多列布局类型
  1. 左定宽右自适应
    - 左侧定宽浮动，右侧margin-left
    - 左侧定宽浮动，右侧overflow
    - 全部浮动，右侧宽度100%，并设置负margin-right(右侧的标签要写在前面)
  2. 左自适应右定宽
    - （非负数margin）：
      
      1、块元素水平排列需要用到浮动，自适应块不能定义width，所以不能使用浮动，必须借助于外边距实现“让位”，或者overflow（不兼容性IE6）。
      
      2、浮动元素的标签要写在前面
    - （负数margin）
      
      1、两个区块全部浮动
      
      2、自适应标签写在前面
      
      3、设置自适应标签的margin-right(或固定标签的margin-left)，数值为负的固定宽度值
  3. 两列定宽右自适应
    - 左侧两列定宽可以按一列处理
    - 参考左侧定宽右侧自适应解决方案
  4. 两端固定中间自适应
    
    1、使用负margin，都要求中间栏的标签放置在第一个位置
    
    2、两者的区别在于，双飞翼在中间区块内部嵌套一个子div（设置其左右margin，空出中间区域被遮挡部分）；圣杯利用外部容器设置左右padding，挤压中间div两端空间，再设置左右区块相对偏移，空出遮挡部分
    
    3、简单做法：两端定宽分别左右浮动，中间设置左右margin（中间栏的标签放置在最后）
  5. 多列等分
    
    采用百分比设置宽度
5. 绝对定位的覆盖问题
  
  z-index属性值：整数，默认值为0
  
  通过z-index属性设置各元素之间的重叠高低关系。z-index值大的层位于其值小的层上方，相同时定义在最后的元素压在上方
  
  定位的元素始终压在未定位的元素上方，浮动的元素z-index属性无效
  
  父元素的z-index决定了子元素的层级，z-index高的父元素，它的子元素无论z-index如何，都在上方

弹性布局flex

flex-direction:包含column和row,设置容器内部元素的的排列顺序，正序或逆序

flex-wrap:设置容器内部元素是否自动换行

<style type="text/css">
.container div:nth-child(2n+1){
    background: gray;
}
.container div:nth-child(2n){
    background: #b8b8b8;
}
#div02{
    /*flex ：权重*/
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
#div02>div{
    width: 50px;
    height: 50px;
    border: solid 3px blue;
}
</style>

<div class="container">
    <div id="div02">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

响应式布局:媒体查询+flex布局

main.css

.container{
    margin: auto;
    box-shadow: 1px 1px 12px grey;
    /*一定要在容器中设置*/
    display: flex;
    /*设置煮粥放方向*/
    flex-direction: row;

    /*设置超出范围就换行*/
    flex-wrap: wrap;
    /*主轴对齐方式*/
    /*justify-content: center;*/

    /*交叉轴对齐方式*/
    /*align-items: flex-start;*/
}

.container>div{
    box-sizing: border-box;
    border: solid 2px white;
    height: 200px;
}

.container>div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

pc-index.css

.container{
    width: 1000px;
    background: red;
}
.container>div{
    /*控制内部所有的元素*/
    flex: 1;
    min-width: 250px;  /*有意义,控制一行有几个*/
    max-width: 250px;  /*有意义,控制一个不能太大*/

}

pad-index.css

.container{
    width: 750px;
    background: green;
}

.container>div{
    /*控制内部所有的元素*/
    flex: 1;
    min-width: 375px;
    max-width: 200px;
}

mobile-index.css

.container{
    width: 100%;
}

.container>div{
    /*控制内部所有的元素*/
    width: 100%;

}

main.html

screen:显示屏幕;print:打印机;speech:语音合成器;all:适用于全部设备

<link rel="stylesheet" type="text/css" media="screen and (min-width: 970px)" href="css/pc-index.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 970px) and (min-width: 750px)" href="css/pad-index.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 750px)" href="css/mobile-index.css">

<div id="div01">
    <!--<img src="../images/1.jpg" alt="">-->
</div>
<div id="div02">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="div03">
    <!--<img src="../images/2.jpg" alt="">-->
</div>
<div id="div04">
     <!--<img src="../images/3.jpg" alt="">-->
</div>
<div id="div05"></div>
<div id="div06"></div>