弹性盒子的

发布时间:2022-10-17 HTML CSS3 CSS

## 1、弹性盒子

### 1.1 什么是弹性盒子?

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

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

- - 操作方便,布局简单,移动端使用广泛

  - PC端浏览器支持情况较差

  - IE11或更低版本中,不支持或部分支持

  - 在盒模型中较为灵活

- 弹性盒模型的内容包括:弹性容器、弹性子元素——项目

- 原理:为父元素设置flex属性,控制子元素的位置及排列方式

- 应用场景 : 移动端

### 1.2 设置弹性盒子——display属性

- display: flex; 将对象作为弹性伸缩盒显示

- display: inline-flex; 将对象作为内联块级弹性伸缩盒显示

- 注意:

> 将容器设置为flex布局之后,子元素中的float、clear、vertical-align属性都会失效

>

> 弹性子元素-类似于行内块元素,如果不设置宽高,由内容撑开;即使是行内元素也可以设置宽高

### 1.3 基本概念

- flex容器、项目——弹性子元素

- 默认在容器中有两根轴线

  - 默认主轴方向——x轴方向,水平向右(左侧为主轴起点,右侧为主轴终点)

  - 默认交叉轴方向——y轴方向,水平向下(上方为交叉轴起点,下方交叉轴终点)

   弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

  ![image-20210514142437914](image-20210514142437914.png)

  注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外 一边就是侧轴

### 1.4 容器属性——添加弹性容器上

- flex-direction属性:设置主轴的方向,子元素的排列方向

  - flex-direction: row; 默认值,主轴方向为水平方向,起点在左端

  - flex-direction: row-reverse; 主轴方向为水平方向,起点在右端

  - flex-direction: column; 主轴方向为垂直方向,起点在上方

  - flex-direction: column-reverse; 主轴方向垂直方向,起点在下方

  ```html

  <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Document</title>

      <style>

          * {

              margin: 0;

              padding: 0;

          }

          .warp,

          .warp1 {

              width: 300px;

              height: 300px;

              background-color: aqua;

              /* 设置弹性盒*/

              display: flex;

          }

          div {

              width: 100px;

              height: 100px;

          }

          /* X为主轴 */

          .warp {

              flex-direction: row;

              flex-direction: row-reverse;

          }

          /* Y为主轴 */

          .warp1 {

              flex-direction: column;

              flex-direction: column-reverse;

          }

          .warp .box1 {

              background-color: red;

          }

          .warp .box2 {

              background-color: pink;

          }

          .warp1 .box1 {

              background-color: purple;

          }

          .warp1 .box2 {

              background-color: blue;

          }

      </style>

  </head>

  <body>

      <div class="warp">

          <div class="box1">box1</div>

          <div class="box2">box2</div>

      </div>

      <hr>

      <div class="warp1">

          <div class="box1">box1</div>

          <div class="box2">box2</div>

      </div>

  </body>

  </html>

  ```

- justify-content 属性:设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,

  - justify-content: flex-start; 默认值,主轴顶端对齐

  - justify-content: flex-end; 主轴的末端对齐

  - justify-content: center; 居中对齐,子元素位于弹性容器的中心

  - justify-content: space-between; 两端对齐,子元素和子元素之间有空白空间,项目之间的间隔都相等。

  - justify-content: space-around; 子元素之前、之间、之后都留有空白空间,且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。

  - space-evenly:弹性项目平均分布在该行上,相邻项目的间隔,项目与容器之间空间相等

  ```css

   /* X为主轴 */

  .warp {

            /* 设置弹性盒*/

              display: flex;

           flex-direction: row;

           justify-content: flex-start;

              justify-content: flex-end;

              justify-content: center;

              justify-content: space-between;

              justify-content: space-around;

          }

          /* Y为主轴 */

          .warp1 {

              /* 设置弹性盒*/

              display: flex;

              flex-direction: column;

             

              justify-content: flex-start;

              justify-content: flex-end;

              justify-content: center;

              justify-content: space-between;

              justify-content: space-around;

          }

  ```

