• 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一起使用

  • 相关阅读:
    C# Enum转换
    Split
    WCF访问安全
    [转] 检索 COM 类工厂中 CLSID 为 {000209FF00000000C000000000000046} 的组件时失败
    ICSharpCode.SharpZipLib.dll压缩的zip包,7zip解压时出错
    js控制ctrl+p
    跨域访问WCF问题
    sql:过滤字段中是否包含数字
    序列化/反序化
    [转]RegistryKey 操作注册表
  • 原文地址:https://www.cnblogs.com/xslzwm/p/9591923.html
Copyright © 2020-2023  润新知