字体
- font-size :字体大小; 浏览器默认为16px，但做网页开发一般用12px；字体大小设置的是字体的高；宽按比例调整
- font-weight:字体加粗;默认值为normal；值：lighter(细) normal(正常) bold(加粗) bolder(更粗，能否实现取决于所使用的字体包中是否有‘bolder’这种样式) ；还可用数字表示：100 200 300 ~ 900（细 -> 粗）
- font-style :字体样式 值：italic(斜体)
- font-family: 苹果公司字体arial
- color:透明色 transparent
三种设置字体颜色的方法
1.纯英文单词--------------例：color : blue;(颜色不标准，开发时不可用)
2.颜色代码----------------例：color : #ff4400;光学三原色：红red绿green蓝blue【rgb】
3.颜色函数----------------例：color : rgb(255,255,255)
div
- border：边框 border : 100px solid black;每个边也可单独设置，例：border-left : 10px solid green;border-right-color : yellow;
- text-align: 文本对齐方式 left：左对齐
- line-height：单行文本行高
- 单位：em ；1em = 1 font-size
- 划线
- 从中间划横线 : text-decoration:line-through;
- 下划线 : text-decoration: underline;
- 上划线 : text-decoration: overline;
- 去除横线: text-decoration: none;
6.cursor:光标在容器中的样式
- 文字在容器中水平垂直居中，实现方法：
- 单行文本居中
.firstDiv{
/* 单行文本居中 行高等于容器高度*/
background-color: red;
color: #fff;
/* 垂直居中*/
height: 300px;
line-height: 300px;
}
- 多行文本居中
8.当鼠标在容器上，使容器样式发生改变
/*伪类选择器*/
div:hover{
background-color: orange;
}
9.行级元素、块级元素及行级块元素由：display控制
行级元素(inline)：内容决定元素所占位置，不可通过css改变宽高，有文字特性（被分隔）；span、strong、em、a、del等
块级元素(block)：独占一行，可以通过css改变宽高；div、p、ul、li、ol、form、address
行级块元素(inline-block): 内容决定大小，可以该宽高 img
以上各标签display都可以更改
10.img：如果只设置宽或者高，则相对应的高或者宽会等比例显示解决多个img中间有空隙问题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="../../../Pictures/笔记簿.png">
<img src="../../../Pictures/笔记簿.png">
<img src="../../../Pictures/笔记簿.png">
<img src="../../../Pictures/笔记簿.png">
</body>
</html>
运行结果
运行结果
解决方法一：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="../../../Pictures/笔记簿.png"><img src="../../../Pictures/笔记簿.png"><img src="../../../Pictures/笔记簿.png"><img src="../../../Pictures/笔记簿.png">
</body>
</html>
10.层模型
- position:absolute;脱离原来位置进行定位 ,z-index:0;确定该元素在第几层，大的优先显示
- position:relative;保留原来位置进行定位,相对于自己原来位置进行定位
- position:fixed;
11.块元素在整个浏览器页面居中
.box1{
position: fixed;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
background-color: #FF0014;
}
12.作圆
.box1{
width: 100px;
height: 100px;
border: 10px solid black;
/*设置圆角 */
border-radius: 50%;
}
13.两栏布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.box1{
position: absolute;
right: 0;
width: 100px;
height: 100px;
background-color: #fcc;
opacity: 0.5;
}
.box2{
margin-right: 100px;
height: 100px;
background-color: black;
}
14.两个bug
- 第一个----margin塌陷
当一个大盒子嵌套一个小盒子，大盒子top之后，小盒子再top，则小盒子的top不起作用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 大盒子box1嵌套小盒子box2-->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.box1{
margin-top: 100px;
margin-left: 100px;
width: 100px;
height: 100px;
background-color: #fcc;
}
.box2{
width: 50px;
height: 50px;
background-color: black;
/* margin-top:50px,没有变化*/
margin-top: 50px;
/* margin-left:50px,正常*/
margin-left: 50px;
}
正规解决方法----触发bfc解决
*{
margin: 0;
padding: 0;
}
.box1{
margin-top: 100px;
margin-left: 100px;
width: 100px;
height: 100px;
background-color: #fcc;
}
.box2{
/* position: absolute;可触发bfc*/
position: absolute;
width: 50px;
height: 50px;
background-color: black;
/* margin-top:50px,没有变化*/
margin-top: 50px;
/* margin-left:50px,正常*/
margin-left: 50px;
}
/*触发bfc有{
overflow: hidden;
display: inline-block;
position: absolute;
}*/
- 第二个问题----margin合并-----该bug不做解决，直接改变margin-bottom值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 大盒子box1嵌套小盒子box2-->
<span class="box1">123</span>
<span class="box2">456</span>
<div class="demo1">1</div>
<div class="demo2">2</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.box1{
margin-left: 100px;
background-color: blue;
}
.box2{
margin-left: 100px;
background-color: red;
}
.demo1{
background-color: red;
margin-bottom: 200px;
}
.demo2{
background-color: green;
/* BUG: margin-top: 100px;与demo1的marg-bottom重合*/
margin-top: 100px;
}
解决方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 大盒子box1嵌套小盒子box2-->
<span class="box1">123</span>
<span class="box2">456</span>
<!--解决方法 一
<div class="demo1">1</div>
<div class="wrapper">
<div class="demo2">2</div>
</div>
-->
<!-- 解决方法二
<div class="wrapper">
<div class="demo1">1</div>
<div class="demo2">2</div>
</div>
-->
</body>
</html>
*{
margin: 0;
padding: 0;
}
.box1{
margin-left: 100px;
background-color: blue;
}
.box2{
margin-left: 100px;
background-color: red;
}
.demo1{
background-color: red;
margin-bottom: 200px;
}
.demo2{
background-color: green;
/* margin-top: 100px;与demo1的marg-bottom重合*/
margin-top: 100px;
}
/*使用bfc*/
.wrapper{
overflow: hidden;
}
15.浮动流
- 浮动元素产生浮动流
- 所有产生浮动流的元素，块级元素排版时无视这类元素
- 但产生bfc的元素和文本类属性元素以及文本在排版时不能无视浮动元素
- 清除浮动流方法
在浮动元素后添加一个p标签，该p标签样式 p{border-top: 0 solid black;clear: both;}
clear专门用于清除浮动流，用处：当在块级元素中出现浮动元素时，由于浮动流的原因使块级元素无法自适应高度，则使用clear可消除浮动流，使块级元素可出现高度的自适应
<body>
<!--伪元素-->
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
</div>
</body>
*{
margin: 0;
padding: 0;
}
.wrapper{
border: 1px solid black;
}
.content{
/* 浮动*/
float: left;
width: 100px;
height: 100px;
color: #fff;
background-color: black;
}
图片.png
解决方法
*{
margin: 0;
padding: 0;
}
.wrapper{
border: 1px solid black;
}
.wrapper::after{
/* 此处必须要写*/
content: "";
clear: both;
/* 该元素必须是块级元素，clear才会生效*/
display: block;
}
.content{
/* 浮动*/
float: left;
width: 100px;
height: 100px;
color: #fff;
background-color: black;
}
图片.png
- 其他方法----直接更改wrapper样式
.wrapper{
/*
任意一个都可以解决
float: left;
display: inline-block;
position: absolute;
*/
border: 1px solid black;
}
- 若想让文字环绕图片，则对图片添加浮动属性即可；
- 如果在样式中直接添加position: absolute;或者float: left/right;，则还会是该标签改为行级块元素display: inline-block;
16.伪元素
- 每一个标签都带有伪元素
- ‘::’的作用是选出伪元素
<body>
<!--伪元素-->
<span>,world,</span>
</body>
span::before{
/* 对其内容修改*/
content: "hallo";
/* 也可以进行样式修改*/
background-color: red;
}
伪元素
17.导航栏制作
- 居中，两边宽度随页面大小自适应
<body>
<!-- 模拟淘宝网两边留白-->
<div class="wrapper">
<div class="content"></div>
</div>
</body>
*{
margin: 0;
padding: 0;
}
.wrapper{
height: 100px;
background-color: black;
}
.content{
/* auto:自适应*/
margin: 0 auto;
height: 100px;
width: 1000px;
background-color: aqua;
}
图片.png
18.文本元素对齐线
-
vertical-align: -1px;
19.题目要求
题
解决代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<img src="first.jpg" class="img">
<p class="content1">{最多两行20px，#333，顶部对齐图片，底部间距8px}</p>
<p class="content2">{12px #666 行高1.2}使用语义化的html标签以下布局，考虑模块化和扩展性。容器默认宽高320px，右侧。</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 320px;
border: 2px solid black;
}
.wrapper .img{
width: 100px;
height: 100px;
float: left;
}
.content1{
font-size: 20px;
line-height: 20px;
height: 40px;
overflow: hidden;
color: #333;
margin-bottom: 8px;
}
.content2{
font-size: 12px;
color: #666;
line-height: 1.2em;
}
