-
CSS 的overflow:hidden 属性详细解释:overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。我们下面来详细的阐述一下。 这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验#box{ width:500px;background:#000; height:500px;} #content {float:left;width:600px;height:600px;background:red;} 给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出，给box加上这个属性后，我们的content 的宽高自动的被隐藏掉了。另外，我们再做一个试验，将box这个div的高度值删除后，我们发现，box的高度自动的被content 这个div的高度值给撑开了。说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给box这个div加上overflow:hidden这个属性的时候，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个div设置高度的时候，content 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content 这个div的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！查看全部
-
一：横向两列布局的实现：这是网页布局最常见的方式之一 主要应用技能： float属性——使纵向排列的块级元素，横向排列 margin属性——设置两列之间的间距 二：当父包含块缩成一条时，用clear：both方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。所以设置父的overflow:hidden ☆div块的高度一般不需要设置，这样高度就会随着内容自动扩展。若设置了高度，又设置了overflow：hidden，当内容超过高度的时候，就无法正常显示了查看全部
-
横向两列布局 使用absolute实现横向两列布局 ——常用于一列固定宽度，另一列宽度自适应的情况（设定absolute，不设宽度） 主要应用技能： relative——父元素相对定位 absolute——自适应宽度元素绝对定位 注意：固定宽度列的高度>自适应宽度的列 为了不会脱离父元素 要设定一个块 把父元素撑开 *position有4中：static,relative,absolute,fixed.其中static相当于没有定位。absolute和fixed都是属于绝对定位。 *absolute常用于纵向布局中，一列固定宽度，另一列宽度自适应的情况。 *用到absolute进行纵向布局时候，最好要有一列的高度大于absolute的高度，因为absolute脱离了文档流，如果没有比它高度高的列，那么有一部分会露在父元素外面。 *偏移量设置：top、left（margin-left）查看全部
-
【W3C标准】由万维网联盟制定的一系列标准。（倡导结构、样式、行为这三者分离） 1.结构化标准语言（HTML和XML） 2.表现标准语言（CSS) 3.行为标准语言（DOM和ECMAScript） CSS拥有3中定位机制（标准文档流：Normal flow）(浮动:Floats）(绝对定位:Absolute positioning） 标准文档流Normal flow的特点：从上到下 从左到右，输出文档内容。由【块级元素】和【行级元素】组成。 【块级元素】特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行。 常见块级标签：div、ul、li、dl、dt、p... 【行级元素】特点：能在同一行内显示，不会改变HTML文档结构 常见行级标签：span、strong、img、input... （块级元素和行级元素都是盒子模型）查看全部
-
两种清除浮动方法的使用场景：父元素收到浮动影响的情况，也就是子元素设置了浮动，而父元素没有设置浮动而导致的父元素高度不能自动扩展，子元素从父元素中溢出时，适合使用width:100%（或固定宽度值）+overflow:hidden的方式来清除浮动，如果是相邻的元素是段落p受到浮动影响上移,对p设置clear:both更为合适，一般两种方式都需要设置在受到浮动影响的元素样式里查看全部
-
1.wrap 居中——margin：0 auto； 2.left左浮动，float：left; mid设置margin-left:125px;(此值为left宽度加其边框，再加上mid与left间距所得) 3.先给父级mainbody设置相对定位——position：relative； 再给子级right设置绝对定位，以及相对于父级mainbody偏移的位置——position：absolute;top:0px;left:792px;(此值为left、mid宽度加其边框及间距，加上right与mid的间距所得 )查看全部
-
讲解有问题，它不只对相邻元素有影响，对后续元素也有影响。Deom如下： <html> <body> <div ></div> <p>aaaaaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbb</p> <p>cccccccccccccc</p> </body> </html>查看全部
-
CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。查看全部
-
居中： margin:0 auto 子层以父层自适应：width:100%或相应的值查看全部
-
相对定位： 相对于自身原有位置为基准进行偏移。 仍处于标准文档流中。 设置相对定位属性之后会有偏移属性（top left right bottom 相对于自身进行偏移，会覆盖其他内容进行偏移）和z-Index属性（空间的层堆叠z轴的堆叠，没有的话是默认存在y和x轴的一个平面上） [ 查看全文 ]查看全部
-
#wrap{width:970px; margin:0 auto;} #mainbody{position:relative; margin-top:15px;} #left{width:110px; float:left;} #mid{width:650px;border:1px solid #999;float:left;margin-left:13px;} #right{position:absolute;border:1px solid #999;left:790px;}查看全部
-
盒子模型由四部分：边框border，外边距margin，内边距padding，盒子中内容content。 三个值设置：上，左右，下 两个值设置：上下，左右 eg设置：img{margin:8x 10px;border:1px solid #000000}border的三个属性值缺一不可 盒子3D模型： 1层：border 2层：content+padding 3层：background-image 4层：background-color 5层：margin 盒子模型尺寸：边框+外边距+内边距+盒子中内容查看全部
-
绝对定位：position属性设置，能够实现横向多列布局及较为复杂的定位，比如带有遮罩层效果的提示框、固定层效果、全屏广告等。 position拥有3种定位形式：1、静态定位；2、相对定位；3、绝对定位。 position可以设置4个属性值：1、static（静态定位） 2、relative（相对定位） 3、absolute（绝对定位，属于绝对定位） 4、fixed（固定定位，属于绝对定位）查看全部
-
1.对页面进行初始化：用全局选择器将浏览器的默认添加上， 把内填充、外填充都设置为0：*{padding:0;margin:0;}。 2.让页面自动居中：#wrap{margin:0 auto;width:960px} (上下值可任意设置，左右值必须设置为auto，宽度也必须设置,（值为除了100%的其他值），不然默认宽度会占据浏览器的100%)。 3. 清除浮动 父容器没有设置浮动，而子元素都设置了浮动，就无法撑开父容器的宽度，父容易就显示成一条直线了， 因为子级设置了浮动，因此父级元素的高度没办法正常扩展， 此时设置浮动后，父级元素和后面紧邻的元素都会受到影响。 清除浮动就可以解决元素浮动带来的影响： 但是对于父级元素受到的影响，clear:both是无效的，需用width:100%（或者固定宽度）+overflow:hidden（隐藏）的方式。 对于紧邻后面的元素受到的影响，需用clear；both的方式。 4.div块的高度一般不需要设置。 横向两列布局有两种方式： a.两列中均设置为左浮动：float:left, 然后再设置margin属性值，要保证：第一列的宽度+第二列的宽度+margin的值=父容器的宽度； b.两列中一列设置左浮动，一列设置右浮动（这种方法仅限于两列布局，对于多列则无效）；查看全部
-
盒子3D模型： 第一层为边框（border) 第二次为内容+内边距(content+padding) 第三层为背景图片(background-img) 第四层为背景颜色(background-color) 第五层为外边距(margin)查看全部
举报
0/150
提交
取消