一、大小

①width宽；height高。

！注释：<a><span>无法使用该方法调整大小

控制元素的大小：宽高。下例是宽高分别100像素的div标签。

<div style="width:100px; height:200px;">

</div>

二背景

background-color背景色

background-image背景图

background-size大小（auto自动。在repeat-no情况下over宽高比不变，超出部分隐藏。contain宽高比不变，缩小至容器放下，可能留有空白）

background-repeat图片平铺方式（x轴平铺repeat-x；y轴平铺repeat-y；repeat-no不平铺。）

background-position图片位置（上top右right下bottom左left居中center）

background-attachment设置图片是否滚动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style type="text/css">

#a{ height: 1000px;

width: 1000px;

background-image:url(1.jpg);

background-repeat: no-repeat;

background-size:contain;

background-position:center;}

</style>

</head>

<body>

    <div id="a"></div>

</body>
</html>

三、字体

font-family设置字体

font-size字体大小12px；16px；

font-style（normal正常的，italic斜体，oblique倾斜）

font-weight:bold加粗

text-decoration(underline下划线，overline上划线，line-through删除线，none没有，作用删除超链接线)

color颜色

四、对齐方式

text-align水平对齐（center把文本排到中间，left靠左对齐，right靠右对齐）

line-height行高

vertiacl-align垂直对齐方式（需要配合行高使用）

text-indent缩进（单位像素，默认情况下15px为一个汉字字符大小，需按照字体大小设置）

五、边界边框

margin外边距

padding内边距

border边框。属性：大小、实虚线、颜色。例如border: 1px solid #fff;

可以使用单独方向，例如maigin-top:0;

六、列表方块

list-style：none不使用前面的点，inside点在里面，outside点在外面。

list-style-image将序号变更为图片。

七、格式布局

①position位置定位

fixed固定位置，相对浏览器

absolute绝对定位，相对父级

relative相对定位，对于原来的位置

②top、right、bottom、left距离上右下左的位置

③float流、流动，left向左流动，right向右流动

④clear:both清流、

⑤z-index分层

八、其他

①display隐藏属性。none隐藏、block显示。不占位置。可以使用display:inline-block改变span、a标签的大小

②visibility隐藏hidden。隐藏后占位置

③overflow超出隐藏hidden。

④透明opacity:0.5;-moz-opacity:0.5;filter:alpha(opcaity=50)

⑤圆角border-radius:5px;

⑥box-shadow:20px 20px 10px white;（左、下、隐约的大小、颜色）

⑦box-reflect:文字图片倒影

1、方向above上方，below下方，left左侧，right右侧

2、offset偏移距离，百分比定义。默认值为0

3、mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。

CSS样式学习-2的更多相关文章

  1. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  2. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  3. Boostrap入门级css样式学习

    1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...

  4. 2019-02-15 CSS样式学习——（内容来自mooc北京林业大学web前端开发授课ppt）

    CSS样式的添加方法 行内样式 e.x. 内嵌样式 e.x. 注意内嵌样式写在head标签内: 单独文件(外部式样式表文件) 也是在head标签内插入超链接,sublime+emmet可以用link: ...

  5. css样式学习笔记

    视频参见php中文网玉女心经视频教程 讲解的相当的清楚和明白 第1章     :css快速入门 1.1     什么是css 改变html框架的样式. 1.2     css的三种引入形式 第一种形式 ...

  6. html之CSS样式学习笔记

    本文内容: 字体样式 文本样式 背景样式 尺寸样式 盒子模型 边框样式 边距样式 浮动布局 定位布局 [CSS3]伸缩布局 标签显示方式 列表样式 [CSS3]过渡样式 [CSS3]变换样式之2D变形 ...

  7. CSS样式学习-3、轮廓、伪类/元素、display-flex布局

    一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...

  8. CSS样式学习-1

    一.分类 ①内联,写在标签中,写法是style="样式属性".优先级最高. 优点:控制精确.缺点:代码重用性差,范围小. 例如: <div style="font- ...

  9. css样式学习小知识

    1. 使用百分比设置宽高 自适用宽高的,有分割的区域,可以适用百分比:30% 70% 如果有一部分是固定的宽度或者高度,可以使用:height: calc( 100% - 36px ); 2. inp ...

  10. bootstrap 学习 ---css样式学习

    bootstrap 适用于响应式布局,移动设备优先的web项目 1.学习bootstrap需要引入bootstrap的css,jquery,bootstrap的js,注意:jquery文件必须在boo ...

随机推荐

  1. 如果遇到Hadoop集群正常，MapReduce作业运行出现错误，如何来查看作业运行日志（图文详解）

    不多说,直接上干货! 这个时候我们可以进入logs下的userlogs 备注:userlogs目录下有很多个以往运行的作业,我选择最新的最大编号的作业,就是我们当前运行作业的日志.然后找到stderr ...

  2. Java-Runoob-高级教程-实例-方法：04. Java 实例 – 斐波那契数列

    ylbtech-Java-Runoob-高级教程-实例-方法:04. Java 实例 – 斐波那契数列 1.返回顶部 1. Java 实例 - 斐波那契数列  Java 实例 斐波那契数列指的是这样一 ...

  3. tar -zxvf中的z是个什么鬼

    习惯了tar -czvf和tar -zxvf.今天在本地用压缩软件7z打了一个tar包,在docker容器中用tar -zxvf怎么都解压不了,报错gzip: stdin: not in gzip f ...

  4. python的68个内置函数

    内置函数 内置函数就是python给你提供的, 拿来直接用的函数, 比如print., input等. 截止到python版本3.6.2 python一共提供了68个内置函数. #68个内置函数 # ...

  5. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  6. 00007 - Linux时间date命令详解

    1.命令:date 2.命令功能:date 可以用来显示或设定系统的日期与时间. 3.命令参数 -d<字符串>:显示字符串所指的日期与时间.字符串前后必须加上双引号: -s<字符串& ...

  7. All entities must be found CRM客户责任人变更报错

    问题: 1 修改客户的责任人时,报错. 修改其它字段正常. 2 有的客户可以修改,有的不能修改. 使用 Trace Log 查到的信息: All entities must be found. 原因: ...

  8. Java - 25 Java 包(package)

    Java 包(package) 为了更好地组织类,Java提供了包机制,用于区别类名的命名空间. 包的作用 1 把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2 如同文件夹一样,包 ...

  9. MySQL管理工具HeidiSQL

    MySQL管理工具HeidiSQL   HeidiSQL 是一个功能非常强大的 MySQL 客户端软件.它是德国程序员Ansgar Becker和几个Delphi程序员开发的一个开源工具.要通过Hei ...

  10. zepto引用touch模块后，click失效

    近日,有个拼图小活动,引用了zepto,以及zepto的touch模块. 在拼图结束之后,进行抽奖的活动,该抽奖结果是以弹框展示. 这里的关闭按钮需要添加点击事件: $(document.body). ...