面试题12/17

1.盒模型通过box-sizing设置

标准盒模型（默认content-box）：元素的宽度和高度只包括内容（content），不包括padding，border，margin

IE盒模型(border-box)：元素的宽度和高度包括内容（content），padding，border不包括margin

2.display:none和visibility:hidden，opacity: 0;区别

display不占据空间，另外两个占据页面空间

display子元素不可见，visibility子元素如果是visible就可见

visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。

3.css画三角形

#triangle{

        width:0px;

        height:0px;

        border:100px solid;

        border-color:white white red white;

}

4.CSS选择器和优先级

选择器

id选择器（#myid）

类选择器（.myclass)

标签选择器（div）

通配选择器（*）

属性选择器

[attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value] 属性值为“value”或是以“value-”为前缀开头。

[attr^=value]属性值是以 value 开头的元素

[attr$=value]属性值是以 value 结尾的元素

[attr*=value]属性值至少包含一个 value 值的元素

复杂选择器

后代选择器：用空格隔开（子 孙，重孙...）

ol li a {
      color: red;
    }
<ol>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li><a href="#">我是孙子</a></li>
  </ol>

子代选择器(只包括子，不包含孙...):用div>a

.nav>a{
    color:blue;
} 
<div class="nav">
    <a href="#">我是儿子</a>
    <p>
      <a href="#">我是孙子</a>
    </p>
  </div>

并集选择器，可以选择多组标签，同时为他们定义相同的样式 （逗号隔开）

div,p,span{
    color:red;
}  
<div>熊大</div>
  <p>熊二</p>
  <span>光头强</span>

伪类选择器（用：）

a:link // 选择未被访问过的链接

a:visited //已经被访问过的链接

a:hover //选择鼠标指针位于其上的链接

a:active //鼠标按下未弹起的链接

a:focus //获取焦点的表单元素

a:first-child //选择是父元素的第一个子元素的a

a::nth-child(n) //选取父级元素的第n个子元素，n前面的子元素可以不是a

伪元素选择器::(::before、::after、::first-letter、::first-line和::selection)

::before在元素内容之前插入内容（必须有content属性）

::after元素内容之后插入内容（必须有content属性）

.class1 .q::before { content: '问题：' }

::first-letter主要用于为文本的首字母添加特殊样式

::first-line 伪元素用于向文本的首行添加特殊样式

::selection 伪元素匹配用户选择的元素部分

相邻兄弟选择器：选择紧接在另一个元素后的元素，而且二者有相同的父元素

h1 + p {margin-top:50px;}//选择紧跟在h1后面的p

兄弟选择器 

h1~p{margin-top:50px;} //选择h1后的所有p

优先级

!important>内联>ID>类,伪类,属性>标签,伪元素>其他* 空格+>~

继承属性

字体系列

font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体

文本属性

text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

元素可见性：visibility

光标属性：

cursor：箭头可以变成需要的形状

 a标签的字体颜色不能被继承

h1-h6字体大小不能被继承

无继承属性

• display
• 文本属性：vertical-align、text-decoration
• 盒子模型的属性：宽度、高度、内外边距、边框等
• 背景属性：背景图片、颜色、位置等
• 定位属性：浮动、清除浮动、定位position等
• 生成内容属性：content、counter-reset、counter-increment
• 轮廓样式属性：outline-style、outline-width、outline-color、outline
• 页面样式属性：size、page-break-before、page-break-after

5.垂直水平居中

行内元素

.container{ text-align: center; //水平居中

height: 50px;

background: green;

line-height: 50px;//垂直居中

}

块级元素

a.绝对定位calc设置left top(100%-width)/2（已知宽高）

.calc{ position: absolute;

width: 200px;

height: 200px;

left:calc((100% - 200px)/2);

top:calc((100% - 200px)/2);

 }

b.绝对定位margin:auto//（已知宽高）

.div { width:200px;

height:200px;

position:absolute;

margin: auto;

}

c.绝对定位（margin-left margin-right）（已知宽高）

.div { position:absolute;

top:50%;

left:50%;

width:200px;

height: 200px;

margin-top: -100px;

margin-left: -100px;

}

d.绝对定位(translate(-50%,50%)不用知道宽高

e.flex布局（父元素需设置高度，aligh-items:center,justify-content:center)

.container { display: flex;

align-items: center;/* 垂直居中 */

justify-content: center; /* 水平居中 */

height:100vh; /* 父元素高度需设置 */ }