devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css的布局方式_css布局

作者：Li_阴宅 | 2024-07-07 15:58:45

赞

踩

css布局

1.盒子布局：

    盒子由外边距margin，外边框border，内边距padding，和内容content组成，其中的margin，border，padding控制盒子大小。

 

margin：

margin-top：上边距   margin-buttom：下边距   margin-left：左边距    margin-right：右边距

border：

border-top：上边界：  border-bottom：下边界：  border-left：左边界     border-right：右边界

border-width：边界宽度     border-color：定义边框颜色      border-style：边界样式

边界样式的取值有：

none定义无边框
hidden定义无边款，但在用于表时，hidden用于解决边框冲突问题
dotted定义点状边框，在浏览器器中呈现为实线
dashed定义虚线，在大多数浏览器中为实线
solid定义实线

padding：

padding-top：上部填充

padding-bottom：下部填充

padding-left：左部填充

padding-right：右部填充‘

制作导航栏：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box {
  10.             height: 40px;
  11.             border-top: 3px solid #ff8500;
  12.             border-bottom: 1px solid #edeef0;
  13.         }
  14.  
  15.         /* 后代: box里面的a */
  16.         .box a {
  17.           	/* 没有指定宽度，此时设置 padding 会使盒子内容之间的距离相同 */
  18.             padding: 0 16px;
  19.             /* width: 80px; */
  20.             height: 40px;
  21.             /* background-color: #edeef0; */
  22.             display: inline-block;
  23.             text-align: center;
  24.             line-height: 40px;
  25.             font-size: 12px;
  26.             color: #4c4c4c;
  27.             text-decoration: none;
  28.         }
  29.  
  30.         .box a:hover {
  31.             background-color: #edeef0;
  32.             color: #ff8400;
  33.         }
  34.     </style>
  35.  
  36. </head>
  37. <body>
  38.     <div class="box">
  39.         <a href="#">游戏1</a>
  40.         <a href="#">游戏2</a>
  41.         <a href="#">游戏3</a>
  42.         <a href="#">游戏4</a>
  43.     </div>
  44.     <p>
  45.         <a href="#"></a>
  46.     </p>
  47. </body>
  48. </html>

2 .css元素的分类

  css分为块级元素与内联元素  ，块级元素（display：block）可以设置宽和高，独占一行，div p hn 等属于块级元素  （display：inline）不可以设置宽和高，不换行如span a。

通过display的取值：转块级：display：block    转内联：display：inline 

隐藏元素方式：1.display：none  1.width：0  height：0   3overflow：hidden

2.浮动布局

float属性：用于定位和格式化内容，其中属性值可以用：

left元素浮动到容器的左边
right元素浮动到容器的右侧
none元素不会浮动
inherit元素继承父级的float的属性

浮动布局左浮动容易造成布局错乱则使用clear属性：

clear属性：

none允许两侧都有浮动的元素
left左侧不允许浮动元素
right右侧不允许浮动元素
both左右都不允许
inherit继承父级的clear属性

3.定位布局：

position可选值：

可选值种类
 static默认值，不开启定位
  relative相对定位  对象不从文档中分流出来，设置4个方向去设置自身相较于自身的定位
 absolute绝对定位  将对象从文档中分流出来，设置方向是相较于父级对象的相对定位，如果不存在父级则是body是父级
  fix固定定位
sticky粘滞定位
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5.  
  6.     <meta charset="UTF-8">
  7.  
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.  
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12.     <title>定位布局</title>
  13.  
  14.     <style>
  15.  
  16.         .main{
  17.             width: 300px;
  18.             height: 300px;
  19.             border: 1px solid black;
  20.             margin: 200px;
  21.             position: relative;
  22.        }
  23.         .box1{
  24.             width: 100px;
  25.             height: 100px;
  26.             border: 1px solid black;
  27.             background-color: red;
  28.             position:absolute;
  29.             top: 100px;
  30.             left: 200px;
  31.        }
  32.         .box2{
  33.             width: 100px;
  34.             height: 100px;
  35.             border: 1px solid black;
  36.             background-color: blue;
  37.             /* position: relative;
  38.            left: 200px; */
  39.  
  40.        }
  41.         .box3{
  42.             width: 100px;
  43.             height: 100px;
  44.             border: 1px solid black;
  45.             background-color:green;
  46.        }
  47.     </style>
  48. </head>
  49. <body>
  50.  
  51.     <div class="main">
  52.  
  53.         <div class="box1">这是第一个div</div>
  54.  
  55.         <div class="box2">这是第二个div</div>
  56.  
  57.         <div class="box3">这是第三个div</div>
  58.  
  59.     </div>
  60.  
  61.     
  62.  
  63. </body>
  64. </html>

相对与绝对定位就是取决于position的值是relative还是absolute。

4.其他属性：

1.overflow：

visble默认值，内容不会别剪切，会呈现在元素框之外。不剪切内容也不添加滚动条
hidden内容会被剪切，其余内容是不可见的
scoll内容会被剪切，但是浏览器显示滚动条的时候以便查看内容
auto如果内容被剪切，浏览器会显示滚动条一便查看其余的内容

隐藏元素的方式：

1.display：none；   2.width：0   height：0   3.overflow：hidden

5.弹性盒子：

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
 

以下5个属性设置在容器上。

5.1flex-direction：

flex-direction属性决定主轴的方向（即项目的排列方向）：

.box { flex-direction: column-reverse; | column | row(默认) | row-reverse |  } 

它有4个可选值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
 

5.2flex-warp：是否换行

nowarp---规定默认元素不会换行   wrap---规定弹性项目需要换行   wrap-reverse ---规定弹性项目需要换行和方向

5.3flex-flow    flex-direction与flex-warp的简写

5.4 align-items 

它有5个可选值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。 （文字的基线：是指文字的最底部的文字）
stretch（默认值）：
如果项目  未设置高度或设为auto，将占满整个容器的高度。
如果项目  设置高度或设为auto，效果与 flex-start 一样，所以一般也说flex-start为默认值。
5.5 justify-content

它有6个可选值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly: 两个项目之间的距离相等（每个项目左右边的空隙相等）

5.6 align-content
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。项目没有高度时才会占满整个交叉轴 。有高度时将是高度大小（则项目之间会有间隔）。
 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号