CSS

一、盒模型1、标准盒模型（一般使用的）2、IE盒模型3、css3指定盒子模型种类（box-sizing属性） 二、CSS选择器有哪些？哪些属性可以继承？三、优先级如何计算？四、CSS3新增伪类有那些?五、元素居中的方式？1、水平居中2、绝对定位水平垂直居中3、transform4、flex 六、CSS3有哪些新特性？七、用纯CSS创建一个三角形八、一个满屏品字布局如何设计?九、常见浏览器兼容性问题？

一、盒模型

盒模型组成：

margin(外边距) ：边框外的区域，外边距是透明的。border(边框) ：围绕在内边距和内容外的边框。padding(内边距) ：内容周围的区域，内边距是透明的。content(内容) - 盒子的内容，显示文本和图像。

1、标准盒模型（一般使用的）

在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 宽度=内容的宽度（content）+ border + padding + margin

2、IE盒模型

在IE盒模型中，width表示content+padding+border这三个部分的宽度 宽度=内容宽度（content+border+padding）+ margin

3、css3指定盒子模型种类（box-sizing属性）

box-sizing: content-box IE盒模型的组成模式，border|padding|content {element width=border+padding+content} 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。box-sizing: border-box 标准盒模型组成模式，content|border|padding {element width=content}inherit

二、CSS选择器有哪些？哪些属性可以继承？

选择器：

