盒子模型
content、margin、padding、border;
（IE盒模型和标准盒模型的区别）———IE盒模型的content包括border、padding
position的static、relative、absolute、fixed它们的区别？
- 绝对定位，元素会相对于值不为 static 的第一个父元素进行定位(会一直往父级节点查找)，且它是脱离正常文档流、不占位的; fixed:同样是绝对定位，但元素会相对于浏览器窗口进行定位，而不是父节点的position (IE9以下不支持);
- relative:相对定位，元素相对于自身正常位置进行定位,属于正常文档流;
- static: position的默认值，也就是没有定位，当元素设置该属性后（ top、bottom、left、right、z-index ）等属性将失效;
- inherit:貌似没用过，查了一下文档“规定从父元素继承 position 属性的值”;
水平居中
<div class="div-demo"></div>
<style>
.div-demo {
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
<style>
.div-demo {
width:100px;
height:100px;
background-color:#06c;
margin: auto;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
</style>
<body class="container">
<div class="div-demo"></div>
<style>
html,body {
height:100%;
}
.container {
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.div-demo {
width:100px;
height:100px;
background-color:#06c;
}
</style>
</body>
三角形icon
<body class="container">
<div class="div-angles"></div>
<div class="div-angles right"></div>
<div class="div-angles bottom"></div>
<div class="div-angles left"></div>
<style>
html,body {
height:100%;
}
.container {
display: box;
display: -webkit-box;
display: flex;
display: -webkit-flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
.div-angles {
width: 0;
height: 0;
border-style: solid;
border-width:30px;
width:0px;
height:0px;
border-color: transparent transparent #06c transparent;
}
.right {
border-color: transparent transparent transparent #06c ;
}
.bottom {
border-color: #06c transparent transparent ;
}
.left {
border-color: transparent #06c transparent transparent;
}
</style>
</body>
什么是外边距合并,项目中是否有遇到过?
BFC、
:before 和 :after两伪元素，平时都是使用双冒号还是单冒号？ 有什么区别？以及它们的作用：
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成） ;
- 双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法， 比如:first-line、:first-letter、:before、:after等， 而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法;
- 想让插入的内容出现在其它内容前，使用::before，之后则使用::after；
- 在代码顺序上，::after生成的内容也比::before生成的内容靠后。 如果按堆栈视角，::after生成的内容会在::before生成的内容之上;
Chrome、Safari等浏览器，当表单提交用户选择记住密码后，下次自动填充表单的背景变成黄色，影响了视觉体验是否可以修改？
<style>
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fff;//设置成元素原本的颜色
background-image: none;
color: rgb(0, 0, 0);
}
</style>
浏览器的最小字体为12px，如果还想再小，该怎么做？
- CSS3：css3的样式transform: scale(0.7)，scale有缩放功能;
移动端的边框0.5px,你有几种方式实现？
- 伪类缩放：现在用的比较多的方式之一 :after 1px然后transform: scale(0.5);基本能满足所有场景，对于圆角的处理也很方便
网友评论