
CSS
css基本知识梳理
低眉
一只勤勤恳恳的前端狗。
展开
-
css选择器
css选择器以及示例id选择器class选选择器标签选择器 a6后代选择器【以p元素为例】 (div p)子代选择器(div>p)伪类选择器(:hover/:link/:active等)伪元素选择器 ::after ::before【伪元素时行级元素】群组选择器 div,p属性选择器 div[id]后面紧邻的兄弟元素(div+p)后面所有的兄弟元素(div~p)...原创 2019-09-22 23:30:04 · 344 阅读 · 0 评论 -
CSS盒模型
一般来说提到盒模型就是标准盒模型跟IE浏览器下的怪异盒模型(也叫IE盒模型)ie6以及ie6以下的浏览器 不写doctype 就会表现成怪异。标准模型中,盒模型的宽高只是内容(content)的宽高,而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。标准盒模型与怪异转化:box-sizing:content-box(标准) borde...原创 2019-09-23 00:00:42 · 94 阅读 · 0 评论 -
css浮动/BFC
float:分为左浮右浮 left/right浮动的元素会脱离文档流 空间释放 宽高由内容撑开子元素浮动会导致父元素高度塌陷如何解决父元素的高度塌陷问题给父元素加高度;clear属性的空标签:在浮动元素后添加一个空标签,并且在CSS中设置.clear{clear:both;}clear:both是css中清楚全部样式的意思,即可清理浮动。原理:添加一个空标签,利用CSS提高的...原创 2019-09-22 23:55:32 · 204 阅读 · 0 评论 -
css定位
absolute 绝对定位 定位后空间释放(使元素脱离文档流,不占用空间) 相对于最近已定位的祖先元素relative 相对定位 定位后空间不释放 相对于自己的初始位置定位fixed 固定定位 定位后空间释放 相对于浏览器的可视窗口static 默认的定位sticky 黏性定位 (可以用来做吸顶效果)...原创 2019-09-22 23:37:54 · 124 阅读 · 0 评论 -
css中的优先级
!important 优先级最高style 可以近似看作1000id 可以近似看作100class 可以近似看作10标签 可以近似看作1多用几次就有感觉了 熟能生巧嗷原创 2019-09-22 23:33:34 · 156 阅读 · 0 评论 -
CSS外边距合并的解决方式
父元素加上 overflow:hidden;父元素加上边框 border:1px solid transparent父元素或子元素 浮动或者定位原创 2019-09-23 00:02:24 · 465 阅读 · 0 评论 -
CSS居中(水平垂直)显示
1)如果有高度的话,margin: 0,auto就可以2)父元素设置为:position: relative; 子元素设置为:position: absolute; 距上50%,据左50%,然后减去元素自身宽度的距离就可以实现3)如果元素未知宽度,只需将上面例子中的margin: -50px 0 0 -50px;替换为:transform: translate(-50%,-50%);4)fl...原创 2019-09-23 00:12:12 · 108 阅读 · 0 评论 -
css hack ie6-8下hack是什么
css hack在不同浏览器下的不同ie6-8下hack是什么针对不同的浏览器写不同的CSS code的过程,就是CSS hack。#test{ width:300px; height:300px; background-color:blue; /*firefox*/ background-color:red\9; /*all...原创 2019-09-26 13:47:22 · 264 阅读 · 0 评论 -
css/sass/scss/less认知
css(cascadiing style sheets层叠样式表)SASS是用Ruby语言写的,两者的语法没有关系,使用时先安装Ruby,再安装SASS。Scss 是sass 3引入的新语法,其语法完全兼容css3,并且继承了sassLess是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性,使CSS更易维护和扩展。Less可以运行在Node或者浏览器端。后缀名....原创 2019-09-30 15:34:58 · 1646 阅读 · 0 评论