css基础
css基础
1.块级元素，行内元素，和内联元素
块级元素就是可以设置宽高，自己可以单独成为一行，别的元素无法跟他并行；
行内元素，对其设置宽高无法起作用，只能依靠自己内部元素来撑起宽高，可以和别的行内元素或者内联元素并行，无法和块级元素并行；
内联元素，可以设置宽高，也是自己不单独成一行，可以和内联元素或者行内元素成为一行；
当然这些可以用display属性来转换，display:block可以转换成块级元素，display:inline,可以转换成为行内元素，display:inline-block，可以转换成内联元素
2.边距问题
盒子模型的属性，内边距padding和外边距margin；
当这两个属性只有一个值的时候，例：padding：10px;
那么就是四个内边距都是10px;
如果有两个值，例：padding: 10px 20px;
那么就是上下内边距是10px，左右为20px；
三个值，例：padding: 10px 0 20px；那么就是上内边距是10px,左右为0，下为20px;
margin和padding他们的设置是相同的；
3.浮动（float)
在有些时候，需要对盒子进行浮动，来达到自己想要的布局。盒子浮动的时候，脱离了普通文档流。当上一个盒子浮动的时候，下一个盒子会自动跑上一个盒子的下面；下面我会将浮动和不浮动的情况截图显示
文章图片
这个是两个盒子都没有浮动，也就是普通文档流的形式
文章图片
这个是box1浮动的时候，box2不浮动的时候，box2会自动跟到box1的下方
文章图片
这个是两个盒子都浮动，如果两个盒子的宽度的总和没有超过父盒子，两个盒子会并排 既然我们讲了浮动，那么有些时候我们需要清除浮动；
清除浮动有很多种方法，说一下我常用的方法；
文章图片
伪类清除，IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 以下不截图了，第二种父盒子添加overflow:hidden；父盒子不用添加高度，会随着子盒子最高的高度走，如果父盒子添加高度没有子盒子高，那么会隐藏掉一截；第三种，父盒子跟子盒子一起浮动，第四种是，同级盒子之间的清除，用clear:both，clear:left，clear:right，按照字面意思，清除对应的浮动
4.定位(position)
【css基础】定位有3个属性，默认static(加上这个相当于4种)；第一种，relative，单独加这个对于自己本身是没有任何的影响的；第二种，absolute，子级绝对定位，父级相对定位，可以用left,right,top,bottom，来决定相对于父级的位置，第三种是fixed，这种是相对于浏览器来决定位置的也是left,right,top,bottom来决定在浏览器中的位置，如果想要清除定位（relative是不需要清除的），用static；
布局是基于浮动和定位来实现，有时间整理出布局的相关内容
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- Python基础|Python基础 - 练习1
- Java|Java基础——数组
- Java基础-高级特性-枚举实现状态机
- 营养基础学20180331(课间随笔）??
- iOS面试题--基础
- HTML基础--基本概念--跟着李南江学编程
- typeScript入门基础介绍
- c++基础概念笔记
- 集体释放