布局

最新推荐文章于 2023-01-15 00:15:12 发布

qq_43708577

最新推荐文章于 2023-01-15 00:15:12 发布

阅读量114

点赞数

分类专栏： web基础部分

本文链接：https://blog.csdn.net/qq_43708577/article/details/86674800

版权

web基础部分专栏收录该内容

37 篇文章 0 订阅

订阅专栏

table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left{
            background:red;
        }
        .right{
            background:blue;
        }
        table{
            width:800px;
            height:200px;
            border-collapse: collapse;//设置表格的边框是否被合并为一个单一的边框，还是像在标准的HTML中那样分开显示
        }
        .table{
            margin-top:20px;
            display: table;
            width:800px;
            height:200px;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            vertical-align: center;
            display: table-cell;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td class="left">左</td>
        <td class="right">右</td>
    </tr>
</table>
<div class="table">
    <div class="table-row">
        <div class="left table-cell">
            左
        </div>
        <div class="right table-cell">
            右
        </div>
    </div>
</div>
</body>
</html>

absolute是相对什么来定位的（面试题）

1 相对于他最近的父级的absolute或者relative来定位的
2 他是相离最近的absolute或者是relative来定位的
3 如果都都找不到就是相对于body定位的

Flex布局语法

一 什么是Flex布局？
     Flex是Flexible Box的缩写意为“弹性布局”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局
      .box {
       dislpay:flex 
}
  
   行内元素也可以使用Flex布局
   .box {
     display:inline-flex;
}
注意：设置为Flex布局后，子元素的float，clear，和verticle-align属性将失效





二 基本概念
 采用flex布局的元素称为Flex容器（flex  container），简称：“容器”。他的所有的子元素自动成容器成员，称为Flex项目（flex item），简称“项目”
      容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。




三 容器的属性
1 flex-direction  : 属性决定主轴的方向（既项目的排列方向）

    .box {
    flex-direction:row | row-reverse  |  column   |column-reverse;
}
     1 row(默认值)：主轴为水方向，起点在左端
     2 row-reverse: 主轴为水平方向，起点在右端
     3  column：主轴为垂直方向，起点在上沿
     4 column-reverse：主轴为垂直方向，起点在下沿。

float

1 元素“浮动”
2 脱离李文档流
3 但不脱离文本流

响应式设计和布局

1 在不同设备上正常使用
2 一般主要处理屏幕大小的问题
3主要方法：
    1隐藏+折行+自适应空间
    2 rem/viewport/media query





<style>
.container {
    margin:0 auto;
    max-width:800px;
    border:1px  solid black;
}
.intro {
   display:inline-block;
   width:180px;
   heiht:180px;
   line-height:center;
   border-radius:90px;
   border:1px  solid  red;
   margin:7px;
}

@media (max-width:375px) {
   html {
    font-size:24px;
   }
   }

@media (max-width:320px ){
    html {
        font-size:20px
    }
    }


@ media (max-width:640px ){
     .intro {
       margin:.3rem   auto;
       display:block;
   }
}
</style>

<body>
   <div class="container">
       <div class="intro">
       介绍1
       </div>
       <div class="intro">
       介绍1
       </div>
      <div class="intro">
       介绍1
       </div>
</div>
</body>




html {
  font-size:16px
}
默认是16px
1rem = 16px

但是16px不好计算所以
html {
font-size:20px
}

rem和px和em的区别

rem是基于html元素的字体大小来决定的，而em则根据使用它的元素大小决定的

PX表示“绝对尺寸（并非真正的绝对）”，利用px设置字体和大小及元素宽度等比较稳定和精确，px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不能用于响应式网站


em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em,则当前对象内文本的font-size的参考对象为父元素文本font-size）使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误


rem也是相对尺寸，其参考对象为根元素<html>的font-size，因此只需要确定这一个font-size

position：absolute/fixed有什么区别？

1 absolute是相对于最近的absolute/relative定位
2 sbsoulte:是绝对定位，常用于页面
3 fixed是相对于屏幕定位的
4 fixed是固定定位，常用于网站边缘的公司联系方式和快速回到顶部

display：inline-block的间隙？

因为有些空白字符，这些空白字符会产生有一些间距
解决方法：消灭字符或者消灭间距

如何清除浮动和为什么清除浮动？

1为什么？
   浮动的元素不会占据父元素的布局空间，父元素布局的时候不会管浮动元素，有可能浮动元素就会超出浮动元素，从而对其他元素产生影响，所以作为父元素一定要清除浮动，保证不会影响其他的元素
  
 2 如何清除？
    1 让盒子负责自己的布局
    2 使用空标签清除浮动clear：both
    
    .clearfloat{
       clear:both
   }
<div class="clearfloat"></div>
 
   3 父级div定义overflow：hidden
  <style>
     .div1 {width:98%;overflow:hidden}
     .div2 {float:left}
     .div3 {float:right}
      
  </style>


<body>
  <div  class="div1">
      <div class="left">left</div>
      <div class="right">right</div>
  </div>
  </div class="div2">div2</div>
</body>


  4父级div定义伪类：after和zoom（用于非IE浏览器）

  <style>
    .left{float:left}
    .right{float:right}
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden,height:0}
    .clearfloat{*zoom:1}
  </style>


  <body>
      <div  class="div1  clearfloat">
            <div class="left">Left</div>
            <div class="right">Right</div>
      </div>
      <div class="div2">div2</div>
  </body>
    
    5 父级div定义overflow：hidden

如何适配移动端页面

    1 viewport
    <meta name="viewport" content="width=device-width,initial-       scale=1.0">
    2 rem/viewport/

  media query 
  可以针对不同额media类型设置样式，还根据设定的宽度或者高度指定样式
    @media screen and (max-width: 500px) {  
     body { background-color: black;    }
}
当屏幕的宽度小于等于500px的时候body的背景颜色为黑色

qq_43708577

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局

table布局&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