1.css是什么
css的英文名称是 C
ascading
S
tyle
S
heets,意思是层叠样式表。它定义了html元素如何显示,也就是html文件的样式。
2.如何使用css
我们可以通过一下四种方式在html文件当中使用css。
(1)直接通过标签的style属性来添加样式,也就是我们平时经常说的行内样式。
(2)在头部通过内部样式表添加样式。
(3)通过标签引入样式。
(4)通过@import导入样式。
2.常用的css选择器有哪些
常用的css选择器有以下几种
(1)id选择器
(2)类选择器
(3)标签选择器
(4)通配符选择器
(5)相邻选择器
(6)子选择器
(7)后代选择器
(8)属性选择器
(9)伪类选择器
3.css样式优先级
(1)最近的祖先样式比其他祖先样式优先级高,也就是说同样的css样式代码,后面的也就是更靠近的样式代码,会覆盖掉前面的代码。
(2)"直接样式"比"祖先样式"优先级高,也就是说继承过来的样式是最低级的,任何其他的样式都能覆盖掉它。
(3)内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
(4)!important 拥有最高优先级,我个人关于这个的理解是加上!important之后,相当于这一条的层级提升到了内联样式这一级别。
4.css的盒子模型
css有标准盒子模型和IE盒子模型两种,其中的IE盒模型也就是我们平时常说的怪异盒模型。
(1)两种盒模型的概念
标准盒子模型:内容content + 填充padding + 边框border + 边界margin—— 宽高指的是 content 的宽高
IE盒子模型:内容(content+padding+border)+ 边界margin—— 宽高指的是 content+padding+border 部分的宽高
(2)设置方法
标准盒模型:box-sizing:content-box
IE盒模型:box-sizing:border-box
5.css外边距margin重叠现象
在标准文档流中,两个紧挨着的盒子的margin并不会叠加,而是会重叠。两个盒子的间距取决于margin更大的盒子的margin。
6.css高度塌陷问题
在标准文档流中,父元素的高度是由子元素撑起来的,有时当我们给子元素设置浮动的时候,就会产生高度塌陷的问题。
高度塌陷指的是当子元素无法撑起父元素的高度的时候,父元素高度塌陷,也就是高度变为0。此时父元素底部的那些盒子就会向上移动,子元素与这些盒子就会重叠,导致页面布局混乱。
解决方法:(1)定死父元素的高度,这样的话即使子元素设置为浮动,父元素也会有着固定的高度。但是这样做的话父元素就将无法自适应子元素的高度。
(2)开启块级格式化上下文,也就是BFC。
(3)设置一个高度与子元素相等的盒子,在子元素浮动后,无法撑起父元素高度的时候代替子元素撑起来。
7.BFC
BFC是块级格式化上下文,开启了BFC的元素,它的子元素无法影响到外界,我们可以用它解决margin重叠,以及清除浮动等。
(1)如何生成BFC
body 根元素
浮动元素:float 除 none 以外的值
绝对定位元素:position (absolute、fixed)
display : inline-block、table-cells、flex
overflow : hidden、auto、scroll
满足以上任意一条即可生成BFC
(2)BFC的原理
BFC 内部的子元素,在垂直方向,边距会发生重叠。
BFC在页面中是独立的容器,外面的元素不会影响里面的元素,反之亦然。
BFC区域不与旁边的float box区域重叠。就是说可以用来清除浮动带来的影响。
计算BFC的高度时,浮动的子元素也参与计算。
8.
display:none 与 visibility:hidden 的区别
display:none,该元素不占据任何空间,在文档渲染时,该元素如同不存在。 visibility:hidden,该元素空间依旧存在.
display:none,会触发回流,进行渲染。 visibility:hidden,只会触发重绘,因为没有发现位置变化,不进行渲染。
display:none,display不是继承属性,元素及其子元素都会消失。 visibility:hidden,visibility是继承属性,若子元素使用 visibility:visible,则不继承,这个子孙元素又会显现出来。
9.Position
static:默认值。没有定位,元素出现在正常的文档流中
relative:生成相对定位的元素,相对于其正常位置进行定位,不脱离文档流
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位
fixed:生成固定定位的元素,相对于浏览器窗口进行定位。
inherit:规定应该从父元素继承 position 属性的值
sticky:粘性定位,它主要用在对 scroll 事件的监听上
10.如何让div水平居中
(1)宽度固定的时候,需要谁居中,就给谁设置margin:0 auto;
(2)宽度不定,默认子元素宽度与父元素宽度一样,给子元素设置display:inline-block;或display:inline,将其转换成行内块级元素/行内元素,给父元素设置text-align:center
(3) 子元素设置绝对定位,父元素设置相对定位,left:50%,margin-left:-子元素的宽度的一半(宽度定),或者transform:translateX(-50%)(宽度不定)
(4) 父元素设置display:flex;justify-content:center;
11.如何让div垂直居中
高度和宽度固定
(1)子元素设置绝对定位,父元素设置相对定位,子元素设置left:0;right:0;top:0;bottom:0;margin:auto;
(2)子元素设置绝对定位,父元素设置相对定位,子元素设置top:50%;left:50%(左上角垂直居中),margin-top:-子元素高的一半,margin-left:-子元素宽的一半
高度和宽度不定
(1)子元素设置绝对定位,父元素设置相对定位,子元素设置top:50%;left:50%(左上角垂直居中),transform:translate(-50%,-50%)
(2)父元素定义display:flex;justify-content:center;align-items:center;