努力的小朱同学

CSS 之 display属性详解

一、总览

CSS的 display 属性用于设置元素的显示类型，或设置其子元素的布局类型。 display属性值的适用性取决于元素的类型和上下文。某些属性值只适用于特定类型的元素，使用时需注意兼容性和语义化。

其属性值共计有18种，按照类别可以分为以下六类：

外部表现类（display-outside）：block、inline。
内部表现类（display-inside）：flex、grid、table、flow、flow-root、ruby。
列表元素类（display-listitem）：list-item。
内部结构类（display-internal）：table-row、table-cell、table-column、table-caption、table-row-group、table-header-group、table-footer-group、table-column-group、ruby-base、ruby-text、ruby-base-container、ruby-text-container。
元素显示类（display-box）：none、contents。
预组合类（display-legacy）：inline-block、inline-table、inline-flex、inline-grid。

二、外部表现类

该类属性值的效果是规定元素的外部显示类型，也就是在页面布局中的元素类型：块级元素或内联元素。

1、block

该属性值用于设置元素的外显类型为块级元素，在页面布局中，占据一整行的空间，在元素前后进行换行。该类型的元素可以设置width、height、padding、margin等属性。

<style>
.d {
  display: block;
  width: 200px;
  height: 100px;
  background: pink;
}
style>

<p>这是一段文本p>
<div class="d">这是一个块级元素div>
<p>这是第二段文本p>

页面表现：

2、inline

该属性值用于设置元素的外显类型为行内元素，在页面布局中，可与其他行内元素位于同一行。该类型的元素设置width、height，以及竖直方向的margin（top、bottom）属性无效，设置水平方向的padding、margin（left、right）是有效的，设置竖直方向的padding（top、bottom）时，在元素空间上是有效的，但这并不会影响与同一行的行内元素的对齐。

<style>
.d1 {
  display: inline;
  width: 200px;
  height: 100px;
  margin: 10px 20px;
  padding: 20px 10px;
  background: pink;
}
style>

<p>这是一段块级元素文本p>
<span>这是一段行内元素文本span>
<div class="d1">这是一个行内元素div>
<span>这是第二段行内元素文本span>

页面表现：

三、内部表现类

这类属性值的效果是规定元素的内部显示类型，即定义元素内部子元素的布局方式。

1、flex

该属性值用于设置元素的内部显示类型为弹性布局，其外显类型为块级元素。该类型的元素可以通过一系列相关属性控制子元素在标准轴线上的布局方式和占位空间。更多内容可查看：flex布局。

该属性值的主要应用场景为：多个块级元素水平居中对齐等。

<style>
  .d1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
  }
  .d1>div {
    width: 150px;
    height: 150px;
    margin-right: 10px;
    background: pink;
  }
style>

<div class="d1">
  <div class="d1-1">第一个块级元素div>
  <div class="d1-2">第二个块级元素div>
  <div class="d1-3">第三个块级元素div>
div>

页面表现：

2、grid

该属性值用于设置元素内部的显示类型为网格布局，其外显类型为块级元素。该类型的元素将内部分为行和列，划分成一个个单元格，并通过一系列相关属性控制单元格的布局和大小。更多内容可查看：grid布局。

该属性值的主要应用场景为：多行多列元素水平且垂直对齐。

<style>
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  /* 设置行间距和列间距为20px */
  gap: 20px;
}
.d2>div {
  background: pink;
  text-align: center;
}
.d2>div:nth-child(2n){
background: yellow;
}
style>

<div class="d2">
  <div class="d2-1">1div>
  <div class="d2-2">2div>
  <div class="d2-3">3div>
  <div class="d2-4">4div>
  <div class="d2-5">5div>
  <div class="d2-6">6div>
  <div class="d2-7">7div>
  <div class="d2-8">8div>
  <div class="d2-9">9div>
div>

页面表现：

3、table

