十一、盒子模型
1、盒子模型的介绍
content 内容区域(蓝色)
padding 内边距区域(绿色)
border 边框区域(黄色)
margin 外边距区域(橙色)
2、内容区域的宽度和高度
width
height
3、边框 border
①例如 border:1px solid red;(不分先后border-width border-style border-color)
solid 实线
dashed 虚线
dotted 点线
②单方向 border-方位
注:border会撑大盒子
4、内边距 padding
写法:顺时针
上 右 下 左
上 左右 下
上下 左右
上下左右
注意:padding会撑大盒子
应用:例如导航栏的文字有多有少,a标签不用设置width,设置padding即可
5、CSS3盒子模型(自动内减)
给盒子设置属性box-sizing:border-box;
拓展:
清楚默认的内外边距
①通配符,效率较低
* {
margin:0;
padding:0;
}
②并集选择器,性能更好
选择器1,选择器2,···,选择器n {
margin:0;
padding:0;
}
版心居中 margin:0 auto;
6、外边距折叠现象
①合并现象:垂直布局的块级元素,上下的margin会合并
②塌陷现象:互相嵌套的块级元素,子元素的margin-top会作用到父元素上
解决办法:
a.给父元素设置border或padding-top,分隔父子元素的margin-top
b.给父元素设置overflow:hidden
c.转换成行内块元素(对子元素操作)
d.设置浮动
7、行内元素的垂直内外边距
若想通过margin、padding改变行内标签的垂直位置,无法生效
解决办法:line-height
十二、CSS浮动
1、结构伪类选择器
根据元素在HTML的结构关系中查找元素
减少对类的依赖,保持代码整洁
由于查找某父级选择器中的子元素
E:first-child {} 匹配父元素中第一个子元素,并且是E元素
E:last-child {} 最后一个
E:nth-child(n) {} 第n个
E:nth-last-child(n) {} 倒数第n个
n可以填公式(这里的n从0开始)
偶数:2n、even
奇数:2n-1、2n+1、odd
找到前5个:-n+5
找到从第5个往后:n+5
2、伪元素
一段页面中的非主体内容可以使用伪元素
区别:
元素:HTML设置的标签
伪元素:由CSS模拟出的标签效果
种类:
::before 在父元素内容的最前添加一个伪元素
::after 最后
注意:
必须设置content属性才能生效
伪元素默认是行内元素
3、标准流
标签的默认排列规则
常见标准流排班规则:
块级元素:从上到下,垂直布局,独占一行
行内元素或行内块元素:从左往右,水平布局,空间不够自动折行
4、浮动
①作用:图文环绕、网页布局
②代码 float:left/right;
③特点:
a.浮动元素会脱离标准流(脱标),在标准流中不占位置
b.浮动元素比标准流高半个级别,可以覆盖标准流中的元素(字不行)
c.浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
d.浮动的标签,顶对齐,一行可以显示多个,可以设置宽高
拓展
CSS书写顺序:
1、浮动 display
2、盒子模型 margin、border、padding 宽度高度背景色
3、文字样式
注意:做主导航要li套a
5、清除浮动
①清除浮动带来的影响
- 现象:若子元素浮动了,此时子元素不能撑开标准流的块级父元素
- 原因:子元素浮动后脱标,不占位置
- 目的:需要父元素有高度,从而不影响其他网页元素的布局
②清除浮动的方法
a.直接设置父元素高度
但有些布局不能规定父元素高度,eg新闻列表
b.额外标签法
- 操作:给父元素内容的最后添加一个块级元素,给添加的块级元素设置clean:both
- 缺点:结构变复杂
c.单伪元素清除法
- 基本写法
.cleanfix::after {
content:'' ;
display:block ;
clean:both ;
}
- 补充写法
.cleanfix::after {
content:'' ;
display:block ;
clean:both ;
<!-- 兼容低版本 -->
height:0 ;
visibility:hidden ;
}
优点:项目中使用,直接给标签加类即可清除浮动
d.双伪元素清除法
写法
<!-- 解决外边距的塌陷问题 -->
.cleanfix::before, .cleanfix::after {
content:'' ;
display:table ;
}
.cleanfix::after {
clean:both ;
}
优点:项目中使用,直接给标签加类即可清除浮动
e.给父元素设置 overflow:hidden