- align-items属性:弹性子元素在(侧轴)交叉轴上的对齐方式

  - align-items: stretch; 默认值,如果弹性子元素没有高度或高度为auto,将占满整个容器的高度

  - align-items: flex-start;子元素在侧轴顶端对齐

  - align-items: flex-end; 子元素在侧轴末端对齐

  - align-items: center; 子元素在侧轴中间对齐

  - align-items: baseline; 子元素在第一行文字的基线对齐

  ```html

  .warp {

              /* 设置弹性盒*/

              display: flex;

              flex-direction: row;

              align-items: flex-start;

              align-items: flex-end;

              align-items: center;

              align-items: stretch;(height: auto;)

          }

   /*   align-items: baseline; */

    <style>

          /*   align-items: baseline; */

          .box {

              width: 400px;

              height: 400px;

              background-color: pink;

              display: flex;

              align-items: baseline;

              margin: 50px auto;

          }

          .box span {

              width: 100px;

              height: 100px;

              background-color: red;

              font-size: 20px;

              color: #fff;

          }

          .box img {

              height: 150px;

          }

      </style>

  </head>

  <body>

      <div class="box">

          <span>XJX</span>

          <img src="../img/bg1.jpg" alt="">

      </div>

  </body>

  </html>

  ```

- flex-wrap属性:指定弹性盒子的子元素换行方式

  - flex-wrap: wrap; 换行,第一行显示在上方

  - flex-wrap: wrap-reverse; 换行,第一行显示在下方

  - flex-wrap: nowrap; 默认值,不换行

   注意:父元素有固定高度且高度大于子元素高之和换行中间有缝隙

  ​          父元素高度有内容撑开换行没有缝隙

- align-content属性:折行,行与行之间有间隙,去除间隙 ,控制侧轴对齐方式(去掉了中间的间隙)

  要设置:  flex-wrap: wrap;

  - align-content: flex-start; 顶端没有行间距

  - align-content: flex-end; 底对齐没有行间距

  - align-content: center; 居中没有行间距

  - align-content: space-between; 两端对齐,中间自动分配

  - align-content: space-around; 自动分配距离

  注意:弹性盒项目为多行时有效

  ```css

   .warp {

            display: flex;

              /* 设置后没有间隙 上端 下端*/

              align-content: flex-start;

              align-content: flex-end;

       

              /* 设置后没有间隙 中间*/

              align-content: center;

              /* 自动分配距离 */

              align-content: space-around;

              /* 两端对齐,中间自动分配 */

              align-content: space-between;

          }

  ```

```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            height: 500px;

            background-color: chartreuse;

            display: flex;

        }

        .box p:nth-child(1),

        .box p:nth-child(3) {

            width: 200px;

            height: 480px;

            background-color: red;

        }

        .box p:nth-child(2) {

            /* 中间剩余空间分配 */

            flex: 1;

            height: 480px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="box">

        <p>左边</p>

        <p>中间</p>

        <p>右边</p>

    </div>

</body>

</html>

```

* #### 复合写法

  ```css

  flex-flow:flex-direction  flex-wrap;

  例:

  flex-flow:cloumn wrap;

  ```


 

### 1.5 项目属性——写在弹性子元素上

- align-self属性:调整自身在侧轴的对齐方式,弹性容器中被选中子项的对齐方式(设置在子元素中)

  此属性和弹性容器的 align-items 属性作用相同

  * align-self: stretch; 如果弹性子元素没有高度或高度为auto,将占满整个容器的高度

  * align-self: flex-start;(侧轴)交叉轴起点对齐

  * align-self: flex-end; (侧轴)交叉轴终点对齐

  * align-self: center; (侧轴)交叉轴中点对齐

  ```css

  .warp .box1 {

              height: auto;

              background-color: red;

              align-self: auto;

              align-self: stretch;

          }

          .warp .box2 {

              background-color: pink;

              align-self: flex-start;

              align-self: flex-end;

          }

          .warp .box3 {

              background-color: brown;

              align-self: center;

          }

  ```

- order属性;子元素的排列次序

  - 属性值为数值,没有单位,默认数值为0,数值越小,排列越靠前

  - 必须为整数,不能为小数,可以为负数

  ```css

   .warp .box1 {

              background-color: red;

              order: 1;

          }

          .warp .box2 {

              background-color: pink;

              order: 0;

          }

          .warp .box3 {

              background-color: brown;

              order: -1;

          }

  ```

  ### flex

  - 作用:用于指定弹性子元素如何分配空间。

    flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