该属性值用于设置元素为块级元素，且内部的显示类型为表格布局，具体行为类似于HTML中的

元素。可以用于实现复杂的表格结构，以及对表格样式和行为的精确控制。更多内容可查看：table 布局。

demo示例：

<style>
.table {
	display: table;
	background: pink;
  border-collapse: collapse;
}
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	border: 1px solid #cccccc;
}
style>

<div class="table">
    <div class="row">
      <div class="cell">张三div>
      <div class="cell">李四div>
      <div class="cell">王五div>
    div>
    <div class="row">
      <div class="cell">张三三div>
      <div class="cell">李四四div>
      <div class="cell">王五五div>
    div>
    <div class="row">
      <div class="cell">张三三三div>
      <div class="cell">李四四四div>
      <div class="cell">王五五五div>
    div>
div>

页面效果：

4、flow-root

该属性值用于设置元素为块级元素，内部显示类型为建立一个新的块级格式化上下文（BFC），从而具有包含内部浮动、排除外部浮动和阻止外边距塌陷等相关特性。

demo示例：

<style>
.d1 {
  /* 设置该属性 包含子元素的浮动 使其占据普通文档流位置 */
	display: flow-root;
	background: #ccc;
}
.d1-1 {
	float: left;
	width: 30px;
	height: 30px;
	background: red;
}
.d1-2 {
	float: right;
	width: 40px;
	height: 40px;
	background: yellow;
}
style>

<div class="d1">
	<div class="d1-1">
		1111
	div>
	<div class="d1-2">
		2222
	div>
div>
<div class="d2">
	这是第二个盒子
div>

页面效果：

5、flow（实验属性）

该属性值用于设置元素内部的显示类型为流式布局，使元素的布局不再受到块级元素和内联元素的限制，可以根据可用空间自动调整大小和位置，以适应不同的屏幕尺寸和布局要求。

如果该元素的外显类型为inline或run-in，并且参与了一个块级或内联格式上下文中，那么将生成一个内联盒子；否则将会生成一个块级盒子。

该属性值属性需要配合其他相关的布局属性一起使用，如 flow-orientation、flow-from 和 flow-into 等，以实现更具体的布局效果。

但是该属性值目前处于实验阶段，还未被所有的浏览器完全支持，因此不建议使用。

6、ruby（实验属性）

该属性值用于设置元素内部为ruby 注记（ruby annotation）布局，其行为相当于HTML中的元素。Ruby 注记是一种用于展示东亚语言中的发音、注解或翻译的特殊文本布局方式。

使用 display: ruby; 属性可以将基本文本和注音文本进行布局，并确保它们在页面上正确地显示。

但是属性目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。但元素几乎被所有浏览器支持，所以更建议使用ruby元素。

还有其他一些与 Ruby 注记相关的属性，如 ruby-position（用于控制注音文本的位置）和 ruby-align（用于控制注音文本的对齐方式）等。

demo示例：

<p style="display: ruby;">
		<span style="display: ruby-base;">漢span>
    <span style="display: ruby-text;">かんspan>
		<span style="display: ruby-base;">字span>
    <span style="display: ruby-text;">じspan>
p>
<br><br>
<ruby>
	汉 
	<rp>(rp><rt>hanrt><rp>)rp> 
	字 
	<rp>(rp><rt>zirt><rp>)rp>
ruby>

页面效果：

四、列表元素类

该类型的属性值用于实现列表元素的部分和样式效果。

1、list-item

该属性值用于设置元素类型为了列表元素，外显类型为块级元素，类似于HTML中

元素。元素在设置该属性值之后，内部会出现一个::marker的伪元素，作为列表的icon标记，我们可以结合list-style相关属性（list-style-position、list-style-type、list-style-image）对该标记进行操作，这些属性同样也可以操作

list-style-position用于设置icon标记在元素中的位置，属性值有outside(默认)和inside。

list-style-type用于设置icon标记的样式，常见属性值有disc(默认)、square、decimal等等。

