一、宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度,内联标签的宽度由内容来决定。
<!--设置块级标签的宽度-->
<div style="background-color: orange;200px" >div标签</div>
<!--设置块级标签的高度-->
<p style="background-color: indianred;height: 100px">p段落标签</p>
二、文字属性
① 文字对齐
text-align:属性
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
<body>
<!--左对齐-->
<div style="text-align: left">左对齐</div>
<!--右对齐-->
<div style="text-align: right">右对齐</div>
<!--居中对齐-->
<div style="text-align: center">居中对齐</div>
<!--两端对齐-->
<div style="text-align: justify">两端对齐</div>
</body>
② 文字装饰
text-decoration:属性
none 默认
underline 文本下的一条线
overline 文本上的一条线
line-through 穿过文本的一条线
inherit 继承父元素的text-decoration属性的值
<!--标准的文本-->
<div style="text-decoration: none">标准的文本</div>
<!--文本下有一条线-->
<div style="text-decoration: underline">文本下有一条线</div>
<!--文本上有一条线-->
<div style="text-decoration: overline">文本上有一条线</div>
<!--文本穿插一条线-->
<div style="text-decoration: line-through">文本穿插一条线</div>
③ 首行缩进
text-indent:属性
<!--首行缩进-->
<p style="font-size: 16px;text-indent: 32px">缩进两个字符</p>
三、字体属性
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。
font-size 设置文字的大小
<style>
/*浏览器可识别的字体,浏览器会逐个尝试*/
body {
font-family: "Microsoft YaHei","微软雅黑","Arial",sans-serif;
}
/*定义字体的大小*/
div {
font-size: 20px;
}
</style>
字体的自重
font-weight:属性
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体的粗细,400等于normal,700等于bold
inherit 继承父元素字体的粗细值
<!--normal标准粗细-->
<p style="font-weight: normal">普通字体</p>
<!--bold粗体-->
<p style="font-weight: bold">粗体字体</p>
<!--bolder更粗的字体-->
<p style="font-weight: bolder">更粗的字体</p>
<!--lighter更细的字体-->
<p style="font-weight: lighter">更细的字体</p>
<!--设置字体的粗细值-->
<p style="font-weight: 500">设置字体的粗细值500</p>
文本颜色:
三原色:红绿蓝
- 十六进制值 - 如: #FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
还有rgba(255,0,0,0.3),第四个值为alpha, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。
四、背景属性
支持简写
/*设置背景颜色*/
background-color: #eeeeee;
/*设置背景图片,默认平铺*/
background-image: url("zhouyu.jpg");
/*背景图片平铺设置*/
/*背景图片不平铺*/
background-repeat: no-repeat;
/*背景图片水平平铺*/
background-repeat: repeat-x;
/*背景图片垂直平铺*/
background-repeat: repeat-y;
/*背景普通平铺*/
background-repeat: repeat;
/*背景位置*/
/*背景在左上*/
background-position: left top;
/*背景在左中*/
background-position: left center;
/*背景在左下*/
background-position: left bottom;
/*背景在中上*/
background-position: center top;
/*背景在居中*/
background-position: center center;
/*背景在中下*/
background-position: center bottom;
/*背景在右上*/
background-position: right top;
/*背景在右中*/
background-position: right center;
/*背景在右下*/
background-position: right bottom;
/*背景在x轴200px,y轴200px*/
background-position: 200px 200px;
将图片固定位置
/*背景图片固定位置 */
background-attachment: fixed;
五、边框属性
支持简写
/*边框宽度*/
border- 5px;
/*边框线样式*/
/*实线*/
border-style: solid;
/*点状虚线*/
border-style: dotted;
/*矩形虚线*/
border-style: dashed;
/*无边框*/
border-style: none;
/*边框线颜色*/
border-color: red;
可单独设置部分边框
/*单独设置边框*/
border-left: red 2px solid;
画圆
border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
/*画圆*/
/*设置标签大小*/
300px;
height: 300px;
/*设置背景颜色*/
background-color: #b0b0b0;
/*设置边框*/
border: red;
border-radius: 50%;
六、display属性
用于控制HTML元素的显示效果
值 | 意义 |
display:"none" | HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
display:"block" | 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。 |
display:"inline" | 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别:
visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 200px;
width: 200px;
background-color: red;
/*使元素同时具有行内元素和块级元素的特点*/
display: inline-block;
/*按行内元素显示*/
display: inline;
/*默认占满整个页面的宽度,如果设置了指定宽度,会用margin填充剩下的部分*/
display: block;
}
</style>
</head>
<body>
<!--三个div平铺-->
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
七、CSS盒子模型
margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离;
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容,显示文本和图像。
① margin外边距
控制标签与标签之间的距离,可以单独指定,按照上右下左的顺序
填写方式(可简写):
1.上、右、下、左
2.上下、左右
3.上、左右、下
4.居中写法:0 auto;
② padding 内填充,内容和边框之间的距离
用于让标签显得更加丰满,内容更充实
顺序:上右下左
补充padding的常用简写方式:
1.提供一个,用于四边;
2.提供两个,第一个用于上-下,第二个用于左-右;
3.如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
4.提供四个参数值,将按上-右-下-左的顺序作用于四边;
八、float浮动
float作用于页面的布局
关于浮动的两个特点:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
/*向左浮动*/
float: left;
/*向右浮动*/
float:right;
/*默认值,不浮动*/
float: none;
九、clear
clear属性规定元素哪一侧不允许其他浮动元素
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
注意:clear属性只会对自身起作用,而不会影响其他元素。
/*左右两侧不允许浮动*/
clear: both;
/*左侧不允许浮动*/
clear: left;
/*右侧不允许浮动*/
clear: right;
/*允许浮动*/
clear: none;
clear解决了float的副作用(副作用:浮动的标签会脱离文档,其他的标签会占用它的位置)
方法一:单独设置一个div的clear属性
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
body {
margin: 0;
}
.left , .right {
width: 300px;
height: 300px;
}
.left {
background-color: red;
float: left;
}
.right {
background-color: green;
float: right;
}
/*设置两端不允许浮动*/
.cc {
clear: both;
}
div {
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="cc"></div>
<div></div>
方法二:
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
body {
margin: 0;
}
.c2 {
width: 300px;
height: 300px;
}
.left {
background-color: red;
float: left;
}
.right {
background-color: green;
float: right;
}
.c1 {
border: 1px solid black;
}
/*设置两端不允许浮动*/
.clearfix:after {
content: '';
display: block;
clear: both;
}
.c3 {
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1 clearfix">
<div class="c2 left"></div>
<div class="c2 right"></div>
</div>
<div class="c3"></div>
</body>
十、overflow溢出属性
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
overflow(水平和垂直均设置)
overflow-x(设置水平方向)
overflow-y(设置垂直方向)
<head>
<meta charset="UTF-8">
<title>苦寒行</title>
<style>
.ancient {
width :300px;
height: 100px;
border: 1px solid black;
/*以滚动条的形式查看其它内容*/
overflow: scroll;
}
</style>
</head>
<body>
<div class="ancient">
<p>北上太行山,艰哉何巍巍!</p>
<p>羊肠坂诘屈,车轮为之摧。</p>
<p>树木何萧瑟!北风声正悲。</p>
<p>熊罴对我蹲,虎豹夹路啼。</p>
<p>溪谷少人民,雪落何霏霏!</p>
<p>延颈长叹息,远行多所怀。</p>
<p>我心何怫郁?思欲一东归。</p>
<p>水深桥梁绝,中路正徘徊。</p>
<p>迷惑失故路,薄暮无宿栖。</p>
<p>行行日已远,人马同时饥。</p>
<p>担囊行取薪,斧冰持作糜。</p>
<p>悲彼东山诗,悠悠使我哀。</p>
</div>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.portrait {
height: 200px;
width: 200px;
border: 2px solid green;
border-radius: 50%;
overflow: hidden;
}
</style>
</head>
<body>
<div class="portrait">
<img src="zhouyu.jpg" alt="">
</div>
十一、定位
用于小范围的布局
position属性
值:
static 默认值
relative 相对定位
相对于标签原来的位置做的定位
absolute 绝对定位
相对于已经定位过的祖先标签做的定位,和浮动一样
多用于页面局部的布局,注意要和定位过的祖先标签配合使用
绝对定位和浮动一样,标签都会脱离文档,别的标签可以占用它的位置
场景:搜索框弹出内容
fixed 固定
十二、z-index
场景:注册弹出框
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 99;
}
.modal {
background-color: white;
height: 300px;
width: 400px;
z-index: 1000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}
</style>
</head>
<body>
<!--模糊层-->
<div class="cover"></div>
<!--弹出框-->
<div class="modal">
<form action="">
<div><label><input type="text"></label></div>
<div><label><input type="text"></label></div>
<div><label><input type="submit"></label></div>
</form>
</div>
</body>
</html>
十三、opacity透明度
用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。
十四、其他
line-hetght 行高设置成标签的高度可以垂直居中
text-align center居中