2020-09-30

最新推荐文章于 2021-10-09 18:06:10 发布

ぃ杨小鱼

最新推荐文章于 2021-10-09 18:06:10 发布

阅读量221

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qq_45169297/article/details/108883973

版权

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））;

（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是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh

全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。

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°/
}

ぃ杨小鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-09-30

css篇哇！！1、什么是浮动？浮动的影响？怎么清除浮动的影响？浮动的定义：　CSS 的 Float（浮动），会使元素向左或向右移动，使元素共享一行，类似于给元素加了inline-block的作用。在w3c中这样描述浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。（通俗的说，浮动就是页面布局中是某些盒子添加了float:left 或float:right的类名或属性）浮动的影响：(1
复制链接

扫一扫

2020-09-30

“相关推荐”对你有帮助么？