1.文本

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如:  red‘’RGBA()

2.水平对齐方式

　　text-align 属性规定元素中的文本的水平对齐方式。

  • left      把文本排列到左边。默认值：由浏览器决定。
  • right    把文本排列到右边。
  • center 把文本排列到中间。
  • justify 实现两端对齐文本效果。

文本其他操作

font-size: 10px;

line-height: 200px;    文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 %:基于字体大小的百分比    #line-height = height 文字会垂直居中

vertical-align: -40px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效   (行类标签对父级的位置垂直调整)

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

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/     #字体加粗
font-weight：900

font-style: oblique

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

letter-spacing: 10px;    字母间距(包括汉字)

word-spacing: 20px;      单词间距

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

边框属性

　　简写：border :1px soild red;
　　　　   deshed:虚线

　　          只加有一个方向的：border-right :1px soild red;

　　border-radius: 50%

列表属性

　　ul li{list-style:none;}        #去掉列表前的标志

　　ul{padding:0}                  #去掉列表前的空格

背景属性

  • background-color
  • background-image
  • background-repeat ： no-repeat(repeat 平铺满)  repeat-x              #x轴平衡
  • background-position :right top [20 px 20px]         背景图片在固定的位置的移动    center ：背景居中
  • opacity :0.4      #设置透明度

display属性 

4.display:none; 吧不想让用户看到的给隐藏了（很重要的一个属性）
5.visibility :hiddon； 也是隐藏

注意与visibility:hidden的区别：

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

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

盒子模型：

  • margin:              用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
  • padding:            用于控制内容与边框之间的距离；
  • Border(边框):     围绕在内边距和内容外的边框。
  • Content(内容):   盒子的内容，显示文本和图像。
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;（只针对盒子居中）

float浮动
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: ;

        }

        .r1{

            width: 100px;

            height: 100px;

            background-color: #7A77C8;

            float: left;

        }

    </style>

</head>

<body>

<div class="r1">sdfs</div>

<p>对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失对方水电费第三方水电费第三方是非得失</p>

</body>

</html>

文字环绕

 

非完全脱离文档流

内容不会造成覆盖现象，只有DIV形成覆盖现象。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: ;

        }

        .r1{

            width: 100px;

            height: 100px;

            background-color: #7A77C8;

            float: left;

        }

        .r2{

            width: 200px;

            height: 200px;

            background-color: wheat;

        }

    </style>

</head>

<body>

<div class="r1"></div>

<div class="r2">region2</div>

示例

overflow解决溢出



清除浮动(只对自己标签有影响)

clear语法：
　　clear：none |  left  | right  | both
　　　　1.clear：left 清除的是左边的浮动
　　　　2.clear：both :保证左右两边都没有浮动

注意：
　　排序的时候是一个标签一个标签的排
　　如果上一个是浮动的，就紧贴个上一个
　　如果上一个不是浮动的，就和上一个保持垂直不变

场景：

　　两个div标签，第一个div标签浮动了，第二个div标签肯定会顶上去(但是便签里的内容会被第一个div便签挤出来)，如果不希望第二个标签顶上去，就可以清除浮动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 100px;

            height: 60px;

            background-color: blue;

            float: left;

        }

        .c2{

            width: 200px;

            height: 30px;

            background-color: aqua;

            float: left;

        }

         .c3{

            width: 200px;

            height: 100px;

            background-color: crimson;

             float: left;

        }

        .content{

            /*width: 100px;*/

            /*height: 100px;*/

        }

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

<div class="content" style="border: 3px solid red;clear: both">

    content

</div>

</body>

</html>

示例

position定位属性

position的四种属性
1.static：默认位置
2.fixed：完全脱离文档流，固定定位(以可视窗口为参照物)
3.relative:相对定位(参照的是自己本身的位置)，没有脱离文档流(理解影子占着位置)，没有顶上去，会保持自己的位置不动。可以使用top  left  进行定位

