实验原理css盒子模型(Box Model)所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:1、边距2、边框3、填充4、实际内容盒模型允许我们在其他元素和周围边框之间的空间放置元素,平面图如下所示:Margin(外边距)-盒子以外或者盒子与盒子之间的距离,外边距是透明的Border(边框
转载
2023-07-11 16:39:21
172阅读
CSS盒子和DIV布局(2013-11-24 16:17:29)一、认识div层1.<DIV>标记是一个区块容器标记，在标记之间可以放置其他一些HTML元素，例如p,h1,table,img,form等，然后使用css相关属性将div容器标记中的元素作为一个独立对象进行修饰，不会影响其他HTML元素。2.Div和span的区别大部分div层都可以使用span标记代替Div是一个块级元素
转载
2023-07-25 09:13:09
147阅读
一：弹性盒子随着响应式设计的流行，网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化，因此需要设计者根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果。本文介绍的就是一种实现这种变化的比较简单的模型：弹性盒子。二：属性首先要给父容器设置display:flex(或者inline-flex)属性，就可以让该父容器的布局方式变为弹性盒
转载
2023-10-11 15:39:02
247阅读
1 行内元素和块级元素的定义任何HTML (超文本标记语言) 元素都有其默认的display属性，大多数都是行内元素（inline）或块级元素（block）。一个行内元素只占据它对应标签的边框所包含的空间，而一个块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。2 行内元素和块级元素的区别内容一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。这种
转载
2023-07-14 22:13:03
0阅读
目录HTML是什么HTML中元素分类行内元素(inline)块级元素(block)两者的区别行内元素 块级元素HTML是什么HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本。HTML中元素分类HTML中元素可分：行内元素(inline)、块级元素(bloc
html标签按照元素种类可以分为行内元素（display: inline）;，块级元素（display：block）和行内块级元素（display：inline-block）三种。了解元素种类有利于，我们进行css布局及属性的使用。2|行内元素也叫内联元素或内嵌元素，只能容纳文本或其他内联元素。 默认特点:使用多个行内元素时呈现效果排在一行，不会自动换行，当充满容器后，就会开始位置继续叠加显示。不
转载
2023-07-18 01:24:53
158阅读
块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。 如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是
转载
2023-06-26 18:57:05
33阅读
盒模型--边框（一）盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：div{
border:2px solid red;
}上面是border代码的缩写形式，可以分开写：div{
border-width:2px;
border-style:solid
弹性布局简单介绍弹性布局是HTML文档中的另外一种布局方式，弹性布局一般是给一个父级盒子设置弹性布局，父级盒子本身依然在HTML的流式布局中。弹性布局为页面的编写提供了更加简洁，更加方便的布局方式，但是弹性布局不兼容8.0版本以下的IE浏览器，所以在IE浏览器中，弹性布局不能完美的被使用。设置弹性布局的方式：display：flex；采用 Flex 布局的元素，称为 Flex 容器（flex co
元素类型大家都了解吧！
html元素的类型主要可分为块级
元素、
行内元素、
行内块
元素分别对应的各自的display属性，block、inline、inline-blockhtml的标签都被默认设置了对应的display属性值，例如块级
元素：默认设置display:block的
元素<
div>、<h1>~<h6>、<p>、<ul>、<ol&
转载
2023-10-11 10:05:02
587阅读
section页面中的一个内容区块和 h1,h2等元素结合起来使用
article页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章
aside和article配合
header标签定义文档的页眉
hgroup标签用于对网页或区段（section）的标题进行组合
footer 页脚
nav导航链接
figure请使用 元素为元素组添加标题
原创
2016-02-26 15:05:40
1631阅读
第五单元 盒子模型任务10 盒子模型及应用学习目标盒子模型的概念掌握边框的设置内边距的设置外边距的设置学习目标了解:利用盒子模型布局网页的优势任务目标实战演练——制作古诗文欣赏网页强化训练——制作散文赏析网页知识准备1. 盒子模型的概念知识准备1. 盒子模型的概念CSS将HTML页面中的每一个元素看成是一个矩形盒子，占据一定的页面空间。一个HTML页面由很多这样的盒子组成，这些盒子之间会相互影响，
HTML中margin重合问题margin重合有同向重合和异向重合，主要是块级元素的上下方向重合什么是同向重合和异向重合同向重合:两个块级元素的margin在同一方向重合，这时候重叠之后的margin值由发生重叠的元素的margin最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。异向重合，即margin-bottom和ma
转载
2023-11-02 12:45:29
142阅读
最近接到一拖拽交互操作，开始的时候就想着传统的mouseUp,mouseDown，mouseMove之类的方法。但是偶然看到H5的draggable属性，觉得更香啊！先看下实现的效果。如图所示的场景就很适合使用该API，拖拽的过程中鼠标还带着对应的元素样式。draggable="true"设置元素可拖拽，很简单，直接加个draggable="true"属性即可<li
转载
2023-06-23 21:53:02
250阅读
CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影（盒子阴影、文本阴影的使用）CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用：1，盒子阴影（1）盒子阴影的属性是 box-shad
转载
2023-09-12 17:45:38
163阅读
# HTML5弹性盒子（Flexbox）科普
在现代网页设计中，布局是一项重要的工作。传统的CSS布局方法，如浮动和定位，往往复杂且难以维护。而HTML5引入的“弹性盒子”（Flexbox）布局模型，为我们提供了一种更加灵活和高效的方式来管理元素的排列。本文将带你了解弹性盒子的基本概念及其应用示例，并用一段旅行的故事，展示如何生动地使用Flexbox。
## 弹性盒子的基本概念
Flexbo
目录1.盒子模型定义2.盒子的复合属性3.外边距合并（1）上下元素垂直外边距的合并（2）嵌套元素垂直外边距的合并（塌陷）4.实用tips（1）字数不一样多的导航栏设计（2）块级盒子水平居中对齐（3）CSS第一句话：清除所有元素内外边距（4）圆角边框（5）盒子阴影1.盒子模型定义将网页布局看成一个矩形盒子，由元素内容、边框（border）、内边距（padding）、外边距（margin）组成。盒子实
01 文字居中 将一段文字置于容器的水平中点，只要设置text-align属性即可：text-align：center;02 容器水平居中 先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可div#container {
width:760px;
margin:0 auto;
} 03文字的垂直居中 单行容
转载
2023-07-17 17:16:38
631阅读
CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子。只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。边框 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子
解决方法：给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算【可以尝试下】当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向
