css篇哇！！
1、什么是浮动？浮动的影响？怎么清除浮动的影响？
浮动的定义：
CSS 的 Float（浮动），会使元素向左或向右移动，使元素共享一行，类似于给元素加了inline-block的作用。在w3c中这样描述浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。（通俗的说，浮动就是页面布局中是某些盒子添加了float:left 或float:right的类名或属性）
浮动的影响：
(1)父级背景不能显示；
(2)父级边框不能撑开；
(3)父级margin 设置值不能正确显示；
（4）浮动元素相当于给元素增加了一个inline-block，行元素浮动之后相当于给它转化成了块元素，此时可以给它设置宽度和高度；（ 浮动会将行内元素和行内块元素转化为块元素）
（5）浮动元素脱离了文档流，不占据页面高度；
（6）文字环绕浮动元素；
清楚浮动的几种方法：
（1）给浮动元素的父级一个高度。
（2）给浮动元素的父级加overflow:hidden。
（3）给浮动元素的兄弟元素加clear:both。
（4）使用after伪元素清除浮动。
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
//<div class="clear">额外标签法</div>
</div>
<div class="footer"></div>
</body>
2、块元素、行元素、行内块都有什么及区别？
（1）块元素：div、 p 、h1-h6、 hr、 ul、 ol、 li、 dl、 dd、 dt、 form、ul
- 支持宽高，自上而下排列
- 不受空格影响
- 一般用于其他标签的容器
- 默认宽度为100%（独占一行）。
（2）行元素：span、 i、 a 、b 、strong 、em、 sub、 sup、 u、 label、 br、 font
- 不支持宽高（宽高根据内容大小自动撑开），自左向右排列
- 受空格影响
- 不独占一行
（3）行内块：img 、 textarea、 input
- 支持宽高，自左向右排列
- 受空格影响
- 不独占一行
（4）标签之间的转换
display：inline（转为行内元素）
inline-block（转为行内块元素）
block（转为块元素）
none（隐藏 不显示）
注意：当元素浮动（float）时会转化成行内块元素特点。
3、css定位有哪些？定位的区别
css定位有四种不同类型，position值分别为：static， relative，absolute，fixed
- relative（相对定位）
相对定位的偏移参考元素是元素本身，不会使元素脱离文档流，元素的初始位置占据的空间会被保留，相对定位元素常常作为绝对定位元素的父元素，并且定位元素经常与z-index属性进行层次分级。
- absolute（绝对定位）
绝对定位元素以父辈元素中最近的定位元素为坐标元素，如果绝对定位元素的父辈没有采用定位的，那么此绝对定位元素的参考对象是html，元素会脱离文档流，就好像文档流中被删除了一样。并且定位元素经常与z-index属性进行层次分级。
- fixed (固定定位)
位移的参考坐标是可视窗口，使用fixed的元素脱离文档流。并且定位元素经常与z-index属性进行层次分级。
- static （静态定位）
默认值，元素框正常生成的，top left bottom right这几个偏移属性不会影响其静态定位的正常显示。
4、css3新特性
（1）过渡 transition：CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
（2）动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
（3）形状转换 transform:适用于2D或3D转换的元素
（4）阴影 box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
（5）边框 border-image:图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式–重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;
（6）文字 换行 语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影 语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
（7）颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);
（8）渐变
（9）弹性布局 Flex
（10）盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！
（11）Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)
（12）媒体查询： 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！
5、calc, support, media各自的含义及用法？
@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；
@media 查询，你可以针对不同的媒体类型定义不同的样式。
6、css水平、垂直居中的写法，请至少写出4种？
水平居中
行内元素: text-align： center
块级元素: margin： 0 auto
position：absolute +left：50%+ transform：translateX(-50%)
display：flex + justify-content：center
垂直居中
设置line-height 等于height
position：absolute +top：50%+ transform：translateY(-50%)
display：flex + align-items: center
display:table+display：table-cell + vertical-align：middle；
7、1rem、1em、1vh、1px各自代表的含义？
rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
8、1画一条0.5px的直线？
height: 1px;
transform: scale(0.5);
9、说一下盒模型？
盒模型的组成，由里向外content,padding,border,margin.
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
在标准的盒子模型中，width指content部分的宽度
box-sizing的使用
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box
10、画一个三角形？
.a{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /顺时针旋转90°/
}
扫一扫
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