- flex-grow属性:子元素的放大比例(子项宽度和<父盒子宽度的时候)

  - 属性值为数值,没有单位,默认值为0,表示不放大

  - 负值对该属性无效

  - 可以为小数

  - 注意:当容器有剩余空间时有效

  ```css

   .warp {

              width: 400px;

              height: 400px;

              display: flex;

          }

          .warp div {

              width: 100px;

              height: 100px;

          }

          /* 剩余空间400-300=100 */

          .box1 {

              background-color: red;

              flex-grow: 2;

              /* 100+100*2/4 = 150 */

          }

          .box2 {

              background-color: pink;

              flex-grow: 1;

              /* 100+100*1/4=125 */

          }

          .box3 {

              background-color: brown;

              /* 100+100*1/4=125 */

              flex-grow: 1;

          }

  ```

- flex-shrink属性:子元素的缩小比例(子项宽度和>父盒子宽度的时候)

  - 属性值为数值,没有单位

  - 默认值为1,表示当空间不足时,等比例缩小

  - 属性值为0,表示当空间不足时,不缩小

  - 负值对该属性无效

- 可以为小数

  ```css

    .warp {

              width: 500px;

              height: 400px;

              display: flex;

          }

          .warp div {

              width: 200px;

              height: 100px;

          }

          /*不足空间,缺了100 600-500=100*/

          .box1 {

              background-color: red;

              flex-shrink: 2;

           

          }

          .box2 {

              background-color: pink;

              flex-shrink: 1;

             

          }

          .box3 {

              background-color: brown;

              flex-shrink: 1;

             

          }

  每个元素的宽

         (当前元素的宽*shrink值)/(元素1*元素1shrink值+元素2*元素2shrink值...) * 溢出空间宽度

  ```

```html

- 水平垂直居中的元素的父元素上设置相关属性

    - display: flex;

    - justify-content: center; 主轴上子元素的对齐方式

    - align-items: center; 交叉轴上子元素的对齐方式

```

```html

    <style>

        .wrap {

            width: 400px;

            height: 400px;

            background-color: chartreuse;

            display: flex;

            /* 水平居中 */

            justify-content: center;

            /* 垂直居中 */

            align-items: center;

        }

        .wrap div {

            width: 100px;

            height: 100px;

            background-color: pink;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div>绝对居中</div>

    </div>

</body>

</html>

```

#### flex-basis

- 定义弹性盒项目基准值(即参与计算的最终值————1.基于它计算容器的剩余空间2.基于它计算增长以后的最终值)

- 取值

  - auto    默认值

  - 长度值 【一个长度单位或者一个百分比】

- 注意:与项目的宽、高同时存在时,flex-basis的优先级高于宽、高

## 2、calc()函数

- 用于动态计算长度值,值灵活

- css3新增功能

- 任何长度值都可以使用calc()函数进行计算;

- calc()函数支持 "+", "-", "*", "/" 运算;

- calc()函数使用标准的数学运算优先级规则;

- 运算符前后都需要保留一个空格

- 语法:

  calc(表达式)

```html

运算符前后都需要保留一个空格

width: calc(100% - 200px);  减号的前后添加空格

.box {

    width: calc(100% - (10px + 20px) * 2);

    height: 300px;

    background-color: pink;

}

```

 - 浏览器支持

   在IE9+、Firefox、chrome、safari可以正常呈现

- 利用calc()实现三栏自适应布局

  ```html

  <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Document</title>

      <style>

          * {

              margin: 0;

              padding: 0;

          }

          .box {

              height: 500px;

              background-color: pink;

          }

          .box p {

              float: left;

          }

          /* 左右两栏 */

          .box p:nth-child(1),

          .box p:nth-child(3) {

              width: 200px;

              height: 480px;

              background-color: red;

          }

          /* 中间 */

          .box p:nth-child(2) {

              height: 480px;

              background-color: green;

              /* calc运算 */

              width: calc(100% - 400px);

          }

      </style>

  </head>

  <body>

      <div class="box">

          <p>左边</p>

          <p>中间</p>

          <p>右边</p>

      </div>

  </body>

  </html>

  ```


 

更多相关推荐


HTML中的相对路径与绝对路径

