A今日所学
一、盒子模型的一个重要属性---box-sizing
box-sizing:border-box;
border是老大--增加盒子的padding和border时，内容空间变小，盒子总大小不变，即盒子向内压缩空间
box-sizing:content-box;
content是老大--增加盒子的padding和border时，内容空间不变，盒子总大小变大，即盒子向外扩展空间
二、浮动---float---CK（chaos king）
浮动的现象级本质：漂浮于顶层，然后水平向左或者向右漂移，不会向上或下漂移！
可用于并排显示，而使用 float 会给兄弟元素及父元素造成影响，如何清除 float 的负面影响是重点：
如何清除 float 的负面影响是重点：如何清除 float 的负面影响是重点：
1.给下面的兄弟元素加clear:both样式属性
2.给父元素加overflow:hidden
3.经典写法：给父元素增加伪元素
.row:before{
display:table;
content:"";
}
.row:after{
display:table;
content:"";
clear:both;
}
三、定位：position
position:absolute|relative
absolute定位：在最亲近的已经有设置定位属性（position为absolute或relative或fixed时）的父元素内相对于左上角来改变位置
relative定位：相对于自身在未设置时的显示位置来改变位置
都通过left,top,right,bottom移动
四、布局方式的总结
1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)
五、实现元素的垂直水平居中
原理：先使子元素左上角定点居中，再回退子元素一半的高宽，即子元素中心居中
父元素设置parent{position:relative;}
子元素设置child{
width:aa px;
height:bb px;
position:absolute;left:50%;top:50%;
margin-left:-50%*aa px;
margin-top:-50%*bb px;
}
或者直接算子元素高宽占父元素高宽百分比，剩下高宽百分比各除2即可
六、CSS样式的几种引进方式
1.外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
2.内部样式表（位于 <head> 标签内部）
<style>p{color:pink;font-size:16px}</style>
3.内联样式（在 HTML 元素内部）
<p style=”color:pink;font-size:16px”>hello world</p>
给同一选择器设置同一样式,离元素近的样式设置方式优先级高，即3>>2>>1；
七、绝对路径和相对路径
绝对路径：从盘符开始的路径
<img src="D:/images/down.jpg" alt=""/>
相对路径：相对当前文件所在的路径
同级目录 src='down.jpg'
下一级目录 src='images/down.jpg'
上一级目录 src='../down.jpg'
八、定位的宽高继承问题
父元素给position:relative
子元素position:absolute
九、z-index的使用
1.z-index只在position为relative或absolute时起作用（也只有此时会出现重叠）；
2.兄弟元素间默认的z-index，后面的兄弟高于前面的兄弟，后来者居上；
以下两条为已经设置position为relative或absolute时：
以下两条为已经设置position为relative或absolute时：
以下两条为已经设置position为relative或absolute时：
3.z-index只对兄弟元素间起作用，z-index值大的兄弟元素空间分布位于其他兄弟元素上空，即重叠时覆盖其他兄弟元素，而对于父子元素不起作用，子元素永远显示在父元素上空；子元素永远显示在父元素上空；子元素永远显示在父元素上空；
4.使用了float属性时，元素浮于最顶层，但是z-index属性依然可以让位于下空的兄弟元素飞到具有float属性的兄弟元素上空；
B今日已掌握
一、盒子模型的一个重要属性---box-sizing
box-sizing:border-box;
border是老大--增加盒子的padding和border时，内容空间变小，盒子总大小不变，即盒子向内压缩空间
box-sizing:content-box;
content是老大--增加盒子的padding和border时，内容空间不变，盒子总大小变大，即盒子向外扩展空间
二、浮动---float---CK（chaos king）
浮动的现象级本质：漂浮于顶层，然后水平向左或者向右漂移，不会向上或下漂移！
可用于并排显示，而使用 float 会给兄弟元素及父元素造成影响，如何清除 float 的负面影响是重点：
如何清除 float 的负面影响是重点：如何清除 float 的负面影响是重点：
1.给下面的兄弟元素加clear:both样式属性
2.给父元素加overflow:hidden
3.经典写法：给父元素增加伪元素
.row:before{
display:table;
content:"";
}
.row:after{
display:table;
content:"";
clear:both;
}
三、定位：position
position:absolute|relative
absolute定位：在最亲近的已经有设置定位属性（position为absolute或relative或fixed时）的父元素内相对于左上角来改变位置
relative定位：相对于自身在未设置时的显示位置来改变位置
都通过left,top,right,bottom移动
四、布局方式的总结
1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)
五、实现元素的垂直水平居中
原理：先使子元素左上角定点居中，再回退子元素一半的高宽，即子元素中心居中
父元素设置parent{position:relative;}
子元素设置child{
width:aa px;
height:bb px;
position:absolute;left:50%;top:50%;
margin-left:-50%*aa px;
margin-top:-50%*bb px;
}
或者直接算子元素高宽占父元素高宽百分比，剩下高宽百分比各除2即可
六、CSS样式的几种引进方式
1.外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
2.内部样式表（位于 <head> 标签内部）
<style>p{color:pink;font-size:16px}</style>
3.内联样式（在 HTML 元素内部）
<p style=”color:pink;font-size:16px”>hello world</p>
给同一选择器设置同一样式,离元素近的样式设置方式优先级高，即3>>2>>1；
七、绝对路径和相对路径
绝对路径：从盘符开始的路径
<img src="D:/images/down.jpg" alt=""/>
相对路径：相对当前文件所在的路径
同级目录 src='down.jpg'
下一级目录 src='images/down.jpg'
上一级目录 src='../down.jpg'
八、定位的宽高继承问题
父元素给position:relative
子元素position:absolute
九、z-index的使用
1.z-index只在position为relative或absolute时起作用（也只有此时会出现重叠）；
2.兄弟元素间默认的z-index，后面的兄弟高于前面的兄弟，后来者居上；
以下两条为已经设置position为relative或absolute时：
以下两条为已经设置position为relative或absolute时：
以下两条为已经设置position为relative或absolute时：
3.z-index只对兄弟元素间起作用，z-index值大的兄弟元素空间分布位于其他兄弟元素上空，即重叠时覆盖其他兄弟元素，而对于父子元素不起作用，子元素永远显示在父元素上空；子元素永远显示在父元素上空；子元素永远显示在父元素上空；
4.使用了float属性时，元素浮于最顶层，但是z-index属性依然可以让位于下空的兄弟元素飞到具有float属性的兄弟元素上空；
网友评论