块元素标签(行元素)和内联元素标签(行内元素)
- 标签在页面上会显示成一个方块。除了显示成方块,它们一般分为下面两类:
- 块元素:在布局中默认会独占一行,块元素后的元素需换行排列。
- 内联元素:元素之间可以排列在一行,设置宽高无效,它的宽高由内容撑开。
css引入页面的方式有三种:
- 1、内联式:通过标签的style属性,在标签上直接写样式。
<div style="width:100px; height:100px; background:red ">......</div>
- 2、嵌入式:通过style标签,在网页上创建嵌入的样式表。
-
<style type="text/css">
-
div
{ width:100px; height:100px; background:red
}
-
......
-
</style>
- 3、外链式:通过link标签,链接外部样式文件到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
css选择器
- 1、标签选择器
div{color:red}
- 2、类选择器
.blue{color:blue}
- 3、层级选择器
-
.con
span
{color:red}
-
.con
.pink
{color:pink}
- 4、id选择器
#box{color:red}
- 5、伪类选择器
.box1:hover{width:300px;}
布局常用样式属性:
- width 设置元素(标签)的宽度,如:width:100px;
- height 设置元素(标签)的高度,如:height:200px;
- background 设置元素背景色或者背景图片,如:background:gold; 设置元素背景色为金色
- border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
- 以上也可以拆分成四个边的写法,分别设置四个边的:
- border-top 设置顶边边框,如:border-top:10px solid red;
- border-left 设置左边边框,如:border-left:10px solid blue;
- border-right 设置右边边框,如:border-right:10px solid green;
- border-bottom 设置底边边框,如:border-bottom:10px solid pink;
- padding 设置元素包含的内容和元素边框的距离,也叫内边距,如padding:20px;padding是同时设置4个边的,也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
- margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
- float 设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动:float:left; 右浮动:float:right;
文本常用样式属性一:
- color 设置文字的颜色,如: color:red;
- font-size 设置文字的大小,如:font-size:12px;
- font-family 设置文字的字体,如:font-family:'微软雅黑';为了避免中文字不兼容,一般写成:font-family:'Microsoft Yahei';
- font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
- line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
- text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
盒子模型
设置边框
border-top:10px solid red;
设置内间距padding
-
padding-top:
20
px;
/* 设置顶部内间距20px */
-
padding-left
:
30
px;
/* 设置左边内间距30px */
-
padding-right
:
40
px;
/* 设置右边内间距40px */
-
padding-bottom
:
50
px;
/* 设置底部内间距50px */
-
padding:
20
px
40
px
50
px
30
px;
/* 四个值按照顺时针方向,分别设置的是 上 右 下 左
设置外间距margin
- 外间距居中设置:
margin:0px auto;
盒子的真实尺寸
- 盒子宽度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
css属性提高:
文本常用样式属性二:
- text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
- text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
display属性
display属性是用来设置元素的类型及隐藏的,常用的属性有:
- none 元素隐藏且不占位置
- block 元素以块元素显示
css元素溢出
当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。
overflow的设置项:
- 1、visible 默认值。内容不会被修剪,会呈现在元素框之外。
- 2、hidden 内容会被修剪,并且其余内容是不可见的。
- 3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- 4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
定位
关于定位 我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:
relative(设置父级为) 生成相对定位元素,一般是将父级设置相对定位,子级设置绝对定位,子级就以父级作为参照来定位,否则子级相对于body来定位。
absolute(设置子级为) 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
页面嵌套
-
<a href="001.html" target="mainframe">001页面
</a>
-
<a href="002.html" target="mainframe">002页面
</a>
-
<a href="003.html" target="mainframe">003页面
</a>
-
-
<iframe src="001.html" frameborder="0" name="mainframe">
</iframe>