发布时间:2014-12-13 相对路径与绝对路径 HTML
HTML初学者会经常遇到这样一个问题,如何正确引用一个文件。比如,怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)?怎样在一个网页中插入一张图片?......(相关教程:HTML超链接;HTML图片)如果你在引用文件时(如加入超链接,或者插入图片等),使用了错误的文件路径,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。为了避免这些错误,正确地引用文件...

初识CSS

发布时间:2020-03-20 HTML与CSS CSS
一.认识CSS​1.什么是CSS?​Cascadingstylesheet层叠样式表,是一种用来为HTML文档添加样式(字体、间距、位置、颜色、角度等显示效果)的计算机语言二.CSS的引用方式​1.行内样式​(1).写法:直接在标签内部写入样式;&lt;pstyle="color:red"&gt;&lt;/p&gt;​(2).缺点:表现层未与结构层分离;无复用性;不易于后期代码的维护;​2.内联样...

cocos creator屏幕适配的3个妙招

发布时间:2022-02-19 HTML5 HTML CSS
屏幕适配是面试中必问的一个题目,今天给大家说说怎么样做屏幕适配。1: 屏幕适配的2个核心的配置    a:设计分辨率:美术设计资源时候的分辨率,也是我们所有资源的参考分辨率,我们就是基于这个分辨率来适配到其它不同的手机分辨率上的;    b: 适配策略: 固定高度/固定宽度;设计分辨率大家都好理解,那么什么是适配策略呢?   假设我们以设计分辨率是 960x640为例,我们要适配到 1920x10...

关于城市旅游的HTML网页设计 HTML+CSS上海博物馆网站 dreamweaver作业静态HTML网页设计 html网页制作期末大作业

👨‍🎓静态网站的编写主要是用HTMLDⅣV+CSSJS等来完成页面的排版设计👩‍🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点,学生网页作业源码,制作水平和原创度都适合学习或交作业用,记得点赞。🏀精彩专栏推荐👇🏻👇🏻👇🏻💝【作者主页——🔥获取更多优质源码】💝【web前端期末大作业...

thinkphp5 加载静态资源路径与常量的方法

发布时间:2022-11-25 JAVASCRIPT 前端 HTML
1、加载静态资源路径大于5.0.4版本可以直接使用__ROOT__:项目目录__STATIC__:项目目录下的static目录__JS__:项目目录下的static/js目录__CSS__:项目目录下的static/css目录我们可以使用view模板打印这些常量的具体路径12345678910111213&lt;!DOCTYPEhtml&gt;&lt;html&gt;&lt;head&gt;&lt...

ssm教务系统网站毕业设计源码290915

发布时间:2022-08-29 IDEA HTML MYSQL JAVA VUE.JS
ssm 教务系统网站摘 要随着互联网趋势的到来,各行各业都在考虑利用互联网将自己推广出去,最好方式就是建立自己的互联网系统,并对其进行维护和管理。在现实运用中,应用软件的工作规则和开发步骤,采用Java技术建设教务系统网站。本设计主要实现集人性化、高效率、便捷等优点于一身的教务系统网站,完成首页、轮播图、公告栏、管理员、论坛列表、论坛分类列表、课程资讯、课程资讯分类、学生用户、教师用户、课程信息、...

CSDN-C1工程师认证任务4

发布时间:2021-05-19 数据结构 CSDN认证 JS CSS
任务一:生成广告图片用HTML+CSS+JavaScript在页面中间生成一幅广告图片浏览器边框我用红色描出来了可以看到效果是合适的haha.html&lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;metahttp-equiv="X-UA-Compatible"content="...

制作一个简单HTML校园网页(HTML+CSS)学校网站制作 校园网站设计与实现

发布时间:2022-11-25 WEB前端 HTML CSS HTML5期末作业 DREAMWEAVER
🎉精彩专栏推荐👇🏻👇🏻👇🏻✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主💂作者主页:【主页——🚀获取更多优质源码】🎓web前端期末大作业:【📚毕设项目精品实战案例(1000套)】🧡程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作(110套)】🌎超炫酷的Echarts大屏可视化源码:【🔰echarts大屏展示大数据平台可视化(150套)】🎁免费且实用的WEB前端学习指南:【📂web前端...

制作一个简单HTML抗疫逆行者网页作业(HTML+CSS)

