web-02-css01

1、css常见样式(声明)

    1)background:色(color)图(image)铺(no repeat)定(fixed)位(center)

        注:颜色的表示方式

            * rgb(0,255,0)

            * rgba(0,233,0,0.3)

            * #aaffaa

    2)border:边框粗细、形状、颜色

       border:1px solid red;

       若用上面的合并写法,表示四个方向的边框一样

       分开表示如下:

border-top:粗细 形状 颜色;
border-right:粗细 形状 颜色;
border-bottom:粗细 形状 颜色;
border-left:粗细 形状 颜色;

       大小的表示方式(单位):

            -px:像素(指计算机屏幕上的一个点组成)

            -em:倍数(针对原来设置的值进行加倍),如1em等同于当前字体的大小

            -%:百分比

            -in:英寸;cm:厘米;mm:毫米;pt:1/72英寸

            -border-radius:5px;  边框的边角

2、盒子模型

     盒子在水平方向实际占用大小:width+padding+border+margin

宽度
height:高度
padding:内边距
margin:外边距
border:边框

    注:padding:上 右 下 左;(四个值顺时针)

           padding:上 右左 下; (三个值)

           padding:上下 左右;

           padding:上下左右;

      两个盒子时margin-bottom和margin-top的塌陷,大的包含小的

3、css常见属性

    1)控制字体

font-family:"微软雅黑";
font-size:12px; //字体大小
font-weight:800; //字体粗细,定义100的整数倍
font-style:italic; //文字斜体
color:red; //字体颜色
text-indent:2em; //缩进两个字符
text-align:center; //文字居中
text-decoration:enderline; //默认值none 文本下划线
line-height:1.2em; //文本行高(其应用场景在input里面)

        合并写法:

             font:斜体 粗细 大小 "family";

    2)display(控制内容的显示方式) 隐藏/显示

        (1)元素的显示方式

             --块元素(div/p/table)

                 特点:独占一行,排列方式从上往下,可以设置宽高

                     display:block;

             --行内元素(span/a)

                 特点:可以跟元素共享一行,排列顺序从左往右,不可以设置宽高

                     display:inline;

             --行内块(input/img)

                  特点:排列顺序从左往右,可以设置宽高

                     display:inline-block;

               若需要修改元素的默认方式,可以通过display进行修饰

        (2)隐藏元素的方式:

                display:none;   //隐藏元素并让出位置

                opacity:0;   //元素完全透明,不让出位置

3、定位

    定义元素相对于正常位置应该出现的位置

    1)流式定位(默认定位)

        块级元素从上往下

        行内元素从左往右

    2)浮动定位——是脱离标准文档流的

        float:left|right;

         浮动会对下面的节点和父节点有影响

         清除浮动带来的影响:

clear:left|right|both;  //表示盒子的左,右,两边不能有浮动

        总结;哪个元素受到了影响就在哪个元素里面写clear

    3)position定位

        -1、position:relative;  相对定位-不脱标(还是原来的位置)

             相当于自己原来的位置移动,结合(top right bottom left)其中的一个或多个一起使用

        -2、position:absolute; 绝对定位-脱标(脱离标准文档流让出原来的位置)

             子绝父相:(用于解决盒子定位水平居中问题)

                    子设置绝对定位,父设置相对定位

         -3、position:fixed;   固定定位-脱标(让出位置)

                   如:将搜索框永远固定在那个位置

            注:1、绝对定位的参考点是祖先节点,若没有定位了的祖先节点则相对于最初的包含块定位

                    2、绝对定位的参考点(若用bottom),参考点是电脑屏幕的左下角

4、堆叠顺序问题

     z-index:数值;

     注:数值越大,距离用户越近;必须结合position一起使用

原文地址:https://www.cnblogs.com/xslzwm/p/9591923.html