css 嵌套margin

2026-08-22

CSS 之嵌套 margin-top 处理

如下代码: <div style=" width:1000px; height:700px; margin:auto;"> <div style=" width:1000px; height:49px; margin-top:281px; "> <span style="display:inline-block; width:121px; height:49px; margin-left:230px;"> &l

利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>中国石油大学</title> </head> <style> *{ margin: 0px auto; padding: 0px; } .top-head{ width: 100%; height

CSS中margin边界叠加问题及解决方案

你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加. CSS的margin边界叠加深度剖析边界叠加简介边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: ◆元素的顶边界与前

CSS中margin边界叠加问题及解决方案(转)

边界叠加简介边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: ◆元素的顶边界与前面元素的底边界发生叠加当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图: ◆元素的顶边界与父元素的顶边界发生叠加尽管初看上去有点儿奇

CSS中margin和padding的区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10

CSS中margin属性

css中margin块级元素的垂直相邻外边距会合并,比如方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

css & no margin & print pdf

css & no margin & print pdf no header & no footer https://stackoverflow.com/questions/46077392/additional-options-in-chrome-headless-print-to-pdf @page { margin: 0; } @page { margin-top: 0; } @page { margin-bottom: 0; } media & print.css u

css预编译语言 sass scss（变量$var, css嵌套规则，@import规则，@extend，@mixin）

什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时 [特点] 完全兼容 CSS3 在 CSS 语言的基础上增加变量(variables).嵌套 (nesting).混合 (mixins) 等功能通过函数进行颜色值与属性值的运算提供控制指令等高级功能自

用diiv实现多个方块居中嵌套--margin

文章地址 https://www.cnblogs.com/sandraryan/ 案例:用diiv嵌套多个正方形,配合盒模型相关知识,使每个div在他的父元素上居中.(每个div中心点对齐) 涉及到margin的各种合并问题. (触发BFC是更好的解决方案等,为做练习此处只考虑margin) 此处给div的父级加个border就好了 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

CSS的margin塌陷（collapse）

<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <metaname=""content=""> <style> *{ margin:0px; padding:0px; } #no1{ background:#808000; wi

CSS padding margin border属性详解

图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响.

CSS 百分比 margin & padding

前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想法不同,就是margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度,而是宽度 . 引用标准(2.1)原来的表达: The percentage is calculated with respect to th

DIV+CSS：Margin和Padding属性[转载]

margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom.margin-left,控制块级元素之间的距离,它们是透明不可见的. Padding: 包括padding-top.padding-right.padding-bottom.padding-left,控制块级元素内部,content与border之间的距离. 例子h2: h2 { font-s

CSS中margin与padding的区别

CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南 padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象.补白(padding):补白位于元素框的边界与内容区之间.很自然,用于影响这个

使用CSS中margin和padding的基础和注意事项

在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备以后使用. 一.首先了解CSS盒模型 Box Model 通过这个CSS盒模型模型就很容易理解Margin.padding和Border.. W3C定义的盒模式如下: width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面.背景会

[css] 认识margin

原文链接http://www.zhangxinxu.com/wordpress/2009/08/css-margin%E7%9A%84%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7%EF%BC%8C%E9%97%AE%E9%A2%98%E5%8F%8A%E5%BA%94%E7%94%A8/ 1.ie6下margin双边距问题产生问题条件:margin + folat + block 解决问题的办法: inline 并去掉float 为什么能解决 : 本身inline

问题与对策：CSS的margin塌陷（collapse）

1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: <head> 4: <title></title> 5: <metaname=""content=""> 6: <style> 7: *{ 8: margin:0px; 9: padding:0px; 10: }

CSS样式margin:0 auto不居中

CSS padding margin border属性详解【转载】

本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,backgro

CSS 之 margin知识点

1.margin的百分比值普通元素的百分比maigin相对于容器元素的宽度(width) 进行计算的. 这里我们在图片外面设置一个宽高分别为800 * 600的容器.设置img{ margin: 10%; } 结果如下结果margin值都是 800 * 10% = 80px; 所以这里都是相对于容器的宽度计算的容器的宽度计算容器的宽度计算.说三遍 2.绝对定位的百分比maigin值相对于第一个定位的祖先元素的 width值计算的.就是 parent 的 width = 100

css中margin:0 auto没作用

很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思.下面我就列举集中居中没作用的情况: 1:没有设置宽度.margin:0 auto居中是要设置宽度滴. 2:没声明DOCTYPE:DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本.要建立符合标准的网页,

css 嵌套margin

热门专题