发布时间:2022-11-25 WEB前端 HTML CSS HTML5期末作业 DREAMWEAVER
🎉精彩专栏推荐💭文末获取联系✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主💂作者主页:【主页——🚀获取更多优质源码】🎓web前端期末大作业:【📚毕设项目精品实战案例(1000套)】🧡程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作(110套)】🌎超炫酷的Echarts大屏可视化源码:【🔰Echarts大屏展示大数据平台可视化(150套)】🔖HTML+CSS+JS实例代码:【🗂️HTM...

React的组件封装新规范,应该以HTML的结构树进行填写

发布时间:2022-06-11 REACT.JS JAVASCRIPT HTML
近一年的codereview的工作中,需要制作一些高可用的业务场景组件。那我的首要工作当然也是要写高可用的组件库啦。在这一段的工作里面,我发现一个问题,像我们这些中小企业来讲一般都是基于antd的组件进行开发。当然react也给出了一套自己的组件封装规范。可重用的组件是什么样的?我们以antd的modal组件为例子。按照antd的案例代码来演示。我们平时写代码的时候是怎么阅读的呢?大概是如下情况。...

google map 示例

发布时间:2011-03-17 HTML GOOGLE MAP GOOGLE
googlemapapi图档示例中文api[url]http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/reference.html[/url]英文api[url]http://www.codechina.org/doc/google/gmapapi/#Map_Movement_and_Animation[...

尚优选项目

