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. MySQL5.5登录密码忘记了，怎嘛办？

    1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysqld --skip-grant-    tables回车.如果没有出现提示信息,那就对了. 4.再开一 ...

  2. maven中修改可用的版本

    一般情况下,我们都是建项目,写代码,然后再部署运行的.到最后因为版本问题无法部署的情况下怎么办?重新建项目,然后导代码,这太麻烦了. 一般的处理情况:在项目的硬盘目录中,找到.setting文件夹下的 ...

  3. zabbix3.x添加H3C网络设备详解

    zabbix3.x添加H3C网络设备详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 前言: 欢迎加入:高级运维工程师之路 598432640 相信大家在看我的文章之前,也看过其 ...

  4. js的模块化

    模块化的好处 以前我们平常写js,需要引用大量大js文件,还得注意先后顺序,因为是一层一层依赖的关系.很是麻烦,现在有了模块化,我们只需要知道,我们要实现这个功能需要哪一个js文件就ok,其他的不需要 ...

  5. POJ 2443 Set Operation

    Set Operation Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 3558   Accepted: 1479 Des ...

  6. CodeForces - 327D Block Tower

    D. Block Tower time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  7. Neo4j安装&入门&一些优缺点

    本篇将介绍Neo4j的安装,入门,和自己使用了一段时间后发现的优点缺点,争取简洁和实用. 如果你是第一次接触Neo4j,并且之前也都没接触过类似的Graph Database的话,建议先浏览一下我之前 ...

  8. utf8_bin跟utf8_general_ci的区别

    ci是 case insensitive, 即 "大小写不敏感", a 和 A 会在字符判断中会被当做一样的; bin 是二进制, a 和 A 会别区别对待. 例如你运行: SEL ...

  9. Mac下IntelliJ IDEA快捷键大全

    Mac键盘符号和修饰键说明⌘ Command⇧ Shift⌥ Option⌃ Control↩︎ Return/Enter⌫ Delete⌦ 向前删除键(Fn+Delete)↑ 上箭头↓ 下箭头← 左 ...

  10. 八、uboot 代码流程分析---board_init_f

    接着上一节,板子开始做前期初始化工作. 8.1 board_init_f Board_f.c (common) /* 板子初次初始化.boot_flags = 0 */ void board_init ...