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, aposition: 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(中文汉字)要想让浏览器认识英文单词, 加上分隔符
(也就是一个空格)即可.
必知必会的CSS基础
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
