zoukankan      html  css  js  c++  java
  • CSS之属性操作

    (1)css text 文本

    文本颜色:color

    颜色属性被用来设置文字的颜色

    颜色是通过css最经常的指定:

    *十六进制值—如:#FF0000

    *一个RGB值---如:RGB(255,0,0)

    *颜色的名称---如:red

    line-height: 200px;   文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

    vertical-align:-4px  设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效

    text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

    font-family: 'Lucida Bright'

    font-weight: lighter/bold/border/

    font-style: oblique    斜体

    text-indent: 150px;      首行缩进150px

    letter-spacing: 10px;  字母间距

    word-spacing: 20px;  单词间距

    text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写

    (2)背景属性

    background-color

    background-image

    background-repeat

    background-position

    background-color: cornflowerblue

    background-image: url('1.jpg');

    background-repeat: no-repeat;(repeat:平铺满)

    background-position: right top(20px 20px);

    (3)边框属性

    border-width

    border-style (required)

    border-color

    border-style: solid;

    border-color: chartreuse;

    border- 20px;

    (4)列表属性

    list-style-type         设置列表项标志的类型。

    list-style-image    将图象设置为列表项标志。

    list-style-position 设置列表中列表项标志的位置。

    list-style          简写属性。用于把所有用于列表的属性设置于一个声明中

    (5)dispalay属性

    none

    父子综合显示:(使用悬浮hover方法)

    当父类悬浮式,子类不显示

    display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失

    注意:

    与visibility:hidden的区别:

    visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

    block

    内联不能设置长宽

     

    (6)Inline

    设定为内联

    inline-block

    既有内联不单独占用一行,也有块级设置长宽的属性

    inline-block可做列表布局

    (7)外边距(margine)和内边距(padding)

    margine(外边距):用于控制元素与元素之间的距离;margine的基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。

    margine-top:上边距

    margine-bottom:下边距

    margine-right:右边距

    margine-left:左边距

    margin:10px 20px 20px 10px;

            上边距为10px

            右边距为20px

            下边距为20px

            左边距为10px

    margin:10px 20px 10px;

            上边距为10px

            左右边距为20px

            下边距为10px

    margin:10px 20px;

            上下边距为10px

            左右边距为20px

    margin:25px;

            所有的4个边距都是25px

    居中应用:

    margin: 0 auto

    padding(内边距):用于控制内容与边框之间的距离;

    单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。

    设置为margine;

    border(边框):围绕在内边距和内容外的边框;

    content(内容):盒子的内容,显示文本和图像。

    (8)float属性

    浮动元素会判断上一个元素是否浮动,如果浮动,紧贴;否则,与上一个元素保持垂直距离

    block元素和inline元素在文档流中的排列方式

      block元素通常被现实为独立一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。Block元素可以设置width,height,margine,padding属性;

      inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。Inline元素设置width,height属性无效

    所谓的文档流:指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。

    脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。

    清除浮动

    clear语法:

    clear:none|left|right|both

    取值:

    none:默认值。允许两边都可以有浮动对象

    left:不允许左边有浮动对象

    right: 不允许右边有浮动对象

    both:不允许有浮动对象

    需要注意的是:clear属性只会对自身起作用,不会影响其他元素。如果一个元素的右侧有一浮动对象,而这个元素设置了不允许右边有浮动对象,即clear:right,则这个元素会自动下移一格,达到本元素右边没有浮动对象的目的。

    (9)position(定位属性)精确定位使用

    static:默认值 按照正常文档流定位

    relative:1.参照物是元素之前文档流中的位置

    2.元素不脱离文档流(之前的空间位置仍然存在)

    absolute:1.参照物是已定位的父元素

            2.元素脱离文档流

    小结:

    父元素:position:relative

    子元素:position:absolute

    脱离文档流:flat  position:absolute      fixed

  • 相关阅读:
    解决Linux下Qt程序报『QString::arg: Argument missing: 无法解析SSLv2_client_method中的符号』错误
    中介者模式之我们结婚吧
    POJ 2141 Message Decowding(map)
    Cocos2dx之Box2D具体解释 设置物体回复力
    Android之Window
    opencv源代码分析:cvCreateMTStumpClassifier最优弱分类器的代码框架
    LeetCode总结,二分法一般性总结
    Change Number to English By Reading rule of money
    在多台PC上进行ROS通讯-学习笔记
    编程之美初赛第二场 奇妙的数列
  • 原文地址:https://www.cnblogs.com/asaka/p/6890986.html
Copyright © 2011-2022 走看看