前端开发面试-css篇

• 为什么会出现盒子模型
• 盒子模型是什么
• 盒子模型的分类及区别
• 盒子模型组成

css假设所有的html文档元素都会生成一个描述该元素 在html文档布局中占空间的矩形元素框,也就是盒子.

盒子模型：就是把html页面中的布局元素看作是一个矩形的盒子,也就是盛装内容的盒子

盒子模型分为:标准盒子模型，ie盒子模型

两者区别 :标准盒子模型有margin, border, padding, content 四部分组成
ie盒子模型有margin, content(border, padding, content)两个部分
通过box-sizing: border-box;content-box默认是标准盒子模型

1. margin 外边距,空白边 控制盒子与盒子之间的距离,使得盒子不会紧凑的连在一起

margin-left,margin-top,margin-right,margin-bottom;
/**简写方式和padding完全一致
外边距的一个经典应用：可以让块级盒子水平居中，
必须具备两个条件
1.盒子必须指定宽度
2.左右的外边距都设置auto就可以了.
header{width:300px; margin:0 auto } 这种方式常用 左右是auto实现水平居中
注意：上面是块级元素的水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center即可。
*/
1
2
3
4
5
6
7
8
9

3. border 边框
   border会改变盒子的大小

border:border-width|border-style|border-color;   边框的粗细；边框的样式（实线还是虚线）；边框颜色
border-style：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset    none是默认值
              没有 |隐藏  |点线  |虚线    实线|  双线 |3D凹槽|菱形边框|3D凹边|3D凸边

border:20px solid red;没有顺序

border-top:1px dashed yellow; 上边框
border-bottom: 2px dotted green; 下边框
1
2
3
4
5
6
7
8

表格的细线边框

border-collapse: collapse;它控制的是相邻单元格的边框。表示相邻边框合并在一起

table的常见样式写法
        /* 给表格设置宽度和高度 */
        table {
            width: 500px;
            height: 500px;
        }
        /* 整个表格 和单元格都有边框，且单元格的边框要合并 */
        table,
        td,
        th {
            border: 1px solid black;
            border-collapse: collapse;
            /* 设置文字大小 并且居中 */
            font-style: 14px;
            text-align: center;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4. padding 内边距, 边框和内容之间的距离
   注意1:padding会修改盒子的大小,那么当盒子大小固定想要设置padding后想让盒子不变要修改width和height.实际开发中使用padding调整文字和边框的距离更加准确
   注意2:如果盒子本身没有指定width和height属性（也就是虽然可以继承width和height属性但是在自己的样式里面没有写这两个属性也是不会撑开盒子的大小的），则此时padding不会撑开（就是说盒子的大小不会变，padding值是有的，只不过width变小了）盒子大小

padding-left,padding-top,padding-right,padding-bottom;

简写
padding: 5px; /* 1个值，表示上下左右内边距都是5px */
padding: 5px 10px; /* 2个值，表示上下内边距是5px，左右内边距是10px */
padding: 5px 10px 20px;/* 3个值，表示上内边距是5px，左右内边距是10px，下内边距是20px */
padding: 5px 10px 20px 30px; /* 4个值，表示上5px，右10px，下20px，左30px */
1
2
3
4
5
6
7

5. content 内容
   具有三个属性width, height, overflow.
   使用width, height指定宽和高,当信息内容太多超出内容区时,使用overflow溢出属性来处理.
   overflow: hidden| visible| scroll|
   hidden:表示溢出部分不可见 visible:溢出部分可见,且呈现在盒子外 scroll:滚动条自动添加到盒子里
   注意:虽然设置了高度,但是没有设置overflow时,默认时visible,且父元素没有overflow限制,若超出浏览器一页的高度,浏览器默认显示滚动条

• 块元素
• 行元素
• 行内块元素

• 元素选择器
• 类选择器
• id选择器
• 属性选择器

• 选择器
• 盒模型
• 圆角border-radius
• 阴影border-shadow
• 文字阴影text-shadow
• 渐变
• 多背景图片
• 文字
• 布局
• css滤镜