CSS知识点

baipeiying
160 阅读6分钟

一、css盒模型

css中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
border-sizing: border-box, inherit, content-box
标准盒子模型： 左右border+左右padding+contentwidth
IE盒子模型border-box: width = content+padding+border 元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
inherit: 从父类继承box-sizing的值

二、前端一像素问题（画一条0.5px的线）

  • transform: scaleY（0.5） 使用伪元素设置1px的边框，然后对边框进行缩放(s caleY)
    实现思路：
 1、设定目标元素的参考位置
 2、给目标元素添加一个伪元素before或者after，并设置绝对定位
 3、给伪元素添加1px的边框
 4、用box-sizing: border-box 属性把边框都包进宽和高里面
 5、宽和高设置为 200%
 6、整个盒子模型缩小为0.5
 7、调整盒子模型的位置，以左上角为基准 transform-origin: 0 0;
  • border-image 设置图片的边框

三、4.transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，
而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

transition 规定动画的名字  规定完成过渡效果需要多少秒或毫秒  规定速度效果  定义过渡效果何时开始
animation  指定要绑定到选择器的关键帧的名称

四、不定宽高的DIV居中

1.使用flex  在父盒子设置display: flex; justify-content: center;align-items: center
2.使用css的transform  	父盒子设置:display:relative
			Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;
3.display：table-cell   父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
			Div 设置: display:inline-block;vertical-align:middle;

五、浮动 juejin.cn/post/684490…

特性：浮动元素影响的不仅是自己，他会影响周围元素对其进行环绕
  为什么要清除浮动？（解决父元素高度坍陷问题）
一个块级元素如果没有设置height,其height由子元素撑开，对子元素使用了浮动之后，子元素就会脱离文档流
也就是说，父及元素中没有内容可以撑开其高度，这样父级元素height就会被忽略。这就是所谓的高度坍塌
  如何清除浮动
1.给父级元素定义高度 2.让父级元素也浮动 3.父级定义display:table 4.父元素设置overflow:hidden 
clearfix:使用内容生成的方式清除浮动
	.clearfix:after {  // :after选择器向选定的元素之后插入内容
		content:""; // 生成内容为空
		display: block; // 块级元素显示
		clear:both; // 清除前面元素
		}
不破坏文档流，没有副作用

六、position

值：relative,static（默认值）,absolute,sticky,fixed
absolute会根据上一级position的值不为static进行定位，如果向上一直没有找到position，则相对整个body进行定位
fixe相对的是视图的窗口，或者frame框架（setFram的子框架，一种html标签）

七、css选择器分类：

   基本的：
	1.id选择器（id="name"）
	2.类选择器（class="head"）
	3.标签选择器（body, div, ul, li）
	4.全局选择器（*）
   复杂的：
	1.组合选择器（.head .head_logo）
	2.后代选择器 （#head .nav ul li 从父集到子孙集）
	3.群组选择器 (div, span, img {color:Red} 具有相同样式的标签分组显示)
	4.继承选择器
	5.伪类选择器（链接样式，a元素的伪类）
	6.子选择器（div>p, 带大于号>）
	7.CSS相邻相邻兄弟选择器（h1+p, 带加号+）

八、CSS优先级

不同级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
	1.属性后面加!import 会覆盖页面内任何位置定义的元素样式
	2.作为style属性写在元素内的样式
	3.id选择器
	4.类选择器
	5.标签选择器
	6.通配符选择器（*）
	7.浏览器自定义或继承
同一级别：后写的会覆盖先写的

css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素

九、

	对于行内元素，font-size指定 他们的content area的高度，由于inline box = 上下的helf-leading，如果leading为0，在这种情况下，font-size指定了inline box的高度
	font-size 指的是字体的高度，但是不能指定每个字形给定字体高度下的实际高度，导致了span的高度大于line-height

十、z-index属性 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

		position的值的属性大于z-index   Z-index 仅能在定位元素上奏效（例如 position:absolute;）
		元素可拥有负的 z-index 属性值

十一、块元素和行内元素

1.块元素会独占一行，默认情况下，其宽度自动填满父元素宽度 行元素不会占据一行，会一直排在一行，直到一行排不下
2.行元素没有宽度和高度属性，块级元素即使设置了宽度，还是会独占一行
块级元素： div  p forn ul li h1-h6
行内元素：span img input a i

十二、如何画一个三角形： 设置宽高，然后用border去画

		   width: 0;
    		   height: 0;
    		   border-bottom: 100px solid cyan;
    		   border-left: 50px solid transparent;
    		   border-right: 50px solid transparent;

十三、伪类：link 表示链接正常情况下（即页面加载完成时）显示的颜色

    hover:表示鼠标悬停时显示的颜色
    visited:链接被点击时显示的位置
    focus：元素获得光标焦点时的颜色
    active: 元素处于激活状态
link -> visited -> hover -> focus -> active

十四、雪碧图：多个图片集成在一个图片中的图

	使用雪碧图可以减少网络请求的次数，加快允许的速度
	通过background-position，去定位图片在屏幕的哪个位置

十五、使元素消失的方法

visibility:hidden、display:none、z-index=-1、opacity：0
1.opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
2.visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3.display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉
avatar
文章
阅读
粉丝