元素显示模式盒子模型 flex布局

T๓kira

已于 2023-01-08 21:44:43 修改

阅读量243

点赞数 1

文章标签：前端 html css Powered by 金山文档

于 2023-01-08 21:27:27 首次发布

本文链接：https://blog.csdn.net/weixin_73503532/article/details/128599960

版权

备忘

一、元素显示模式显示以及转换

1.块级元素

<div>；<h1>~<h6>；<p>；<ol>有序列表；<ul>无序列表；<footer>；<header>；<li>;

<hr>水平分割线；<form>；<table>表格；<dd>定义列表中定义条目描述；<dl>定义列表；

<address>联系方式信息；<article>文章内容；<aside>伴随内容；<blockquote>块引用；<fieldset>表单元素分组；<figcaption>图文信息组标题；<figure>图文信息组 (参照<figcaption>)；<hgroup>标题组；<pre>预格式化文本；<section>一个页面区段

2.行内元素

<del>删除，<u>可定义下划线文本，<b>文本粗体，<i>斜体字，<em>强调文本斜体，< strong>强调文本粗体，<a>，<span>，<s>删除（用 <del> 替代），<sin>

3.行内块元素

<img>,<input>,<td>等。

转块级元素（独霸一行，且可设置宽高） dispaly:block；

转换成行内元素（一行多个，不可设置宽高） display:inline；

转换成行内块元素（一行多个，且可设置宽高） display:inline-block；

二、盒子模型

border：边框；padding：内边距；margin：外边距

标准盒子模型：width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型：width 和 height 指的是内容区域+border+padding的宽度和高度。

  div{
        width: 200px;
        height: 200px;
    padding-left: 10px;
        padding-right: 20px;
        padding:40px 50px 60px;
        padding-bottom: 30px;
        border: 2px solid #000;
    background-color: aqua;
    }

padding-left:10px；和padding-right:20px; 没用，因为后面的padding大属性，层叠掉了他们。

效果为

border设置为1px,显示是0.998px；设置为2px,显示为上图1.995px。我是用联想浏览器打开的，譬如设置1px，缩小放大页面时显示的数值会变化，且一会大一会小，达到400%才为我设置的1，并且在这个过程中padding、margin一直保持不变，而内容的大小有时变化。我用谷歌火狐打开也是类似情况，具体原因不清楚，可能与计算机/屏幕分辨率有关？但目前没有影响，【相关发现： CSS边框：1px显示为0.667px或1px，具体取决于计算机/显示器分辨率(？) 】不过并未理解

左：内容区域中：内边距右：边框

三、flex布局

在flex容器中，默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

强调：不能先入为主认为宽度就是 main size，高度就是 cross size，这个还要取决于你主轴的方向，如果你垂直方向是主轴，那么项目的高度就是 main size。

实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。可以通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。

简而言之，如果使用块元素如 div，可以使用 flex，而如果使用行内元素，可以使用 inline-flex。

注意：当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

采用flex布局的元素，称为flex容器，里面的子元素为item