list-style-image用于设置icon标记为一张图片，属性值为url(...)。

demo示例：

  <style>
    .div1-1 {
      display: list-item;
      list-style-position: outside;
      /* list-style-type 默认为disc */
      list-style-type: disc;
    }

    .div1-3 {
      display: list-item;
      list-style-position: inside;
      /* 设置列表icon为实心方块 */
      list-style-type: square;
    }

    .div1-4 {
      display: list-item;
      list-style-position: inside;
      list-style-image: url(./images/list-icon.png);
    }
  style>

  <div class="div1">
    <div class="div1-1">
      这是第一个模拟列表元素的div
    div>
    <div class="div1-2">
      这是一个正常的div元素
    div>
    <div class="div1-3">
      这是第二个模拟列表元素的div
    div>
    <div class="div1-4">
      这是第三个模拟列表元素的div
    div>
  div>

页面效果：

五、内部结构类

该类型的属性值用于设置各种布局内部元素的结构和样式。

1、table-row-group

该属性值用于设置元素为表格的主体内容，类似于HTML的

。详细内容请查看：table 布局。

2、table-header-group

该属性值用于设置元素为表格的表头行，类似于HTML的

。详细内容请查看：table 布局。

3、table-footer-group

该属性值用于设置元素为表格的表尾行，类似于HTML的

。详细内容请查看：table 布局。

4、table-row

该属性值用于设置元素为表格的行，类似于HTML的

。详细内容请查看：table 布局。

5、table-cell

该属性值用于设置元素为表格的单元格，类似于HTML的

。详细内容请查看：table 布局。

7、table-column

该属性值用于设置元素为表格的列，类似于HTML的

。详细内容请查看：table 布局。

8、table-caption

该属性值用于设置元素为表格的标题，类似于HTML的

。详细内容请查看：table 布局。

9、ruby-base（实验属性）

该属性值用于设置元素为ruby 布局的基本文本，类似于HTML的元素。

该属性值目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。

10、ruby-text（实验属性）

该属性值用于设置元素为ruby 布局的注音文本，类似于HTML的元素。

该属性值目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。

11、ruby-base-container（实验属性）

该属性值目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。

12、ruby-text-container（实验属性）

该属性值类似于HTML的元素。

该属性值目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。

六、元素显示类

该类型的属性值用于设置元素及其后代元素在页面上的显示问题。

1、none

该属性值用于设置元素及其后代元素在页面上不显示，并且不占据页面空间，但是元素的dom结构是存在的，只是不显示。Vue中的`v-show`语法糖就是基于该属性实现的。

如果想让元素占据空间，但是不显示，应该使用`visibility`或者`opacity`属性实现。

demo示例：

`<div class="div1" style="display: none;"> 这是第一个div div> <div class="div2"> 这是第二个div div>`

页面效果：

2、contents

该属性值用于设置元素本身不显示，但其内部文本、伪元素和后代元素正常显示。但是该属性并不建议使用，不符合大部分浏览器的规范要求。

demo示例：

`<div class="div2" style="display: contents;background: yellow;"> 这是第二个div <div style="background: #ccc;"> 这是第二个div的子元素 div> div>`

页面效果：

七、预组合类

该类型的属性值用于设置元素同时具有两种属性值的效果，效果类似于两者的结合。

1、inline-block

该属性值用于设置元素类型为行内块元素，既可以像`inline`元素与其他行内元素放在同一行，又可以像`block`元素一样设置宽高、边距等属性。

2、inline-table

该属性值用于设置元素类型为行内表格元素，既可以设置元素内部为表格布局，又可以像`inline`元素与其他行内元素放在同一行。

除了与其他行内元素放在同一行之外，其余特性与`table`属性值相同。

3、inline-flex

该属性值用于设置元素类型为行内flex元素，既可以设置元素内部为`flex`布局，又可以像`inline`元素与其他行内元素放在同一行。

