2020-09-30

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}等不同的分辨率
1920
1024 前者是屏幕宽度总共有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°/
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值