0x001 DIV+CSS 介绍
层叠样式表(英文全称:Cascading Style Sheets
)是一种用来表现 HTML
(标准通用
标记语言的一个应用)或 XML
(标准通用标记语言的一个子集)等文件样式的
计算机语言。CSS
不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对
网页各元素进行格式化。
CSS
能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体
字号样式,拥有对网页对象和模型样式编辑的能力。
DIV
是 html
的一个标签 css
是一个样式表
注释:/**/
0x002 样式列表
1.嵌入式列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo1{
color: red;
width: 100px:
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="demo1">
demo1
</div>
</body>
</html>
2.外部样式
<link rel="stylesheet" href="css/style.css"/>
在 css/style.css
文件中添加如下代码
@import url
@import url("g.css");
.demo1{
color: red
width: 100px;
height: 100px;
background: nlue;
}
3.内联样式
<div color: red,width: 100px,height: 100px,background: blue>demo1</div>
0x003 样式选择器
- 元素选择器 div{属性:值}
- ID 选择器 #id{属性:值}
- class 选择器 .类名{属性:值}
- 子选择器 元数 空格 元素{属性:值}
- 后代选择器 元数 > 元数{属性:值}
- 属性选择器 元素[属性]{}
- 通配符选择器 *{属性:值}
- 群组选择器
0x004 背景
CSS 属性定义背景效果:
- background-color 规定要使用的背景颜色。
- background-position 规定背景图像的位置。
- background-size 规定背景图片的尺寸。
- background-repeat 规定如何重复背景图像。
- background-origin 规定背景图片的定位区域。
- background-clip 规定背景的绘制区域。
CSS 属性定义背景位置:
- repeat 默认。背景图像将在垂直方向和水平方向重复。
- repeat-x 背景图像将在水平方向重复。
- repeat-y 背景图像将在垂直方向重复。
- no-repeat 背景图像将仅显示一次。
- inherit 规定应该从父元素继承 background-repeat 属性的设置。
- background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
- background-image 规定要使用的背景图像。
inherit 可以继承的参数:
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottom
简写
background: url(images/bg.gif) no-repeat top right
背景图片的滚动
背景图片是否随着内容的滚动而滚动由 background-attachment 设置
- background-attachment:fixed; 固定,不随内容的滚动而滚动
- background-attachment:scroll; 滚动,随内容的滚动而滚动
0x005 边框
边框颜色 border-color:#000
边框宽度 border-width:1px;
- border-left 设置左边框,一般单独设置左边框样式使用
- border-right 设置右边框,一般单独设置右边框样式使用
- border-top 设置上边框,一般单独设置上边框样式使用
- border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为 css 下划线效果应用。
边框样式值如下:
- none : 无边框。与任何指定的 border-width 值无关
- hidden : 隐藏边框。IE 不支持
- dotted : 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为点线。否则为实线(常用)
- dashed : 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为虚线。否则为实线(常用)
- solid : 实线边框(常用)
- double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值
上 右 下 左
- groove : 根据 border-color 的值画 3D 凹槽
- ridge : 根据 border-color 的值画菱形边框
- inset : 根据 border-color 的值画 3D 凹边
- outset : 根据 border-color 的值画 3D 凸边
上 右 下 左 简写
border:5px solid red;
Border 边框
常见的写法
border:1px solid #foo;
单独属性:
- border-widh:
- border-style:
- dotted 点状虚线
- dashed(虚线)
- solid(实线)
- double(双实线)
- border-color(颜色)
0x006 属性
1.文字属性
- color:red; 文字颜色 #ffeeees
- font-size:12px; 文字大小
- font-weight:bolds 文字粗细(bold/normal)
- font-family:”宋体”文字字体
- font-variant:small-caps 小写字母以大写字母显示
2.文本属性
- text-align:center; 文本对齐(right/left/center)
- line-height:10px; 行间距(可通过它实现文本的垂直居中)
- text-indent:20px; 首行缩进
- text-decoration:none;
- 文本线(none/underline/overline/line-through) underline/overline/line-through; 定义文本上的下划线/上划线/中划线
- letter-spacing: 字间距
0x007 列表
- list-style-type 设置列表项标记的类型。参阅:list-style-type 中可能的值。
- list-style-position 设置在何处放置列表项标记。参阅:list-style-position 中可能的值。
- list-style-image 使用图像来替换列表项的标记。参阅:list-style-image 中可能的值。
- inherit 规定应该从父元素继承 list-style 属性的值
取值 :disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
- disc: 点
- circle: 圆圈
- square: 正方形
- decimal: 数字
- decimal-leading-zero: 十进制数,不足两位的补齐前导 0,例如: 01, 02, 03, ..., 98, 99
- lower-roman: 小写罗马文字,例如: i, ii, iii, iv, v, ...
- upper-roman: 大写罗马文字,例如: I, II, III, IV, V, ...
- lower-greek: 小写希腊字母,例如: α(alpha), β(beta), γ(gamma), ...
- lower-latin: 小写拉丁文,例如: a, b, c, ... z
- upper-latin: 大写拉丁文,例如: A, B, C, ... Z
- armenian: 亚美尼亚数字
- georgian: 乔治亚数字,例如: an, ban, gan, ..., he, tan, in, in-an, ...
- lower-alpha: 小写拉丁文,例如: a, b, c, ... z
- upper-alpha: 大写拉丁文,例如: A, B, C, ... Z
- none: 无(取消所有的 list 样式)
- inherit: 继承
list-style-position
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本
不根据标记对齐。
简写
list-style:square inside url('/i/arrow.gif');
0x008 超链接
格式:
a{text-decoration: none;}
- a:link {color:#FF0000;} /* 未访问的链接 */
- a:visited {color:#00FF00;} /* 已访问的链接 */
- a:hover {color:#FF00FF;} /* 鼠标划过链接 */
- a:active {color:#0000FF;} /* 已选中的链接 */
0x009 盒子模型
所有HTML
元素可以看作盒子,在CSS
中,"box model"
这一术语是用来设计和布局时使用。
CSS
盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
如下图:
盒子模型的组成部分:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
属性:
- 自身的身高 width height
- 内边距 padding
- 盒子边框 border
- 与其他盒子的距离 margin 外边距
元素的宽度和高度
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
0x010 margin & padding
1.margin(外边距)
margin
清除周围的(外边框)元素区域。margin
没有背景颜色,是完全透明的。
margin
可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
可能的值
- auto 设置浏览器边距。这样做的结果会依赖于浏览器
- length 定义一个固定的margin(使用像素,pt,em等)
- % 定义一个使用百分比的边距
Margin - 单边外边距属性
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
简写
margin:100px 50px;
2.padding(填充)
当元素的 padding
(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。
单独使用 padding
属性可以改变上下左右的填充。
可能的值:
- length 定义一个固定的填充(像素, pt, em,等)
- % 使用百分比值定义一个填充
padding- 单边内边距属性
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
简写
padding:25px 50px;
由此可以看出,margin 和 padding 的值和属性是一样的
0x011 Float(浮动)
- left 元素向左浮动。
- right 元素向右浮动
清除浮动
clear: both;
0x012 块级元素、行内元素
1.块级元素:
他会独占一行,在默认情况下,其宽度自动填满其父元素的宽度;
块级元素可以设置 width
、height
属性;
块级元素即使设置了宽度也是独占一行,块级元素可以设置 margin
、padding
属性;
- address 地址
- center 举中对齐块
- div- 常用块级容易
- dl 定义列表
- form 交互表单 (只能用来容纳其它块元素)
- h 标签
- hr 水平分隔线
- ol 无需列表
- ul 有序列表
- p 段落
- pre 格式化文本
2.行内元素:
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到行排不下,就自动换行,其宽度随内容而变化;
行内元素的 width
、height
属性则无效;
行内元素的 margin
、padding
属性很奇怪,水平方向的 padding-left
、padding-rigtht
、margin-left
、padding-right
都会产生边距效果,但是竖直方向的 padding-top
、padding-bottom
、margin-top
、margin-bottom
却不产生边距效果。
- a - 锚点
- b - 粗体(不推荐)
- br- 换行
- code - 计算机代码(在引用源码的时候需要)
- em - 强调
- i - 斜体
- img - 图片(特殊的内联元素,同时是内联替换元素,替换元素可以设置宽高)当图片和 DIV 在一起时,图片周围会出现 margin 现象,即元素不重合贴在一起,为了解决这个问题,设置 img 的 css 为{margin:0;display:block;border:0px}
- input - 输入框
- label - 表格标签
- select - 项目选择
- strong - 粗体强调
- textarea - 多行文本输入框
- u - 下划线
- var - 定义变量
替换元素有如下:(和 img 一样的设置方法)
<img>
、<input>
、<textarea>
、<select>
、<object>
都是替换元素,这些元素都没有实际的内容
行内元素转换
- display:none; 不显示
- display:block;变成块级元素
- display:inline; 变成行内元素
- display:inline-block;以块级元素样式展示,以行级元素样式排列
0x013 溢出
- overflow 属性规定当内容溢出元素框时发生的事情。
- visible 默认值。内容不会被修剪,会呈现在元素框之外。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
- inherit 规定应该从父元素继承 overflow 属性的值。
0x014 Position(定位)
static 静态定位(不对它的位置进行改变,在哪里就在那里)
默认值。没有定位,元素出现在正常的流中(忽略 top
,bottom
,left
,right
或者
z-index
声明)。
fixed 固定定位(参照物--浏览器窗口)---做弹窗广告用到
生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 left
, top
, right
以及 bottom
属性进行规定。
relative(相对定位 )(参照物以他本身)
生成相对定位的元素,相对于其正常位置进行定位。
absolute(绝对定位)(除了 static
都可以,找到参照物-->与它最近的已经有定位的父元素进行定位)
生成绝对定位的元素,相对于 static
定位以外的第一个父元素进行定位。
元素的位置通过 left
, top
, right
以及 bottom
属性进行规定
z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
0x015 更多详细教程
标签:WEB,border,元素,边框,padding,DIV,margin,CSS,属性 From: https://www.cnblogs.com/Cx330Lm/p/16900999.html