引申css企业开发经验、习惯,盒子模型、层模型

2018-10-26  本文已影响15人  时光在浅唱

初学入门,可能有些地方会理解有误,恳请批评指正~

1. 标签归类:行级元素、块级元素。

    (1)行级元素(内联元素、inline)

            <1>feature:内容决定元素所占位置;不可以通过css改变宽高。

            <2>常见行级元素:span strong em a del

    (2)块级元素(block)

            <1>feature:独占一行;可以通过css改变宽高。

            <2>常见块级元素:div p ul li ol form address

    (3)行级块元素(inline-block)

            <1>feature:内容决定大小;可以通过css改变宽高。

            <2>常见行级块元素:img

    (4)行级元素、块级元素和行级块元素的display属性可以改变,所以块级元素可以被改变成行级元素。

    (5)凡是带有inline属性的元素,都有文字特性。(比如,字之间存在空格分隔)

2. 开发经验:先定义css的功能,后选择html的样式(先写css,再写html)。

3. 标签可以被自定义,利用标签选择器。可以用通配符选择器。

4. 盒子模型:针对html的每一个元素,是语法特点的集合。任何一个html元素都是一个盒子,都符合盒子模型的特点。

    (1)盒子的三大部分:

            <1>盒子壁    border

            <2>内边距    padding

            <3>盒子内容    width+height

    (2)盒子模型的组成:(外边距)margin+border+padding+(content=width+height)

    (3)padding:四个值(上右下左),三个值(上(左右)下),两个值((上下)(左右)),一个值(上下左右)。margin、border与padding类似

    (4)盒子计算:  标准W3C模型:宽度 = margin*2 + border*2 + padding*2 + width

                            IE模型: 宽度 = margin*2 + width

    (5)两个盒子嵌套时,如果想让里层盒子处于外层盒子的正中间,则让里层盒子的宽高等于外层盒子的宽高,然后设置外层盒子的pedding。

    (6)定位技术:position+left/right+top/bottom。(一般用top)

            <1>position:absolute(绝对定位)

            <2>left/right:左边线距离左边的距离/右边线距离右边的距离。

            <3>top/bottom:上边线距离上边的距离/下边线距离下边的距离。

            <4><body></body>标签有固定的margin:8px,若不设置为0,则会出现与边缘有8px间距的现象。

5. opacity:透明度。

6. 层模型:

    (1)absolute:

            <1>脱离原来的位置进行定位,绝对定位。当一个元素成为绝对定位元素时,则绝对定位元素脱离原来的层,成为新的层(每一个absolute元素都是一个新的层),此时下面的元素会向上占用绝对定位元素之前的层(绝对定位元素依然可以位于原来的位置,但他们不是同一层)。

            <2>absolute定位相对于最近的有定位的父级进行定位,如果没有有定位的父级则相对于文档进行定位。

    (2)relative:

            <1>保留原来位置定位,相对定位。

            <2>relative定位相对于自己原来的位置定位。

    (3)一般经验:用relative作为参照物,用absolute进行定位。

    (4)fixed:固定定位,广告定位,页面动,但元素位置不变。

    (5)居中:

            <1>相对于文档居中: position:absolute;

                                                left:50%;

                                                right:50%;

                                                margin-left:-(width/2)px;

                                                margin-top:-(height/2)px;

            <2>相对于可视区窗口居中:  position:fixed;

                                                            left:50%;

                                                            right:50%;

                                                            margin-left:-(width/2)px;

                                                            margin-top:-(height/2)px;

    (6)z-index:决定了一个HTML元素的层叠级别。一个更高的z-index值意味着这个元素在叠层顺序中会更靠近顶部。

    (7)如何画圆: boder:10px solid black;

                                border-radius:50%;(边的角度)

2018-10-20(渡一教育“web前端开发HTML+CSS精英班”笔记)

马上就可以接触实例啦,赶紧把视频课补完……

上一篇 下一篇

猜你喜欢

热点阅读