除了与其他行内元素放在同一行之外，其余特性与`flex`属性值相同。

4、inline-grid

该属性值用于设置元素类型为行内网格元素，既可以设置元素内部为`grid`网格布局，又可以像`inline`元素与其他行内元素放在同一行。

除了与其他行内元素放在同一行之外，其余特性与`grid`属性值相同。

demo示例：

<style> .div1 { display: inline-block; width: 150px; height: 50px; background: red; } .div2 { display: inline-table; width: 150px; height: 50px; background: yellow; } .row { display: table-row; } .cell { display: table-cell; } .div3 { display: inline-flex; width: 150px; height: 50px; background: pink; } .div4 { display: inline-grid; width: 150px; height: 50px; background: green; } style> <div> <div class="div1"> 这是设置inline-blick的div div> <div class="div2"> <div class="row"> <div class="cell">这是设置inline-table的divdiv> div> div> <div class="div3"> 这是设置inline-flex的div div> <div class="div4"> 这是设置inline-grid的div div> div>

页面效果：

八、双值语法

`dispaly`属性也支持部分双值语法，但目前不常用，效果与预组合类相同，更建议使用预定类。更多内容请查看：display的双值语法。

1、inline flex

等同于 `inline-flex`。

2、inline table

等同于 `inline-table`。

3、inline grid

等同于 `inline-grid`。

其他。。。

你可能感兴趣的:(HTML+CSS,css,前端)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问

DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程

【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件

关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip

HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线

webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p

springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一

博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java

最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl

补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重

微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂

字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文

前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i

《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在

uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。

html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击

css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin

360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能

Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo

css2中的透明琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}

Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin

Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin

前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage

第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访

华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l

如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi

分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据

Python精选200Tips：121-125 AnFany Python200+Tips python 开发语言
Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例

前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子

爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文

二分查找排序算法周凡杨 java 二分查找排序算法折半
一：概念二分查找又称折半查找（折半搜索/ 二分搜索），优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步

java中的BigDecimal bijian1013 java BigDecimal
        在项目开发过程中出现精度丢失问题，查资料用BigDecimal解决，并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习，特转载。         原文地址：http://blog.csdn.net/ugg/article/de

Shell echo命令详解 daizj echo shell
Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出。命令格式： echo string 您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test" 这里的双引号完全可以省略，以下命令与上面实例效果一致： echo Itis a test 2.显示转义

Oracle DBA 简单操作周凡杨 oracle dba sql
--执行次数多的SQL select sql_text,executions from (      select sql_text,executions from v$sqlarea order by executions desc      ) where rownum<81; &nb

画图重绘朱辉辉33 游戏
我第一次接触重绘是编写五子棋小游戏的时候，因为游戏里的棋盘是用线绘制的，而这些东西并不在系统自带的重绘里，所以在移动窗体时，棋盘并不会重绘出来。所以我们要重写系统的重绘方法。在重写系统重绘方法时，我们要注意一定要调用父类的重绘方法，即加上super.paint(g)，因为如果不调用父类的重绘方式，重写后会把父类的重绘覆盖掉，而父类的重绘方法是绘制画布，这样就导致我们

线程之初体验西蜀石兰线程
一直觉得多线程是学Java的一个分水岭，懂多线程才算入门。之前看《编程思想》的多线程章节，看的云里雾里，知道线程类有哪几个方法，却依旧不知道线程到底是什么？书上都写线程是进程的模块，共享线程的资源，可是这跟多线程编程有毛线的关系，呜呜。。。线程其实也是用户自定义的任务，不要过多的强调线程的属性，而忽略了线程最基本的属性。你可以在线程类的run()方法中定义自己的任务，就跟正常的Ja

linux集群互相免登陆配置林鹤霄 linux
配置ssh免登陆 1、生成秘钥和公钥    ssh-keygen -t rsa 2、提示让你输入，什么都不输，三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub    其中id_rsa为秘钥，id_rsa.pub为公钥，使用公钥加密的数据只有私钥才能对这些数据解密    c

