第五章,css行内盒模型和文字样式
一,盒模型
发现默认样式，会破坏布局，比如p标签的默认样式
p标签默认样式
从图片中我们可以看到我们并没有加margin值，可是左边依然有空隙出现，这就是p标签的默认样式，那我们怎么去掉一些会破坏我们布局的默认样式呢？在style标签中添加如下代码：
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;list-style:none;}
ul,ol{padding:0; list-style:none;}
a{text-decoration:none;}
input{outline:none;}
这时就会有小可爱问了,那如果每次都要添加这些代码岂不是很麻烦,当然我们有更好的方法,就是生成自己的自定义模板.
自定义模板的设置:找到文件=>首选项=> 用户文档片段==>html.json(然后进行修改) 然后粘贴如下代码就ok了
{
"html:5": {
"prefix": "打我", //这个位置可以设置自己的快捷键模板
"body": [
"<!DOCTYPE html>",
"<html lang ='en'>",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title></title>",
"\t<style>",
"\t\tbody,div,p,h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;list-style:none;}",
"\tul,ol{padding:0; list-style:none;}",
"\ta{text-decoration:none;}",
"\tinput{outline:none;}",
"\t</style>",
"</head>",
"<body>",
"\t<script></script>",
"</body>",
"</html>",
],
"description": "HTML5"
}
}
二,标准盒模型(块级盒模型,行内盒模型,行内块盒模型)
1.块级盒模型
例如块级盒模型有 div p h1-h6 from ol ul...
块级盒模型特性:
1.独占一行
<p>侯旭真帅</p>//如我们只输入这两行代码时它显示的样式是什么
<p>侯旭真聪明</p>
块级盒模型
2.宽度不写默认继承父级宽度100%
#box{
height: 100px;
width: 500px;
background-color: green;
}
</style>
</head>
<body> //由此代码可见我们并没有给p标签设置宽度
<div id="box">
<p>
小可爱们
</p>
</div>
块级盒模型
3.高度不写由里面内容撑开
#box{
width: 100px; //这里我们并没有添加高度
background-color: green;
}
</style>
</head>
<body>
<div id="box">
小可爱们,小可爱们,小可爱们,
小可爱们,小可爱们,小可爱们,
小可爱们,小可爱们,小可爱们,小可爱们,
</div>
块级盒模型
4.可以设置内外边距(这里就不演示了)
5.可以包裹任何元素
2.行内盒模型(行内元素)
例如:span a b i ...
行内盒模型特性:
1.和其他元素并排在一行(如span为例子)
<span>侯旭真帅</span>
<span>侯旭真聪明</span>
行内盒模型
2.不支持宽高
span{
width: 100px; //这里我们是设置宽高了
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<span>侯旭真帅</span>
<span>侯旭真聪明</span>
行内盒模型
3.上下外边距失效,支持padding
span{
width: 100px;
height: 100px;
background-color: green;
margin-top: 100px; //这里设置了距离上边框100px值
}
</style>
</head>
<body>
<span>侯旭真帅</span>
<span>侯旭真聪明</span>
行内盒模型
4.margin:0px auto; 居中失效
行内盒模型有一些缺点:标签间存在空隙,为什么标签中存在空隙呢?是因为浏览器在解析的时候会将空格解析成空格.
解决方法:
1.删除标签之间的空格
2.给父级添加css样式 font-size:0; 在重新设置字体
3.就不要使用了 哈哈哈
3.行内块盒模型(行内块元素)
例如:img.....
行内块元素特性:(这里就不一一演示了= =)
1.本质上还是行内元素 具有块元素的性值
2.支持宽高
3.上下外边距有效,auto无效
4.标签之间有空隙
二,文字样式
字体大小 font-size:10px;(最小12px 最大没限制)
字体颜色 color:red;
字体粗细: font-weight:50px;(px值越大越粗)
字体倾斜: font-style:italic
字体样式: font-family:华文彩云;
1.设置字体的字体
@font-face{
font-family: "自己的字体";
src:url(""); // 跟设置图片路径是一样的
}
注意:商用的问题,开发的时候要看商标是否开源(免费).
2.文字的继承问题
文字会继承父级
.box{ //只设置了box的字体颜色
color: red;
}
</style>
</head>
<body>
<div class="box">
123
<p class="box1">
侯旭真帅
</p>
</div>
文字继承
3.基线
vertical-align:top; //文本上基线
// bottom; 下基线
// middle; 中基线;
话不多说 看例图就明白了了
无基线
设置了基线
文本基线也可以设置成px值,主要用于图文对齐(注意:只对行内元素生效)
4.文字缩进
text-indent:2em; //1em 就是一个文字字体大小;
文字缩进
5.文字对齐
text-align:left top center justify
左 上 居中 两端
现在拿一个两端对齐的例子来演示一遍
#wrap{
border: 1px solid red;
width: 200px;
}
</style>
</head> //并没有加入两端对齐,看下面效果图
<body>
<div id="wrap">
<p>侯旭真帅气,侯旭真帅气,侯旭真帅气,侯旭真帅气,
侯旭真帅气,侯旭真帅气,侯旭真帅气,侯旭真帅气,侯旭真帅气,
</p>
</div>
未添加两端对齐
向代码中加入两端对齐的代码
p{
text-align: justify; //向p标签中加入justify代码
}
加入了justify效果图
6.文字的下划线即默认的a标签下划线
当我们设置一个超链接时,总会发现链接下面有一条下划线显得很不美观就像这样;
a标签的下划线
那么我们如何去掉这个不美观的下划线呢 ?只需在代码中加入
a{text-decoration:none;} //去掉下划线
我们再看一下下划线是否不见了呢
a标签中去除下划线
当然不仅a标签有这个属性,所有的文字样式都有这个属性,如:看下面的代码
text-decoration :none; 去除下划线
overline 上划线
underline 下划线
line-through;贯穿线 (价格打折)
拿一个贯穿线的效果图来看一下吧
贯穿线
注:下划线的颜色和文字颜色是一体的
white-space:nowrap; 不换行
overflow:hidden; 超出隐藏
text-overflow:ellipsis; 文本超出转换为省略号
一般这三个一起使用,
