文章目录
1.设置宽度和高度:width、height
块级标签才能设置宽度,内联标签的宽度由内容来决定。
*{
width:120px
height:120px
}
2.字体属性:
1)浏览器的默认字体
#i1 {font-family:"Microsoft Yahei"
}
2)字体大小
#i1 {font-size:20px
}
3)字重(粗细)
#i1 {font-weight:
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
}
4)文本颜色
#i1 {
background-color:rgb(x,x,x)或#eeeeee 或red(颜色名)---3种方式
}
3.文字属性:
1)文字对齐
#i1 {
text-align:
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
}
2)文字装饰
#i1 {
text-decoration:
none 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
}
3)首行缩进:
#i1 {
text-indent:20px
}
4.边框属性:
#i1 {
border:2px solid red
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
}
可以单独为某一个边框设置样式
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
5.实现圆角边框的效果:
#i1 {
border-radius:50%
}
6.dispaly属性(用于控制HTML元素的显示效果):
block: 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分
inline: 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响
inline-block: 使元素同时具有行内元素和块级元素的特点
7.CSS盒子:
margin(外边距):
用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到 相互隔开的目的
#i1 {
margin-top(上):1px
margin-right(右):1px
margin-bottom(下):1px
margin-left(左):1px
}
.i1 {
margin:10px 20px 20px 10px 上-右-下-左 (顺时针方向)
margin:10px 20px 30px 上 -左右 -下
margin:10px 20px 上下 -左右
padding(内填充)
用于控制内容与边框之间的距离
#i1 {
padding-top(上):1px
padding-right(右):1px
padding-bottom(下):1px
padding-left(左):1px
}
简写:
.i1 {
padding:10px 20px 20px 10px 上-右-下-左 (顺时针方向)
padding:10px 20px 30px 上 -左右 -下
padding:10px 20px 上下 -左右
}
Border(边框)
围绕在内边距和内容外的边框
Content(内容)
盒子的内容,显示文本和图像
8.float浮动:
left:向左浮动
right:向右浮动
none:默认值,不浮动
clear:left/right 清除浮动
9.overflow溢出属性 :
visible:默认值。内容不会被修剪,会呈现在元素框之外
hidden:内容会被修剪,并且其余内容是不可见的
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
auto: 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
inherit :规定应该从父元素继承 overflow 属性的值
10.定位(position)脱离文档流
定位有三种方式:相对定位、绝对定位、固定定位
向右浮动,下面的会顶替到上面
float: right;
相对定位,下面的不会顶替*/
position: relative;
绝对定位,下面的会顶替到上面
position: absolute;
固定定位,下面的会顶替到上面
position: fixed;