mysql : Lock wait timeout exceeded; try restarting transaction aigo mysql
原文：http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html 原因是你使用的InnoDB 表类型的时候, 默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s, 因为有的锁等待超过了这个时间,所以抱错. 你可以把这个时间加长,或者优化存储

Socket编程基本的聊天实现。 alleni123 socket
public class Server { //用来存储所有连接上来的客户 private List<ServerThread> clients; public static void main(String[] args) { Server s = new Server(); s.startServer(9988); } publi

多线程监听器事件模式(一个简单的例子) 百合不是茶线程监听模式
多线程的事件监听器模式监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到创建多线程的事件监听器模式思路: 1, 创建线程并启动,在创建线程的位置设置一个标记 2,创建队

spring InitializingBean接口 bijian1013 java spring
spring的事务的TransactionTemplate，其源码如下： public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{ ... } TransactionTemplate继承了DefaultT

Oracle中询表的权限被授予给了哪些用户 bijian1013 oracle 数据库权限
        Oracle查询表将权限赋给了哪些用户的SQL，以备查用。 select t.table_name as "表名", t.grantee as "被授权的属组", t.owner as "对象所在的属组"

【Struts2五】Struts2 参数传值 bit1129 struts2
Struts2中参数传值的3种情况 1.请求参数绑定到Action的实例字段上 2.Action将值传递到转发的视图上 3.Action将值传递到重定向的视图上一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上 Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上，绑定的规则使用ognl表达式语言

【Kafka十四】关于auto.offset.reset[Q/A] bit1129 kafka
I got serveral questions about auto.offset.reset. This configuration parameter governs how consumer read the message from Kafka when there is no initial offset in ZooKeeper or

nginx gzip压缩配置 ronin47 nginx gzip 压缩范例
nginx gzip压缩配置更多 0 nginx gzip 配置随着nginx的发展，越来越多的网站使用nginx，因此nginx的优化变得越来越重要，今天我们来看看nginx的gzip压缩到底是怎么压缩的呢？ gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用

java-13.输入一个单向链表，输出该链表中倒数第 k 个节点 bylijinnan java
two cursors. Make the first cursor go K steps first. /* * 第 13 题：题目：输入一个单向链表，输出该链表中倒数第 k 个节点 */ public void displayKthItemsBackWard(ListNode head,int k){ ListNode p1=head,p2=head;

Spring源码学习-JdbcTemplate queryForObject bylijinnan java spring
JdbcTemplate中有两个可能会混淆的queryForObject方法： 1. Object queryForObject(String sql, Object[] args, Class requiredType) 2. Object queryForObject(String sql, Object[] args, RowMapper rowMapper) 第1个方法是只查

[冰川时代]在冰川时代,我们需要什么样的技术? comsci 技术
     看美国那边的气候情况....我有个感觉...是不是要进入小冰期了?      那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段...   &nb

js 获取浏览器型号 cuityang js 浏览器
根据浏览器获取iphone和apk的下载地址 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" content="text/html"/>     <meta name=

C# socks5详解转 dalan_123 socket C#
http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html 这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯，Socket4的实现是类似的，注意的事，这里不是讲用C#实现一个代理服务器，因为实现一个代理服务器需要实现很多协议，头大，而且现在市面上有很多现成的代理服务器用，性能又好，

运维 Centos问题汇总 dcj3sjt126com 云主机
一、sh 脚本不执行的原因 sh脚本不执行的原因只有2个 1.权限不够 2.sh脚本里路径没写完整。二、解决You have new mail in /var/spool/mail/root 修改/usr/share/logwatch/default.conf/logwatch.conf配置文件 MailTo = MailFrom 三、查询连接数

Yii防注入攻击笔记 dcj3sjt126com sql WEB安全 yii
网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查，可以使用正则表达式或者直接输入字符判断，大部分是只允许输入字母和数字的，其它字符度不允许；对于内容复杂表单的内容，应该对html和script的符号进行转义替换：尤其是<,>,',"",&这几个符号这里有个转义对照表： http://blog.csdn.net/xinzhu1990/articl

MongoDB简介[一] eksliang mongodb MongoDB简介
MongoDB简介转载请出自出处：http://eksliang.iteye.com/blog/2173288 1.1易于使用 MongoDB是一个面向文档的数据库，而不是关系型数据库。与关系型数据库相比，面向文档的数据库不再有行的概念，取而代之的是更为灵活的“文档”模型。另外，不

zookeeper windows 入门安装和测试 greemranqq zookeeper 安装分布式
一、序言以下是我对zookeeper 的一些理解： zookeeper 作为一个服务注册信息存储的管理工具，好吧，这样说得很抽象，我们举个“栗子”。栗子1号：假设我是一家KTV的老板，我同时拥有5家KTV，我肯定得时刻监视

Spring之使用事务缘由(2-注解实现) ihuning spring
Spring事务注解实现 1. 依赖包： 1.1 spring包：    spring-beans-4.0.0.RELEASE.jar    spring-context-4.0.0.

iOS App Launch Option 啸笑天 option
iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:，其中第二个参数launchOptions为NSDictionary类型的对象，里面存储有此程序启动的原因。 launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节。 1、若用户直接

jdk与jre的区别（_） macroli java jvm jdk
简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。 JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。如果安装了JDK，会发同你

Updates were rejected because the tip of your current branch is behind qiaolevip 学习永无止境每天进步一点点众观千象 git
$ git push joe prod-2295-1 To [email protected]:joe.le/dr-frontend.git ! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward) error: failed to push some refs to '[email protected]

[一起学Hive]之十四-Hive的元数据表结构详解 superlxw1234 hive hive元数据结构
关键字：Hive元数据、Hive元数据表结构之前在 “[一起学Hive]之一–Hive概述，Hive是什么”中介绍过，Hive自己维护了一套元数据，用户通过HQL查询时候，Hive首先需要结合元数据，将HQL翻译成MapReduce去执行。本文介绍一下Hive元数据中重要的一些表结构及用途，以Hive0.13为例。文章最后面，会以一个示例来全面了解一下，

Spring 3.2.14，4.1.7，4.2.RC2发布 wiselyman Spring 3
Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止)，后续会继续根据需求和bug发布维护版本。此时，Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。其中Spring 4.1.7主要包含这些更新内容。

