盒子模型
1.内边距padding
指定了高宽,再指定内边距,则会撑开盒子。
盒子未指定高宽(继承算未指定),则不会撑开盒子。
2.外边距margin
用于控制盒子之间的距离。同padding的简写方式。
margin-left左外边距 right top bottom
块级盒子水平居中,需满足两个条件:①盒子必须指定了宽度 ②盒子左右的外边距都设置auto.
EG-------------> width: 298px margin: 100px auto;
z注:以上是让块级元素水平居中,行内或行内块元素水平居中给其父元素添加text-align:center即可。
外边距合并:对于嵌套关系的块元素,父元素有上外边距的同时子元素也有上外边距,此时父元素会塌陷(增大)较大的外边距值。
解决方案:
①可以为父元素定义上边框。border:1px solid red/transparent
②可以为父元素定义上内边距。padding:1px
③可以为父元素添加overflow:hidden。
还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题。
清除内外边距
*{
padding:0;//清除内边距
margin:0;//清除外边距
}
注:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转化为块级和行块元素就可以了。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
PS的使用
border-radius:切面圆的半径值;半径越大,圆角越大。
盒子阴影(重点)
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow和v-shadow是必须写的。
默认的是外阴影(outset),但是不可写这个单词,否则导致阴影失效。
盒子阴影不占空间,不影响其他盒子排列。
文字阴影 text-shadow
浮动最典型的应用:可以放多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素 纵向排列找标准流,多个块级元素 横向排列找浮动。
float:属性值; 创建浮动框 将其移动到一边,直到左/右边缘触及包含块或另一个浮动框的边缘 eg.如果都设置向左浮动,则从左贴着呈现。
none(默认) left(元素向左浮动) right
如果行内元素有了浮动,则不需要转块、行内块元素就可以直接给高宽度。
浮动让行内元素、块级元素,都变成了 行内块 元素拥有的特性,宽高可控,且多个浮动特性元素,都会在一行上(不管你原先是什么元素)。未指定宽高的,由文字内容决定。
浮动布局注意点:
1.先用标准流的父元素排列上下位置,之后内部子元素采用浮动排列左右位置。
2.元素横着排的,一个元素浮动,理论上兄弟也浮动,如果未浮动,说明哪个少加float了。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。---------------自己的理解:如果加了浮动,那么这个元素就相当于漂起来了并且定在这个位置的上面的漂,后面的标准流就随着它的变化而变化了。
1
2
3
设置:1浮动2不浮动3浮动,效果:1在2的上面,3自己一行
1不浮动2浮动3不符动,效果:1自己一行,2在3上面。
总结,浮动盒子,会浮动在后面紧跟的标准流上。(原因:浮动盒子不占有位置。。)
清除浮动:父级盒子在很多情况下,不能给写死的高度,但子盒子浮动不占有位置,最后父级盒子高度就为0,影响下面的标准流盒子(他会处于浮动盒子的下面)。
①额外标签法:
语法: 选择器{clear:属性值} -----left(清除左侧漂动的影响)--right --both 漂动元素最后一个添加块级标签调用选择器 清除浮动的策略是:闭合浮动 缺点:加了代码
②添加overflow:hidden、auto、scroll 缺点 无法显示溢出部分
③after伪元素
④before和after双伪元素清除浮动
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/ } 块级元素,调用一下这个clearfix类选择器
---------------------------------------------------------
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
标签:CSS3,浮动,行内,盒子,块级,clearfix,元素,第三天 From: https://www.cnblogs.com/fengok/p/18347457