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. Jenkins自动发布代码实战篇

    Jenkins自动发布代码实战篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.Jenkins服务器配置秘钥对并上传到Gitlab中 1>.在Jenkins后端生成秘钥 ...

  2. js的模块化

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

  3. 在windows环境下实现开机延迟启动tomcat

    如果说我们的服务器断电了 开机之后还需要手动开下服务  还需要远程连接上  然后一个一个开启  是不是很麻烦  我们可以写一个bat脚本  然后设置开机5分钟之后启动tomcat 首先配置环境变量: ...

  4. .NET面试题系列（十一）WinDbg、Perfmon

    WinDbg 资料 https://www.cnblogs.com/sheng-jie/p/9503650.html https://www.cnblogs.com/yudongdong/p/9701 ...

  5. 八、IIC 接口

    8.1 IIC接口介绍 8.1.1 IIC 总线的概念 I2C总线是由Philips公司开发的一种简单.双向二线制同步串行总线.它只需要两根线即可在连接于总线上的器件之间传送信息. 主器件用于启动总线 ...

  6. go通过swig封装、调用c++共享库的技术总结

    go通过swig封装.调用c++共享库的技术总结 @(知识记录) 1 简介 最近在研究golang,希望能对目前既有的python服务做一些优化,这些服务目前已经占用了6-7台机器.选择golang的 ...

  7. js对当前时间的相关操作

    链接:https://www.cnblogs.com/visi_zhangyang/p/3490122.html js中获得当前时间是年份和月份,形如:201208       //获取完整的日期 v ...

  8. luogu P2325 [SCOI2005]王室联邦

    传送门 做法是dfs整棵树,当访问一个点\(x\)时,先访问儿子,若某个时刻子树大小\(\ge b\)时,就把那些点放在一个省里,省会记为\(x\),访问完儿子再把\(x\)加入栈.最后栈中剩余的没加 ...

  9. [JSOI2008]球形空间产生器 （高斯消元）

    [JSOI2008]球形空间产生器 \(solution:\) 非常明显的一道高斯消元.给了你n+1个球上的位置,我们知道球上任何一点到球心的距离是相等,所以我们 可以利用这一个性质.我们用n+1个球 ...

  10. 【转贴】Linux下MySQL 5.5的修改字符集编码为UTF8（彻底解决中文乱码问题）

    原文地址; http://www.ha97.com/5359.html PS:昨天一同事遇到mysql 5.5中文乱码问题,找我解决.解决了,有个细节问题网上没人说,我就总结一下. 一.登录MySQL ...