**按字母分类：** A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
、	。详细内容请查看：table 布局。 6、table-column-group 该属性值用于设置元素为表格的列组，类似于HTML的

、

。详细内容请查看：table 布局。

6、table-column-group

该属性值用于设置元素为表格的列组，类似于HTML的

CSS 之 display属性详解

一、总览

二、外部表现类

1、block

页面表现：

2、inline

页面表现：

三、内部表现类

1、flex

页面表现：

2、grid

页面表现：

3、table

demo示例：

页面效果：

4、flow-root

demo示例：

页面效果：

5、flow（实验属性）

6、ruby（实验属性）

demo示例：

页面效果：

四、列表元素类

1、list-item

demo示例：

页面效果：

五、内部结构类

1、table-row-group

2、table-header-group

3、table-footer-group

4、table-row

5、table-cell

6、table-column-group

7、table-column

8、table-caption

9、ruby-base（实验属性）

10、ruby-text（实验属性）

11、ruby-base-container（实验属性）

12、ruby-text-container（实验属性）

六、元素显示类

1、none

demo示例：

页面效果：

2、contents

demo示例：

页面效果：

七、预组合类

1、inline-block

2、inline-table

3、inline-flex

4、inline-grid

demo示例：

页面效果：

八、双值语法

1、inline flex

2、inline table

3、inline grid

你可能感兴趣的:(HTML+CSS,css,前端)