盒模型
1.标准盒模型
盒子的宽度=margin+padding+border+width
2.ie的盒模型
盒子的宽度=margin+width
所以在css3中引入了box-sizing属性，允许改变盒模型计算宽高的方式。
定位
文档流有三种定位机制，一种是标准文档流，从上到下，从左到右；第二种float，第三种position
position
1.relative
设置为相对定位的元素本身的位置是保留的，相对它自身偏移，可以为其设置left等值进行偏移
2.absolute
设置为绝对定位的元素的位置不保留，被其他元素所占据，相对他的对父级进行定位的元素偏移。
3.fixed
类似于absolute,相对浏览器试图窗口进行偏移
4.z-index
当position属性值为relative或absolute或fixed的元素上有效，他可以设置元素的层叠顺序，数值越大的层级越往上。
float
设置为float的元素会向右或者向左偏移，直到遇到相邻元素或者父元素的边框。
常见的网页布局
flex布局
a链接的状态
link：超链接的默认样式
visited：已经访问过的样式
hover：悬停状态的样式
active：鼠标按下去那一瞬间的链接样式
在使用他们的过程中，一定要按着四个状态的先后过程性写：
a:link->a:hover->a:active->a:visited
被点击访问过的超链接样式不再具有hover和active了。解决方式是改变css属性的顺序。（linked->visited->hover->active）LV哈
css的hack
针对不同的浏览器写的不同的css的code的过程，就是css的
background-color: blue;
background-color: red\9; /* all ie */
background-color: yellow\0; /* ie8 */
+background-color: pink; /* ie7 */
_background-color: orange; /* ie6 */
:root #test{
background: purple\9; /* ie9 */
}
行内元素和块级元素的区别？
1.块级元素：独占一行，width/height/padding/margin都可以控控制。h1-h6,div,ul,li,p
2.内联元素：宽高不可设置。但是adding和margin的left和right是可以设置的.span,em,strong,i
3.inline-block元素：可以设置宽高，但是不会自动换行。input,img,textera,label
rgba()和opacity的透明效果区别
opacity作用于元素，以及元素内的所有内容的透明度，但是rgba只作用于元素的颜色和背景色。
px和em的区别
px和em都是长度单位，区别是px是固定的，em的值不是固定的，并且em会继承父级元素的字体大小。
描述一个“reset”的css文件并使用它，知道normalize.css吗？你了解他们的不同地方吗？
不同的浏览器对一些元素有不同的默认样式。如果不处理，在不同浏览器下面会有不同的风险。
scss/less
他们都是css的预处理器，最后还是将语法编译成css.
使用原因：结构清晰，便于扩展。完全兼容css代码，可以方便的应用到项目中。
display：hidden和visiblity：hidden的区别？
display：隐藏元素但是不挤占该元素原来的空间。
visiblity：隐藏元素并且挤占该元素原来的空间
css的content属性
他主要用域before/after的伪类元素上，用来插入生成内容。
常见的选择器
1.元素选择器
2.id选择器
3.class选择器
优先级 id>class>元素
实现水平竖直居中方式
方法一：
.box {
width: 300px;
height: 200px;
margin: 0 auto;
position: relative;
background: #ccc;
}
.ant{
position: absolute;
top:50%;
left: 50%;
background-color: red;
width:100px;
height:80px;
margin-left:-50px;
margin-top:-40px;
}
方法二：
<style type="text/css">
#box {
width: 300px;
height: 200px;
margin: 0px auto;
background-color: #ccc;
position: relative;
}
#ant {
position: absolute;
background-color: red;
width: 100px;
height: 80px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<div id="box">
<div id="ant"></div>
</div>
</body>
方法三：
.box1{
height: 200px;
width: 300px;
margin: 0 auto;
display: flex;
border: 1px solid red;
justify-content:center;
}
.ant1{
height: 100px;
width: 100px;
border: 1px solid black;
}
方法四：
.box2{
width: 300px;
height: 300px;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.ant2{
margin: 0 auto;
width: 100px;
height: 100px;
}
background
background属性由如下几个属性组成：
（1）.background-color
（2）.background-position
（3）.background-size（CSS3）
（4）.background-repeat
（5）.background-origin（CSS3）
（6）.background-clip（CSS3）
（7）.background-attachment:背景图片是否随着页面的滚动而滚动
（8）.background-image
注意点：背景图片会覆盖在背景图片上面，.url与后面的小括号之间不能存在空格，否则会报错
text-decoration
给文本添加中划线、下划线或者上划线等。
vertical-align
vertical-align用于对齐[行内级元素]:table-cell/inline-block
外边距合并
1.同级的外边距合并：
外边距产生的条件：
（1）.水平方位不可能产生外边距合并现象，垂直方位有可能出现。
（2）.绝对定位（absolute/fixed）元素或者浮动元素不会出现外边距合并。
（3）.相邻的外边距之间内容为空，这里的内容是指边框和内边距等。
2.父子外边距合并
父子外边距合并现象，外边距不会作用与父元素，而是作用于父元素之外的元素。但是这个外边距合并现象还需要附加一个条件，就是不能触发父元素的BFC格式化上下文。
浮动元素
浮动的元素的display自动转化为inline-block
元素脱离文档流，不占据元素的空间，但是依然会占据文档流中文本的空间。
浮动带来的问题
1.父元素塌陷；
2.对于兄弟元素而言的话，要分是不是块级元素，如果是，那么此元素会尽可能的与浮动元素处于同一行，例如浮动元素覆盖此块级元素。如果是非块级元素，那么此元素会尽可能的会围绕这个浮动元素。
清除浮动
1.清除浮动元素对兄弟元素的影响
对非浮动元素加上clear:both
缺点：不能消除当前元素内部的浮动元素所产生的影响。
2.解决父元素塌陷
这种方法并不推荐，因为会增加额外的元素
<div id="box">
<div id="inner"></div>
<div style="clear:both;"></div>
</div>
3.利用伪类(对父元素添加类)
.clearfix{*zoom:1;}
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
伪类选择器
1.nth-child:可以匹配指定类型与位置的元素
这个例子可以让li标签改变颜色。但是第三个元素不是li，所以无法匹配
<style>
li:nth-child(2){
color: red;
}
li:nth-child(3){
color: red;
}
</style>
<body>
<ul>
<li>122</li>
<li>333</li>
<p>4444</p>
<li>5555</li>
</ul>
</body>
网友评论