margin-left：-100%理解

magin-left:-100%

这个百分比是以父元素内容长度的百分比，该父元素内容长度需要去除padding magin border。由于长度设置为了100%，需要一整行的宽度补偿margin，则移到最左边。

magin-right：-150px

margin负值会改变元素占据的空间，及移到父元素的最右边，并且该子元素width即为150px

<html><div class='container'><div class='main column'>main</div><div class='left column'>left</div><div class='right column'>right</div></div><style>.container .column{float: left;position: relative;}.container{padding-left: 200px;padding-right: 150px;}.left{width: 200px;margin-left: -100%;right:200px;background-color:black;}.main{width: 100%;background-color: cyan;}.right{width: 150px;margin-right: -150px;background-color: darkorchid;}</style>
</html>

margin-left：-100%理解相关推荐

border，padding，margin盒模型理解
安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...
懂点前端——对CSS中的Padding、Border、Margin属性的理解
作为一个志在AIot(实际在写上位机程序.嵌入式代码)的工程师,怎么又关心起前端来了呢?怎么说呢,前端的应用范围广啊,从高大上的算法.富有科技感的物联网应用到无处不在的Web应用,只要是需要和终端用户 ...
css布局margin介绍,深入理解css中的margin属性（推荐）
之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些" ...
margin负值的理解和应用
1. 水平垂直居中利用margin负值可以实现元素的水平垂直居中 html代码: <div class="box"><div class="out&q ...
font-size:100%理解
font-size是设置字体的属性常见设置字体大小有 px, rem,em 但是有一种设置就是设置 font-size为百分比. font-size:100%;设置字体属性为默认大小,是相对于浏览器 ...
什么是网络端口？或许工作10年的人也很难100%理解
你好,这里是网络技术联盟站. 今天和大家聊一个技术:网络端口. 我非常清晰的记得,当时上大学的时候学习网络这块,学到端口的时候就很难理解端口到底是个啥东西,因为我爱钻牛角尖,后来也搞明白了. 不过,我 ...
margin负值布局（一）
搜索关键词:margin 负-100% 链接地址: 负margin用法权威指南负边距(negative margin)实现自适应的div左右排版 <div class="cont& ...
来自web标准margin的嘲笑，你了解我吗？
无意中在蓝色理想中看到一篇<不要告诉我你懂margin>,有感,写出来的.对于作者致敬,请大家帮忙指正. 你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合 ...
css属性width默认值width: auto与width: 100%区别
width: auto 子元素(包括content+padding+border+margin)撑满整个父元素的content区域. 子元素有margin.border.padding时,会减去子元素 ...

margin-left：-100%理解

magin-left:-100%

magin-right：-150px

margin-left：-100%理解相关推荐

最新文章

热门文章