　　当时用top 和 left 定位的时候，是完全脱离文档流(实体，相当于飘起来了)，会对其他标签产生遮罩，但是不影响布局。
4.absolute:绝对定位：脱离了文档流（参照的是按已定位的父级标签定位(需要父级标签定位relative)，如果找不到会按body的去找）

　　相当于这个标签已经不存在了，不占用原来的位置(漂浮起来)，如果没有top left 移动的话，默认是原来的位置，但是此时，是漂浮起来的，会对下面的标签进行遮罩。移动不会影响布局。会发生遮罩。

html----属性操作的更多相关文章

  1. 了解JavaScript 对象的属性操作

    提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...

  2. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  3. jQuery-1.9.1源码分析系列（八） 属性操作

    jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removePro ...

  4. jQuery属性操作

    jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...

  5. 利用@property实现可控的属性操作

    利用@property实现可控的属性操作 Python中没有访问控制符, 不像java之类的 public class Person{ private int x public int getAge( ...

  6. js学习笔记2---HTML属性操作

    1.HTML属性操作:读.写 属性名 属性值   2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...

  7. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  8. jquery学习--属性操作

    学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...

  9. 第二十一课：js属性操作的兼容性问题

    上一课主要讲了属性的概念,用法,固有属性和自定义属性的区别,class属性操作的方法等,这一课主要讲一些有关属性操作的兼容性问题. IE6-IE8在一些表示URL的属性会返回补全的改过编码的路径,比如 ...

  10. C# 反射之属性操作

    一.反射-类操作 //1.获取对象所有的属性名 Student stu = new Student(); //获取当前类名称 Console.WriteLine(stu.GetType().Name) ...

随机推荐

  1. 简易ATM机

    简易ATM机(代码如下): /* * 功能:简易银行系统 */package day8; import java.util.Scanner; /** * * @FengYan Huang Admini ...

  2. 设计模式---对象创建模式之原型模式（prototype）

    一:概念 原型模式(Prototype Pattern) 实际上就是动态抽取当前对象运行时的状态 Prototype模式是一种对象创建型模式,它采取复制原型对象的方法来创建对象的实例.使用Protot ...

  3. sublime 格式化代码

    将压缩成一行的 css 代码转换成未压缩的格式: 安装sublime下的HTML-CSS-JS Prettify插件,之后右键,选择 html/css/js Prettify 下面的Prettify ...

  4. python 面试题--你能做出多少？

    python3中__get__,getattr,__getattribute__的区别 什么是 GIL 详细博客 GIL = Global Intercept Lock 全局解释器锁,任意时刻在解释器 ...

  5. 淘淘商城之spring web mvc架构

    一.什么是springmvc springmvc是spring框架的一个模块,springmvc和spring无需通过中间整合层进行整合: springmvc是一个基于mvc的web框架   二.mv ...

  6. ubuntu新建组合用户命令不管用

    当我们新建了组和用户的时候发现一些命令不管用了,这是什么问题呢. 一.解决方案. 通过以下命令添加组和用户,切换到新用户,发现命令不管用,只有一个$符号. groupadd 新组名 ----添加组 u ...

  7. cetus系列~ 继续分析

    一 简介:我们来继续探讨cetus的细节问题 二 命令 1 select help 查看帮助  2 select * from backends 查看后端列表  3 select conn_detai ...

  8. python之random模块分析（一）

    random是python产生伪随机数的模块,随机种子默认为系统时钟.下面分析模块中的方法: 1.random.randint(start,stop): 这是一个产生整数随机数的函数,参数start代 ...

  9. Django 自定义过滤器和模板标签

    前提:自定义模板标签和过滤器必须位于Django的某个应用中,这个应用可以包含一个templatetags目录, 和models.py views.py 处于同一级目录.若这个templatetags ...

  10. 六、regularized logisitic regssion练习（转载）

    转载链接:http://www.cnblogs.com/tornadomeet/archive/2013/03/17/2964858.html 在上一讲Deep learning:五(regulari ...