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. cece

    cece ===================== 测试样式 =======================       循路觅宗师,形影不相离,师知吾亦知,吾乃.....成宗师? 网站导航 显示公 ...

  2. 从SVD到推荐系统

    最近在学习推荐系统(Recommender System),跟大部分人一样,我也是从<推荐系统实践>学起,同时也想跟学机器学习模型时一样使用几个开源的python库玩玩.于是找到了surp ...

  3. 超级牛皮的oracle的分析函数over(Partition by...) 及开窗函数

    over(Partition by...) 一个超级牛皮的ORACLE特有函数. 天天都用ORACLE,用了快2年了.最近才接触到这个功能强大而灵活的函数.真实惭愧啊! oracle的分析函数over ...

  4. java实现Md5加密工具类

    场景:平常我们用户注册的密码保存到数据库都不会是明文存储的.都是经过加密之后的.因为保证用户的安全性.我们通常是用md5算法来加密的. 这个只能算是一个工具类.没必要了解里面是怎么实现的.拿来用就可以 ...

  5. 解决win10无线无故断网,重启才恢复正常的情况【原】

    最初以为是路由器问题 ,但是别人电脑都好好的呀,而且我自己的手机也是好好的能正常上网,所以只能从自身电脑找问题了,目测就是无线网卡出问题了.经过一番百度,原来是win10自动开启了省模式,运行一段时间 ...

  6. Gym - 100085G - GCD Guessing Game

    原题链接 题意一个数字x在1-n之间,现在猜数字,每次猜一个数字a,告知gcd(x, a)的答案,问最坏情况下需要猜几次 分析 考虑素数.当猜的数为一组素数的乘积时,就可以把这些素数都猜出来.那么答案 ...

  7. Codeforces 950 D. A Leapfrog in the Array

    http://codeforces.com/contest/950/problem/D 前n/2个格子的奇数下标的数没有参与移动 候n/2个格子的奇数下标的数一定是一路移向偶数下标移 所以还原数的初始 ...

  8. HashMap分析及散列的冲突处理

    1,Hashing过程 像二分查找.AVL树查找,这些查找算法的时间复杂度为O(logn),而对于哈希表而言,我们一般说它的查找时间复杂度为O(1).那它是怎么实现的呢?这就是一个Hashing过程. ...

  9. ZOC7 for Mac连接CentOS7无法输入中文问题

    确定是ZOC7的问题 改为 iTerm2 加 ZSH 能够输入中文了 自己配置profile 慢慢所有的终端都用iTerm2 渐渐放弃ZOC7

  10. 解决NO migrations to apply

    创建表之后,遇到models模型变动,故当时做了删除应用文件夹下migrations文件,删除后重建,但重建后执行模型合并操作结果为No Changes,无法创建数据表 执行python3 manag ...