CSS总结

最新推荐文章于 2020-04-06 17:51:08 发布

朦dada

最新推荐文章于 2020-04-06 17:51:08 发布

阅读量340

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/mengstudents/article/details/78660412

版权

HTML+CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、CSS中块级元素、行内元素、空元素分别有哪些？二者的区别是什么？

块级元素：div dl dd dt h1~h6 header footer form ul ol li hr p
行内元素：a span em strong i b select input button textarea
空元素：br img input hr meta link
区别：- 块级元素会独占一行，宽度默认填满其父元素的宽度；行内元素不会独占一行，相邻的行内元素会排在同一行里
- 块级元素可以设置width和height属性；行内元素设置宽高无效，其宽高值由其内容决定
- 块级元素和行内元素可以通过display属性来转换：display:block;可以将行内元素转换为块级元素；display:inline;可以将块级元素转换为行内元素

2、CSS的浮动特性会给父元素带来什么后果？怎么处理这个结果？

后果：子元素设置浮动之后，父元素的高度值会塌陷
清除浮动的方式：
a、在浮动元素后边添加一个空标签来清除浮动：<div style="float:left;"><div style="clear:all;"></div>
b、给父级元素添加overflow:hidden;属性，需要添加zoom:1;来触发IE浏览器的hasLayout
c、定义一个清除浮动的类，给父元素添加该类：
.clear{zoom:1;//兼容IE6}
.clear:after{display:block; content:""; clear:both; height:0;}

3、CSS引入方式有哪些？link和@import的区别是什么？

1> CSS的引入方式有4种：
     a、内联样式：<div style="coloe:#fff;"></div>；
     b、通过style标签引入：<style>div{color:#fff;}</style>；
     c、通过link标签引入：<link rel="stylesheet" type="text/css" href="style.css">；
     d、通过@import引入：@import url(style.css)；
2> link和@import的区别：
     a、link为XHTML标签，@import由CSS提供；
     b、页面加载时，会同时加载由link引入的CSS文件；而@import引入的CSS文件，只有在页面加载完成之后才会加载；
     c、link无兼容问题，@import在低版本浏览器中不支持；
     d、link引入的CSS样式可以通过js操作来改变，而@import引入的CSS样式不可以；

4、null与undefined的区别是什么？

1> null：
     a、一个表示"无"的对象，Number(null)转换结果为0；
     b、null表示尚未存在的对象；
     c、null表示没有对象，即该处不该有值；null是对象原型链的终点；
2> undefined：
     a、一个表示未定义的值，Number(undefined)转换结果为NaN；
     b、当声明的变量为初始化时，默认值为undefined；
     c、一个变量声明，但未定义，此时为undefined；
          对象没有赋值的属性的值为undefined；
          函数没有返回值时，默认返回undefined；

5、CSS选择符有哪些？哪些属性可以继承？优先级是怎么样的？

- CSS选择符：ID选择符、类选择符、标签选择符、通配符（*）、子选择符、兄弟选择符

可以继承的属性：visibility、cursor、list-style、font、font-size、font-family、font-weight、color、text-indent、text-align
优先级：!important > 内联样式 > ID选择器 > class选择器 > 标签选择器

6、CSS盒模型

标准浏览器下盒模型的宽高：margin2 + border2 + padding2 + width/height;
IE浏览器下盒模型的宽高：border2 + padding*2 + width/height

7、为什么要初始化CSS样式？

CSS初始化指的就是重新设置浏览器样式，不同的浏览器对样式的默认值不同，为了保证页面样式的统一，我们需要初始化页面样式来减少页面在浏览器中的差异。

8、解释css sprites如何使用

CSS sprites是将不同的小图片放置到一张大图片中，在页面中通过backgroun-image来引入该图片，在需要使用的时候，通过background-position设置left值和top值来定位小图标的位置，使用雪碧图可以减少页面的HTTP请求，提高页面性能。

9、W3C标准的理解与认识

W3C标准：指的就是实现结构与行为的分离，其中HTML实现页面结构，CSS操作页面表现，JS完成页面行为

10、如何显示/隐藏一个DOM元素?

1>、display:none
- 隐藏元素，使用none值会让元素从文档中直接删除，删除后的元素不会占用页面空间；
- 优点：不需要多余代码，不占用空间，对页面布局没有影响；
- 缺点：元素从文档删除，不利于seo；
2>、visibility:hidden，
- 隐藏元素，元素隐藏后占用页面空间，元素会影响布局；
- 优点：利于SEO优化；
- 缺点：该属性会继承，父元素使用visibility:hidden，子元素也会隐藏；
3>、text-indent:-999em
- 给元素设置一个足够大的负值，大到浏览器无法显示；
- 优点：利于搜索引擎；
- 缺点：影响页面布局；
4>、使用position的left和top隐藏元素
- 给元素的left和top设置足够大的值，大到浏览器无法显示；position:absolute; top:-999em或者left:-999em；
- 优点：可以随意设置元素的位置；
- 缺点：不能随意修改，比较死板

11、XHTML和HTML的区别是什么？

- XHTML 元素必须被正确地嵌套；

XHTML 元素必须被关闭；
标签名必须用小写字母；
XHTML 文档必须拥有根元素；

12、CSS中常用的定位有什么？都有什么特性？

1>、CSS中的定位机制分类：标准流、绝对定位、浮动定位；
- 标准文档流：从左往右、从上往下依次排列；
- 绝对定位：脱离标准文档流，重新定位，不会保留元素原先所占的位置；
- 浮动定位：脱离标准文档流，重新定位；
2>、CSS中定位方式分类
- 绝对定位、相对定位、固定定位、静态定位
3>、绝对定位
- 默认情况下，当前定位元素的祖先没有使用定位方式时，是相对于整个文档document进行定位的，而不是相对于body和html进行定位；
- 若祖先元素采用了除static以外的其他定位方式，那么该定位元素则相对于有定位的祖先元素定位；
- 采用绝对定位方式的元素，会脱离标准文档流，重新定位，并且不会保留元素原先的位置；
- 添加了绝对定位和浮动的元素，如果没有给元素添加宽度，则元素的宽度是由内容来撑开的；
{position:absolute; left:0; top:0;}
4>、相对定位
- 相对定位是相对于元素当前的位置进行定位，没有脱离标准文档流，会保留元素本身的位置；
- 给元素添加相对定位之后，并不会对元素本身及周围的元素产生影响；
{position:relative; left:20px;top:-10px;}
5>、固定定位
- 固定定位是相对于整个文档进行定位，脱离标准文档流，但是IE6不支持固定定位方式，所以在IE6中实现固定定位需要JS来配合实现；
- 使用固定定位的元素，不会随着页面中元素内容的滚动而滚动；
{position:fixed; left:10px; top:10px;}

12、在父级块元素的高度不固定的情况下，子级块元素如何在父级块元素中垂直居中？

可以通过CSS3属性：transform来实现

#div{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#div{
	display: -webkit-flex;
	align-items: center;
}

13、DOCTYPE的定义和作用

- 定义：<!DOCTYPE html>DOCTYPE声明在网页中是必不可少的，它是一种标准通用标记语言的文档类型声明；

作用：告诉浏览器（标准通用语言解析器）应该使用什么文档类型来解析文档；

14、img标签上title和alt属性的区别是什么？

title：鼠标划上图片上时的提示信息；
alt：在页面图片没加载出来的提示信息；

15、怎样用css在页面上绘制三角形

.div1{
     width: 0;
     height: 0;
     border: 50px solid;
     border-left-color: transparent;
     border-bottom-color: transparent;
     border-top-color: greenyellow;
     border-right-color: greenyellow;
}

16、如何设置手机网页视窗，让其适应屏幕，并禁止放大缩小页面

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no，minimum-scale=1.0,maximum-scale=1.0"/>

17、谈谈px、em、rem单位的区别？

参考链接：https://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem–cms-23984
######18、如何让img标签在DIV中水平垂直居中？

#div{
    width: 800px;
    height: 400px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #ccc;
}
<div id="div"><img src="../img/1.png"></div>

