一.字体属性
1.font-weight:文字粗细
2.font-style:文字风格
normal 正常,默认就是正常的
italic 倾斜
3.font-size:文字大小
一般是12px或13px或14px
注意:
1.通过font-size设置文字大小一定要带单位,要写px
2.如果设置成inherit表示继承父元素的字体大小
4.font-family:文字字体
font-family:“Microsoft Yahei”,“微软雅黑”,“Arial”,sans-serif
常见字体:
serif 衬线字体
sans-serif 非衬线字体
中文:宋体,微软雅黑,黑体
注意:
1.设置的字体必须是用户电脑里已经安装的字体,浏览器会使用它可识别的第一个值
2.如果取值为中文,需要用单或双引号括起来
5.文字属性简写
/*font-weight:bolder;*/
/*font-style:italic;*/
/*font-size:50px;*/
/*font-family:'serif','微软雅黑';*/
简写为
font:bolder italic 50px 'serif','微软雅黑';
6.color:文字颜色
验证
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
p{
/*font-weight:900;*/
/*font-style:italic;*/
/*font-size:50px;*/
/*font-family:"Microsoft YaHei UI"*/
/*还可以简写*/
font:lighter italic 20px "Microsoft YaHei UI";
/*字体颜色的几种设置方法*/
/*color:blue;*/
/*color:rgb(182,201,231);*/
/*color:rgba(182,201,231,0.3);*/
/*color:#0000FF;*/
}
</style>
</head>
<body>
<p>一行白鹭上青天</p>
</body>
</html>
二.文本属性
1.text-align:规定元素中的文本的水平对齐方式
2.text-decoration:文本装饰
3.text-indent:首行缩进
# 将段落的第一行缩进 32像素,16px;=lem;
p {
text-indent: 32px;
}
4.line-height:行高
验证
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性</title>
<style>
div{
width:200px;
height:200px;
background-color:red;
/*text-align:center;*/
/*line-height:200px;*/
/*text-decoration:underline;*/
/*text-decoration: overline;*/
text-decoration: line-through;
text-indent:20px;
}
</style>
</head>
<body>
<div>
你好啊哈哈
</div>
</body>
</html>
三.背景属性
注意:没有宽高的标签,即便设置背景也无法显示
1.background-color
设置标签的背景颜色的
# 1.属性:background-color
>作用:设置标签的背景颜色的
>值:
>background-color: red;
>background-color: rgb(0,255,0);
>background-color: rgba(0,255,0,0.1);
>background-color: #00ffff;
2.background-image
设置标签的背景图片
background-image: url("images/2.jpg");
background-image: url("图片网址");
注意：如果图片的大小没有标签的大小大，那么会自动在水平和锤子方向平铺和填充
3.background-size
设置标签的背景图片的宽、高
background-size: 300px 300px;
background-size: 100% 100%;
4.background-repeat
设置标签的背景图片的平铺方式
background-repeat: repeat; #默认值，在垂直和水平方向都重复
background-repeat: no-repeat; #不重复，背景图片将仅显示一次
background-repeat: repeat-x; #背景图片将在水平方向平铺
background-repeat: repeat-y; #背景图片将在垂直方向平铺
应用：可以在服务端将一个大图片截成小图片，然后在客户端基于平铺属性将小图重复
这样用户就以为是一张大图，如此，既节省了流量提升了速度，又不影响用户访问
例如很多网站的导航条都是用这种手法制作的
5.background-attachment
设置标签的背景图片在标签中固定或随着页面滚动而滚动
background-attachment: scroll; #默认值，背景图片会随着滚动条的滚动而滚动
background-attachment: fixed; #不会随着滚动条的滚动而滚动
6.background-position
前端的坐标系"：
-------------------->x轴
|
|
|
|
|
|
y轴
图片默认都是在盒子的左上角，
background-position：属性，就是专门用于控制背景图片的位置
background-position：水平方向的值，垂直方向的值
1、具体的方位名词
水平方向：left，center，right
垂直方向：top，center，bottom
如果只设置了一个关键词，那么第二个值就是"center"。
2、百分比
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果只设置了一个值，另一个值就是50%。
3、具体的像素（一定要加px单位）
例如：30px，50px等等
第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果只设置了一个值，另一个值就是50%。
可以混合使用%和position值。
7.inherit
设置从父元素继承background属性值
以上背景属性的值均可以设置为inherit，代表从父元素继承background属性
8.背景缩写
body {
background: red url(xx.png) no-repeat fixed center/300px 300px;
}
验证
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
.box1{
width:600px;
height:600px;
background-color:red;
background-image:url("img/bg2.jpg");
/*background-size:600px 600px;*/
background-size:100px 100px;
background-repeat:no-repeat;
/*background-repeat:repeat-x;*/
/*background-repeat:repeat-y;*/
/*background-position:水平方向 垂直方向的位置*/
background-position:right bottom;
}
.box2{
width:200px;
height:200px;
background-color:yellow;
}
.box2 img{
width:100px;
}
.box3{
width:200px;
height:2000px;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">
<p>123123123123123</p>
</div>
<div class="box2">
<img src="img/bg1.jpg" alt="">
<p>123123123123123</p>
</div>
<div class="box3"></div>
</body>
</html>
练习1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习1</title>
<style>
/*body{*/
/* background-image:url("img/bg2.jpg");*/
/*}*/
.box1{
width:960px;
height:720px;
background-image:url("img/bg1.jpg");
background-size:960px 720px;
}
.box2{
width:960px;
height:720px;
background-image:url("img/ksyx.png");
background-repeat:no-repeat;
background-position:center bottom;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
练习2
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习2</title>
<style>
.header {
width:960px;
height:118px;
background-image:url("img/dht.png");
background-repeat:repeat-x;
}
</style>
</head>
<body>
<div class="header">
</div>
</body>
</html>
练习3
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习3</title>
<style>
.box1{
width:86px;
height:28px;
background-image:url("img/icon.png");
background-position:-425px -100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
四.盒子模型
1.什么是盒子模型?
HTML文档中的每个元素都被比喻成矩形盒子， 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如果把一个盒子比喻成一个壁挂相片，那么
#外边距margin ===== 一个相框与另外一个相框之间的距离
#边框border ====== 边框指的就是相框
#内边距padding ===== 内容/相片与边框的距离
#宽度width/高度height ===== 指定可以存放内容/相片的区域
提示：可以通过谷歌开发者工具查看盒子的各部分属性
2.盒子模型的宽度和高度
#1、内容的宽度和高度
通过标签的width和height属性设置
#2、元素/盒子模型的宽度和高度
宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度
高度= 。。。。
#3、元素/盒子模型空间的宽度和高度
宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距
高度= 。。。。
3.css显示模式:块级,行内,行内块级
在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
#1、HTML中容器级与文本级
容器级标签：可以嵌套其他的所有标签
div、h、ul>li、ol>li、dl>dt+dd
文本级标签：只能嵌套文字、图片、超链接
span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
div、h、ul、ol、dl、li、dt、dd 还有标签p
行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
span、buis、strong、em、ins、del
#3、块级元素与行内元素的区别
1、块级元素block
独占一行
可以设置宽高
若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
若没有设置宽高，那么就按照设置的来显示
2、行内元素inline
不会独占一行
不可以设置宽高
盒子宽高默认和内容一样
3、行内块级元素inline-block
不会独占一行
可以设置宽高
4.css显示模式转换
# display:可以通过标签的display属性设置显示模式
none HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block 块级
inline 行内
inline-block 行内块级
# display:"none"与visibility:hidden的区别：
>visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
>display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
5.div与span
布局都是用块级元素，而行内元素是控制内容显示的。
1、div标签
一般用于配合css完成网页的基本布局
2、span标签
一般用于配合css修改网页中的一些局部信息，比如一行文字我们只为一部分加颜色<p>我是<span>egon</span></p>
3、div和span有什么区别？
div一般用于排版，而span一般用于局部文字的样式
1、站在HTML的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行
2、站在CSS的角度：div是一个容器级标签，而span是一个文本级标签
代码验证
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
* {
padding:0;
margin:0;
}
div{
width:150px;
height:150px;
}
.box1{
/*height:100px;*/
box-sizing:border-box;
border:1px solid red;
padding-top:50px;
}
.box2{
width:100px;
border:1px solid green;
padding-left:50px;
}
.box3{
border:1px solid blue;
padding-right:50px;
/*box-sizing:border-box;*/
}
.box4{
border:1px solid yellow;
padding-bottom: 50px;
}
.box5{
/*width:50px;*/
/*height: 50px;*/
box-sizing: border-box;
border: 1px solid aqua;
padding:50px;
}
.boxx{
width:20px;
height: 20px;
background-color:red;
}
</style>
</head>
<body>
<div class="box1">
<div class="boxx"></div>
</div>
<hr>
<div class="box2">
22222
</div>
<hr>
<div class="box3">
33333
</div>
<hr>
<div class="box4">
444444
</div>
<hr>
<div class="box5">
555555
</div>
</body>
</html>
边框:border
边框详细介绍
# 1.同时设置四条边的边框
border:边框的宽度 边框的样式 边框的颜色
# 2.分别设置四条边的边框
border-left:边框的宽度 边框的样式 边框的颜色
border-top:边框的宽度 边框的样式 边框的颜色
border-right:边框的宽度 边框的样式 边框的颜色
border-bottom:边框的宽度 边框的样式 边框的颜色
# 3.分别指定宽度、格式、颜色
1、连写：（分别设置四条边的边框）
bord-width: 上 右 下 左
border-style:上 右 下 左
border-color：上 右 下 左
2 、注意点：
1、这三个属性时按照顺时针，即上、右、下、左来赋值的
2、这三个属性的取值省略时的规律
省略右面，右面默认同左边
省略下部，下面默认跟上面一样
只留一个，那么其余三边都跟这一个一样
# 4.了解非连写
border-left-width: ;
border-left-style: ;
border-left-color: #000;
border-top-width: ;
border-top-style: ;
border-top-color: #000;
border-right-width: ;
border-right-style: ;
border-right-color: #000;
border-bottom-width: ;
border-bottom-style: ;
border-bottom-color: #000;
# 5.边框的样式
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
# 6.border-radius
/* 单独设置一个角：数值越大，弧度越大*/
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/* 缩写设置 */
border-radius: 20px;/* 所有角设置相同值 */
border-radius: 20px 10px 10px 20px; /* 顺时针顺序：上左 上右 下左 下右*/
/* 百分比设置 */
border-radius: 50%;
/* 椭圆圆弧设置 */
border-radius: 25%/50%; /* 前面一个值代表水平方向的半径占总宽度的，后面一个值代表垂直方向 */
代码验证
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width:200px;
height: 200px;
background: yellow;
border-width:1px 2px 3px 4px;
border-style:solid dotted dashed double;
border-color:red green blue black;
/*border:1px dotted red;*/
/*border-radius:20px;*/
/*圆形*/
border-radius:50%;
text-align:center;
line-through:200px;
}
</style>
</head>
<body>
<div class="box1">11111</div>
</body>
</html>
内边距:padding
边框与内容的距离就是内边距
非连写
padding-top：20px；
padding-right：20px；
padding-bottom：20px；
padding-left：20px；
连写
padding：上 右 下 左;
注意:
1 给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。如果不想改变实际大小，那就在用宽高减掉padding对应方向的值
2 padding是添加给父级的，改变的是父级包含的内容的位置
3 内边距也会有背景颜色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style>
*{
padding:0;
margin: 0;
}
div{
width:150px;
height:150px;
}
.box1{
/*height: 100px;*/
box-sizing: border-box;
border: 1px solid red;
padding-top:50px;
}
.box2{
width: 100px;
border: 1px solid green;
padding-left: 50px;
}
.box3{
border: 1px solid blue;
padding-right: 50px;
}
.box4{
border: 1px solid yellow;
padding-bottom: 50px;
}
.box5{
/*width: 50px;*/
/*height: 50px;*/
box-sizing: border-box;
border:1px solid aqua;
padding: 50px;
}
.boxx{
width: 20px;
height: 20px;
background-color:red ;
}
</style>
</head>
<body>
<div class="box1">
<div class="boxx"></div>
</div>
<hr>
<div class="box2">
22222
</div>
<hr>
<div class="box3">
33333
</div>
<hr>
<div class="box4">
44444
</div>
<hr>
<div class="box5">
55555
</div>
</body>
</html>
外边距
标签与标签之间的距离就是外边距
非连写
margin-top：20px；
margin-right：20px；
margin-bottom：20px；
margin-left：20px；
连写
margin：上 右 下 左;
注意:
1、外边距的那一部分是没有背景颜色的
2、外边距合并现象
在默认布局的水平方向上，默认两个盒子的外边距会叠加
而在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 150px;
height: 150px;
}
.box1{
border: 1px solid red;
/*margin-top: 100px;*/
/*margin-left: 100px;*/
margin-bottom: 70px;
padding-top: 30px;
padding-left: 30px;
box-sizing: border-box;
}
.box2{
border: 1px solid green;
margin-top: 60px;
}
.box3{
border: 1px solid blue;
display: inline-block;
margin-right: 50px;
}
.box4{
border: 1px solid yellow;
display: inline-block;
margin-left: 50px;
}
.box5{
border: 1px solid grey;
}
.boxx{
width: 20px;
height: 20px;
background-color:red;
margin-top: 30px;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="box1">
<div class="boxx"></div>
</div>
<div class="box2">
22222
</div>
<div class="box3">
33333
</div>
<div class="box4">
44444
</div>
<div class="box5">
55555
</div>
</body>
</html>
盒子居中与内容居中
内容居中
1、让一行内容在盒子中水平且垂直居中
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 500px;
2、让多行内容在盒子中垂直居中（水平居中与单行内容一样）
让行高与盒子高度一样，只能让一行内容垂直居中，如果想让多行内容垂直居中，
比如下面这种，想让div中的多行内容垂直居中，一看div中的文字是两行，每一行
的行高为20，加起来就是40，80-40=40，需要让文字距离顶部pading为20，底部padding为20
*/
height: 80px;
line-height: 20px;
padding-top: 20px;
padding-bottom: 20px;
box-sizing: border-box;
盒子居中
text-align center；只能让盒子中存储的文字、图片水平居中
如果想让盒子自己相对于父元素水平居中，需要用到
margin: 0 auto;
代码验证
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 600px;
background-color: red;
text-align: center;
line-height: 25px;
padding-top: 250px;
padding-bottom: 250px;
box-sizing: border-box;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
</div>
</body>
</html>
防止文字溢出:word-break:break-all;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/*字母,数字溢出,可以用下列属性控制自动换行:
允许在单词内换行*/
word-break: break-all;
}
.box1{
background-color:red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<p>aksjsdjffhhdls;sfjffh sksdhhshshshshujsuddjcndkksj啦啦啦啦啦啦啦啦啦啦啦阿里</p>
</div>
<div class="box2">一行白鹭上青天两只黄鹂鸣翠柳啊啊啊啊
</div>
<div class="box3">我是12312312312312345678909876543321</div>
</body>
</html>
清除默认边距
#1、为什么要清空默认边距（外边距和内边距）
浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
编写代码之前的第一件事情就是清空默认的边距
#2、如何清空默认的边距
* {
margin: 0px;
padding: 0px;
}
#3、注意点：
通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好，参考：https://yuilibrary.com/yui/docs/cssreset/
拷贝代码：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
可以查看京东，bat主页也是这么做的，在企业开发中也应该像上面这么写
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
