嵌套关系的盒子为什么margin-top失效

2024-09-03

复习 1.前端: 网页, html + css + js 2.html三个组成部分:标签,指令和转义字符标签: <>包裹, 以字母开头, 可以结合-|数字, 能被浏览器解析的标记 3.常用的基本标签 div,a,link,img,p,i,span,b,ul>li,(br/hr),sup,sub.pre,table>thead>tbody>tfoot>tr>th|td 4.css引入行间式:style属性中内联式:head标签的style标签中外联式:

基础选择器,长度与颜色,标签display,嵌套关系,盒模型,盒模型布局

css基础选择器 # *(统配选择器): 控制html, body,以及body下所有用于显示的标签 # div(标签选择器): 该标签名对应的所有该标签 # .(class选择器)(eg: .div => class="div"): 类名为div的所有标签 # #(id选择器)(eg: #div => id="div"): id名为div的唯一标签选择器的优先级 # 理解: 控制范围约精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式 #

前端,基础选择器,嵌套关系.display属性,盒模型

基础选择器 1.统配选择器控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器以class起名的标签,控制class名匹配的标签 (因为标签的class名可以重复) <div class="foo">123</a> .foo{ width:80px; height:80px; background-color:pink; } 3.id选择器以

html/css 盒子布局 Margin 、Padding 、border 以及清除浮动的知识（学习HTML过程中的小记录）

html/css 盒子布局 Margin .Padding .border 以及清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽度"的意思,CSS中width指的是内容的宽度,而不是盒子的宽度. Height 是"高度"的意思,CSS中height指的是内容的高度,而不是盒子的高度 Padding 是"内边距"的意思 Border 是"边框" Marg

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

定位absolute使内联支持宽高（块属性变为内联，内容默认撑开）margin auto 失效

relative 没脱离文档流 absdute 完全脱离文档流 margin :auto 失效相对整个文档偏离相对父级定位 fixed 脱离文档流与绝对定位特性一致 3.P标快不能包块级标签 4.相对fixed定位 5.z-index 默认按顺序从低到高 z-index 的值 :1-无名大(99)

ListView中item的最外层使用margin属性失效

参考文章:http://stackoverflow.com/questions/16278159/why-linearlayouts-margin-is-being-ignored-if-used-as-listview-row-view 1.在开发中发现这么一种现象: List中的Item是LinearLayout,这个Item的最外层,设置了margin属性.全部失效. 2.查资料发现: List中的Item的LayoutParam是直接继承自ViewPager中的LayoutParam.

position relative top失效的问题,温习下常用两种的居中方式

因为body和html,默认高度是auto 所以相对于他们作为父元素设置position:relative的top值需要加上body,html{height:100%;} <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style type="text/css"> *{margin

CSS -- 盒子模型 margin 的特点

margin在使用过程中具有如下的两个特点: 1.垂直外边距塌陷 --给子元素设置margin-top的时候,如果父元素也随着margin-top改变位置解决方式: 给父元素设置边框给父元素设置overflow:hidden; 让子元素脱标(浮动| 定位) 2. 垂直外边距合并 --如果给元素设置上下margin,那么最后的margin值会以最大值为准解释: 如果有上下两个盒子,给上面盒子设置margin-bottom:100px;给下面的盒子设置margin-top:50px;那么两个盒

ScrollView与ListView嵌套使用，导致ListView下拉失效

在一次项目开发中,在Scrollv中嵌套进ListView,当触摸ListView范围下拉时,整个展示页面滑动,而不是ListView内容滑动, 也就是说ListView滑动事件被ScrollView截掉(消费掉),没有向下子级View下传,而导致ListView无法滑动的效果, listview_list.setOnTouchListener(new View.OnTouchListener(){ @Override public boolean onTouch(View view, Moti

margin top 无效

常出现两种情况: (一)margin-top失效两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果. 解决办法: 1.box2增加float属性 2.box1与box2之间增加一层"<divstyle="clear:both;"></div>" (二)子元素设置margin-top作用于父容器当给box2设置margin-top时,在FF下仅作用于父容器. 解决办法: 1.

html嵌套关系

哪些元素可以出现在什么地方,哪一个元素可以被包涵在另一个元素里面,这个都是有规则的 1.块级元素可以包涵行内元素 2.块级元素不一定包涵块级元素 p包涵div是不合法的,在浏览器里面会自动在p里面遇到div前自动合并p 3.行内元素一般不能包涵块级元素什么叫一般,因为里面有个特例,a元素可以包涵div元素.为什么这个a包涵div是合法的.这个要从html规范来讲起,在html4以及xhtml中,元素的分类基本上是按inline和block进行分类的.所以嵌套的规则也是这样规定,那么所谓

DRF框架在嵌套关系下实现嵌套对象字段的过滤

当需要对关联对象的字段进行选择性显示时,在所对应的serializer类中声明引用的字段. 例如: class TrackSerializer(serializers.ModelSerializer): class Meta: model = Track fields = ['order', 'title', 'duration'] class AlbumSerializer(serializers.ModelSerializer): tracks = TrackSerializer(many=

左右margin top问题百分比值

不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: 25%; margin-left:25%; width:50px; height:50p; background-color: yellow;"> </div> 演示: 然后就发现."当窗体宽度变化的时候,margin-top变了,变了!了.!!" ,调了一个晚

HomeFragment 嵌套关系

1.HomeFragment 在mainActivty 中调用: 2.HomeFragment 中: private ArrayList<Fragment> mFragments = new ArrayList<>(); @Override public void initData() { for (String title : mTitles) { mFragments.add(SimpleCardFragment.getInstance(title)); } mAdapter

HTML元素嵌套关系

div嵌套时，子元素设置margin-top失效问题

这是因为父元素的padding设置为0时所产生的bug,它自动将margin-top提升到了父元素上,所以此时我们所设置的margin-top自动就到父元素上了,解决方案: 1.给父元素添加一个padding,例如:padding-top:1px; 2.给父元素设置overflow:hidden; 3.把子元素设置成一个BFC,例如:{display:table-cell;position:absolute;overflow:hidden},父元素的位置设置为绝对定位.

67.基于nested object实现博客与评论嵌套关系

1.做一个实验,引出来为什么需要nested object 冗余数据方式的来建模,其实用的就是object类型,我们这里又要引入一种新的object类型,nested object类型博客,评论,做的这种数据模型 PUT /website/blogs/6 { "title": "花无缺发表的一篇帖子", "content": "我是花无缺,大家要不要考虑一下投资房产和买股票的事情啊...", "tags"

react 没有嵌套关系的组件通讯

前提准备四个文件,两个子组件:List.List2和一个events.js文件以及一个App.js父组件; 在src目录下创建events.js,里面的内容如下: // events.js(以常用的发布/订阅模式举例,借用Node.js Events模块的浏览器版实现) import { EventEmitter } from 'events'; export default new EventEmitter(); 在src下创建pages文件夹,在该目录下创建List/index.js和Lis

margin的两个有趣现象：margin合并和margin塌陷

margin合并当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置margin-top:50px, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title>