小知识点：body与页面四周有个天生的8像素距离，所以里面的标签不写位置的时候会看到与边界有缝隙，想要无缝，设置*{margin:0;}即可
一、盒模型-内外边距（padding、margin）、边框border、宽width、高height
二、层模型
1、position:absolute
脱离原来位置进行定位，原来的层级就不保留它原来的位置了
相对于最近的有定位的父级进行定位，如果没有那么相对于文档进行定位
2、relative:保留原来位置进行定位
相对于原来的位置定位
对元素定位：用relative做参照物，absolute定位
3、fixed:广告定位，不随着页面滚动而滚动
div{
/*相对于文档居中-如果是fixed就可以实现窗口居中定位*/
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
background-color: red;
margin-left: -50px;
margin-top: -50px;
}
三、两个经典的bug
1、父子级都设置垂直方向的margin的时候，父子元素是结合到一起的，只有当子级元素margin大于父级的时候才会有效果，并且带着父元素一起移动，就是说无论你怎么设margin-top，子元素与父元素top之间也不会有距离
margin塌陷
解决办法
1）父级加个边框：border:1px solid black;
确实能解决问题，但一般不这么做
2）bfc(block format context)块级格式化上下文
css认为每一个标签都是一个盒子，每个盒子有自己的渲染规则，bfc可以改变某些盒子的渲染规则
如何触发一个盒子的bfc:
position:absolute;
display:inline-block;
float:left/right;//浮动布局
overflow:hidden://溢出部分隐藏
虽然能解决问题，但是会带来一些新的影响，实际开发中根据需要自行选择
margin合并
同样也可以用bfc来解决这个问题
一般这种问题可以不解决，设置某一个的margin即可
3、float:left/right（可实现图文混排环绕）
如果所有元素都是浮动，可以让元素从左或从右站队
如果只是某一个元素是浮动的，它就产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们（块级元素会占有他们原来的位置，覆盖，类似层模型）
产生了bfc的元素和文本类型属性的元素（inline）以及文本都能看到浮动元素（也就是不会覆盖）
如果子元素都是浮动元素，父级是块元素，会造成块元素包不住浮动元素的情况
这种会改变原来的页面结构，不建议
2）另一个知识：每一个标签都有伪元素，有前后两个，使用双冒号可以用css改变它的样式，可以跟正常元素一样使用，只不过平常看不见伪元素天生都是行级元素
span::before{
content:"前伪元素";
clear:both;/*块级元素使用才有效果*/
display:block;
}
span::after{
content:"后伪元素";
}
3）只要父级元素触发了bfc、或者是文本类型、浮动类型都可以包住浮动元素
凡是设置为position:abolote;float:left/right;的元素，系统会从内部把它转换成inline-block,宽高就不由内容决定了，可自行设置
四、css补充知识
1、文字溢出容器，要显示点点点
单行文本溢出处理
多行做文字截断即可
2、网络不好时的处理
还可以利用padding不能显示文字的特性来处理
<span>行级元素只能嵌套行级元素
块级元素能嵌套任何元素
<p>标签虽然是块级元素，但是不允许嵌套<div>,否则会被拆分成两个<p>标签
<a>标签不能嵌套<a>标签
span{
display:inline-block;
width:100px;
height:100px;
background-color:red;
font-size:50px;
vertical-align:middle;/*中线对齐，也可以写数值更改对齐线*/
}
4、三大特性
4.1继承性
4.2层叠性
4.3优先级
网友评论