19、CSS hack技巧

由于不同厂商的浏览器对CSS的解析不一样，导致生成的页面效果不一样，需要编写不同的CSS样式适应不同的浏览器。
IE代码解析：
a、 <[endif]--> 给浏览器添加特殊标识，限定当前CSS样式只能在某些浏览器下被解析
b、* + 表示被IE7以下的IE浏览器解析
c、 \9：IE10以下的浏览器解析
d、 _：下划线表示IE6之前的浏览器解析
e、谷歌浏览器的CSS hack:@media screen and (-webkit-min-device-pixel-ratio:0){.box{color:red;}}
1>、属性级hack
color:red; _color:red; *color:red; +color: red; *+color: red; color: red !important;
2>、选择符级hack
*html #demo{color:red;} *+html #demo{color:red; body:nth-of-type(1) #demo{color:red;} head:first-child + body #demo{color:red;}}

20、请写出一个最简单的css动画，只需要从左边移动到右边，并且动画结束后保持在最后的状态

CSS3动画的实现需要遵循@keyframes规则，使用@keyframes定义动画，然后结合animation属性一起使用。

<style>
    #div{
        width: 800px;
        height: 400px;
        background: #aff;
        animation: animate 1s;
        animation-fill-mode: forwards;
    }
    @keyframes animate {
        0% {
            margin-left: 0;
        }
        25% {
            margin-left: 100px;
        }
        50% {
            margin-left: 200px;
        }
        100% {
            margin-left: 400px;
        }
    }
</style>
<div id="div"></div>

21、请写出响应式的css媒体查询代码

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

22、伪类元素before和after的理解

before：防止子元素顶部的外边距塌陷
after：防止子元素底部的外边距塌陷，清除元素浮动

23、常见页面布局

1>、两列布局—横向两列布局：
方法一：float使块级元素在一行显示,margin设置两列之间的间距；
方法二：父元素设置相对定位；自适应宽度元素设置绝对定位；固定宽度列的高度要大于自适应宽度的列；
2>、三列布局
三列自适应布局：宽度值设置为百分比；
三列布局中间自适应：中间列使用margin值来设置，两边则使用绝对定位的方式来设置，将两边的宽度值设置为固定值，中间的宽度值设置为自适应；
3>、双飞翼布局：左右固定，中间自适应；
4>、圣杯布局：左右两边使用position定位，中间设置为margin：0 100px;
5>、等高布局：padding-bottom：1000px; margin-bottom:-1000px;
margin负值：margin使用负值时，IE6下超出父级的部分会隐藏，解决方案：给子元素添加relative，当元素本身有宽度时，就会触发IE浏览器的haslayout