发布时间:2022-11-14 尚优选 前端 CSS3 CSS
头部整体页面布局导航(重点)思路:html+css结构为一层层包裹型(从大到小)大的用id(#)小的用class(.)结构划分明确版心的代码冗余太多了,直接在公共样式里设置使用就好即使代码写好也要到浏览器中右键进行检查重点:设置导航条颜色宽度效果图文字偏小还自动加粗(H5)效果图a标签两个元素中仅有一个要设置属性a标签两个元素中仅有一个要设置属性,使用&amp;引用当前元素(a)里面的first-...

html:用script实现搜索框

发布时间:2022-05-08 SCRIPT HTML JAVASCRIPT HTML5 前端
1:body部分:&lt;div&gt;&lt;inputid="search"type="text"&gt;&lt;buttononclick="ss()"&gt;搜索&lt;/button&gt;&lt;/div&gt;&lt;ul&gt;&lt;/ul&gt;&lt;pid="total"&gt;共N条&lt;/p&gt;2:css样式自定,如宽高,字体样式,大小,背景等。3:script部...

2021/9/7 阿拉伯语倒输入

发布时间:2021-09-07 VUE HTML
html&lt;el-inputv-model="storage.inputData":class="{reverse:isALBY}":disabled="storage.userSelect!='Yes'"placeholder="Pleaseenterthecontent"maxlength="1024"@change="onChange"style="width:80%"&gt;&lt;/...

CC00174.CloudKubernetes——|KuberNetes&配置管理.V05|——|configmap.v05|从文字创建configmap|

一、定义从文件生成configmap时需要使用的秘钥###---定义从文件生成configmap时要使用的秘钥~~~可以定义一个密钥,而不是要在ConfigMap生成器中使用的文件名。~~~configure-pod-container/configmap/game.properties~~~使用密钥从文件生成ConfigMapgame-special-key[root@k8s-master01~...

CSS入门

一、CSS语法1.      构成CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。selector{property:value}。选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE……,  body{color:black},选择符body是指页面主体部分,color是控制文字颜色的属性,bla...

css选择器

发布时间:2022-10-28 前端 CSS
属性选择器       选择器[属性]:带指定属性的元素       选择器[属性="属性值"]:带指定属性等于指定值(完全匹配)的元素       选择器[属性*="属性值"]:带指定属性且包含指定值(模糊匹配)的元素       选择器[属性^="属性值"]:带指定属性且指定值开头的元素       选择器[属性$="属性值"]:带指定属性且指定值结尾的元素伪元素选择器     -伪元素表示的...

学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 dreamweaver简单个人网页制作

发布时间:2022-11-25 HTML CSS DREAMWEAVER 学生网页设计作业 JS
🎉精彩专栏推荐👇🏻👇🏻👇🏻✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主💂作者主页:【主页——🚀获取更多优质源码】🎓web前端期末大作业:【📚毕设项目精品实战案例(1000套)】🧡程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作(110套)】🌎超炫酷的Echarts大屏可视化源码:【🔰echarts大屏展示大数据平台可视化(150套)】🎁免费且实用的WEB前端学习指南:【📂web前端...

学生HTML个人网页作业作品——基于HTML+CSS+JavaScript明星迈克杰克逊带表单带报告(5页)

发布时间:2022-11-25 HTML CSS DREAMWEAVER 学生网页设计作业 JS
🎉精彩专栏推荐👇🏻👇🏻👇🏻✍️作者简介:一个热爱把逻辑思维转变为代码的技术博主💂作者主页:【主页——🚀获取更多优质源码】🎓web前端期末大作业:【📚毕设项目精品实战案例(1000套)】🧡程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作(110套)】🌎超炫酷的Echarts大屏可视化源码:【🔰echarts大屏展示大数据平台可视化(150套)】🎁免费且实用的WEB前端学习指南:【📂web前端...

自主实现HTTP项目——1

发布时间:2022-11-05 HTTP 网络 HTML 服务器
项目概要:从零开始认识客户端到服务器之间如何沟通、联络,如何进行数据之间的通信客户端与服务器交互原理:在日常生活中,如果我们想要上网的话就要去办理宽带,买路由器,并且由安装师傅帮我们安装并设置一些东西后,我们才可以上网。那我们上网数据是怎样一个传输模式呢?国际标准化组织(ISO)给出了标准OSI七层模型一、OSI的七层模型:(了解)1.应用层:针对特定应用的协议2.表示层:设备固有数据格式和网络标...

js防止图片撑破页面技巧

发布时间:2011-12-09 CLASS 文档 HTML XHTML
&lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;htmlxmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;metahttp-equiv="...

HTML学习总结(转)

发布时间:2011-06-22 HTML INPUT URL BORDER TABLE ACTION
HTML学习总结:一、HTML的基本结构: &lt;html&gt; &lt;head&gt; &lt;metahttp-equiv="content-type"content="text/html;charset=gb2312"&gt; &lt;title&gt;hello&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;formaction="test...

常规css,js引入

发布时间:2019-03-02 JS CSS
php//css,js用$this-&gt;assign('MODULE_NAME',MODULE_NAME);$this-&gt;assign('ACTION_NAME',ACTION_NAME);$this-&gt;assign('ver',rand(11111,99999));general.html&lt;!--单页的css--&gt;&lt;linkrel="stylesheet"hre...

HTML 标签

发布时间:2008-01-02 浏览器 HTML CSS 框架 XHTML 文档
DefinitionandUsage用法The&lt;!DOCTYPE&gt;declarationistheveryfirstthinginyourdocument,beforethe&lt;html&gt;tag.ThistagtellsthebrowserwhichHTMLorXHTMLspecificationthedocumentuses.&lt;!DOCTYPE&gt;声明是在你文档中...

SVG扩散特效

发布时间:2022-11-22 ES6 CSS3 CSS 动画 VUE
&lt;template&gt;&lt;divclass="title"&gt;扩散特效&lt;/div&gt;&lt;!--可以通过讲宽高设置为0,实现应用滤镜效果,但不隐藏SVG元素--&gt;&lt;svgclass="hideSVG"&gt;&lt;defs&gt;&lt;!--这是一个SVG内发光效果示例(内发光可以设置颜色,内阴影一般只有黑色)--&gt;&lt;!--SVG的内阴影滤...

带下拉框的文本框

发布时间:2013-08-06 HTML+JS+JQUERY+XML+AJAX JAVASCRIPT HTML
带下拉框的文本框&lt;scriptlanguage="javascript"&gt;varm_strTextselectDiv="Textselectshow_Div"varm_intTextSelectIn=falsevarie=(document.getElementById&amp;&amp;document.all);for(varIDx=0,IDy='';document.getEle...

html——radio和checkbox

发布时间:2015-04-15 HTML/CSS HTML
在抗旨radio和checkbox时发现通过 单击事件控制radio可用不可用,但是后来测试时偶然发现居然还有双击事件。今台南终于找到办法,不采用 onclick这类事件,而采用onchang事件就能解决bug...

css左边竖条的实现方法

发布时间:2020-09-22 CSS
方法一:使用border&lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;metaname="viewport"content="width=device-width,initial-scale=1.0"&gt;&lt;title&gt;Document&lt;/title&gt;...

CSS Flex-box

发布时间:2014-03-14 FLEX CSS
.icons{ /*flex-box布局,子元素可以按需缩放*/ display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; /*flex-box布局,子元素可以按需缩放*/ display: -webkit-flex; display: -moz-flex; display: ...

弹性盒布局

发布时间:2022-11-20 HTML CSS3 CSS
一、什么是弹性盒子?弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景:移动端二、设...

HTML笔记 (2)

发布时间:2022-10-20 JAVASCRIPT 前端 HTML
&lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;title&gt;笔记&lt;/title&gt;&lt;STYLE&gt;H2{font-family:'微软雅黑';font-size:30px;text-align:center;text-decoration:underli...

Javascript 动态创建表格:新增、删除行和单元格

发布时间:2009-04-15 HTML VIEWUI BLOG JAVASCRIPT XHTML IE
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。1、inserRow()和insertCell()函数insertRow()函数可以带参数,形式如下:insertRow(index):index从0开始这个函数将新行添加到index的那一行前,比如ins...

html的meta总结,html标签中meta属性使用介绍

发布时间:2016-05-27 META HTML
原文:http://www.haorooms.com/post/html_meta_ds引子之前的我的博客中对于meta有个介绍,例如:http://www.haorooms.com/post/liulanq_think_ie 浏览器安全性想到的这篇文章,中间介绍了meta下面IE的一些属性,可以实现页面之间的过渡转换。已经SEO优化中有所提及。下面具体介绍一下meta的功能和使用。前言meta是...

前端经典面试题 | New操作符的原理

发布时间:2022-11-01 前端面试题 前端 HTML
🖥️ 前端经典面试题专栏:New操作符的原理🧑‍💼个人简介:一个不甘平庸的平凡人🍬✨个人主页:CoderHing的个人主页🍀格言:☀️路漫漫其修远兮,吾将上下而求索☀️👉你的一键三连是我更新的最大动力❤️目录一、回答点二、深入回答new操作背后的原理new操作符的具体实现一、回答点构造函数实例new操作符通过执行自定义构造函数或内置对象构造函数,生成对应的对象实例.二、深入回答new操作背后的原理...

前端面试题

发布时间:2022-08-06 HTML JAVASCRIPT 开发语言 CSS
1.请你说说线程和进程的区别        (地址空间、开销、并发性、内存)差别:不同的操作系统资源管理方式        进程有独立的地址空间,线程有自己的局部变量和堆栈,但线程没有自己的地址空间。        一个进程至少拥有一个线程.        进程的并发性较低,线程的并发性较高。        线程比进程开销小些         一个进程崩溃后,在保护模式下不会对其他进程产生影响,但...

1、弹性盒子

发布时间:2022-10-18 HTML CSS3 CSS
1.1什么是弹性盒子?弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景:移动端1....

html 弹性盒子

发布时间:2022-10-26 HTML CSS3 CSS
1、弹性盒子1.1什么是弹性盒子?弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景...

1弹性盒子

发布时间:2022-10-17 WEB前端 HTML CSS3 CSS
1.1什么是弹性盒子?弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景:移动端1....

什么是弹性盒子?

发布时间:2022-10-18 HTML CSS3 CSS
1、弹性盒子1.1什么是弹性盒子?弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景...

弹性盒子的介绍

发布时间:2022-10-17 HTML CSS3 CSS
1、弹性盒子1.1什么是弹性盒子?弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景...

前端开发-弹性盒子

发布时间:2022-10-17 HTML CSS3 CSS
1、弹性盒子1.1什么是弹性盒子?弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景...

弹性盒子。

发布时间:2022-10-17 HTML CSS3 CSS
##1、弹性盒子###1.1什么是弹性盒子?-弹性盒子是CSS3的一种新的布局模式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间--操作方便,布局简单,移动端使用广泛 -PC端浏览器支持情况较差 -IE11或更低版本中,不支持或部分支持 -在盒模型中较为灵活-弹性盒模型的内容包括:弹性容器、弹性子元素——项目-原理:为父元素设置flex属性,...