HTML5div盒子嵌套

2026-09-02

DIV布局之道二：DIV块的嵌套，DIV盒子模型

本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS Code复制内容到剪贴板 /*嵌套样式*/ .contain { width:200px; height:160px; margin:20px; padding:10px 20px 10px 20px; border:1px solid #FF6600; text-align:center} .i

"margin塌陷现象"div盒子嵌套盒子外边距合并现象

问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定background=“blue” ,同时给heder1 设定margin-top:10px; 预想的是内层 heder1div 的上边距 maindiv 上边有10px的距离但事实上出现一个问题 ,内层div 并没有出现他所预想的那种效果,实际效果是 maindiv 仍然紧贴内层div 整个maindi

聊聊css盒子模型

css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式. CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素内容(element content).内边距(padding).边框(border)

CSS初识盒子

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .box1{ width: 600px; height:250px; border-top:10px dashed blue; border-right: 5px

day50 盒子显隐2D形变

复习 1.浮动布局解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重新撑开父级高度子级浮动(约定俗成如果有子级浮动, 该子级的所有兄弟都应该浮动) 父级清浮动, 拥有合适的高度, 让兄弟标签布局不出现问题(约定俗成父级都必须清浮动) float: left | right; .sup:after { content: ""; display: block

盒子模型之margin相关技巧！

废话不多说,直接进入主题,margin相关技巧. 1.设置元素水平居中:margin:x auto; 2.margin负值让元素位移及边框合并. 外边距合并指当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 解决外边距合并的方法: a.使用这种特性. b.设置一边的外边距,一般设置margin-top c.将元素浮动或者定位(元素浮动或定位时,不会出现margin合并) margin-top塌陷在两个盒子嵌套时候,内部的盒子设置的m

HTML&CSS精选笔记_盒子模型

盒子模型认识盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. 网页就是多个盒子嵌套排列的结果. 内边距出现在内容区域的周围,当给元素添加背景色或背景图像时,该元素的背景色或背景图像也将出现在内边距中. 外边距是该元素与相邻元素之间的距离. 如果给元素定义边框属性,边框将出现在内边距和外边距之间. 规定可元素框处理元素内容.内边框.边框和外边距的方式

css盒子模型详解一

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西:而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框就是盒子本身了:至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定

HTML连载41-水平居中的注意点、盒子居中和内容居中

一.盒子模型练习我们有个需求: 创建两个盒子,大盒子嵌套一个小盒子,大盒子是红色的,小盒子是蓝色的,并且小盒子在大盒子中是居中的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .big{ width:500px; height: 500px;

使用盒子定位布局时margin和padding使用

首先说的是区别: 如图所示,黄色padding,绿色margin,中间的content是内容,margin和padding的值是不计算在内容高宽的.这里补充的是在实际情况中边框宽度也是不计算在内的.这里以border边框为分界线说:margin是盒子距离另一个盒子的距离,如果浏览器页面中只有一个盒子,那么他的margin值就是距离页面的距离,理解为外边距#div{width:100px;height:100px;margin-left:100px;margin-top:100px; } 那

CSS学习笔记

CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码显示"%u5B8B%u4F53" 就是\5B8B\4F53 font-family: 中文,英文,最好的是unicode编码 eg. font-family: "SimSun","SimHei",sans-serif; 字体名称英文名称 Unicode 编码宋体 S

Web前端温故知新-CSS基础

一.CSS定义与编写CSS 1.1 CSS的定义全名:Cascading Style Sheets -> 层叠样式表定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式.CSS以HTML为基础,提供了丰富的功能(如字体.颜色.背景的控制以及整体排版等等),还可以针对不同的浏览器设置不同的样式. 1.2 HTML.CSS与JS三者的关系 HTML:页面结构,负责从语义的角度搭建页面结构.

JavaScript实现图片轮播组件

效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供一个接口,可以设置轮播方向,是否循环,间隔时间. 点击查看demo 对HTML.CSS的要求: <div class="carousel-box"> <div class="carousel"> <ul class="clearf

asp.net实现数据库版动态网页滑动门

前端: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.cs" Inherits="UI.滑动门" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&quo

CSS中定位机制的想法

对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | fixed 适用于:除 <' display '> 属性定义为「table-column-group | table-column」之外的所有元素. 继承性:无. 归类总结一下定位的四种属性特点: 绝对定位: 1:单独标签设置定位的时候,以浏览器左上角为基准设置定位的. 2:盒子嵌套的时候,如果父

CodeSnippet.info 开源说明和环境搭建 (第一版)

Github开源声明本网站的代码开源,开源的目的如下技术分享希望业内同行贡献代码希望能够让网站更加安全开源地址: CodeSnippet开源地址关于代码贡献任何人都可以贡献代码,一般在 1-3个工作日内会确认合并代码请进行测试后提交. 现在需要如下的代码贡献移动端自适应和响应式 (前端高手) 检索结果的处理 (ElsaticSearch高手) MarkDown的分析 (MarkDown和正则表达式高手) 好的意见和建议 (每一个人的力量) (初版,所以可能会有错误信息,如果开发

Web前端之CSS_day3-4

1.行高 1.1 初始行高行高=文字大小+上间距+下间距默认文字大小:16px 默认文字行高:18px 注意:行高=盒子的高度,可以让文字垂直居中显示 1.2 行高单位 a. px 行高设置多少就是多少 b. em 行高=文字大小*设置的行高值 c. % 行高=文字大小*设置的行高值 d. 不带单位行高=文字大小*设置的行高值 1.3 给父盒子设置行高 a. px 子盒子中的行高=父盒子的行高 b. em 子盒子的行高=父盒子文字大小*设定的行高值 c. % 子盒子的行高=父盒子文字大小

js-事件、正则表达式

AddEventListener()之中有三个参数,分别是(1)事件的名称(注:不要加on,例:click才是点击事件的名称)(2)需要执行的function(){} (3)布尔类型(false表示的是事件冒泡开启,true表示的是事件捕获开启) EventTarget.prototype.addEventListener = function(type,listener,useCapture) {}; /** @param {string} type @param {EventListener

JavaScript事件冒泡简介及应用

一.什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省

转：JavaScript事件冒泡简介及应用

(本文转载自别处) JavaScript事件冒泡简介及应用一.什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件

margin的BUG

在进行简单的div盒子嵌套时,发现设置margin-top时存在bug,然后就去谷歌搜索了一下,发现margin确实存在bug. bug的现象是父子元素嵌套时,如果子元素是块元素时,对块元素设置margin-top ,如果父元素没有边框,那么margin-top会作用在父元素上. 下面是body里的代码: <div class="red"> <div class="black"></div> </div> style里

HTML5div盒子嵌套

热门专题