必知必会的CSS基础

body默认有8px的margin

伪元素天生就存在, 默认为display: inline, 且必须有content属性

设置了position: absolute, float: left/right的元素, 会默认把这个元素转化为inline-block元素

行级元素(display: inline)不能设置宽高, 大小由内容决定

行块级元素(display: inline-block)大小由内容决定, 且能设置宽高

块级元素(display: block)独占一行, 且能设置宽高

一个img标签, 如果下边有文字, 则文字会在图片的底部对齐, 如果想让文字在图片的顶部对齐, 需要设置img元素为float: left

去掉a标签的默认下划线: text-decoration: none

权重最低的选择器是通配符选择器: *{...}

文字加粗: font-weight: blod, 标准字体: font-family: arial

常用的行级元素: span, a

position: absolute: 绝对定位, 相对于第一个不为static(默认值, 没有定位)的父元素定位, 脱离文档流.

position: relative: 相对定位, 相对于自身正常的位置进行定位

position: fixed: 固定定位, 相对于浏览器窗口进行定位

margin塌陷问题: 在父子元素中, 如果父元素设置了margin-top: 10px, 当子元素的margin-top小于10px时, 不会生效. 当子元素的margin-top大于10px时, 会导致父子元素一起在垂直方向移动, 且移动距离为margin-top大的那个距离.

用BFC(block format context)解决margin塌陷bug: 浏览器会把每个html元素当成一个盒子, 每个盒子都有一套特定的渲染规则, 但是我们可以给元素设置触发BFC, 改变该元素的规则.
如何触发一个盒子的BFC ------ position: absolute, display: inline-block, float: left/right, overflow: hidden, 给父级元素触发BFC, 就能解决margin塌陷问题啦.

margin合并问题: 在兄弟元素之间, 在垂直方向上, margin-bottom和margin-top会造成合并, 取最大的margin距离.
解决方案: 给任意一个兄弟元素外层包裹一个div, 设置为overflow: hidden即可. 但是最好是根据他的特性增加高度即可.

看到的页面的空格效果, 是html代码换行造成的.

浮动元素也可以设置margin和padding

定位元素也可以设置margin和padding

浮动元素产生了浮动流, 形成了分层, 但是是半脱离文档流, 而不是完全脱离了文档流. 块级元素看不到浮动元素, 但是产生了BFC的元素, 文本类属性(inline)的元素, img元素, 以及文本都能看到浮动元素, 也就是说不会被浮动元素盖住

html标签上的lang属性的作用是, 告诉搜索引擎爬虫我们的网页是关于什么内容的, en(英文), zh(中文汉字)

要想让浏览器认识英文单词, 加上分隔符(也就是一个空格)即可.