css盒子模型
内容区content内边距padding边框border外边margin
1.盒子大小由content padding border决定
2.weight height 设置内容区大小
边框
设置边框必须指定的三个样式:
border-width 边框宽度
border-color 边框颜色
border-style 边框样式
none无 solid实线 dotted点状
dashed虚线 double 双线
大部分浏览器 width color有默认值 style默认none
若border-width:10px 20px 30px 40px
按上 右 下 左(顺时针);上 左右 下; 上下 左右
border-xxx-width
xxx=top\right\bottom\left
简写: border:red 10px solid
(同时4个边,无顺序要求)
border-xxx: 只对一个边
•border: 三个边
•border-xxx:none
内边距
会影响盒子的可见框大小,元素的背景会延伸到内边距
外边距
不影响可见框的大小,会影响盒子的位置
margin-xxx 可以指定负值 反方向移动
可以设置 auto 一般只水平方向
•margin-left:auto 使子元素在父元素中居中
•margin-right:auto
margin:0 auto 同时四向
垂直外边距的重叠
兄弟元素之间的相邻外边距会取最大值而不是和
若父子元素的垂直外边距相邻,则子元素的外边距设置给父元素
去掉浏览器默认样式
*{
margin:0;
padding:0;
}
内联元素的盒模型
内联元素
不能设置width和height
可以设置水平方向的内边距 padding-left
可以设置垂直方向的内边距 但不影响布局 -top
可以设置边框,垂直的不影响页面布局
可以设置水平外边距,相邻不会重叠而会求和
不支持垂直外边距
display 可以修改元素的类型 可选值:inline 将一个元素作为内联元素显示 block 将一个元素作为块元素显示 inline-block 行内块元素 (可设宽高,不独占一行) none 此元素不会显示,不占位置 visibility 设置元素的隐藏和显示状态 可选值:visible 默认值 会显示 hidden 隐藏 但位置保持
overflow 父元素如何处理溢出内容
可选值:visible 默认值 不处理 在父元素外显示
hidden 溢出内容修剪不显示
scroll 为父元素添加滚动条
(是否溢出都添加水平和垂直滚动条)
auto 智能滚动条
文档流 网页最底层 表示一个页面中的位置
在文档流中
块元素:独占一行,自上向下排列;
默认宽度是父元素100%;
高度默认值被内容撑开。
内联元素:只占自身大小,从左向右排列;
宽高默认被内容撑开。
浮动
float
可选值:none 默认 在文档流中排列
left 脱离文档流,向页面左侧浮动
right 脱离文档流,向页面右侧浮动
- 元素浮动以后会尽量向页面的↖或↗漂浮,直到遇到父元素边框或其他浮动元素
- 若浮动元素上边是一个没有浮动的块元素,则浮动元素不超过块元素
- 浮动元素不会超过它上边的兄弟元素,最多一边齐
- 浮动元素不会盖住文字,文字会自动环绕浮动元素周围
【通过浮动设置文字环绕图片效果】 - 块元素脱离文档流后,宽高被内容撑开
内联元素脱离文档流后,变成块元素
高度塌陷问题:
-
zoom:1; overflow:hidden;
-
<style> . clear{clear:both;} </style> <div class="box1"> 框 <div class="box2"> </div>方块 <div class="clear"> </div> </div>
- . clearfix:after{
content:"";
display:block;
clear:both;
}
. clearfix{
zoom:1;
}
clear 可以清除其他浮动对当前元素的影响
可选值:none 默认值 不清除浮动
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧浮动元素对当前元素的影响