小菜鸡的第二篇博客
等到我这个系列更完了我就换个大标题（小声逼逼）
本系列文章仅仅是对基础的HTML5以及CSS进行讲解，更加详细的内容均会附上链接，以便查阅和版权保护。
Guess what
我又找到了一些有趣的东西比如修改我的博客界面，让他背景色是黑色的（看起来更高级点（我是这么觉得的）然后我修改了代码呈现的形式，改成了黄色背景的，我觉得这样看起来护眼些（如果我写的东西真的有人看呢 对吧）然后我还加了这个
这货在左上角，颜色好像没有特别醒目（我不是色盲）。啊。热爱法式奶香片的我。。。。。。。
言归正传
今天就更新一个第十一章，然后这个星期慢慢更新，明天课少，可能会更两章。反正闲着没事做，就更新一章。
第十一章 用CSS进行布局
第十一章开始讲解怎么用CSS进行页面的各项布局，比如内边距啊，外边距之类的。
- 开始布局的注意事项
- 构建页面
- 在旧版浏览器中为HTML5元素添加样式
- 对默认样式进行重置或标准化
- 盒模型
- 控制元素的显示类型和可见性
- 设置元素的高度和宽度
- 在元素周围添加内边距
- 设置边框
- 设置元素周围的外边距
- 使元素浮动
- 控制元素浮动的位置
- 对元素进行相对定位
- 对元素进行绝对定位
- 在栈中定位元素
- 处理溢出
- 垂直对齐元素
- 修改鼠标指针
（好多啊 我去）
1.注意事项
这个没什么好说的，因为他主要提到了一个绝对布局和一个响应式，响应式在我后面的博客中将会进行介绍（我觉得我能讲到那儿）绝对布局就是 width=100px什么的。
2.构建页面
反正就是div，p，footer啊之类的，不过有些东西我要提一下
1)role ="banner"(横幅)
2)role="navigation"(导航)
3)role="main"(主体)
4)role="complementary"(补充性内容)
5)role="contentinfo"(内容信息)
A. 语义特性（Class：Semantic）
B. 本地存储特性（Class: OFFLINE & STORAGE）
C. 设备兼容特性 (Class: DEVICE ACCESS)
D. 连接特性（Class: CONNECTIVITY）
E. 网页多媒体特性(Class: MULTIMEDIA)
F. 三维、图形及特效特性（Class: 3D, Graphics & Effects）
G. 性能与集成特性（Class: Performance & Integration）
H. CSS3特性(Class: CSS3)
这些东西怎么说呢，一大堆，如果没有一个简单的认识，在剖析别人的代码的时候就会懵掉。关于Html class id 命名规范我贴了一个链接在这儿，有兴趣的话可以看看。
然后这一小节就没什么好说的了
3.在旧版浏览器中为HTML5 元素添加样式
这个小节是什么意思呢，就是我学习如何维护安卓9.0的时候，我要学习安卓5.0，因为还有人在用安卓4.0，就是这个意思（反正我是懒得学（摊手）
4.对默认格式进行重置或者标准化
这个呢就是不同的浏览器和版本有着不同的默认值，比如
word-spacing:normal;
这个代码块是让文字的字间距恢复为默认值，有的浏览器默认值可能是其他的浏览器的1.2倍，就是这个意思。
5.盒模型
CSS处理网页的时候，它认为每个元素都包含在一个看不见的盒子里，这就是众所周知的盒模型，这里的盒子由内容区域，内容区域周围的空间（内边距，padding），内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边框，margin）组成。
如上图所示，这个就是关于盒模型的各项具体数据。
然后关于盒模型的更加详细的内容在这个链接里面深入理解CSS盒模型
6.控制元素的显示类型和可见性
本小节的讲解将会以代码片+实际图片的形式呈现，文字描述较少。
<p>this is the <em>first </em>paragraph</p>
<p>this is the <em>second </em>paragraph</p>
此为上面的代码的正常运行图
p{
display:inline;
}
当添加了p元素的格式display:line之后就为上图的这个样子，所有的东西都在一行显示
em{
display:block;
}
当添加了display:block;之后，em元素将会显示在单独的一行，就像段落一样。
em{
background:lightgreen;
display:inline-block;
width:200px;
}
同时还可以为em元素添加background:lightgreen;和width:200px;来添加背景颜色，此处为了让效果更加明显，故将width设置为200px并且此处使用inline-block取代inline的原因是inline会忽略width;height;等元素。
em{
display:none;
}
与以往不同，如果将display设置为none那么他会直接取消em中所有内容，如上图所示，且系统会自动填充空间，就像没有这些字符存在。
em{
visibility:hidden;
}
如果是添加visibility:hidden;则会为内容保留空间，或者输入visibility:visible;让元素显示出来。
7.设置元素的高度和宽度
这里的内容与上面的盒模型以及前面的设置文本，图片的宽度，间距之类的属性较为相似，不做过多的相似的讲解。
8.在元素周围添加内边距
这个的内容主要讲盒模型中的padding;属性(这个在上一篇文章的第七章中有具体案例)小菜鸡的html初步教程（六–十章）不过需要注意的是，在为padding;元素添加值时：
paddind:5px;应用于四个边
padding:5px 9px;一个值用于上下两边，一个值用于左右两边
padding:5px 9px 11px;一个值应用于上边，第二个值用于左右两边，最后一个值用于最下边
padding:5px 9px 11px 0;分别按时钟顺序，用于上，右，下，左四边
9设置边框
这个内容为盒模型中的border属性
.k{
border-bottom:1px solid #dbdbdb;
border-top:1px solid #dbdbdb;
padding-bottom:.7em;
padding-top:.7em;
}
<div class="k">post in china</div>
.k{
border-bottom:100px solid #dbdbdb;
border-top:100px solid #dbdbdb;
padding-bottom:1.7em;
padding-top:1.7em;
}
由上两图可以看出。当我修改了border以及padding;的值后。文本的边框以及文字与边框的距离发生了明显的变化。
这个时候就要给你们看看舒服的，明显的代码示例：
div{
border:10px solid red;
padding:15px;
}
.ddd{
border-width:4px;
border-style:dotted dashed double solid;
}
.ridge{
border-style:ridge;
border-color:orange;
}
.groove{
border-style:groove;
border-color:purple;
}
.inset{
border-style:inset;
border-color:blue;
}
.outset{
border-style:outset;
border-color:green;
}
<div class="ddd">5px border with dotted dashed double solid</div>
<div class="ridge">10px ridge border</div>
<div class="groove">10px groove border</div>
<div class="inset">10px inset border</div>
<div class="outset">10px outset border</div>
效果图如上。
10.设置元素周围的外边距
此小节主要是讲margin属性什么意思呢
.groove{
border-style:groove;
margin:50px;
border-color:purple;
}
我将9小节中的groove添加了一个margin:50px;，效果改变如上图。这就是外边距。
11.使元素浮动
浮动是使用的float元素
.groove{
border-style:groove;
float:left;
border-color:purple;
}
通过图片你会发现，第四个和第三个合在一起了，但是没有完全重合，这是因为float的设置是，当文本通过float：left浮在左边的时候，下端的文字将会自动填充右边的空间。有点懵是不是，再来一个
.groove{
border-style:groove;
float:right;
border-color:purple;
}
这个就是浮在左边了，而下端的文本自动填充左边的空间。
12.控制元素浮动的位置
这个主要讲clear元素
具体内容可以在CSS clear 属性中尝试，这个需要的篇幅过长，并且操作性要强一些，故不作多介绍。
13.对元素进行相对定位
14.对元素进行绝对定位
这俩的差别在于一个是相对于自身的自然位置进行定位，一个是相对于父辈元素的位置进行定位。关于这俩东西，我本想找一个能够很好的解释的文章，毕竟书里的过于冗杂，然后我发现有两篇文章都引用了CSS position 属性所以我觉得可以自行通过这个来尝试关于position的性质，如果有问题可以在下面的评论区提出（应该没什么人看吧）
15.在栈中定位元素
这是个啥呢，栈，听起来很难的样子，因为计算机语言中，栈是一个很复杂的东西（比如我就没弄懂）但是这个的栈就没那么的难理解。这个的栈就是使用z-index：来定义位置，后面的值越大则在对象堆中的位置越高，如果添加positio:static那么不论值多大，都在最底层。同时如果为一个图片的z-index设置为-1，那么它将在文本的底部显示.可以参照CSS z-index 属性里面的内容。
16.处理溢出
这个需要结合实际使用CSS overflow 属性，其中，overflow的值，输入visible，让所有内容可见，输入hidden，隐藏元素盒子容纳不下的内容，输入scroll，无论元素是否需要，都在元素上添加滚动条；输入auto，让滚动条仅在访问者访问溢出内容时出现。可以在链接内自行尝试。
17.垂直对齐元素
18.修改元素指针
这俩与16同样的道理，
17为CSS vertical-align 属性
18为CSS cursor 属性
（其实是我懒了，这一章的东西好多我的天，今天上午满课，下午体育课的我，心累，写这一篇陆陆续续停了三次，两次是要吃饭，一次是要上课，这一天就搭在这里面了，其实这篇文章我花了大量的时间用在了花里胡哨的地方，比如对padding元素，我有的地方用的粗体padding有的地方用的代码块padding这俩的使用花了我很大一笔时间，到时候我去想想怎么处理使格式和元素以及内容，属性的辨识，让他们能即清楚又方便我撰写）
第十二章将会在明天更新，估计又是一个大项目——响应式
转载：https://blog.csdn.net/qq_41319331/article/details/88649237