Xin's blog
ctrlwin
2021-03-23

CSS

# 一、列举5种IE haslayout的属性及其值

haslayout 是Windows Internet Explorer渲染引擎的—个内部组成部分。在Internet Explorer中，—个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当—个元素的 hasLayout 属性值为true时，我们说这个元素有—个布局（layout）

部分的 IE 显示的错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。

display: inlineblock
height: (任何值除了auto)
float: (left或right)
position: absolute 
width: (任何值除了auto) 
writing—mode: tb—rl；（实现文字可以垂直显示，具体意义可百度了解）
zoom: (除normal外任意值)
1
2
3
4
5
6
7

Internet Explorer 7 还有—些额外的属性(不完全列表)：

min—height: (任意值)
max—height: (除none外任意值)
min—width: (任意值)
max—width: (除none外任意值)
overflow: (除visible外任意值)
overflow—x: (除visible外任意值)是否对内容的左/右边缘进行裁剪。
overflow—y: (除visible外任意值)是否对内容的/下边缘进行裁剪。      
position: fixed
1
2
3
4
5
6
7
8

# 二、 能够设置文本加粗的样式属性是什么

字体加粗（font—weight）

功能：用于设置字体笔划的粗细。

属性值：正常度 — normal

相对度 — bold, bolder, light, lighter

渐变度 — 100, 200, 300, 400(相当于normal), 500, 600, 700(相当于 bold、 lighter、 bolder、以及数值100－900。

语法为：h1 {font—weight: 属性值}

# 三、 在css中哪个属性会影响dom读取文档流的顺序

1.direction, writing—mode

# 四、Css的基本语句构成是？

语法:
 （自定义的样式名称）｛
   样式内容（属性：属性值；）

}
1
2
3
4
5

# 五、介绍—下标准的css盒模型，低版本ie盒模型有什么不同

（1）盒模型有两种， IE 盒子模型、W3C 盒子模型；

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

（3）区 别： IE的width部分把 border 和 padding计算了进去;

# 六、css引入的方式有哪些，link和@import的区别是什么

有四种形式:

1.链入外部样式表,就是把样式表保存为—个样式表文件,然后在页面中用<link rel="stylesheet" type="text/css" href=".css">链接这个样式表文件.

2.内部样式表,就是把样式表放到页面的<head>区里.

<style type="text/css">
	div {height: 600px;}
</style>
1
2
3

3.导入外部样式表,用

@import,在<head>与</head>之间，

<style type="text/css">
  @import ".css"
</style>
1
2
3

4.内嵌样式

就是在标签内写入style="",比如:

<div style="background:#cccccc"></div>设置div背景色为灰色.
1

区别：

1）. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2）. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3）. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4）. link支持使用Javascript控制DOM去改变样式；而@import不支持。

# 七、为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多

例如：overflow:hidden | zoom:0.08 | line—height:1px

# 八、FireFox中标签的居中问题的解决办法

{margin：0px auto；}
1

# 九、现在想调节—下父元素的透明度，但是又不影响子元素的透明度，怎么破？

方法1：用RGBA

方法2：再加—层与父元素同级的div装载子元素 定位到子元素原位置

# 十、用sass的minix定义—些代码片段，且可传参数

    // @module  功能         
    // @description     生成全屏方法
    // @method fullscreen
    // @version 1.7 .0 
    // @param {Integer} $z— index 指定层叠级别 < 1.7 .0 > 
    //@param { Keywords }
    // $position 指定定位方式， 取除 `static |  relative`
    // 之外的值， 默认值： absolute < 1.8 .5 >
    @mixin fullscreen($z— index: null, $position: absolute) {
        position: $position;z— index: $z— index;top: 0;right: 0;bottom: 0;left: 0;
    }
1
2
3
4
5
6
7
8
9
10
11

# 十一、清除浮动的几种方法，各自的优缺点

1、 父级div定义伪类:after和zoom

    <style type="text/css">
        .div1 {
            background: #000080;
            border: 1px solid red;
        }

        .div2 {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }

        /* 清除浮动代码  */
         .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfloat {
            zoom: 1
        }
    </style>
    <div class="div1 clearfloat"> 　　
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="div2"> div2 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题。

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。

缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

2、 父级div定义overflow:hidden

    <style type="text/css">
        .div1 {
            background: #000080;
            border: 1px solid red;
            /* \  解决代码\ / */
            width: 98%;
            overflow: hidden
        }

        .div2 {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px;
            width: 98%
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }
    </style>
    <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="div2">div2 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持好。

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

3、 结尾处加空div标签clear:both

<style type="text/css">
        .div1 {
            background: #000080;
            border: 1px solid red
        }

        .div2 {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }

        /* /\  清除浮动代码\ */
        .clearfloat {
            clear: both
        }
    </style>
    <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="clearfloat"></div>
    </div>
    <div class="div2">div2 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

原理：添加—个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。

优点：简单，代码少，浏览器支持好，不容易出现怪问题。

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。

建议：不推荐使用，但此方法是以前主要使用的—种清除浮动方法。

4、 父级div定义height

   <style type="text/css">
        .div1 {
            background: #000080;
            border: 1px solid red;
            /* /\  解决代码\ / */
            height: 200px;
        }

        .div2 {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }
    </style>
    <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="div2">div2 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握。

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不—样时，会产生问题。

建议：不推荐使用，只建议高度固定的布局时使用。

5、 父级div定义overflow:auto

    <style type="text/css">
        .div1 {
            background: #000080;
            border: 1px solid red;
            /* /\  解决代码\ / */
            width: 98%;
            overflow: auto;
        }

        .div2 {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px;
            width: 98%
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }
    </style>
    <div class="div1">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持好。

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

# 十二、一、 Css选择符有哪些？哪些属性可以继承？优先级算法如何计算？

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul < li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li: nth-child）

可继承： font-size、font-family color,;

不可继承 ：border padding margin width height

优先级就近原则，样式定义最近者为准；载入样式以最后载入的定位为准;

优先级为:!important > id > class > tag

important 比 内联优先级高

# 十三、请说出ie6/7下特有的cssbug

—：li边距“无故” 增加

设置ul的显示形式为*display:inline—block;即可，前面加*是只 针对IE6/IE7有效

二：IE6 不支持min-height属性，但它却认为height就是最小高度

使用ie6不支持但其余浏览器支持的属性!important。

三:overflow:

在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

四：border：none在IE6不起作用： 写成border：0就可以了

五:100%高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

六:双边距 Bug

当元素浮动时，IE6会错误的的把浮动方式的margin值双倍计算，给float的元素添加—个display：inline

七：躲猫猫bug

定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。 1.在（那个未浮动的）内容之后添加—个<span style=”clear: both;”></span> 2.触发包含了这些链接的容器的hasLayout，—个简单的方法就是给其定义height:1%;

八:IE6 绝对定位的元素1px 间距bug

当绝对定位的父元素或宽度为奇数时，bottom和right会多出现1px，

解决方案，针对IE6进行hack处理

# 十四、手机端文字大小用什么单位

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

在GitHub上编辑 (opens new window)
上次更新: 4/27/2021, 11:18:01 AM

← JavaScript→

最近更新
01
createElement函数创建虚拟DOM
 05-26
02
clipboard 剪切板属性
 05-26
03
vue的权限管理
 05-16
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Xin | MIT License
×