一,盒模型

发现默认样式，会破坏布局，比如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": [

"",

"",

"

",

"\t",

"\t",

"\t",

"\t

",

"\t

"\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",

"",

"

",

"\t",

"",

"",

],

"description": "HTML5"

}

}

二,标准盒模型(块级盒模型,行内盒模型,行内块盒模型)

1.块级盒模型

例如块级盒模型有 div p h1-h6 from ol ul...

块级盒模型特性:

1.独占一行

侯旭真帅

//如我们只输入这两行代码时它显示的样式是什么

侯旭真聪明

块级盒模型

2.宽度不写默认继承父级宽度100%

#box{

height: 100px;

width: 500px;

background-color: green;

}

块级盒模型

3.高度不写由里面内容撑开

#box{

width: 100px; //这里我们并没有添加高度

background-color: green;

}

块级盒模型

4.可以设置内外边距(这里就不演示了)

5.可以包裹任何元素

2.行内盒模型(行内元素)

例如:span a b i ...

行内盒模型特性:

1.和其他元素并排在一行(如span为例子)

侯旭真帅

侯旭真聪明

行内盒模型

2.不支持宽高

span{

width: 100px; //这里我们是设置宽高了

height: 100px;

background-color: green;

}

侯旭真帅

侯旭真聪明

行内盒模型

3.上下外边距失效,支持padding

span{

width: 100px;

height: 100px;

background-color: green;

margin-top: 100px; //这里设置了距离上边框100px值

}

侯旭真帅

侯旭真聪明

行内盒模型

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;

}

文字继承

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;

}

//并没有加入两端对齐,看下面效果图

未添加两端对齐

向代码中加入两端对齐的代码

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; 文本超出转换为省略号

一般这三个一起使用,