id选择器(#myid)类选择器(.myclassname)标签选择器(div, h1, p)相邻选择器(h1 + p)子选择器（ul > li）后代选择器（li a）通配符选择器（*）属性选择器（a[rel=”external”]）伪类选择器（a:hover, li:nth-child）

可继承的属性：

font-sizefont-familycolor

不可继承的样式：

borderpaddingmarginwidthheight

三、优先级如何计算？

优先级（就近原则）：!important > [ id > class > tag ]

元素选择符： 1 class选择符： 10 id选择符：100 元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。 如果优先级相同，则选择最后出现的样式。 继承得到的样式的优先级最低。

四、CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素p:last-of-type 选择属于其父元素的最后元素p:only-of-type 选择属于其父元素唯一的元素p:only-child 选择属于其父元素的唯一子元素p:nth-child(2) 选择属于其父元素的第二个子元素:enabled :disabled 表单控件的禁用状态。:checked 单选框或复选框被选中

五、元素居中的方式？

1、水平居中

<div style="width:200px;margin:0 auto;background-color: yellow;">水平居中</div>

在margin属性中，auto有两种作用：

占据可用的空间（take up the available space）等同于0px

由于width 相关计算依赖于其包含块，最初能确定值，故使用auto会达到居中效果。而 height 相关计算依赖于其自身内容高度，自身内容高度是不能最初确定值的，故使用auto等同于设置上外边距为0。

注意：auto不适用于浮动和内联元素，并且它本身也不能用于绝对和固定定位元素。

2、绝对定位水平垂直居中

position属性规定元素的定位类型：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit：规定应该从父元素继承 position 属性的值。

绝对定位元素的布局由元素的三个因素决定：位置（top、bottom、left、right）、元素尺寸和margin。绝对定位元素在布局上呈现自适应的特点——位置和尺寸固定，则自适应margin值；位置和margin固定，则自适应尺寸。

位置和尺寸固定,margin:auto; <div id='wrap'> <div id='item1'></div> </div> <style> #wrap { width: 500px; height: 500px; border: 1px dotted black; margin: 0 auto; position: relative; } #item1 { width: 100px; height: 100px; background-color: purple; /* 核心代码 */ position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } <style>

计算样式： 水平方向： width(wrap)=margin(item)+width(item)+padding(item)+left(item)+right(item)

由于位置设置为 top: 0;bottom: 0;left: 0;right: 0; ，尺寸固定为 width: 100px;height: 100px;，margin:auto;自适应，实际水平方向margin值为500-100 =400px,平均分配左右两侧，即为margin-left:200px;margin-right:200px;。垂直方向同理可得。可以看到在绝对定位元素中，若水平方向位置left与right值相等，那么margin-left: auto;margin-right:auto;可以让其相对于定位的祖先元素水平居中。

位置和margin固定 <div id='wrap'> <div id='item1'></div> </div> <style> #wrap { width: 500px; height: 500px; border: 1px dotted black; margin: 0 auto; position: relative; } #item1 { background-color: purple; /* 核心代码 */ position: absolute; margin: 20px; top:0; bottom: 0; left: 0; right: 0; } <style>

计算样式： 在水平方向，由于right:0;left:0;并且margin-left:20px;margin-right:20px;各项相加和等于定位的祖先元素宽度，因此width的值为460px。

left：50%；right：50% position:absolute; left:50%; // 针对元素的左侧水平居中 top:50%; // 针对元素的上侧水平居中 margin-left:-50px; //元素左移一半宽度 margin-top:-50px; //元素上移一半高度

3、transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜：

none 定义不进行转换matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵translate(x,y) 定义 2D 转换translate3d(x,y,z) 定义 3D 转换translateX(x) 定义转换，只是用 X 轴的值translateY(y) 定义转换，只是用 Y 轴的值translateZ(z) 定义 3D 转换，只是用 Z 轴的值scale(x,y) 定义 2D 缩放转换scale3d(x,y,z) 定义 3D 缩放转换scaleX(x) 通过设置 X 轴的值来定义缩放转换scaleY(y) 通过设置 Y 轴的值来定义缩放转换scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换rotate(angle) 定义 2D 旋转，在参数中规定角度rotate3d(x,y,z,angle) 定义 3D 旋转rotateX(angle) 定义沿着 X 轴的 3D 旋转rotateY(angle) 定义沿着 Y 轴的 3D 旋转rotateZ(angle) 定义沿着 Z 轴的 3D 旋转skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换skewX(angle) 定义沿着 X 轴的 2D 倾斜转换skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换perspective(n) 为 3D 转换元素定义透视视图。 <div style="position: absolute; width:300px; height:200px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: blue;">水平垂直居中</div>

left和top都是50%，在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了。

4、flex

<div style="display: flex;align-items: center;justify-content: center;"> <div style="width: 100px;height: 100px;background-color: gray;">flex 布局 </div> </div> // 设置为弹性盒子，主轴和交叉轴居中，实现水平垂直居中

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 display:flex属性：

flex-direction：容器内项目的排列方向(默认横向排列) 属性可选值的范围为row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse。

主元素的六个属性：

flex-wrap：容器内项目换行方式

属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse

flex-flow：以上两个属性的简写方式

写法属性中，将上述两种方法的值用||连接即可

justify-content：项目在主轴上的对齐方式

flex-start：在主轴上由左或者上开始排列flex-end：在主轴上由右或者下开始排列center：在主轴上居中排列space-between：在主轴上左右两端或者上下两端开始排列space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items：项目在交叉轴上如何对齐

flex-start：在交叉轴与上对齐排列flex-end：在交叉轴与下对齐排列center：在交叉轴居中排列baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐stretch ：填充满交叉轴的长度

align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：主轴上flex-end：主轴下center：主轴居中space-between：两端对齐，中间等分，子元素之间有间隙space-around：完美的平均分配stretch：元素位于容器的中心，各行向弹性盒容器的中间位置堆叠

子元素的属性：

order：项目的排列顺序。数值越小，排列越靠前，默认为0。flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink“项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

六、CSS3有哪些新特性？

RGBA和透明度background-image background-origin(content-box/padding-box/border-box) background-size background-repeatword-wrap（对长的不可分割单词换行）word-wrap：break-word文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）font-face属性：定义自己的字体圆角（边框半径）：border-radius 属性用于创建圆角边框图片：border-image: url(border.png) 30 30 round盒阴影：box-shadow: 10px 10px 5px #888888媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

七、用纯CSS创建一个三角形

width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;

1、元素的宽度、高度设为0。 然后设置边框样式。

盒子可以看作是一个矩形，从中心向四条边延伸。

transparent：用来指定全透明色彩

transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook™ Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。在CSS3中，transparent被延伸到任何一个有color值的属性上。

参考：https://blog.csdn.net/weixin_38091374/article/details/79298773

八、一个满屏品字布局如何设计?

1、真正的品字

<div class="box box1"></div> <div class="box box2"></div> <div class="box box2"></div> box{ width: 100px; height:100px; } //设置统一大小 box1 { margin:0 auto; } //上面的居中 box2 { display: inline-block; // 下面两个div设置并排 margin: 100px auto; // 居中 }

2、全屏品字

<div> <div class="box1"><div> <div class="box2"><div> <div class="box2"><div> </div> box1 { width: 100% } box2 { display: inline-block; width: 50%; }

九、常见浏览器兼容性问题？

不同浏览器的标签默认的margin和padding不一样。 解决方案： *{margin:0;padding:0;}

IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。 解决方案： hack：display:inline;将其转化为行内属性。

样式设置：渐进识别的方式，从总体中逐渐排除局部。

解决方案：

使用“9”标记，将IE浏览器从所有情况中分离出来使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别使用“-”将IE7分离出来 { background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。 解决方法:统一通过getAttribute()获取自定义属性。Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示 解决方案：加入 CSS 属性 -webkit-text-size-adjust: none;超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。 解决方法：改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug 解决方案：在display:block;后面加入display:inline;display:table;图片默认间距：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。 解决方案：使用float属性为img布局（margin可以解决，但可能出现其他问题）标签最低高度设置min-height不兼容 解决方案： 如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;} 相关推荐：https://www.cnblogs.com/angel648/p/11392262.html透明度的兼容CSS设置 .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } IE9以下浏览器不能使用opacity 解决方案： opacity: 0.5; // 在ie9/ie10/ff/chrome/opera/safari显示正常。 filter: alpha(opacity = 50); // ie8以下支持filter filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); // 加上这句话才有用 边距重叠问题：当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值； 解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出； 解决方案：父级元素设置position:relativeE6 背景闪烁的问题：链接、按钮用 CSSsprites 作为背景，在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存，每次触发 hover 的时候都会重新加载 解决：可以用 JavaScript 设置 ie6 缓存这些图片： document.execCommand("BackgroundImageCache", false, true); 让 IE7 IE8 支持 CSS3 background-size属性：由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。 html { height: 100%; } body { height: 100%; margin: 0; padding: 0; background-image: url('img/37.png'); background-repeat: no-repeat; background-size: cover; -ms-behavior: url('css/backgroundsize.min.htc'); behavior: url('css/backgroundsize.min.htc'); }