CSS进阶(一)width & height

禁用默认行为可以使拖动行为更加流畅,如a标签

块级元素不是指拥有display:block声明的元素

块级元素具有的换行特性,它们都可以使用clear来清除浮动带来的效果

display:inline-block实际上是两个容器,外在容器负责布局,内在容器负责大小

width深入

inline-block 浮动元素 绝对定位元素都有智能的包裹性

首选最小宽度

width设置为0时,图片和文字的权重大于布局

(1)东亚文字显示为单个最小文字的宽度

(2)西方文字特定的最小宽度由英文字符单元决定。一般终止于空格,短横线(-),问号及其他非英文字符

(3)图片的最小宽度就是该元素本身的宽度

width设置了具体的宽度后就丧失了流动性

height

width和height作用在content-box上

margin的背景永远是透明的

ie8box-sizing属性需要带前缀

对于普通文档流中的元素,百分比高度要想起作用,其父级必须有一个可以生效的高度值

css渲染的方式是先渲染父元素,后渲染子元素

元素支持height:100%的方法

(1)设置父级元素的宽度,高度为父元素的content-box的高度

html,body{
  height:100%;
}

(2)设置元素的绝对定位,高度为父元素的padding-box的高度

div{
  position:absolute;
  height:100%;
}

max-width会覆盖width属性,超越!important的权重

min-width和max-width冲突时,min-width会覆盖max-width

min/max-width/height是为流体而生的

展开收起的动画可以由max-height/width来实现

原文地址:https://www.cnblogs.com/goOtter/p/9697411.html

时间: 2024-10-11 04:46:46

CSS进阶(一)width & height的相关文章

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型.例如:div 2.行内替换元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型. 例如:img 2.行内非替换元素(重点) width. height不起作用,用line-height来控制高度.

css的width height

如果块级非替换元素没有显示width heigth属性,html的width:atuo 是浏览器可视区域width;height是元素内容的height;显示widht:auto height:auto的渲染效果和隐士效果一样; html的所有子元素(块级非替换元素)没有显示width:px等 则子元素的width值为html的width; 如果html显示width:px等 则所有子元素(块级非替换元素)的width值为html的width; 其他块级非替换元素也是如此;

转载 【CSS进阶】伪元素的妙用--单标签之美

1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 3.增强用户体验,使用伪元素实现增大点击热区.适合用在点击区域较小的移动端,PC端看上去是

CSS进阶之纯CSS幻灯片

CSS进阶之纯CSS幻灯片 昨天写的博文有人点了赞,让我激动不已,晚饭赏自己一个鸡腿,.如果我的博文对您有帮助的话,就请您点个赞,您的鼓励是我前进的动力.如果发现文中有错误的地方,也烦请各位大牛指出.以下开始正文. 首先用HTML搭建出基本的框架,如下: <div id="container">     <div class="slide">     <!--将需要展示的图片放在一个ul里面-->         <ul&g

如何正确使用width height 进行合理布局

两个问题引题 1)width,height设置为百分比 2)max-width , max-height 到底是什么意思 0.max-width,max-height 一帮情况使用在图形元素当中,原因是怕图片超出了父容器的大小,那么控制图片最大就是这个值,超过了则按这个值显示,如果没有超过则按 width height进行布局. 1.针对所有HTML元素都具有width 与 height ,而且 HTML标签属性与CSS属性在width和height中都是同样的作用. 2.关于width使用百分

element.getBoundingClientRect().width/height VS. element.offsetWidth/offsetHeight VS. element.clientWidth/clientHeight VS. element.scrollWidth/scrollHeight

获得元素尺寸可谓多种多样,但通常它们是有一定区别的. 先说说元素的getBoundingClientRect()方法,这个方法的width或height属性可以计算元素尺寸,但width或height除了本身的content的宽高之外还包括padding和border的部分,这里不得不说的一个属性就是元素的offsetWidth和offsetHeight属性,这俩属性和getBoundingClientRect()的width和height属性极其相似,也是包含padding和border的部分

[扩展]为UIView扩展x,y,width,height,centerX,centerY,Size,Origin等属性

大家应该知道如何设置一个view组件的位置把,是的,如下: view.frame=CGRectMake(x,y,width,height);//设置组件的x,y坐标,设置组件的宽度高度... 如果我单独要设置坐标或者宽度高度,得这样: view.frame.size.width=100; view.frame.size.height=100; 如果你想偷个懒,比如: view.frame.size=(CGSize){200,200};//这个语句会报错,因为无法对size赋值 通过上面的代码,大

【转】用CSS+DIV时width的问题

CSS盒子占据面积的大小一共是边距(margin)+边框(border)+填白(padding)+宽度(width).所以当你设置width:200px;border:1px xx xx;的时候,实际的这个DIV的width最大值还是200.只是DIV的实际占据页面的宽度是:1(左边框)+200(width)+1(右边框)=202所以这个DIV里面还有200的宽度可以容纳包含的DIV.当然如果里面的DIV宽度大于200,外面DIV定义的宽度就会失去效果. 注意啦!注意啦!重点地方要回答你了,如果

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文章: [CSS进阶]伪元素的妙用–单标签之美,看完本文觉得有意思的可以再去看看上一篇,分享了一些伪元素的妙用. 正文从这里开始: 哪些标签不支持伪元素? 我也是才知道这个姿势.为了不误导读者,就赶紧补充一下. 伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的.

as3:sprite作为容器使用时,最好不要指定width,height

除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 scaleY 属性会相应调整(width类推) 原作者:菩提树下的杨过出处:http://yjmyzz.cnblogs.com 也就是说,一个空的sprite,既使您设置了width,height也是没用的(而且人为设置了反而会有负作用,见下面的代码) 1 var _sprite:Sprite =