面试题整理（html、css篇）（四）

2018-05-04

参考不少的网站，总结出下面一些知识点，多了解了解、、、

1.CSS盒子模型

内容(content)、填充(padding)、边框(border)、边界(margin)
Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border）和外边距（margin）的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。
Box-Model 1

1.由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding- bottom、padding-left）、边框（border-top、border-right、border-bottom、border- left）和外边距（marging-top、margin-right、margin-bottom、margin-left）;
2.内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
W3School的Box Model 2

1.元素框的最内部分是实际的内容（element）；直接包围内容的是内边距（padding），内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。
2.内边距、边框和外边距都是可选的，默认值是零。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器 `（）`对所有元素进行设置：
1
2
3
4
/*设置所有元素的外边距和内边矩为0*/* {
margin: 0;
padding: 0;
}

3.在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，以下是CSS代码：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

如下图：

参考网站：https://my.oschina.net/sheila/blog/384806

2.HTML语义化

按照人们的思考逻辑命名，不但要自己能看懂，也要让别人也能看懂，不要让别人觉得你的代码很乱。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。
语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。语义 Web 技术有助于利用基于开放标准的技术，从数据、文档内容或应用代码中分离出意义。
语义化命名：
- 文件命名：main.css（主要的文件）
- 注释命名：
```
/* Footer */
内容区
/* End Footer */（主要的文件）*
```
- id命名：页头：header；内容：content/container
- class命名： ”类别+功能/分类”命名；.titleBar-news{ }/新闻标题栏/*
- 更多请参考：CSS语义化命名及常用命名规则（推荐）

3.div水平居中

知道DIV的自身长度和宽度：
- 首们需要position:absolute;绝对定位。
- 而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二，[style=”position: absolute;top:50%;left: 50%”]只能实现DIV离左边框和上边框的距离为屏幕的物理尺寸的一半，忽略了DIV本身的长度和宽度，所以不会实现DIV的水平垂直居中。

不知道DIV的本身长度和宽度时:

$(window).load(function(){
            $(".mydiv").css({
                position: "absolute",
                left: ($(window).width() - $(".mydiv").width())/2,
                top: ($(window).height() - $(".mydiv").height())/2
            });
        });

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】

div{
            width: 200px;
            height: 200px;
            background: green;
            position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }    //兼容性：,IE7及之前版本不支持

div绝对定位水平垂直居中`【Transforms 变形】`

div{
            width: 200px;
            height: 200px;
            background: green;
            position:absolute;
            left:50%;    /* 定位父级的50% */
            top:50%;
            transform: translate(-50%,-50%); /*自己的50% */
        }     //兼容性：IE8不支持；

css不定宽高 水平垂直居中

.box{

             height:600px;
             display:flex;
             justify-content:center;
             align-items:center;
               /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
        }
        .box>div{
            background: green;
            width: 200px;
            height: 200px;
        }

4.div垂直居中

1.绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。

<div class="content"> Content goes here</div>

#content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* negative half of the height */
}

2.使用 margin:auto;使块级元素垂直居中:使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中.
1
2
3
4
5
6
7
8
9
10
11
12
<div id="content"> Content here</div>

#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}

3.单行文本置中:把 line-height 设置为那个对象的 height 值就可以使文本居中了

<div id="content"> Content here</div>  

#content {
    height: 100px;
    line-height: 100px;
}

HTML5一个新增属性———— data- 自定义属性

在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。

<div id = "user" data-uid = "12345" data-uname = "愚人码头" > </div>

// 使用getAttribute获取 data- 属性
var user = document . getElementById ( 'user' ) ;
var userName =user . getAttribute ( 'data-uname' ) ; // userName = '愚人码头'
var userId = user . getAttribute ( 'data-uid' ) ; // userId = '12345'

使用setAttribute设置 data- 属性
user . setAttribute ( 'data-site' , 'http://www.css88.com' ) ;

参考网站：https://www.qdfuns.com/article/44791/edb15b7b6a931231751651fbab1c11b7.html