css_属性

老师的博客:https://www.cnblogs.com/liwenzhou/p/7999532.htm

css的属性

整体属性的:作用于全局
        width:表示宽
                height:表示长
                color:这时是表示字体的颜色
                        有三种表示的方法:
                        1.#eeeeee
                        2.red
                        3.rgb
                        4.rgbs
                 
                display:表示标签内的元素所有的显示情况
                    display:"none"    HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
                            与visiblity:hidden的区别。none是表示不占位置,但是hidden会占位置
                    display:"block"    默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
                    display:"inline"    按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
                    display:"inline-block"    使元素同时具有行内元素和块级元素的特点。
                float 与clear
                    float:浮动(一般要与父辈配合)自己是一个块儿及标签,有时会导致父辈标签的塌陷
                        none:默认值 不浮动left:向左浮动 right:向右浮动
                    clear:本行带有指定的float便会自立一行。
                        left    在左侧不允许浮动元素。
                        right    在右侧不允许浮动元素。
                        both    在左右两侧均不允许浮动元素。
                        none    默认值。允许浮动元素出现在两侧。
                        inherit    规定应该从父元素继承 clear 属性的值。
                    他两一般配合使用。消除浮动而且不会是父辈标签塌陷的方法
                        1.display:bolck
                        2.#id:after{content=''}
                        3.class:after{content=''}
                        4.固定高度
                        推荐使用:.clearfix:after {
                                      content: "";
                                      display: block;
                                      clear: both;
                                    }
                overflow:溢出的处理
                    当文本大于元素的面积处理的办法;
                        visible    默认值。内容不会被修剪,会呈现在元素框之外。
                        hidden    内容会被修剪,并且其余内容是不可见的。
                        scroll    内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
                        auto    如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
                        inherit    规定应该从父元素继承 overflow 属性的值。
                    可以单独的的处理x,y方向
                        overflow-x:
                    与border配合可以做头像
                opsition与right,left,buttom,top
                opsition:定位
                    默认值:static 没有移动位置,top设置等不起作用
                    relative:相对定位,表示原来的位置移动的位置。原来的位置依然存在
                        与方向配合使用;
                            right表示向左移动的距离
                            left 表示向右移动的距离
                            button表示向上移动距离
                            top表示向下移动的距离
                            当这几个都出现时,优先执行left和top的,而不会之行其他的方向。及相对优先来路考虑右下的方向,
                            当为负数时,表示相反的方向走了
                    absolute:绝对的方位,表示相对长辈的方位。如果上辈没有定相对或者绝对的位置,变执行body的位置,及坐标原点的位置
                            与方向配合使用;
                            right表示向距离左边的距离
                            left 表示向右移动的距离
                            button表示向上移动距离
                            top表示向下移动的距离
                            同样优先选着left和top。
                            注意此时是更具长辈的元素的面积(content加上padding的面积)里面的边界的距离,所以当为负数的时候(或者数字太大的时候)变相当于逃出了长辈的区域
                    fixed:表示始终在屏幕的位置的:可以配合z-index来使用
                            right表示向距离左边的距离
                            left 表示向右移动的距离
                            button表示向上移动距离
                            top表示向下移动的距离
                            同样优先选着left和top。
                            此时是相对于界面的边框,也是优先left和top
                    方向一般是优先于left和top,不过一般是标签的元素一定时
                z-index:叠成顺序,默认值为0
                        都没有只是后面大于前面,位置定位永远的大于没有位置定位的,有从父现象
                opcity:透明度,表示整个背景的透明度,0到1 0透明 1不透明
背景属性:表示一个标签的整体的属性的一般有下面几个属性:
        background:表示整个背景的颜色,图片,以及重复的属性。
                    background的属性:
                    color img repeat position(200px 或者是top) attachment例如background:#ffffff url('1.png') no-repeat right top fixed;
        

文字属性(font):表示文字的各个方面的信息,字体或者大小等等:
        font的前缀:
            size :文字的大小px
            family:字体的型号 
            weight:字体的粗细
        text的前缀:
            align:文本的对齐方式
                left(默认) righy center justify
            decoration:文本的装饰
                none    默认。定义标准的文本。(可以去掉a标签的下划线)
                underline    定义文本下的一条线。
                overline    定义文本上的一条线。
                line-through    定义穿过文本下的一条线。
                inherit    继承父元素的text-decoration属性的值。
            ident:首行缩进 px 2em
盒子模型:边框,外边距,内边距
        margin:外边距,两个元素的外边距是取最大的值 fx
        border:边框 外边距与内边距之间的一个框
                width:表示宽
                color:颜色
                radius:半径
                        可以px也可任意百分比50%表示愿
                stylel:样式
                    none    无边框。
                    dotted    点状虚线边框。
                    dashed    矩形虚线边框。
                    solid    实线边框。
                支持简写,而且支持每个边框的单独写,例如border-left-color:
        padding:内边距        
        padding和margin每边单独写。而且可以简写。但是一般是简写四边;
                一个px;表示四边
                二个:表示上下,左右
                三个:上,左右,下
                四个:上右下左(顺时针)例如padding: 5px 10px 15px 20px;
        
        标签的背景颜色是在border里面的,也就是说背景颜色会上色在content加上padding不包括border的(border自己可以上色)
        padding会忘里面缩的,及padding会为负数的,此时就会出现padding在border的里面了,两个标签实际相遇与其标签的距
                离是padding之间的最大值如果你的padding为负数的绝对值大于另外一个的padding的值时,就会发生某个的内容就会被另外
                所覆盖了。
                但是可以用padding来移动自己的位置。

猜你喜欢

转载自www.cnblogs.com/accolade/p/10630219.html
今日推荐