浅谈块级元素的水平格式化细节

  1. 内边距不能为负值，而外边距可以为负（测试极限）无极限，设置为负的内边距都会默认改为0
  2. 盒子的width值并不会随着增加的padding margin而改变，它并不是可见的值，往往在内容区左右添加边距，会隐式的增加width值。
  3. 水平格式化的七个属性：margin-left、border-left、width、border-right、margin-right,这些属性的值加起来正好是包含块也就是父盒子的width，所谓元素框与父元素的width相同。
  4. width、margin-left、margin-right 可以设置为auto 其他几个不可以。1.三个中有auto，则相对父盒子width尽可能铺满，外边距为0。2.width为auto，一个外边距为auto，另一个固定，则设置为auto的外边距减为0。3.若都设置固定值（称为格式化属性过分受限），则强制使margin-right为auto，作为从左向右读的语言（英语），会把右侧margin-right忽略掉
  6. 由此而来的居中，显示设置width值，外边距自动，盒子在父元素中居中，而text-align：center则只能用于块级元素的内联内容
  7. 外边距可以为负值，这项设定是有意义的，元素7个属性的总和不能比其包容块的width更大，但是都是固定值，且超过了父元素的width，那么会发生什么？
      • 左边margin正常，右侧margin又被和谐了
时间： 2024-11-05 12:06:20

浅谈块级元素的水平格式化细节的相关文章

浅谈块级元素和内联元素的嵌套规则

块级元素的特点:每一个块级元素都是从一个新行开始显示,其后的元素需另起一行 常见: 块级元素:h1,h2,h3,h4,h5,h6,hr,div,fielset,form,dl,address,ol,p,table,ul,pre等 内联元素:a,b,br,em,i,img,input,strong,textarea,span,label等 注意:两者可相互转换:display:inline|block 嵌套规则: 1.块级元素里可包含内联元素和某些块级元素,但内联元素不能包含块级元素,只能包含其他

多个块级元素在水平方向占位置，实现在窗口变大变小的同时，四个图片依然会随之而动，从而显示响应式的效果

原理:块级元素想要在页面水平和垂直方向都居中:先让元素定位(绝对定位),然后水平方向上面:left=50%,margin-left=-(1/2*width) 垂直方向页面居中:top=50%,margin-top=-(1/2*height) 代码如下: <div class="footer_top">    <div class="footer_slogen">        <span class="one">

html块级元素的水平垂、直居中的方式

说明 对于初学者来说,块级元素的剧中,也是一大难题,我学习的时候,也是一脸懵逼,每次遇到都要百度,但是写的多了也自然记住一些常用的剧中方式,但是还是很模糊,今天就来好好总结一些. 布局 布局即为简单,一个div套着一个div,使inner1在wrap居中显示. <body> <div id="wrap"> <div class="inner1"></div> </div> </body> 水平剧

浅谈块级作用域

在ES5里面其实是没有块级作用域,这个说法的,但是也有特殊,从ES3开始的try.catch中是有块级作用域的. 例: 1 try { 2 throw undefined; 3 } catch(a) { 4 a = 2; 5 console.log(a); 6 } 7 console.log(a); 同样,这个写法是目前使用代码转换工具来ES6代码处理,生成兼容ES5的代码.

12.24 ES6浅谈--块级作用域，let

第一部分:ES6新增了块级作用域,let关键字用于声明变量,相较于var而言,let关键字不存在声明提前. 1.ES6真正的出现了块级作用域,使用双花括号括住并在其中用let声明变量,会存在暂时性死区,在作用域外面使用变量会报错. 2.在循环中,如for循环,let命令相较于var命令会更好,原因在于所声明的变量不会提前到全局.那么在循环结束以后再调用该变量将无法访问. 3.如果是使用var的for循环,如 var a = []; for (var i = 0; i < 10; i++) { a

块级元素的水平、垂直居中

HTML: <div class="parent"> <div class="child"></div> </div> 1.固定宽高 /* 利用calc */ .parent{ position: relative; height: 500px; width: 300px; margin: 0 auto; border: 1px solid pink; } .child{ width: 200px; height: 1

透彻理解块级元素的宽度

块级元素和行内元素 CSS把处在正常文档流中的不同html元素区分为块级元素(block element)和行内元素(inline element).一般来说,所谓块级元素就是指当它们显示在浏览器中时,会在自身前后各插入一个空行,而使自身在页面中占据一个相对独立的块状区域的元素.因此,HTML文档中连续的块级元素的典型显示方式就是"堆叠".块级元素的例子有h1到h6.div.p等.而行内元素则是指以自身所包含的内容决定在页面中占据空间的大小,并且可以与其他行内元素共处一行的元素.行内元

浅谈css（块级元素、行级元素、盒子模型）

一.块级元素的特点 1.默认显示在父标签的左上角 2.默认占满一行(占满整个文档流) 文档流是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 二.行内元素(内联元素)的特点 1.大小受到文字区域的影响,不受到width.height影响. 2.行内元素不会独自占满一行. 例: 1 <div id="d1"> 2 这是块级元素 3 </div> 4 <span id="d2"> 5 这是行内元素 6 &

CSS中块级元素水平格式化

CSS中块级元素的(width+padding+marninig+border)因该等于其包含块的width.其中margin可能为负值,其他均为正值. 如果width和margin-left和margin-right都设置为auto的话,浏览器代理会默认将margin-left和margin-right设为0,将width设为包含块的width. 如果width与margin-left.margin-right其中一个为auto,而另一个margin设为固定值的话,浏览器代理会把为auto的那